Audrius 2020-12-10T07:41:52.423400Z

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

p-himik 2020-12-10T13:04:42.424Z

You might be able to use global interceptors for that.

p-himik 2020-12-10T13:04:42.424Z

You might be able to use global interceptors for that.


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
   [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-render (fn []
                         [: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
                                                          #js {})]))

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

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

(defn main-panel []
  (let [name (re-frame/subscribe [::subs/name])]
     [:h1 "Desperate attempts " @name]
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-himik 2020-12-10T20:24:58.429Z

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-himik 2020-12-10T20:25:57.429200Z

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.


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

p-himik 2020-12-10T20:28:52.429600Z

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


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-himik 2020-12-10T20:33:03.430Z

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.


ok, thanks a lot!