diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index 5225372..dd2b9c5 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/src/day8/re_frame/trace/view/app_db.cljs @@ -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]]]) diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs index 3056a5a..05628c9 100644 --- a/src/day8/re_frame/trace/view/container.cljs +++ b/src/day8/re_frame/trace/view/container.cljs @@ -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])]]])) diff --git a/src/day8/re_frame/trace/view/debug.cljs b/src/day8/re_frame/trace/view/debug.cljs index 2e7c939..f3bb2b0 100644 --- a/src/day8/re_frame/trace/view/debug.cljs +++ b/src/day8/re_frame/trace/view/debug.cljs @@ -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 diff --git a/src/day8/re_frame/trace/view/subs.cljs b/src/day8/re_frame/trace/view/subs.cljs index ebdb1b4..e4902c0 100644 --- a/src/day8/re_frame/trace/view/subs.cljs +++ b/src/day8/re_frame/trace/view/subs.cljs @@ -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]]]) diff --git a/src/day8/re_frame/trace/view/traces.cljs b/src/day8/re_frame/trace/view/traces.cljs index 7a042b1..99c5d2d 100644 --- a/src/day8/re_frame/trace/view/traces.cljs +++ b/src/day8/re_frame/trace/view/traces.cljs @@ -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)