UI to switch auto-expand for tapped values

nextjournal · Aug 16, 2023 · 3d8ad98 · 3d8ad98
1 parent d142449
commit 3d8ad98
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/nextjournal/clerk/tap.clj b/src/nextjournal/clerk/tap.clj
@@ -1,7 +1,6 @@
 ;; # 🚰 Tap Inspector
 (ns nextjournal.clerk.tap
-  {:nextjournal.clerk/visibility {:code :hide :result :hide}
-   :nextjournal.clerk/auto-expand-results? true}
+  {:nextjournal.clerk/visibility {:code :hide :result :hide}}
   (:require [clojure.core :as core]
             [nextjournal.clerk :as clerk]
             [nextjournal.clerk.viewer :as v])
@@ -20,15 +19,19 @@
                (into [:div.flex.items-center.font-sans.text-xs.mb-3 [:span.text-slate-500.mr-2 "View-as:"]]
                      (map (fn [choice]
                             [:button.px-3.py-1.font-medium.hover:bg-indigo-50.rounded-full.hover:text-indigo-600.transition
-                             {:class (if (= @!view choice) "bg-indigo-100 text-indigo-600" "text-slate-500")
-                              :on-click #(reset! !view choice)}
+                             {:class (if (= choice (:kind @!view)) "bg-indigo-100 text-indigo-600" "text-slate-500")
+                              :on-click #(swap! !view assoc :kind choice)}
                              choice]) choices))
-               [:button.text-xs.rounded-full.px-3.py-1.border-2.font-sans.hover:bg-slate-100.cursor-pointer
-                {:on-click #(nextjournal.clerk.render/clerk-eval `(reset-taps!))} "Clear"]]))))
+               [:div
+                [:button.text-xs.rounded-full.px-3.py-1.border-2.font-sans.hover:bg-slate-100.cursor-pointer.mr-1
+                 {:class (when (:auto-expand-results? @!view) "bg-indigo-100 text-indigo-600 border-indigo-200")
+                  :on-click #(swap! !view update :auto-expand-results? not)} "Auto Expand"]
+                [:button.text-xs.rounded-full.px-3.py-1.border-2.font-sans.hover:bg-slate-100.cursor-pointer
+                 {:on-click #(nextjournal.clerk.render/clerk-eval `(reset-taps!))} "Clear"]]]))))
 
 ^{::clerk/sync true ::clerk/viewer switch-view ::clerk/visibility {:result :show}}
-(defonce !view (atom :stream))
-
+(defonce !view (atom {:kind :stream
+                      :auto-expand-results? false}))
 
 (defonce !taps (atom ()))
 
@@ -56,13 +59,13 @@
                        v/mark-preserve-keys
                        (merge (v/->opts (v/ensure-wrapped (::val value)))) ;; preserve opts like ::clerk/width and ::clerk/css-class
                        (assoc-in [:nextjournal/render-opts :id] (::key value)) ;; assign custom react key
+                       (cond-> (:auto-expand-results? @!view) (assoc-in [:nextjournal/render-opts :auto-expand-results?] true))
                        (update-in [:nextjournal/value ::tapped-at] inst->local-time-str)))})
 
-
 ^{::clerk/visibility {:result :show}
   ::clerk/viewers (v/add-viewers [tap-viewer])}
 (clerk/fragment (cond->> @!taps
-                  (= :latest @!view) (take 1)))
+                  (= :latest (:kind @!view)) (take 1)))
 
 (comment
   (last @!taps)