Subs panel WIP (and refactor names and tidy)
This commit is contained in:
Gregg8
parent
6dbdd4c8c7
commit
b9aa386686
|
|
@ -22,7 +22,7 @@
|
|||
(def cljs-dev-tools-background "#e8ffe8")
|
||||
(def pod-gap common/gs-19s)
|
||||
|
||||
(defn top-buttons []
|
||||
(defn panel-header []
|
||||
[rc/h-box
|
||||
:justify :between
|
||||
:margin "19px 0px"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
:height "48px"
|
||||
:padding "0px 12px"
|
||||
:style {:background-color "#fafbfc"
|
||||
:border "1px solid #e8edf1" ;; TODO: Need to get proper color from Figma
|
||||
:border "1px solid #e3e9ed"
|
||||
:border-radius "3px"}
|
||||
:children [[rc/label :label "reset app-db to:"]
|
||||
[rc/button
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
:margin-top "22px"}
|
||||
:label "add inspectors to show what happened to app-db"]]])
|
||||
|
||||
(defn paths []
|
||||
(defn pod-section []
|
||||
(let [
|
||||
pods [["x" "y"] [:abc 123] nil]
|
||||
;pods nil
|
||||
|
|
@ -216,11 +216,11 @@
|
|||
(doall (for [p pods] [app-db-path p])))])))
|
||||
|
||||
|
||||
(defn render-state [data]
|
||||
(defn render [app-db]
|
||||
[rc/v-box
|
||||
:style {:margin-right common/gs-19s}
|
||||
:children [[top-buttons]
|
||||
[paths]
|
||||
:children [[panel-header]
|
||||
[pod-section]
|
||||
[rc/gap-f :size pod-gap]]])
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -119,15 +119,16 @@
|
|||
(when-not (re-frame.trace/is-trace-enabled?)
|
||||
[:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
|
||||
[rc/v-box
|
||||
:size "auto"
|
||||
:style {:margin-left common/gs-19s :overflow "auto"}
|
||||
:size "auto"
|
||||
:style {:margin-left common/gs-19s
|
||||
:overflow "auto"}
|
||||
:children [(case @selected-tab
|
||||
:event [event/render traces]
|
||||
:app-db [app-db/render-state db/app-db]
|
||||
:subs [subs/subs-panel]
|
||||
:app-db [app-db/render db/app-db]
|
||||
:subs [subs/render]
|
||||
:views [views/render]
|
||||
:traces [traces/render-trace-panel traces]
|
||||
:traces [traces/render traces]
|
||||
:timing [timing/render]
|
||||
:debug [debug/render-debug]
|
||||
:debug [debug/render]
|
||||
:settings [settings/render]
|
||||
[app-db/render-state db/app-db])]]]))
|
||||
[app-db/render db/app-db])]]]))
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.metamorphic :as metam]))
|
||||
|
||||
(defn render-debug []
|
||||
(defn render []
|
||||
[rc/v-box
|
||||
:gap "5px"
|
||||
:children
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
(ns day8.re-frame.trace.view.subs
|
||||
(:require [re-frame.subs :as subs]
|
||||
[day8.re-frame.trace.utils.re-com :as rc]
|
||||
;[cljs.spec.alpha :as s]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[mranderson047.reagent.v0v6v0.reagent.core :as r]
|
||||
[day8.re-frame.trace.utils.re-com :as rc]
|
||||
[day8.re-frame.trace.common-styles :as common])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :as macros]))
|
||||
|
||||
;(s/def ::query-v any?)
|
||||
;(s/def ::dyn-v any?)
|
||||
|
|
@ -12,42 +15,94 @@
|
|||
;(s/def ::query-cache (s/map-of ::query-cache-params ::deref))
|
||||
;(assert (s/valid? ::query-cache (rc/deref-or-value-peek subs/query->reaction)))
|
||||
|
||||
(def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg"))
|
||||
|
||||
(def pod-gap common/gs-19s)
|
||||
|
||||
(defn tag
|
||||
[type label]
|
||||
(let [color (case type
|
||||
:created "#9b51e0"
|
||||
:destroyed "#f2994a"
|
||||
:re-run "#219653"
|
||||
:not-run "#bdbdbd"
|
||||
"black")]
|
||||
[rc/box
|
||||
:style {:color "white"
|
||||
:background-color color
|
||||
:width common/gs-50s
|
||||
:height common/gs-19s
|
||||
:font-size "10px"
|
||||
:font-weight "bold"
|
||||
:border-radius "3px"}
|
||||
:child [:span {:style {:margin "auto"}} label]]))
|
||||
|
||||
(defn subs-panel []
|
||||
(defn title-tag
|
||||
[type title label]
|
||||
[rc/v-box
|
||||
:align :center
|
||||
:gap "2px"
|
||||
:children [[:span {:style {:font-size "9px"}} title]
|
||||
[tag type label]]])
|
||||
|
||||
(defn panel-header []
|
||||
[rc/h-box
|
||||
:justify :between
|
||||
:margin "19px 0px"
|
||||
:align :center
|
||||
:children [[rc/h-box
|
||||
:align :center
|
||||
:gap common/gs-19s
|
||||
:height "48px"
|
||||
:padding "0px 19px"
|
||||
:style {:background-color "#fafbfc"
|
||||
:border "1px solid #e3e9ed"
|
||||
:border-radius "3px"}
|
||||
:children [[:span {:style {:color "#828282"
|
||||
:font-size "18px"
|
||||
:font-weight "lighter"}} "Summary:"]
|
||||
[title-tag :created "CREATED" 2]
|
||||
[title-tag :re-run "RE-RUN" 44]
|
||||
[title-tag :destroyed "DESTROYED" 1]
|
||||
[title-tag :not-run "NOT-RUN" 12]]]
|
||||
[rc/h-box
|
||||
:align :center
|
||||
:gap common/gs-19s
|
||||
:height "48px"
|
||||
:padding "0px 19px"
|
||||
:style {:background-color "#fafbfc"
|
||||
:border "1px solid #e3e9ed"
|
||||
:border-radius "3px"}
|
||||
:children [[rc/checkbox
|
||||
:model true
|
||||
:label [:span "Ignore unchanged" [:br] "layer 2 subs"]
|
||||
:style {:margin-top "6px"}
|
||||
:on-change #()]]]]])
|
||||
|
||||
(defn render []
|
||||
[]
|
||||
[:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
|
||||
[rc/label
|
||||
:label "Created"
|
||||
:class "bm-heading-text"]
|
||||
[rc/label
|
||||
:label "Run"
|
||||
:class "bm-heading-text"]
|
||||
[rc/label
|
||||
:label "Destroyed"
|
||||
:class "bm-heading-text"]
|
||||
[rc/label
|
||||
:label "Not Run"
|
||||
:class "bm-heading-text"]
|
||||
|
||||
[:div.panel-content-scrollable
|
||||
[:div.subtrees {:style {:margin "20px 0"}}
|
||||
(doall
|
||||
(->> @subs/query->reaction
|
||||
(sort-by (fn [me] (ffirst (key me))))
|
||||
(map (fn [me]
|
||||
(let [[query-v dyn-v :as inputs] (key me)]
|
||||
^{:key query-v}
|
||||
[:div.subtree-wrapper {:style {:margin "10px 0"}}
|
||||
[:div.subtree
|
||||
[components/subscription-render
|
||||
(rc/deref-or-value-peek (val me))
|
||||
[:button.subtree-button {:on-click #(rf/dispatch [:app-db/remove-path (key me)])}
|
||||
[:span.subtree-button-string
|
||||
(prn-str (first (key me)))]]
|
||||
(into [:subs] query-v)]]]))
|
||||
)))
|
||||
(do @re-frame.db/app-db
|
||||
nil)]]])
|
||||
[rc/v-box
|
||||
:style {:margin-right common/gs-19s}
|
||||
:children [[panel-header]
|
||||
;[pod-section]
|
||||
[:div.panel-content-scrollable
|
||||
[:div.subtrees {:style {:margin "20px 0"}}
|
||||
(doall
|
||||
(->> @subs/query->reaction
|
||||
(sort-by (fn [me] (ffirst (key me))))
|
||||
(map (fn [me]
|
||||
(let [[query-v dyn-v :as inputs] (key me)]
|
||||
^{:key query-v}
|
||||
[:div.subtree-wrapper {:style {:margin "10px 0"}}
|
||||
[:div.subtree
|
||||
[components/subscription-render
|
||||
(rc/deref-or-value-peek (val me))
|
||||
[:button.subtree-button {:on-click #(rf/dispatch [:app-db/remove-path (key me)])}
|
||||
[:span.subtree-button-string
|
||||
(prn-str (first (key me)))]]
|
||||
(into [:subs] query-v)]]]))
|
||||
)))
|
||||
(do @re-frame.db/app-db
|
||||
nil)]]
|
||||
[rc/gap-f :size pod-gap]]])
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
[:td.trace--meta.trace--details-icon
|
||||
{:on-click #(.log js/console tags)}]]))))))))
|
||||
|
||||
(defn render-trace-panel [traces]
|
||||
(defn render [traces]
|
||||
(let [filter-input (r/atom "")
|
||||
filter-items (rf/subscribe [:traces/filter-items])
|
||||
filter-type (r/atom :contains)
|
||||
|
|
|
|||
Loading…
Reference in New Issue