Prepare for per-cell progress reporting

Author: mk

notebooks/exec_status.clj

@@ -1,7 +1,8 @@
 ;; # 💈 Execution Status
 (ns exec-status
   {:nextjournal.clerk/toc true}
-  (:require [nextjournal.clerk :as clerk]))
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.webserver :as webserver]))
 
 ;; To see what's going on while waiting for a long-running
 ;; computation, Clerk will now show an execution status bar on the
@@ -25,20 +26,37 @@
 
 {:progress 0.15 :status "Analyzing…"}
 
-{:progress 0.55 :status "Evaluating…"}
+{:progress 0.55 :cell-progress 0.34 :status "Evaluating…"}
 
 {:progress 0.95 :status "Presenting…"}
 
+(defn set-cell-progress! [progress]
+  (swap! webserver/!doc (fn [doc] (if-let [status (-> doc meta :status)]
+                                    (let [status+progress (assoc status :cell-progress progress)]
+                                      (when-let [send-future (-> doc meta ::webserver/!send-status-future)]
+                                        (future-cancel send-future))
+                                      (webserver/broadcast-status! status+progress)
+                                      (-> doc
+                                          (vary-meta dissoc ::!send-status-future)
+                                          (vary-meta assoc :status status+progress)))
+                                    doc))))
+
 (defonce !rand
   (atom 0))
 
 ^::clerk/no-cache (reset! !rand (rand-int 100))
 (Thread/sleep (+ 2000 @!rand))
 
 (def sleepy-cell
-  (Thread/sleep (+ 2001 @!rand)))
+  (let [total (+ 2001 @!rand)]
+    (doseq [i (range total)]
+      (do
+        (Thread/sleep 10)
+        (set-cell-progress! (/ i (float total)))))))
 
 (Thread/sleep (+ 2002 @!rand))
 
 (def sleepy-cell-2
   (Thread/sleep (+ 2003 @!rand)))
+
+

src/nextjournal/clerk/render.cljs

@@ -98,12 +98,16 @@
 
 (defonce !eval-counter (r/atom 0))
 
-(defn exec-status [{:keys [progress status]}]
-  [:div.w-full.bg-purple-200.dark:bg-purple-900.rounded.z-20 {:class "h-0.5"}
-   [:div.bg-purple-600.dark:bg-purple-400 {:class "h-0.5" :style {:width (str (* progress 100) "%")}}]
-   [:div.absolute.text-purple-600.dark:text-white.text-xs.font-sans.ml-1.bg-white.dark:bg-purple-900.rounded-full.shadow.z-20.font-bold.px-2.border.border-slate-300.dark:border-purple-400
-    {:style {:font-size "0.5rem"} :class "left-[35px] md:left-0 mt-[7px] md:mt-1"}
-    status]])
+(defn exec-status [{:keys [progress cell-progress status]}]
+  [:<>
+   [:div.w-full.bg-purple-200.dark:bg-purple-900.rounded.z-20 {:class "h-[2px]"}
+    [:div.bg-purple-600.dark:bg-purple-400 {:class "h-[2px]" :style {:width (str (* progress 100) "%")}}]
+    [:div.absolute.text-purple-600.dark:text-white.text-xs.font-sans.ml-1.bg-white.dark:bg-purple-900.rounded-full.shadow.z-20.font-bold.px-2.border.border-slate-300.dark:border-purple-400
+     {:style {:font-size "0.5rem"} :class "left-[35px] md:left-0 mt-[7px] md:mt-1"}
+     status]]
+   (when cell-progress
+     [:div.w-full.bg-sky-100.dark:bg-purple-900.rounded.z-20 {:class "h-[2px] mt-[0.5px]"}
+      [:div.bg-sky-500.dark:bg-purple-400 {:class "h-[2px]" :style {:width (str (* cell-progress 100) "%")}}]])])5
 
 (defn connection-status [status]
   [:div.absolute.text-red-600.dark:text-white.text-xs.font-sans.ml-1.bg-white.dark:bg-red-800.rounded-full.shadow.z-20.font-bold.px-2.border.border-red-400

src/nextjournal/clerk/webserver.clj

@@ -260,8 +260,8 @@
 
 (defn set-status! [status]
   (swap! !doc (fn [doc] (-> (or doc (help-doc))
-                           (vary-meta assoc :status status)
-                           (vary-meta update ::!send-status-future broadcast-status-debounced! status)))))
+                            (vary-meta assoc :status status)
+                            (vary-meta update ::!send-status-future broadcast-status-debounced! status)))))
 
 #_(clojure.java.browse/browse-url "http://localhost:7777")