Fork me on GitHub
Old account07:12:52

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
   [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" 🙂


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.


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?


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.


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!

👍 3