Om nom nom nom Talk given at Clojure/conj 2014 in Washington DC Video available here: https://www.youtube.com/watch?v=4-oyZpLRQ20 Have you ever needed an easily customisable dashboard? Or needed to visualise data in a browser but was overwhelmed by d3.js? This talk will cover basics of React and Om, some data visualisation libraries and techniques, ways to handle live data and combining all that into an easily customisable dashboard. Expect demos, code and maybe, just maybe, om nom nom nom cookies.

1. Om Nom Nom Nom
Anna Pawlicka
Data Engineer
@AnnaPawlicka

2. Dashboard
• Communication tool
• See progress and compare values
• Show danger and success
• Share results
• Scan quickly

3. Why build your own?
• We can never make a good dashboard that
everyone will like
• Backend and front-end written in Clojure
• Clojurians like to build out of small components
• Mix and match & reuse
• It’s a good UI programming exercise

4. A few principles

5. Tables & Charts
• Tables for values:
Month Additons Deletions
1 29 14
2 68 34
Month Additions Deletions
• Charts for trends and overall comparison:
1 29 14
2 68 34
vs.
100
75
50
25
0
April May June July
200
150
100
50
0
April May June July
20
15
10
5
0
0 3 6 9 12

6. Don’t visualise!
14
10.5
7
3.5
Last week This week Variance
14 8 - 57%
14
10.5
7
3.5
0
8
14
2014-10-27 2014-11-03
0
2014-10-27 2014-11-03
vs.

7. Avoid pie charts
Sci-Fi Drama Romance Action Comedy Horror
Favourite Films
18
21
26
28
76
91
Sci-Fi
Drama
Romance
Action
Comedy
Horror
21
18
28
26
76
91
0 25 50 75 100
vs.

8. 3D - why??
Region 1 Region 2 Region 3

9. Data-Ink Ratio
100
75
50
25
0
April May June July
100
75
50
25
0
April May June July

10. Step 1: Components

11. Facebook’s React
• Solves complex UI rendering
• Declarative framework
• One way data binding
• Maintains virtual DOM
• Diffs between previous and next renders of a UI
• Less code
• Shorter time to update

12. Om
• Entire state of the UI in a single piece of data
• Immutable data structures = Reference equality check
• No need to worry about optimisation
• Snapshot table & free undo

13. Global state
• Application state
• Global state stored in an atom
• Accessed and modified through cursors:
(def app-state (atom {:films {:data [{:v 1} {:v 2}]}}))
(-> cursor :films :data first)
:value {:v 1}
:path [:films :data 0]
:state #<Atom: {:films ..}>
Cursor
• Updated using:
(o m/update! cursor [:films :data] data)
(om/transact! cursor [:films :data] #(conj % data))

14. Local & shared state
• Local state
• Local to single component
• Best for transient state, flags
• Updated by using:
• Shared state
• Accessible by the entire tree
• Does not trigger renders
(om/set-state! owner :value value)

15. Components <-> Widgets
• D3.js
• Data bound to DOM
• Interactive - transformations driven by data
• Huge community
• Higher level libraries available
• Dimple.js
• Higher level library powered by d3
• Interactive
• Simple API
• Access to underlying D3 functions

16. Step 2: Data

17. How fresh is fresh data?
• You could refresh for new data
• You could schedule to pull data at some intervals
• Or you could use:
• Long polling / HTTP streaming
• WebSockets

18. WebSockets / Long polling
• Http-kit:
• Clojure HTTP server
• Great out-of-the box support for WebSockets
• HTTP streaming / Long polling
• Sente:
• Clojure + ClojureScript + core.async + ajax + WebSockets
• Simple API
• Client & server
• There are also: Timbre, Jetty 7 websockets async

19. Step 3: Combine them into
dashboard
a.k.a. demo

20. Dev setup
• Chestnut:
• Figwheel - instant reloading ClojureScript, and CSS
• Weasel - browser-connected REPL is also included
• Heroku support

21. Communication between server and client
• Server:
(let [{:keys [ch-recv send-fn ajax-get-or-ws-handshake-fn]} (s/make-channel-socket {})]
(def ring-ajax-get-ws ajax-get-or-ws-handshake-fn)
(def ch-chsk ch-recv) ; ChannelSocket's receive channel
(def chsk-send! send-fn)) ; ChannelSocket's send API fn
• Client:
(let [{:keys [chsk ch-recv send-fn]} (s/make-channel-socket! "/ws" {} {:type :auto})]
(def chsk chsk)
(def ch-chsk ch-recv) ; ChannelSocket's receive channel
(def chsk-send! send-fn)) ; ChannelSocket's send API fn

22. • Server:
(defmethod handle-event :dashboard/github-issues [{:keys [?data ring-req]}]
(let [{:keys [url refresh-rate]} ?data]
(while true
(http/get url {} (fn [{:keys [status headers body error]}]
(chsk-send! uid [:dashboard/github-issues body])))
(Thread/sleep refresh-rate))))
(defn event-loop []
(go (loop [ev-msg (<! ch-chsk)]
(thread (handle-event ev-msg))
(recur (<! ch-chsk)))))
• Client:
(defmethod handle-event :dashboard/github-issues [[_ msg] app]
(om/update! app [:repository :issues :updated-at] (new js/Date))
(om/update! app [:repository :issues :value] (count msg)))
(defn event-loop [app]
(go (loop [{:keys [event]} (<! ch-chsk)]
…
(handle-event payload app))))
(recur (<! ch-chsk)))))

23. (defonce app-state
(atom {:repository {:header {:selected-week nil}
:code-frequency {:div {}
App model
:event-toggle {:current :hover}
:data []
:updated-at nil}
:contributors {:view {:current :charts}
:data []
:updated-at nil}}}))
(defn main []
(let [event-chan (chan (sliding-buffer 100))]
(om/root
application
app-state
{:target (. js/document (getElementById "app"))
Shared channels
:shared {:event-chan event-chan :mult-chan (mult event-chan)}})))

24. (defn dashboard [app owner]
(reify
om/IRender
(render [_]
(html
[:div (r/jumbotron {} (html [:h1 "Dashboard" [:small (om/build clock (:clock app))]]))
(om/build repository-view (-> app :repository)
{:opts {:url “https://api.github.com/repos/mastodonc/kixi.hecuba"}})]))))
(defn application [app owner]
(reify
om/IWillMount
(will-mount [_]
(event-loop app owner))
om/IRender
(render [_]
(html
[:div
(case (:state app)
Event loop
:open (om/build dashboard app)
:unknown [:div "Loading dashboard…"])]))))

25. (defn repository-view [cursor owner {:keys [url]}]
(reify
om/IDidMount
(did-mount [_]
(send-messages [{:k :dashboard/github-issues
:url url}]))
om/IRender
(render [_]
(let [{:keys [code-frequency contributors
issues pulls]} cursor]
(html
[:div
(p/panel {:header (om/build toggles (-> code-frequency
:event-toggle))}
(om/build charts/stacked-bar-chart code-frequency))
(p/panel {:header (om/build toggles (-> contributors :view)}
(om/build code-frequency-stats contributors))
(om/build numbers/simple-stats-card issues)
(om/build numbers/simple-stats-card pulls)])))))

26. (defmulti code-frequency-stats
(fn [cursor owner] (-> cursor :view :current)))
(defmethod code-frequency-stats :charts [cursor owner]
(om/component
(html
[:div
(when (seq (:data cursor))
(om/build chart-stats-view {:data (:data cursor)
:div (:div cursor)}
{:fn (parse-contributors :charts)}))])))
(defmethod code-frequency-stats :table [cursor owner]
(om/component
(html
[:div
(om/build table-stats-view (:data cursor)
{:fn (parse-contributors :table)})])))
(defmethod code-frequency-stats :cards [cursor owner]
(om/component
(html
[:div
(om/build team-members-stats-view (:data cursor)
{:fn (parse-contributors :table)})])))
Transform data before rendering
it, without losing benefits of a
cursor

27. (defn chart-stats [cursor owner {:keys [y-axis color]}]
(reify
om/IInitState
(init-state [_]
{:c (chan (sliding-buffer 10))
:value (-> cursor :data first :week)})
om/IWillMount
(will-mount [_]
(let [c (om/get-state owner :c)
mult-chan (om/get-shared owner :mult-chan)
week (header)]
(tap mult-chan c)
(go-loop []
(let [event-chan (om/get-state owner :c)
{:keys [event v]} (<! event-chan)]
(om/set-state! owner :value v)
(om/update! week :selected-week (common/unparse-date v "yyyy-MM-dd")))
(recur))))
om/IRenderState
…
om/IWillUnmount
(will-unmount [_]
(untap (om/get-shared owner :mult-chan) (om/get-state owner :c)))
…))
New channel that we tap to to
our shared channel

28. (defn chart-stats [cursor owner {:keys [y-axis color]}]
(reify
om/IInitState
…
om/IWillMount
…
om/IRenderState
(render-state [_ state]
(html
[:div
(let [value (common/timestamp->value (:value state)
"week" (:data cursor))
selected-event (om/observe owner (event-type))]
(om/build charts/bar-chart {:data value :div (:div cursor)}
{:opts {:y-axis y-axis
:event-type (:current selected-event)}}))]))
om/IWillUnmount
…))
Reference cursor
(defn event-type []
(om/ref-cursor (-> (om/root-cursor app-state)
:repository
:code-frequency
:event-toggle)))

29. dimple chart
(defn bar-chart
[{:keys [data div]} owner {:keys [id] :as opts}]
(reify
om/IWillMount
(will-mount [_]
(.addEventListener js/window "resize"
(fn []
(let [e (.getElementById js/document id)
x (.-clientWidth e)
y (.-clientHeight e)]
(om/update! div :size {:width x :height y})))))
om/IRender
(render [_]
(html [:div {:id id}]))
om/IDidMount
(did-mount [_]
(let [n (.getElementById js/document id)]
(while (.hasChildNodes n)
(.removeChild n (.-lastChild n))))
(draw-chart data div opts))
om/IDidUpdate
(did-update [_ _ _]
(let [n (.getElementById js/document id)]
(while (.hasChildNodes n)
(.removeChild n (.-lastChild n))))
(draw-chart data div opts))))

30. dimple chart
(defn- draw-chart [data div {:keys [id bounds x-axis y-axis
plot series event-type]}]
(let [width (:width div)
height (:height div)
Chart (.-chart js/dimple)
svg (.newSvg js/dimple (str "#" id)
width height)
dimple-chart (.setBounds (Chart. svg) (:x bounds)
(:y bounds) (:width bounds)
(:height bounds))
x (.addCategoryAxis dimple-chart "x" x-axis)
y (.addMeasureAxis dimple-chart "y" y-axis)
s (.addSeries dimple-chart series
plot (clj->js [x y]))]
(aset s "data" (clj->js data))
(.draw dimple-chart (when (= event-type :click) 1000))))

31. stacked bar chart
(defn- draw [data hover-chan size id event-type]
...
(doto (.selectAll svg ".frequency")
(-> (.data stacked)
(.enter)
…
;; Event listeners
(cond-> (= event-type :click)
(.on "click" (fn [d]
(put! hover-chan
{:event :click
:v (.-x d)
:d d}))))
(cond-> (= event-type :hover)
(.on "mouseover" (fn [_]
(put! hover-chan
{:event :mouseover
:v (.-x d)
:d d})))))))

32. That’s all folks!
• Try out all the amazing libraries out there
• Don’t be afraid of JavaScript interop
• Use Om with data visualisation libraries - it’s easy
• Share your components
• Share your tips and tricks
• Don’t create 3D pie charts

33. Thank you!

34. Useful links
• Om: https://github.com/swannodette/om
• Sente: https://github.com/ptaoussanis/sente
• Chestnut: https://github.com/plexus/chestnut
• Demo: https://github.com/annapawlicka/pumpkin