Skip to content

Commit

Permalink
inspect breadcrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
thheller committed May 20, 2024
1 parent 4cc37fc commit b0fc7ee
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 43 deletions.
136 changes: 96 additions & 40 deletions src/main/shadow/cljs/ui/components/inspect.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@
(str (subs text 2) " ...")
(subs text 2)))

(defn render-edn-limit-truncated [text]
;; just in case browser truncated the display
;; FIXME: maybe do this properly in a mouseover dialog showing edn-pretty?
(<< [:span {:title (subs text 2)}
(if (str/starts-with? text "1,")
(str (subs text 2) " ...")
(subs text 2))]))

(defc ui-object-as-text [object attr active?]
(bind val
(get object attr))
Expand Down Expand Up @@ -233,6 +241,23 @@
:tab-index (if active? 0 -1)}
label]))

(defc ui-object-crumb [{:keys [nav-idx nav-from oid] :as stack-item} panel-idx active?]
(bind object
(sg/kv-lookup ::m/object (or nav-from oid)))

(bind label
(if-not nav-idx
(render-edn-limit-truncated (:edn-limit object))
(if (= :map (get-in object [:summary :data-type]))
(render-edn-limit-truncated (get-in object [:fragment nav-idx :key]))
nav-idx
)))

(render
(<< [:div {:class (css :border-r :p-2 :cursor-pointer :truncate {:max-width "160px"})
:on-click {:e ::m/inspect-set-current! :idx panel-idx}}
label])))

(defc ui-object-panel
[^:stable oid panel-idx active?]
(bind object
Expand Down Expand Up @@ -279,16 +304,6 @@

(<< [:div {:class $container ::keyboard/listen true}
[:div {:class $header}
(when (pos? panel-idx)
(<< [:div.icon
{:on-click {:e ::go-first!}
:title "go back to tap history (key: alt+t)"}
svg-chevron-double-left]

[:div.icon
{:on-click {:e ::go-back! :panel-idx panel-idx}
:title "go back one (key: left)"}
svg-chevron-left]))

[:div {:class (css :relative
["& > .options" :hidden :absolute {:z-index 20}]
Expand Down Expand Up @@ -342,7 +357,7 @@

;; FIXME: don't always show this
[:div {:class (css :bg-white :font-mono :flex :flex-col)}
[:div {:class (css :flex :font-bold :px-4 :border-b :border-t-2 :py-1 :text-sm)}
[:div {:class (css :flex :font-bold :px-4 :border-b :border-t :py-1 :text-sm)}
[:div {:class (css :flex-1)} "Runtime Eval (use $o for current obj, ctrl+enter for eval)"]]
[:div {:class (css {:height "120px"})}
;; must not autofocus, otherwise the scroll-anim breaks
Expand Down Expand Up @@ -406,17 +421,20 @@
(when edn-limit
(render-edn-limit edn-limit))]]))))

(defn ui-tap-crumb [stack-item panel-idx active?]
(<< [:div {:class (css :inline-block :border-r :p-2 :cursor-pointer :whitespace-nowrap)
:on-click {:e ::m/inspect-set-current! :idx panel-idx}}
"Tap History"]))

(defc ui-tap-panel [item panel-idx active?]
(event ::kb-select! [env {:keys [item] :as e}]
(sg/dispatch-up! env {:e ::inspect-object! :ident item}))

(render
(let [$header (css :p-2 :font-bold :border-b :bg-gray-200)
$vlist (css :flex-1 :overflow-hidden)
(let [$vlist (css :flex-1 :overflow-hidden)
$buttons (css :flex :bg-white :py-2 :px-4 :font-mono :border-t-2)]

(<< [:div {:class $header} "Tap History"]
[:div {:class $vlist}
(<< [:div {:class $vlist}

(vlist/render
{:item-height 46
Expand All @@ -435,6 +453,11 @@
:on-click ::m/tap-clear!}
"Clear"]]))))

(defn ui-tap-latest-crumb [stack-item panel-idx active?]
(<< [:div {:class (css :inline-block :border-r :p-2 :cursor-pointer :whitespace-nowrap)
:on-click {:e ::m/inspect-set-current! :idx panel-idx}}
"Tap Latest"]))

(defc ui-tap-latest-panel [item panel-idx active?]
(bind tap-latest
(sg/kv-lookup ::m/ui ::m/tap-latest))
Expand Down Expand Up @@ -484,6 +507,11 @@
:var var}}
(name var)]))))]])))

(defn ui-explore-object-crumb [stack-item panel-idx active?]
(<< [:div {:class (css :inline-block :border-r :p-2 :cursor-pointer :whitespace-nowrap)
:on-click {:e ::m/inspect-set-current! :idx panel-idx}}
"Explore Object"]))

(defc ui-explore-object-panel
[^:stable oid panel-idx active?]
(bind object
Expand Down Expand Up @@ -537,6 +565,11 @@
(view-as-button display-type :edn "EDN" active?))]]
))))

(defn ui-explore-runtime-crumb [stack-item panel-idx active?]
(<< [:div {:class (css :inline-block :border-r :p-2 :cursor-pointer :whitespace-nowrap)
:on-click {:e ::m/inspect-set-current! :idx panel-idx}}
"Explore Runtime"]))

(defc ui-explore-runtime-panel [runtime-id panel-idx active?]
(bind {:keys
[explore-ns
Expand Down Expand Up @@ -723,31 +756,54 @@
(dom/ev-stop e)))

(render

(<< [:div
{:class (css :flex-1 :mt-4 :flex :flex-col :overflow-hidden)
{:class (css :flex-1 :mt-2 :p-2 :flex :flex-col :overflow-hidden)
::keyboard/listen true}
;; [:div.px-6.font-bold "current:" current]
[:div
{:class (css :flex-1 :flex :overflow-hidden)
:dom/ref container-ref}
(sg/simple-seq stack
(fn [{:keys [type] :as item} idx]
(let [active? (= current idx)]
(<< [:div {:class (css :px-3 :pb-3 :flex-none :h-full :w-full)}
[:div {:class (css :border :shadow :bg-white :h-full :flex :flex-col)}
(case type
:tap-panel
(ui-tap-panel item idx active?)

:tap-latest-panel
(ui-tap-latest-panel item idx active?)

:object-panel
(ui-object-panel (:oid item) idx active?)

:explore-runtime-panel
(ui-explore-runtime-panel (:runtime-id item) idx active?)

(<< [:div (pr-str item)]))]]
))))]])))

[:div {:class (css :flex-1 :flex :flex-col :overflow-hidden :shadow :bg-white :border)}

[:div {:class (css :overflow-hidden :flex)}
(sg/simple-seq stack
(fn [{:keys [type] :as item} idx]
(let [active? (= current idx)]
(case type
:tap-panel
(ui-tap-crumb item idx active?)

:tap-latest-panel
(ui-tap-latest-crumb item idx active?)

:object-panel
(ui-object-crumb item idx active?)

:explore-runtime-panel
(ui-explore-runtime-crumb item idx active?)

(<< [:div (pr-str item)])))

))]

[:div
{:class (css :flex-1 :flex :overflow-hidden)
:dom/ref container-ref}
(sg/simple-seq stack
(fn [{:keys [type] :as item} idx]
(let [active? (= current idx)]
(<< [:div {:class (css :flex-none :h-full :w-full)}
[:div {:class (css :border-t :h-full :flex :flex-col)}
(case type
:tap-panel
(ui-tap-panel item idx active?)

:tap-latest-panel
(ui-tap-latest-panel item idx active?)

:object-panel
(ui-object-panel (:oid item) idx active?)

:explore-runtime-panel
(ui-explore-runtime-panel (:runtime-id item) idx active?)

(<< [:div (pr-str item)]))]]
))))]]])))
9 changes: 6 additions & 3 deletions src/main/shadow/cljs/ui/db/inspect.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -363,13 +363,14 @@

{:e ::inspect-nav-result
:oid oid
:idx idx
:panel-idx panel-idx})

env))

(defn inspect-nav-result
{::ev/handle ::inspect-nav-result}
[env {:keys [panel-idx call-result] :as tx}]
[env {:keys [idx panel-idx call-result] :as tx}]

(case (:op call-result)
:obj-result
Expand Down Expand Up @@ -401,7 +402,7 @@
(assoc-in [::m/inspect :current] (inc panel-idx))))))

:obj-result-ref
(let [{:keys [ref-oid from summary]}
(let [{:keys [oid ref-oid from summary]}
call-result

obj
Expand All @@ -416,7 +417,9 @@
stack
(-> (subvec stack 0 (inc panel-idx))
(conj {:type :object-panel
:oid ref-oid}))]
:oid ref-oid
:nav-from oid
:nav-idx idx}))]

(-> env
(kv/add ::m/object obj)
Expand Down

0 comments on commit b0fc7ee

Please sign in to comment.