Fix auto-expand in tap viewer (#544)

- Fixes computing content-lenghts (and therefore computing auto-expand) for values with presented keys - Adds UI for toggling auto-expand in tap viewer Fixes #543. --------- Co-authored-by: Martin Kavalar <[email protected]>
nextjournal · Dec 12, 2023 · 67b480a · 67b480a
1 parent babbba5
commit 67b480a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ Changes can be:
 
 * 💫 Support using Markdown syntax in `clerk/caption` text
 
+* 💫 Support toggling auto-expansion of results in tap viewer
+
 * 💫 Redesign examples viewer to be more readable and in a way that doesn't force `display: flex` onto contents.
 
 * 🛠 Bump depdendencies
@@ -29,6 +31,8 @@ Changes can be:
 
 * 🐞 Fix caching behaviour of `clerk/image` and support overriding image-viewer by name
 
+* 🐞 Fix tap viewer keeping open/collapsed state [#543](https://github.com/nextjournal/clerk/issues/543) @teodorlu
+
 * 🐞 Fix `unquote` in experimental cljs Clerk editor, fixes [#576](https://github.com/nextjournal/clerk/issues/576) @sritchie
 
 * 🐞 Fix `row` and `col` viewers not showing a first map argument, fixes [#567](https://github.com/nextjournal/clerk/issues/567) @teodorlu

diff --git a/src/nextjournal/clerk/tap.clj b/src/nextjournal/clerk/tap.clj
@@ -19,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 ()))
 
@@ -48,19 +52,20 @@
                  [:div.border-t.relative.py-3.mt-2
                   [:span.absolute.rounded-full.px-2.bg-gray-300.font-mono.top-0
                    {:class "left-1/2 -translate-x-1/2 -translate-y-1/2 py-[1px] text-[9px]"} (:nextjournal/value tapped-at)]
-                  [:div.overflow-x-auto [nextjournal.clerk.render/inspect-presented val]]])
+                  [:div.overflow-x-auto [nextjournal.clerk.render/inspect-presented opts val]]])
+
    :transform-fn (fn [{:as wrapped-value :nextjournal/keys [value]}]
                    (-> wrapped-value
                        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)

diff --git a/src/nextjournal/clerk/viewer.cljc b/src/nextjournal/clerk/viewer.cljc
@@ -1638,9 +1638,10 @@
                                   (contains? #{:map-entry} prev-type) (or content-length 0)
                                   (vector? value) 2
                                   :else 1)))]
-    (if (vector? value)
-      (reduce compute-expanded-at state' value)
-      state')))
+    (reduce compute-expanded-at state' (cond
+                                         (vector? value) value
+                                         (map? value) (vals value)))))
+
 
 (defn collect-expandable-paths [state wrapped-value]
   (if-let [{:nextjournal/keys [value] :keys [path]} (when (wrapped-value? wrapped-value)