Extensible viewers with lazy loading

.clj-kondo/config.edn

@@ -0,0 +1,19 @@
+{:lint-as {applied-science.js-interop/defn clojure.core/defn
+           applied-science.js-interop/fn clojure.core/fn
+           applied-science.js-interop/let clojure.core/let
+           cljs.core/specify! cljs.core/reify
+           reagent.core/with-let clojure.core/let
+           nextjournal.view/defview clojure.core/defn
+           nextjournal.devcards/defcard clj-kondo.lint-as/def-catch-all}
+ :skip-comments true
+ :linters {:consistent-alias {:aliases {datomic.api datomic
+                                        nextjournal.log log
+                                        clojure.string str
+                                        clojure.spec.alpha s}}
+           :unresolved-symbol {:exclude [(cljs.core.match/match)
+                                         (cljs.test/is [match?])
+                                         (clojure.test/is [match?])
+                                         (clojure.core.match/match)]}
+           :unused-namespace {:exclude [clojure.string
+                                        nextjournal.devcards
+                                        nextjournal.log]}}}

.gitignore

@@ -3,4 +3,12 @@
 .cpcache/
 .lsp/
 .nrepl-port
-
+/node_modules/
+/public/css/app.css
+/public/js/
+/.shadow-cljs/
+.idea/
+clerk.iml
+public/girouette.css
+public/images/
+yarn.lock

bb.edn

@@ -0,0 +1,20 @@
+{:tasks {:init (def tailwind-build-cmd "npx tailwindcss --input stylesheets/app.css  --output public/css/app.css")
+         yarn-install {:doc "Installs and updates npm dependencies"
+                       :task (shell "yarn install")}
+
+         watch:cljs {:doc "Starts shadow-cljs server"
+                     :task (clojure "-M:sci:demo:shadow")
+                     :depends [yarn-install]}
+
+         watch:css {:doc  "Starts a watcher for css files tailwindcss"
+                    :task (shell (str tailwind-build-cmd " --watch"))
+                    :depends [yarn-install]}
+
+         release:css {:doc  "Builds the css files with tailwindcss for release"
+                      :task (shell tailwind-build-cmd {:extra-env {"NODE_ENV" "production"}})
+                      :depends [yarn-install]}
+
+         -dev {:depends [watch:cljs watch:css]}
+         dev {:doc "Start app in dev mode, compiles cljs and css"
+              :task (run '-dev {:parallel true})}}
+ :min-bb-version "0.5.1"}

deps.edn

@@ -16,10 +16,22 @@
         hiccup/hiccup {:mvn/version "2.0.0-alpha2"}
         lambdaisland/uri {:mvn/version "1.4.70"}
 
+
         arrowic/arrowic {:mvn/version "0.1.1"}
         rewrite-clj/rewrite-clj {:mvn/version "0.6.1"}}
 
- :aliases {:demo {:extra-paths ["notebooks/src"]
+ :aliases {:sci {:extra-deps  {io.github.nextjournal/viewers {:git/url "git@github.com:nextjournal/viewers.git"
+                                                              :git/sha "913ed6d4964171248c6b700ff925aa7ef092d59d"}
+                               metosin/reitit-frontend     {:mvn/version "0.5.15"}
+                               borkdude/sci                {:mvn/version "0.2.6"}
+                               applied-science/js-interop  {:mvn/version "0.3.0"}}}
+
+           :shadow {:extra-deps {thheller/shadow-cljs {:mvn/version "2.15.9"}
+                                 binaryage/devtools {:mvn/version "1.0.3"}
+                                 cider/cider-nrepl {:mvn/version "0.26.0"}}
+                    :main-opts ["-m" "shadow.cljs.devtools.cli" "watch" "browser"]}
+
+           :demo {:extra-paths ["notebooks/src"]
                   :extra-deps {com.github.seancorfield/next.jdbc {:mvn/version "1.2.659"}
                                org.xerial/sqlite-jdbc {:mvn/version "3.34.0"}
                                org.clojure/data.csv {:mvn/version "1.0.0"}}}}}

notebooks/boom.clj

@@ -0,0 +1,3 @@
+;; Boom 💥
+;; This will blow up shortly.
+(throw (ex-info "boom!" {:rand-int (rand-int 1000) :range-100 (range 100)}))

notebooks/onwards.clj

@@ -10,22 +10,43 @@
 ;; - [x] Don't cache things that are fast to evaluate
 ;; - [x] Handle conditional read in cljc files
 ;; - [x] Add README
-;; - [ ] Make viewer registration local (on form + namespace)
+;; - [x] Markdown should support Nextjournal Flavored Markdown including:
+;;   - [x] TODO lists 😹
+;;   - [x] Inline Formulas $E^2=m^2+\vec{p}^2$
+;; - [ ] Fix analyzer error for aliases requires w/o ns (e.g. in viewers notebooks)
+;; ## Viewers
+;; - [x] Make viewer api open with predicates
+;; - [x] Make viewer registration local on namespace
+;; - [x] Make js-only viewers like plotly & vega work
+;; - [x] Fix maps
+;; - [x] Sort maps
+;; - [x] Lazy seqs
+;; - [x] Fix Rule 30 maps
+;; - [x] Drop vector brackets when lazy load map element
+;; - [x] Review viewer registration api
+;; - [x] Simplify viewer api (drop `view-as` & change argument order in `with-viewer`/`s`)
+;; - [x] Fix seeing map with blob-id in Rule 30 notebook
+;; - [x] Turn `with-viewers` into a macro and make it take same unquoted form as `set-viewers!`
+;; - [ ] Consistently use `Fn+Form` to carry viewer functions
+;; - [ ] Show sci eval error when viewers error on eval
+;; - [ ] Make map-viewer pass down options to select map-entry renderer for children and remove viewer from Rule 30
+;; - [x] Drop lazy loading attempts in plotly + vega viewers
+;; - [ ] Keep expanded state when lazy loading
+;; - [ ] Allow to control viewer expansion state programmatically
+;; - [ ] Move update opts fn to viewer map
+;; - [x] Restrict string length + enable lazy loading
+;; - [ ] Datafy + Nav
+;; - [ ] Metadata viewer
+;; - [ ] Persist viewer expansion state across reloads
 ;; - [x] Let the viewer opt into pagination
-;; - [ ] Return complete datastructure if reasonably small (larger than the 20 elements we currently serve)
-;; - [ ] A browser refresh is currently needed to reset a viewer override like in `notebooks/rule_30.clj`, otherwise it will carry over the viewer override to other notebooks that do no specify an override
-;; - [ ] Evaluation error messages are poorly formatted
 ;; - [ ] Viewer errors are not displayed correctly
+;; - [x] A browser refresh is currently needed to reset a viewer override like in `notebooks/rule_30.clj`, otherwise it will carry over the viewer override to other notebooks that do no specify an override
+;; - [x] Evaluation error messages are poorly formatted
+;; - [ ] Make stacktraces clickable
 ;; - [x] `first-generation` in `notebooks/rule_30.clj` renders incorrectly because of pagination type coercion from vector to list
-;; - [ ] `(def r (range 100))` in `notebooks/pagination.clj` shows incorrect `count`
-;; - [ ] Figure out distributed caching using CAS + cloud bucket
-;; - [ ] Markdown should support Nextjournal Flavored Markdown including:
-;;   - [ ] TODO lists 😹
-;;   - [ ] Inline Formulas $E^2=m^2+\vec{p}^2$
-;; - [ ] Better Error display
-;; - [x] Fix jar hashing (contents, not filename)
+;; - [x] `(def r (range 100))` in `notebooks/pagination.clj` shows incorrect `count`
 ;; - [x] Printing of very large values
+;; ## Ideas
+;; - [ ] Hook up distributed caching using CAS + cloud bucket
 ;; - [ ] Status log
-;; - [ ] Datafy + Nav
 ;; - [ ] Allow to pin notebook
-;; - [ ] Make viewer api open with predicates

notebooks/pagination.clj

@@ -1,34 +1,57 @@
 ;; # Pagination
-#_(require '[nextjournal.clerk.viewer :as v])
+#_(nextjournal.clerk/show! "notebooks/pagination.clj")
+
+(range)
 
 (def notebooks
   (clojure.java.io/file "notebooks"))
 
-[(clojure.java.io/file "notebooks")]
+(subs (slurp "/usr/share/dict/words") 0 10100)
+
+[notebooks]
 
-(sort (into #{} (map str) (file-seq notebooks)))
+(into #{} (map str) (file-seq notebooks))
 
 (def r (range 100))
 
 (map inc r)
 
-(mapv inc r)
-#_
+[(mapv inc r)]
 
 ^:clerk/no-cache (shuffle r)
 
-#_#_#_
 ;; A long list.
 (range 1000)
 
 ;; A somewhat large map.
 (zipmap (range 1000) (map #(* % %) (range 1000)))
 
-
-
 ^:clerk/no-cache (shuffle (range 42))
 
-
-#_
-(v/register-viewer! :vector {:n 20} (fn [x options]
-                                      (v/html (into [:div.flex.flex-col] (map (partial v/inspect options)) x))))
+(let [[first-three others] (split-at 3 [:A :A :B :B :C :C :D :D])]
+  {:first-three first-three
+   :others others})
+
+(frequencies [:A :A :B :B :C :C :D :D])
+
+(group-by first [[:A :B :B] [:B :C :C] [:C :A :A]])
+
+(take 5
+      (repeatedly (fn []
+                    {:name (str
+                             (rand-nth ["Oscar" "Karen" "Vlad" "Rebecca" "Conrad"]) " "
+                             (rand-nth ["Miller" "Stasčnyk" "Ronin" "Meyer" "Black"]))
+                     :role (rand-nth [:admin :operator :manager :programmer :designer])
+                     :id (java.util.UUID/randomUUID)
+                     :created-at #inst "2021"})))
+
+(defn flat->nested
+  [root coll]
+  (if-let [children (seq (filter #(= (:id root) (:parent %)) coll))]
+    (map #(assoc root :children (flat->nested % coll)) children)
+    (list root)))
+
+(let [items (concat [{:id 0 :parent nil :name "item-0"}]
+                    (for [x (range 1 5)]
+                      {:id x :parent (dec x) :name (format "item-%d" x)}))]
+  (flat->nested (-> (filter #(= (:parent %) nil) items) first) items))

notebooks/rule_30.clj

@@ -3,11 +3,20 @@
 (ns rule-30
   (:require [nextjournal.clerk.viewer :as v]))
 
-(v/register-viewers!
- {:number #(v/html [:div.inline-block {:style {:width 16 :height 16}
-                                       :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])
-  :vector #(v/html (into [:div.flex.inline-flex] (map (partial v/inspect %2)) %1))
-  :list #(v/html (into [:div.flex.flex-col] (map (partial v/inspect %2)) %1))})
+(v/set-viewers!
+ [{:pred number? :fn #(v/html [:div.inline-block {:style {:width 16 :height 16}
+                                                  :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])}
+  {:pred map-entry? :fn #(v/html (into [:<>] (comp (v/inspect-children %2) (interpose " ")) %1))}
+  {:pred vector? :fn #(v/html (into [:div.flex.inline-flex] (v/inspect-children %2) %1))}
+  {:pred list? :fn #(v/html (into [:div.flex.flex-col] (v/inspect-children %2) %1))}])
+
+0
+
+1
+
+[0 1 0]
+
+(list 0 1 0)
 
 ;; Now let's define Rule 30 as a map. It maps a vector of three cells to a new value for a cell. Notice how the map viewer can be used as-is and uses our number and vector viewers.
 (def rule-30
@@ -26,5 +35,8 @@
     (assoc (vec (repeat n 0)) (/ (dec n) 2) 1)))
 
 ;; Finally, we can evolve the board.
+
 (let [evolve #(mapv rule-30 (partition 3 1 (repeat 0) (cons 0 %)))]
-  (->> first-generation (iterate evolve) (take 17)))
+  (->> first-generation (iterate evolve) (take 17) (apply list)))
+
+#_(nextjournal.clerk/show! "notebooks/rule_30.clj")

notebooks/viewer_api.clj

@@ -0,0 +1,88 @@
+;; # 👁 Clerk Viewer API
+;; Clerk comes with a moldable viewer api that is open.
+
+(ns notebook.viewer-api
+  (:require [nextjournal.clerk.viewer :as v]))
+
+;; ## 🧩 Built-in Viewers
+;; The default set of viewers are able to render Clojure data.
+{:hello "world 👋" :num [1 2 3]}
+
+
+
+;; And can handle lazy infinte sequences, only partially loading data by default with the ability to load more data on request.
+(range)
+
+(def fib (lazy-cat [0 1] (map + fib (rest fib))))
+
+;; In addition, there's a number of built-in viewers.
+;; ### 🕸 Hiccup
+;; The `html` viewer interprets `hiccup` when passed a vector.
+(v/html [:div "As Clojurians we " [:em "really"] " enjoy hiccup"])
+
+;; Alternatively you can pass it an HTML string.
+(v/html "Never <strong>forget</strong>.")
+
+
+;; ### 📑 Markdown
+;; The Markdown viewer is useful for programmatically generated markdown.
+(v/md (clojure.string/join "\n" (map #(str "* Item " (inc %)) (range 3))))
+
+
+;; ### 🧮 TeX
+;; The TeX viewer is built on [KaTeX](https://katex.org/).
+(v/tex "f^{\\circ n} = \\underbrace{f \\circ f \\circ \\cdots \\circ f}_{n\\text{ times}}.\\,")
+
+
+;; ### 📊 Plotly
+(v/plotly {:data [{:z [[1 2 3] [3 2 1]] :type "surface"}]})
+
+;; ### 📈 Vega Lite
+(v/vl {:width 650 :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"}}})
+
+;; ### 👾 Code
+;; The code viewer uses [clojure-mode](https://nextjournal.github.io/clojure-mode/) for syntax highlighting.
+(v/code (macroexpand '(when test
+                        expression-1
+                        expression-2)))
+
+;; ## 🚀 Extensibility
+
+(v/with-viewer (fn [name] (v/html [:div "Greetings to " [:strong name] "!"])) "James Maxwell Clerk")
+
+
+^:clerk/no-cache
+(v/with-viewers [{:pred 'number? :fn #(v/html [:div.inline-block {:style {:width 16 :height 16}
+                                                                  :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])}]
+  (take 10 (repeatedly #(rand-int 2))))
+
+(v/with-viewers
+  [{:pred #(and (string? %)
+                (re-matches
+                 (re-pattern
+                  (str "(?i)"
+                       "(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|"
+                       "(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))")) %))
+    :fn #(v/html [:div.inline-block.rounded-sm.shadow
+                  {:style {:width 16
+                           :height 16
+                           :border "1px solid rgba(0,0,0,.2)"
+                           :background-color %}}])}]
+  ["#571845"
+   "rgb(144,12,62)"
+   "rgba(199,0,57,1.0)"
+   "hsl(11,100%,60%)"
+   "hsla(46, 97%, 48%, 1.000)"])
+
+(re-matches
+  (re-pattern
+    (str "(?i)"
+         "(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|"
+         "(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))"))
+  "hsla(46, 97%, 48%, 1.000)")
+
+#_(nextjournal.clerk/show! "notebooks/viewer_api.clj")

notebooks/viewers/plotly.clj

@@ -1,5 +1,6 @@
 ;; # Plotly 📈
-(require '[nextjournal.clerk.viewer :as v])
+(ns viewers.plotly
+  (:require [nextjournal.clerk.viewer :as v]))
 
 (v/plotly {:data [{:z [[1 2 3]
                        [3 2 1]]

notebooks/viewers/vega.clj

@@ -1,5 +1,6 @@
 ;; # Vega Lite 🗺
-(require '[nextjournal.clerk.viewer :as v])
+(ns viewers.vega
+  (:require [nextjournal.clerk.viewer :as v]))
 
 (v/vl {:width 650 :height 400 :data {:url "https://vega.github.io/vega-datasets/data/us-10m.json"
                                      :format {:type "topojson" :feature "counties"}}

package.json

@@ -0,0 +1,32 @@
+{
+  "dependencies": {
+    "@codemirror/autocomplete": "0.18.8",
+    "@codemirror/closebrackets": "0.18.0",
+    "@codemirror/commands": "0.18.3",
+    "@codemirror/comment": "0.18.1",
+    "@codemirror/fold": "0.18.2",
+    "@codemirror/gutter": "0.18.4",
+    "@codemirror/highlight": "0.18.4",
+    "@codemirror/history": "0.18.1",
+    "@codemirror/language": "0.18.2",
+    "@codemirror/lint": "0.18.6",
+    "@codemirror/matchbrackets": "0.18.0",
+    "@codemirror/rectangular-selection": "0.18.1",
+    "@codemirror/search": "0.18.4",
+    "@codemirror/state": "0.18.7",
+    "@codemirror/view": "0.18.19",
+    "@toycode/markdown-it-class": "1.2.4",
+    "d3-require": "1.2.4",
+    "js-yaml": "^4.1.0",
+    "katex": "0.12.0",
+    "lezer-clojure": "0.1.10",
+    "markdown-it": "10.0.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "markdown-it-texmath": "^0.9.1",
+    "process": "^0.11.10",
+    "punycode": "^2.1.1",
+    "react": "^17.0.2",
+    "react-dom": "16.9.0",
+    "tailwindcss": "2.2.12"
+  }
+}