Skip to content

Commit

Permalink
various UI tweaks
Browse files Browse the repository at this point in the history 
still need to figure out better ways to do this
  • Loading branch information
@thheller
thheller committed Aug 20, 2020
1 parent fcf0f48 commit da18fb7
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 115 deletions.
4 changes: 1 addition & 3 deletions src/main/shadow/cljs/ui/components/db_explorer.cljs
View file
@@ -1,6 +1,5 @@
(ns shadow.cljs.ui.components.db-explorer
(:require
[fipp.edn :refer (pprint)]
[shadow.experiments.grove :as sg :refer (<< defc)]
[shadow.cljs.model :as m]
[shadow.cljs.ui.components.inspect :as inspect]
Expand Down Expand Up @@ -68,8 +67,7 @@
;; not using inspect because we have the full value and I eventually want to be able to
;; edit and update it from here
[:textarea.w-full.h-full.font-mono.p-4.whitespace-no-wrap
(with-out-str
(pprint table-entry))]]]))]))
(pr-str table-entry)]]]))]))

)

Expand Down
147 changes: 72 additions & 75 deletions src/main/shadow/cljs/ui/components/inspect.cljs
View file
Expand Up @@ -6,8 +6,7 @@
[shadow.experiments.grove.ui.loadable :refer (refer-lazy)]
[shadow.cljs.model :as m]
[shadow.cljs.ui.components.common :as common]
[shadow.experiments.grove.keyboard :as keyboard]
[fipp.edn :refer (pprint)]))
[shadow.experiments.grove.keyboard :as keyboard]))

(refer-lazy shadow.cljs.ui.components.code-editor/codemirror)

Expand Down Expand Up @@ -44,9 +43,7 @@

(defmethod render-view ::default [{:keys [summary]}]
(<< [:div.p-4
[:div.py-1.text-xl.font-bold "Object does not support Browser view."]
[:pre
(with-out-str (pprint summary))]]))
[:div.py-1.text-xl.font-bold "Object does not support Browser view."]]))

(defn render-simple [value]
(<< [:div.border.bg-gray-200
Expand Down Expand Up @@ -145,41 +142,14 @@
:on-click [::inspect-switch-display! val]}
label]))

(defc ui-inspect-item [ident]
(defc ui-inspect-item [ident idx]
(bind object
(sg/query-ident ident
[:db/ident
:oid
:summary
:is-error
:display-type]))

(bind code-submit!
(fn [env code]
(sg/run-tx env [::m/inspect-code-eval! code])))

(bind test-ref (atom 0))
(bind test (sg/watch test-ref))

(event ::test-click! [env e]
(js/console.log "test-click!")
(swap! test-ref inc))

(bind _
(sg/effect
:render
(fn [env]
(js/console.log "ui-inspect-item render effect" env test)

(fn []
(js/console.log "ui-inspect-item render cleanup" env)))))

#_(effect :render [env]
(js/console.log "ui-inspect-item render effect" env test)

(fn []
(js/console.log "ui-inspect-item render cleanup" env)))

(render

(let [{:keys [summary is-error display-type]} object
Expand All @@ -190,29 +160,22 @@
"flex bg-white py-1 px-2 font-mono border-b-2 text-l text-red-700"
"flex bg-white py-1 px-2 font-mono border-b-2 text-l")]

(<< [:div.h-full.overflow-hidden.flex.flex-col
[:div {:on-click [::test-click!]
:class class-header}
[:div {:class "px-2 font-bold"} obj-type " " test]
(<< [:div.inset-0.h-full.overflow-hidden.flex.flex-col.shadow-2xl
[:div {:class class-header}
[:div {:class "px-2 font-bold"} obj-type]
(when entries
(<< [:div {:class "px-2 font-bold"} (str entries " Entries")]))]

(case display-type
:edn
(ui-object-as-text (:db/ident object) ::m/object-as-edn)
(ui-object-as-text ident ::m/object-as-edn)

:pprint
(ui-object-as-text (:db/ident object) ::m/object-as-pprint)
(ui-object-as-text ident ::m/object-as-pprint)

;; default
(<< [:div.flex-1.overflow-auto.font-mono (render-view object)]))

[:div.bg-white.font-mono.flex.flex-col
[:div.flex.font-bold.px-4.border-b.border-t-2.py-1.text-l
[:div.flex-1 "cljs.user - Runtime Eval (use $o for current obj, ctrl+enter for eval)"]]
[:div {:style {:height "120px"}}
(codemirror {:on-submit code-submit!})]]

[:div.flex.bg-white.py-2.px-4.font-mono.border-t-2
[:div "View as: "]
(view-as-button display-type :browse "Browse")
Expand All @@ -230,44 +193,81 @@
(bind {::m/keys [inspect] :as data}
(sg/query-root
[{::m/inspect
[:nav-stack
:view-idx]}]))
[:nav-stack]}]))

(bind {:keys [nav-stack]}
inspect)

(bind _
(hook
(keyboard/listen
{"escape"
(fn [env e]
(sg/run-tx env [::m/inspect-cancel!]))}))
(sg/run-tx env [::m/inspect-cancel!]))

(bind _
(sg/track-change
(:view-idx inspect)
(fn [env old new]
(js/console.log "view-idx did change" old new))))
;; FIXME: problematic when in codemirror input, should have mechanism to ignore
"ctrl+arrowleft"
(fn [env e]
(let [new-idx (-> nav-stack count dec dec)]
(when (nat-int? new-idx)
(sg/run-tx env [::m/inspect-nav-jump! new-idx]))))
}))

(render
(bind code-submit!
(fn [env code]
(sg/run-tx env [::m/inspect-code-eval! code])))

(let [{:keys [nav-stack view-idx]} inspect]
(bind peek-ref (atom nil))
(bind peek (sg/watch peek-ref))

(<< [:div.h-full.flex-1.overflow-hidden.flex.flex-col
[:div.flex
[:div view-idx]
[:div.flex-1
(sg/simple-seq nav-stack
(fn [{:keys [ident]} idx]
(<< [:div.inline-block.border.px-2.ml-2 idx])))]
(event ::peek-out! [env e]
(reset! peek-ref nil))

[:div.text-right.cursor-pointer.font-bold.px-2
{:on-click [::inspect-cancel!]}
common/svg-close]]
(event ::peek! [env e idx]
(reset! peek-ref idx))

[:div.flex-1.flex.overflow-y-auto.relative
(sg/render-seq nav-stack :ident
(fn [{:keys [ident]} idx]
(<< [:div.min-w-full.h-full
(ui-inspect-item ident)])))]
(event ::inspect-nav-jump! [env e idx]
(sg/run-tx env [::m/inspect-nav-jump! idx]))

]))))
(render
(<< [:div.h-full.flex-1.overflow-hidden.flex.flex-col
[:div.flex.py-1
[:div.pl-2 "Jump to: "]
[:div.flex-1 {:on-mouseleave [::peek-out!]}
(sg/simple-seq nav-stack
(fn [_ idx]
(<< [:div.inline-block.border.px-4.ml-2
{:on-mouseenter [::peek! idx]
:on-click [::inspect-nav-jump! idx]}
idx])))]

[:div.text-right.cursor-pointer.font-bold.px-2
{:on-click [::inspect-cancel!]}
common/svg-close]]

[:div.flex-1.flex.overflow-hidden.relative
(sg/render-seq nav-stack :ident
(fn [{:keys [ident]} idx]
(let [peek-offset
(when peek
(let [diff (- idx peek)]
(when (pos? diff)
(str "translateX(" (+ 220 (* diff 60)) "px)"))))]

(<< [:div.absolute.min-w-full.h-full.bg-white
{:style (-> {:transition "transform 250ms ease-in"
:will-change "transform"
:transform "translateX(0)"}
(cond->
peek-offset
(assoc :transform peek-offset)))}
(ui-inspect-item ident idx)]))))]

[:div.bg-white.font-mono.flex.flex-col
[:div.flex.font-bold.px-4.border-b.border-t-2.py-1.text-l
[:div.flex-1 "cljs.user - Runtime Eval (use $o for current obj, ctrl+enter for eval)"]]
[:div {:style {:height "120px"}}
(codemirror {:on-submit code-submit!})]]
])))

(defc ui-tap-stream-item [{:keys [object-ident]}]
(bind {:keys [summary runtime obj-preview] :as data}
Expand Down Expand Up @@ -328,9 +328,6 @@
(reset! closing-ref false)
(sg/run-tx env [::m/inspect-object! ident]))

(event ::inspect-nav-jump! [env e idx]
(sg/run-tx env [::m/inspect-nav-jump! idx]))

(event ::inspect-cancel! [env e]
(when-not @closing-ref
(reset! closing-ref true)
Expand Down
2 changes: 1 addition & 1 deletion src/main/shadow/cljs/ui/main.cljs
View file
Expand Up @@ -20,7 +20,7 @@
(sg/query-ident err-ident
[:text]))

(bind _
(hook
(keyboard/listen
{"escape"
(fn [env e]
Expand Down
57 changes: 25 additions & 32 deletions src/main/shadow/cljs/ui/worker/inspect.cljs
View file
Expand Up @@ -263,8 +263,8 @@
:start start-idx
:num num
:request-op :fragment
:key-limit 100
:val-limit 100}
:key-limit 160
:val-limit 160}
{:obj-result [:fragment-slice-loaded (:db/ident current)]})
:db/loading)))))

Expand Down Expand Up @@ -341,7 +341,6 @@
(-> {:db (assoc db ::m/inspect {:object ident
:runtime-id runtime-id
:runtime (db/make-ident ::m/runtime runtime-id)
:view-idx 0
:nav-stack [{:idx 0 :ident ident}]})
:ws-send []}
(cond->
Expand All @@ -361,40 +360,37 @@
[env db current _ params]
(contains? db ::m/inspect))

(defmethod eql/attr ::m/inspect-object
[env db current query-part params]
(let [{:keys [nav-stack]} (::m/inspect db)
{:keys [ident] :as last} (last nav-stack)]
ident))

(sw/reg-event-fx env/app-ref ::m/inspect-nav!
[]
(fn [{:keys [db] :as env} current idx]
(let [{:keys [nav-stack]} (::m/inspect db)
{:keys [oid runtime-id] :as object} (get db current)

key (get-in object [:fragment idx :key])]
(let [{:keys [oid runtime-id] :as object} (get db current)]

(relay-ws/call! env
{:op :obj-request
:to runtime-id
:oid oid
:request-op :nav
:idx idx}
:idx idx
:summary true}

;; FIXME: maybe nav should return simple values, instead of ref to simple value
{:obj-result [:nav-result]
:obj-result-ref [:nav-result-ref]})

{:db db #_(-> db
(update-in [::m/inspect :nav-stack] conj {:idx (count nav-stack)
:key key
:ident current})
(assoc-in [::m/inspect :object] :db/loading))})))
{})))

(sw/reg-event-fx env/app-ref ::m/inspect-nav-jump!
[]
(fn [{:keys [db] :as env} idx]
(let [{:keys [nav-stack] :as inspect} (::m/inspect db)
ident (get-in nav-stack [idx :ident])]
(let [idx (inc idx)]

{:db (-> db
(update ::m/inspect merge {:object ident
:display-type :browse})
(update-in [::m/inspect :nav-stack] subvec 0 idx))})))

(sw/reg-event-fx env/app-ref ::m/inspect-switch-display!
Expand All @@ -404,17 +400,17 @@

(sw/reg-event-fx env/app-ref :nav-result-ref
[]
(fn [{:keys [db] :as env} {:keys [ref-oid from] :as msg}]
(fn [{:keys [db] :as env} {:keys [ref-oid from summary] :as msg}]
(let [obj {:oid ref-oid
:runtime-id from
:runtime (db/make-ident ::m/runtime from)}
:runtime (db/make-ident ::m/runtime from)
:summary summary}
obj-ident (db/make-ident ::m/object ref-oid)

{:keys [nav-stack]} (::m/inspect db)]

{:db (-> db
(db/add ::m/object obj)
(update-in [::m/inspect :view-idx] inc)
(update-in [::m/inspect :nav-stack] conj {:idx (count nav-stack) :ident obj-ident}))})))

(defmethod eql/attr ::m/runtimes-sorted
Expand Down Expand Up @@ -443,17 +439,15 @@
(sw/reg-event-fx env/app-ref ::m/inspect-code-eval!
[]
(fn [{:keys [db] :as env} code]
(let [{::m/keys [inspect] :as data}
(let [{::m/keys [inspect-object] :as data}
(eql/query env db
[{::m/inspect
[{:object
[:oid
{:runtime
[:runtime-id
:supported-ops]}]}]}])

{:keys [object]} inspect
{:keys [oid runtime]} object
[{::m/inspect-object
[:oid
{:runtime
[:runtime-id
:supported-ops]}]}])

{:keys [oid runtime]} inspect-object
{:keys [runtime-id supported-ops]} runtime

;; FIXME: ns and eval mode should come from UI
Expand Down Expand Up @@ -501,11 +495,10 @@
:oid ref-oid
:runtime-id from
:runtime (db/make-ident ::m/runtime from)})
(assoc-in [::m/inspect :object] object-ident)
(update-in [::m/inspect :nav-stack] conj
{:idx (count (get-in db [::m/inspect :nav-stack]))
:code code
:ident (get-in db [::m/inspect :object])}))})))
:ident object-ident}))})))

(sw/reg-event-fx env/app-ref ::inspect-eval-compile-error!
[]
Expand Down
14 changes: 10 additions & 4 deletions src/main/shadow/remote/runtime/obj_support.cljc
View file
Expand Up @@ -435,10 +435,16 @@

(swap! state-ref assoc-in [:objects new-oid] new-entry)

(shared/reply runtime msg
{:op :obj-result-ref
:oid oid
:ref-oid new-oid}))))
(let [reply-msg
(-> {:op :obj-result-ref
:oid oid
:ref-oid new-oid}
(cond->
;; only send new-obj :summary when requested
(:summary msg)
(assoc :summary (obj-describe* this new-oid))))]

(shared/reply runtime msg reply-msg)))))

(catch #?(:clj Exception :cljs :default) e
#?(:cljs (js/console.warn "action-request-action failed" (:obj entry) e))
Expand Down

0 comments on commit da18fb7

Please sign in to comment.