Clojurians Log v2

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

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]]))

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)

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!