Skip to content

Commit 45aa8b5

Browse files
Add intro to windows
1 parent 985ff1b commit 45aa8b5

File tree

4 files changed

+45
-14
lines changed

4 files changed

+45
-14
lines changed

notebooks/tap_window.clj

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,46 @@
33
{:nextjournal.clerk/visibility {:code :hide :result :hide}
44
:nextjournal.clerk/no-cache true}
55
(:require [nextjournal.clerk :as clerk]
6-
[nextjournal.clerk.window :as window]
76
[nextjournal.clerk.tap :as tap]))
87

9-
#_(clerk/window! :my-window (clerk/html [:div.w-8.h-8.bg-green-500]))
8+
{::clerk/visibility {:code :show}}
109

11-
#_(comment
12-
(clerk/close-window! :my-window)
13-
(clerk/close-all-windows!)
14-
(clerk/window! ::clerk/taps)
15-
(tap> (clerk/html [:div.w-8.h-8.bg-green-500]))
16-
(tap> (clerk/plotly {:data [{:x [1 2 3 4]}]}))
17-
(tap/reset-taps!))
10+
;; Clerk windows are draggable, resizable and dockable containers that are floating on top of other content. Windows make it easy to show arbitary content, independent of a notebook, while still getting all the benefits of Clerk viewers. This can be nice for debugging. For example you could use it to inspect a data structure in one window and show the same data structure as a graph in a second window.
11+
12+
;; Windows have identity. In order to spawn one, you have to call something like:
13+
14+
(clerk/window! :my-window {:foo (vec (repeat 2 {:baz (range 30) :fooze (range 40)})) :bar (range 20)})
15+
16+
;; This creates a window with a `:my-window` id. The id makes the window addressable and, as such, allows to update its contents from the REPL. For example, you can call …
17+
18+
(clerk/window! :my-window {:title "A debug window"} (zipmap (range 1000) (map #(* % %) (range 1000))))
19+
20+
;; … to replace the contens of `:my-window`. The window itself will not be reinstantiated. The example also shows that `window!` takes an optional second `opts` argument that can be used to give it a custom title.
21+
22+
;; Windows have a dedicated close button but you can also use the id to close it from the REPL, e.g.
23+
24+
(clerk/close-window! :my-window)
25+
26+
;; Finally, there's also special `::clerk/taps` window that doesn't require you to set any content. Instead, it will show you a stream of taps (independant of the notebooks you are working in). So, whenever you `tap>` something, the Taps window will show it when it's open:
27+
28+
(comment
29+
(clerk/window! ::clerk/taps))
30+
31+
;; Mind that windows live outside notebooks and once you spawn one, it shows until you close it again, even if you reload the page or show a different notebook!
32+
33+
(comment
34+
(clerk/window! :test {:title "My Super-Duper Window"} (range 100))
35+
(clerk/window! :test (clerk/html [:div.w-8.h-8.bg-green-500]))
36+
(clerk/close-window! :test)
37+
(clerk/close-all-windows!)
38+
(clerk/window! ::clerk/taps)
39+
(tap> (clerk/html [:div.w-8.h-8.bg-green-500]))
40+
(tap> (clerk/vl {:description "A simple bar chart with embedded data."
41+
:data {:values [{:a "A" :b 28} {:a "B" :b 55} {:a "C" :b 43}
42+
{:a "D" :b 91} {:a "E" :b 81} {:a "F" :b 53}
43+
{:a "G" :b 19} {:a "H" :b 87} {:a "I" :b 52}]}
44+
:mark "bar"
45+
:encoding {:x {:field "a" :type "nominal" :axis {:labelAngle 0}}
46+
:y {:field "b" :type "quantitative"}}}))
47+
(tap> 1)
48+
(tap/reset-taps!))

src/nextjournal/clerk/render/window.cljs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,18 @@
6565
#(js/removeEventListener "mousemove" handle-mouse-move)))
6666
[!mouse-down on-drag])
6767
[:div.bg-slate-100.hover:bg-slate-200.dark:bg-slate-800.dark:hover:bg-slate-700.cursor-move.w-full.rounded-t-lg.flex-shrink-0.leading-none.flex.items-center.justify-between
68-
{:class (if name "h-[20px] " "h-[14px] ")
68+
{:class (if name "h-[24px] " "h-[14px] ")
6969
:on-mouse-down (fn [event]
7070
(on-drag-start)
7171
(reset! !mouse-down {:start-x (.-screenX event) :start-y (.-screenY event)}))}
7272
(when name
7373
[:span.font-sans.font-medium.text-slate-700
74-
{:class "text-[11px] ml-[8px] "}
74+
{:class "text-[12px] ml-[8px] "}
7575
(or title id)])
7676
(when on-close
7777
[:button.text-slate-600.hover:text-slate-900.hover:bg-slate-300.rounded-tr-lg.flex.items-center.justify-center
7878
{:on-click on-close
79-
:class "w-[20px] h-[20px]"}
79+
:class "w-[24px] h-[24px]"}
8080
[:svg {:xmlns "http://www.w3.org/2000/svg" :fill "none" :viewBox "0 0 24 24" :stroke-width "1.5" :stroke "currentColor" :class "w-3 h-3"}
8181
[:path {:stroke-linecap "round" :stroke-linejoin "round" :d "M6 18L18 6M6 6l12 12"}]]])]))
8282

src/nextjournal/clerk/tap.clj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
{:pred (v/get-safe ::val)
4646
:render-fn '(fn [{::keys [val tapped-at]} opts]
4747
[:div.w-full
48-
[:div.font-sans.bg-slate-100.py-1
48+
[:div.font-sans.bg-slate-50.py-1.text-slate-600.tracking-wide.border-t.border-b
4949
{:class "px-[8px] text-[11px]"} (:nextjournal/value tapped-at)]
5050
[:div.overflow-x-auto.py-2
5151
{:class "px-[8px]"}

src/nextjournal/clerk/window.clj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
(def taps-viewer
1212
{:render-fn '(fn [taps {:as opts :keys [taps-view]}]
1313
[:div.flex.flex-col
14-
[:div.flex.justify-between.items-center.font-sans.border-b.border-t.shadow.z-1
14+
[:div.flex.justify-between.items-center.font-sans.border-t.shadow.z-1
1515
{:class "text-[11px] height-[24px] px-[8px]"}
1616
(into [:div.flex.items-center]
1717
(map (fn [choice]

0 commit comments

Comments
 (0)