Fork me on GitHub
#nextjournal
<
2021-10-13
>
Daniel Slutsky12:10:55

Would it be easy for a user (or a contributor) to add a new kind of viewer by writing some code to be interpreted by SCI in the client? Specifically, I'm imagining a viewer that will take a data structure like:

[:div
  [:h1 "plot 1"]
  ['vega spec1]
  [:h2 "plot 2"]
  ['vega spec2]]
and render the corresponding Reagent component. Here, vega is a reagent component to render a Vega spec, and spec1, spec2 are two specific vega specs. Variations of such a notation can help in converting notes from Oz / Gorilla-UI / Notespace / Goldly to Clerk. (The above specific tools denote a vega component in different (but similar) ways: :vega, :p/vega, :p/vega, 'vega, respectively.)

2
mkvlr09:10:35

ok, with the caveats that this is impossible to figure out without knowing the internals and all still subject to change and the dev experience is terrible it does work:

mkvlr09:10:07

;; # Hiccup Format Demo
(require '[nextjournal.clerk :as clerk]
         '[nextjournal.clerk.viewer :as v]
         '[clojure.walk :as walk])

(def data
  [:div
   [:h2 "plot 1"]
   ['vega {:width 650 :height 400 :data {:url ""
                                         :format {:type "topojson" :feature "counties"}}
           :transform [{:lookup "id" :from {:data {:url ""}
                                            :key "id" :fields ["rate"]}}]
           :projection {:type "albersUsa"} :mark "geoshape" :encoding {:color {:field "rate" :type "quantitative"}}}]
   [:h2 "plot 2"]
   ['plotly {:data [{:z [[1 2 3] [3 2 1]]
                     :type "surface"}]}]])



(clerk/with-viewer
  (fn [hiccup]
    (let [symbols->viewers {'plotly :plotly
                            'vega :vega-lite}
          vectors->viewers (fn [x]
                             (if (and (vector? x)
                                      (= 2 (count x))
                                      (symbols->viewers (first x)))
                               [v/inspect (v/with-viewer (symbols->viewers (first x)) (second x))]
                               x))]
      (v/with-viewer :reagent (clojure.walk/postwalk vectors->viewers hiccup))))
  data)

Daniel Slutsky19:10:01

Thank you so much!

cstby23:10:54

I'm seeing that sometimes when I create vega-lite visualizations, they work as expected until I restart the project. For a a few visualizations that I knew to work, when I jack in again with cider, they only return #object[Error Error: No reader function for tag array-buffer<object>].

cstby03:10:45

I figured out that the issue was that I'm passing lazily-generated values to clerk/vl.