re-frame 2020-12-10 | Slack Archive

can we add reg-event-fx with a pattern instead of a keyword?

You might be able to use global interceptors for that.

✔️ 3

hi, has anyone managed to get the timeline from vis.js to work from re-frame? This is a minimal setup in a new re-frame project that gives me trouble:

(ns timeline-test.views
  (:require
   [reagent.core :as reagent]
   [re-frame.core :as re-frame]
   [timeline-test.subs :as subs]
   [vis-timeline :as timeline]
   [vis-data :as data]))

(defn timeline-inner []
  (let []
    (reagent/create-class
     {:reagent-render (fn []
                        [:div
                         [:h4 "Timeline"]
                         [:div#timeline-canvas {:style {:height "400px" :width "400px"}}]])

      :component-did-mount (fn [comp]
                             (let [canvas (.getElementById js/document "timeline-canvas")
                                   ds (new data/DataSet)
                                   pts (clj->js [{"id" 1
                                                  "content" "item 1"
                                                  "start" "2020-12-08"}
                                                 {"id" 2
                                                  "content" "item 2"
                                                  "start" "2020-12-09"}])
                                   _ (.add ds pts)
                                   tl (timeline/Timeline. canvas
                                                          ds
                                                          #js {})]))

      :display-name "timeline-inner"})))

(defn timeline-outer []
  (let [tl-data {}]
    (fn []
      [timeline-inner {}])))

(defn main-panel []
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     [:h1 "Desperate attempts " @name]
     [timeline-outer]]))

It's not even trying to hand data changes from a subscription or anything. I believe something goes wrong in the DataSet class; in the docs I read it implements "two-way data binding", which is probably not the best match for clojurescript and react? But still, I don't see why this would do anything substantially different than normal js code? When I give an empty DataSet, it works fine. But when adding some data, I get

vis-timeline-graph2d.min.js:59 Uncaught TypeError: Cannot convert undefined or null to object
    at includes (<anonymous>)
    at t$jscomp$2.value (vis-timeline-graph2d.min.js:59)
    at n$jscomp$2.value (vis-timeline-graph2d.min.js:59)
    at eval (vis-timeline-graph2d.min.js:59)
    at Array.forEach (<anonymous>)
    at n$jscomp$2.value [as _onAdd] (vis-timeline-graph2d.min.js:59)
    at n$jscomp$2.value (vis-timeline-graph2d.min.js:59)
    at n$jscomp$1.value (vis-timeline-graph2d.min.js:59)
    at new n$jscomp$1 (vis-timeline-graph2d.min.js:59)
    at cmp.eval (views.cljs:28)

I'm also happy with the answer: "don't go there" 🙂

p-himik20:12:58

It's not really related to re-frame - just to Reagent. With shadow-cljs, it doesn't work for me as well if I include vis-timeline as "vis-timeline" but it does work if I include it as "vis-timeline/dist/vis-timeline-graph2d.esm.js". So seems like their min bundle is somehow incompatible with something in the CLJS build process. Or maybe it's just broken. Note that I also had to include the timeline CSS file manually.

p-himik20:12:57

Two small things: - You can avoid calling .add by just providing the data directly to the data/DataSet constructor - Do not use .getElementById, use React refs instead. With them, you can even remove the need for reagent/create-class and the lifecycle functions.

mathias_dw20:12:51

Thanks a lot! Did you get it to work in a real app in the end? And happy with it?

p-himik20:12:52

Well, I got it to display the timeline, yes.

mathias_dw20:12:56

and reacting to user events? I'd need to show information on the rest of the page based on what's inside the range of the timeline.

p-himik20:12:03

If was movable if that's what you mean. There's nothing special about this library - it's just something that renders within an existing DOM element.

mathias_dw20:12:26

ok, thanks a lot!

👍 3

2020-12-10

Channels