Inline Vega viewer & show errors (#229)

Move vega viewer inline from nextjournal/viewers and make it promise-based so that Vega errors can be caught and displayed using error-viewer.

* Inline vega viewer

* Inline vega viewer and show errors

* Simplify promise calls, add simple example to vega viewer

Co-authored-by: Martin Kavalar <martin@nextjournal.com>

notebooks/viewers/vega.clj

@@ -2,8 +2,19 @@
 (ns viewers.vega
   (:require [nextjournal.clerk :as clerk]))
 
+;; ## Geoshape example with requesting data
+
 (clerk/vl {:width 700 :height 400 :data {:url "https://vega.github.io/vega-datasets/data/us-10m.json"
                                          :format {:type "topojson" :feature "counties"}}
            :transform [{:lookup "id" :from {:data {:url "https://vega.github.io/vega-datasets/data/unemployment.tsv"}
                                             :key "id" :fields ["rate"]}}]
            :projection {:type "albersUsa"} :mark "geoshape" :encoding {:color {:field "rate" :type "quantitative"}}})
+
+;; ## Simple example with inline data
+
+(clerk/vl {:data {:values [{"a" "A" "b" 28} {"a" "B" "b" 100} {"a" "C" "b" 43}
+                           {"a" "D" "b" 91} {"a" "E" "b" 81} {"a" "F" "b" 53}
+                           {"a" "G" "b" 19} {"a" "H" "b" 87} {"a" "I" "b" 52}]}
+           :mark "bar"
+           :encoding {"x" {"field" "a" "type" "nominal" "axis" {"labelAngle" 0}}
+                      "y" {"field" "b" "type" "quantitative"}}})

resources/viewer-js-hash

@@ -1 +1 @@
-4QdDgP2pyNSx5UV77E2bEryJzRpd
+4ZdAZwg7ydXGHHZcCH31qfLYEfKa

src/nextjournal/clerk/sci_viewer.cljs

@@ -1,5 +1,7 @@
 (ns nextjournal.clerk.sci-viewer
-  (:require ["framer-motion" :as framer-motion]
+  (:require ["d3-require" :as d3-require]
+            ["framer-motion" :as framer-motion]
+            ["react" :as react]
             [applied-science.js-interop :as j]
             [cljs.reader]
             [clojure.string :as str]
@@ -9,7 +11,6 @@
             [lambdaisland.uri.normalize :as uri.normalize]
             [nextjournal.clerk.viewer :as viewer :refer [code md plotly tex table vl row col with-viewer with-viewers]]
             [nextjournal.markdown.transform :as md.transform]
-            [nextjournal.ui.components.d3-require :as d3-require]
             [nextjournal.ui.components.icon :as icon]
             [nextjournal.ui.components.localstorage :as ls]
             [nextjournal.ui.components.motion :as motion]
@@ -19,8 +20,6 @@
             [nextjournal.viewer.katex :as katex]
             [nextjournal.viewer.mathjax :as mathjax]
             [nextjournal.viewer.plotly :as plotly]
-            [nextjournal.viewer.vega-lite :as vega-lite]
-            ["react" :as react]
             [reagent.core :as r]
             [reagent.dom :as rdom]
             [reagent.ratom :as ratom]
@@ -619,10 +618,35 @@
 (defn reagent-viewer [x]
   (r/as-element (cond-> x (fn? x) vector)))
 
+(defn with-d3-require [{:keys [package then loading-view]
+                        :or {loading-view "Loading..." then identity}} f]
+  (r/with-let [!package (r/atom {:loading loading-view})
+               _ (-> (if (string? package)
+                       (d3-require/require package)
+                       (apply d3-require/require package))
+                     (.then then)
+                     (.then f)
+                     (.then #(reset! !package {:value %}))
+                     (.catch #(reset! !package {:error %})))]
+    (let [{:keys [loading error value]} @!package]
+      (cond
+        loading loading
+        error [error-view error]
+        value value))))
+
+(defn vega-lite-viewer [value]
+  (when value
+    (html ^{:key value}
+          [with-d3-require {:package ["vega-embed@6.11.1"]
+                            :then (fn [embed] (.container embed (clj->js value)))}
+           (j/fn [vega-el]
+             [:div {:style {:overflow-x "auto"}}
+              [:div.vega-lite {:ref #(when %
+                                       (.appendChild % vega-el))}]])])))
+
 (def mathjax-viewer (comp normalize-viewer-meta mathjax/viewer))
 (def code-viewer (comp normalize-viewer-meta code/viewer))
 (def plotly-viewer (comp normalize-viewer-meta plotly/viewer))
-(def vega-lite-viewer (comp normalize-viewer-meta vega-lite/viewer))
 
 (def expand-icon
   [:svg {:xmlns "http://www.w3.org/2000/svg" :viewBox "0 0 20 20" :fill "currentColor" :width 12 :height 12}
@@ -691,7 +715,7 @@
    'quoted-string-viewer quoted-string-viewer
    'number-viewer number-viewer
    'table-error table-error
-   'with-d3-require d3-require/with
+   'with-d3-require with-d3-require
    'clerk-eval clerk-eval
    'consume-view-context view-context/consume