Add new event panel
This commit is contained in:
parent
6465a09d08
commit
7efeb61208
|
@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. This change
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
||||||
|
* New event panel. This panel shows the coeffects given to your event handler, the effects your event handler produced, and all of the interceptors in the chain.
|
||||||
* Debugging instructions if re-frame-trace fails to start.
|
* Debugging instructions if re-frame-trace fails to start.
|
||||||
* Setting to drop low level traces. This reduces the memory overhead of re-frame-trace as we can drop more traces that you are unlikely to want most of the time.
|
* Setting to drop low level traces. This reduces the memory overhead of re-frame-trace as we can drop more traces that you are unlikely to want most of the time.
|
||||||
|
|
||||||
|
|
|
@ -50,6 +50,8 @@
|
||||||
(def sub-re-run-color "#219653")
|
(def sub-re-run-color "#219653")
|
||||||
(def sub-not-run-color "#bdbdbd")
|
(def sub-not-run-color "#bdbdbd")
|
||||||
|
|
||||||
|
(def expansion-button-horizontal-padding (px 2))
|
||||||
|
|
||||||
(defn panel-style
|
(defn panel-style
|
||||||
([border-radius]
|
([border-radius]
|
||||||
{:background-color "#fafbfc"
|
{:background-color "#fafbfc"
|
||||||
|
@ -128,6 +130,7 @@
|
||||||
(def sidebar-item-check-color strong-button-background-color)
|
(def sidebar-item-check-color strong-button-background-color)
|
||||||
(def sidebar-text-color "white")
|
(def sidebar-text-color "white")
|
||||||
(def navbar-text-color "white")
|
(def navbar-text-color "white")
|
||||||
|
(def navbar-tint-lighter "#797B7B")
|
||||||
|
|
||||||
(def wizard-panel-background-color "#636A6F") ;; Very dark grey
|
(def wizard-panel-background-color "#636A6F") ;; Very dark grey
|
||||||
(def wizard-panel-text-color "white")
|
(def wizard-panel-text-color "white")
|
||||||
|
|
|
@ -85,8 +85,7 @@
|
||||||
(defn summarise-event [ev]
|
(defn summarise-event [ev]
|
||||||
(-> ev
|
(-> ev
|
||||||
(dissoc :start :duration :end :child-of)
|
(dissoc :start :duration :end :child-of)
|
||||||
(utils/dissoc-in [:tags :app-db-before])
|
(update :tags dissoc :app-db-before :app-db-after :effects :coeffects)))
|
||||||
(utils/dissoc-in [:tags :app-db-after])))
|
|
||||||
|
|
||||||
|
|
||||||
(defn summarise-match [match]
|
(defn summarise-match [match]
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
[day8.re-frame.trace.view.app-db :as app-db]
|
[day8.re-frame.trace.view.app-db :as app-db]
|
||||||
[cljs.spec.alpha :as spec]
|
[cljs.spec.alpha :as spec]
|
||||||
[day8.re-frame.trace.view.timing :as timing]
|
[day8.re-frame.trace.view.timing :as timing]
|
||||||
[day8.re-frame.trace.view.settings :as settings]))
|
[day8.re-frame.trace.view.settings :as settings]
|
||||||
|
[day8.re-frame.trace.view.event :as event]))
|
||||||
|
|
||||||
(def background-gray common/background-gray)
|
(def background-gray common/background-gray)
|
||||||
(def background-gray-hint common/background-gray-hint)
|
(def background-gray-hint common/background-gray-hint)
|
||||||
|
@ -408,12 +409,13 @@
|
||||||
[:.toggle {:color text-color-muted
|
[:.toggle {:color text-color-muted
|
||||||
:cursor "pointer"
|
:cursor "pointer"
|
||||||
:line-height 1}]
|
:line-height 1}]
|
||||||
["> span" {:vertical-align "text-top"}]]
|
["> span" {:vertical-align "text-top"}]
|
||||||
|
[:li {:margin 0}]]
|
||||||
[:.host-closed {:font-size (em 4)
|
[:.host-closed {:font-size (em 4)
|
||||||
:background-color (color/rgba 255 255 0 0.8)}]
|
:background-color (color/rgba 255 255 0 0.8)}]
|
||||||
[:.expansion-button {:font-family "sans-serif"
|
[:.expansion-button {:font-family "sans-serif"
|
||||||
:width (px 16)
|
:width (px 16)
|
||||||
:padding "0 2px"
|
:padding [[0 common/expansion-button-horizontal-padding]]
|
||||||
:vertical-align "middle"}]
|
:vertical-align "middle"}]
|
||||||
[:.bm-muted-button {:font-size "14px"
|
[:.bm-muted-button {:font-size "14px"
|
||||||
:height "23px"
|
:height "23px"
|
||||||
|
@ -433,6 +435,7 @@
|
||||||
re-frame-trace-styles
|
re-frame-trace-styles
|
||||||
app-db/app-db-styles
|
app-db/app-db-styles
|
||||||
timing/timing-styles
|
timing/timing-styles
|
||||||
|
event/event-styles
|
||||||
settings/settings-styles]))
|
settings/settings-styles]))
|
||||||
;(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css"))
|
;(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css"))
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
:border-bottom-right-radius border-radius}]
|
:border-bottom-right-radius border-radius}]
|
||||||
|
|
||||||
[:.app-db-path--header
|
[:.app-db-path--header
|
||||||
{:background-color "#797B7B" ; Name this navbar tint-lighter
|
{:background-color common/navbar-tint-lighter
|
||||||
:color "white"
|
:color "white"
|
||||||
:height common/gs-31
|
:height common/gs-31
|
||||||
:border-top-left-radius border-radius
|
:border-top-left-radius border-radius
|
||||||
|
|
|
@ -209,12 +209,13 @@
|
||||||
(nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
|
(nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
|
||||||
@expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]])))
|
@expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]])))
|
||||||
|
|
||||||
(defn simple-render [data path]
|
(defn simple-render [data path & [class]]
|
||||||
(let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]
|
(let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]
|
||||||
(fn [data]
|
(fn [data]
|
||||||
[:div
|
[:div
|
||||||
{:class (str/join " " ["re-frame-trace--object"
|
{:class (str/join " " ["re-frame-trace--object"
|
||||||
(when @expanded? "expanded")])}
|
(when @expanded? "expanded")
|
||||||
|
class])}
|
||||||
#_[:span {:class "toggle"
|
#_[:span {:class "toggle"
|
||||||
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
||||||
[:button.expansion-button (if @expanded? "▼ " "▶ ")]]
|
[:button.expansion-button (if @expanded? "▼ " "▶ ")]]
|
||||||
|
|
|
@ -133,9 +133,7 @@
|
||||||
:gap "7px"
|
:gap "7px"
|
||||||
:align :end
|
:align :end
|
||||||
:height "50px"
|
:height "50px"
|
||||||
;; TODO: event tab
|
:children [(tab-button :event "Event")
|
||||||
:children [(when (:debug? opts)
|
|
||||||
(tab-button :event "Event"))
|
|
||||||
(tab-button :app-db "app-db")
|
(tab-button :app-db "app-db")
|
||||||
(tab-button :subs "Subs")
|
(tab-button :subs "Subs")
|
||||||
;(tab-button :views "Views")
|
;(tab-button :views "Views")
|
||||||
|
@ -151,7 +149,7 @@
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:size "auto"
|
:size "auto"
|
||||||
:style {:margin-left common/gs-19s
|
:style {:margin-left common/gs-19s
|
||||||
:overflow-y (if (contains? #{:timing :debug} @selected-tab)
|
:overflow-y (if (contains? #{:timing :debug :event} @selected-tab)
|
||||||
"auto" "initial")
|
"auto" "initial")
|
||||||
;:overflow "auto" ;; TODO: Might have to put this back or add scrolling within the panels
|
;:overflow "auto" ;; TODO: Might have to put this back or add scrolling within the panels
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,50 @@
|
||||||
(ns day8.re-frame.trace.view.event
|
(ns day8.re-frame.trace.view.event
|
||||||
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
||||||
[day8.re-frame.trace.metamorphic :as metam]))
|
[day8.re-frame.trace.metamorphic :as metam]
|
||||||
|
[day8.re-frame.trace.view.components :as components]
|
||||||
|
[day8.re-frame.trace.common-styles :as common]
|
||||||
|
[mranderson047.garden.v1v3v3.garden.units :as units]
|
||||||
|
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf])
|
||||||
|
(:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||||
|
|
||||||
|
(def pod-border-color "#daddde")
|
||||||
|
(def pod-border-edge (str "1px solid " pod-border-color))
|
||||||
|
(def border-radius "3px")
|
||||||
|
|
||||||
|
(def event-styles
|
||||||
|
[:#--re-frame-trace--
|
||||||
|
[:.event-panel
|
||||||
|
{:padding "39px 19px 0px 0px"}]
|
||||||
|
[:.event-section]
|
||||||
|
[:.event-section--header
|
||||||
|
{:background-color common/navbar-tint-lighter
|
||||||
|
:color common/navbar-text-color
|
||||||
|
:height common/gs-19
|
||||||
|
:font-size "14px"
|
||||||
|
:padding [[0 common/gs-12]]
|
||||||
|
}]
|
||||||
|
[:.event-section--data
|
||||||
|
{:background-color "rgba(100, 255, 100, 0.08)"
|
||||||
|
:padding-left (units/px- common/gs-12 common/expansion-button-horizontal-padding)
|
||||||
|
:overflow-x "auto"}]
|
||||||
|
])
|
||||||
|
|
||||||
|
(defn event-section [title data]
|
||||||
|
[rc/v-box
|
||||||
|
:class "event-section"
|
||||||
|
:children
|
||||||
|
[[rc/h-box
|
||||||
|
:class "event-section--header app-db-path--header"
|
||||||
|
:align :center
|
||||||
|
:children [[:h2 title]]]
|
||||||
|
|
||||||
|
[components/simple-render data [title] "event-section--data app-db-path--pod-border"]]])
|
||||||
|
|
||||||
(defn render []
|
(defn render []
|
||||||
|
(let [event-trace @(rf/subscribe [:epochs/current-event-trace])]
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:padding "12px 0px"
|
:class "event-panel"
|
||||||
:children [[rc/label :label "Event"]
|
:gap common/gs-19s
|
||||||
[rc/label :label "Dispatch Point"]
|
:children [[event-section "Coeffects" (get-in event-trace [:tags :coeffects])]
|
||||||
[rc/label :label "Coeffects"]
|
[event-section "Effects" (get-in event-trace [:tags :effects])]
|
||||||
[rc/label :label "Effects"]
|
[event-section "Interceptors" (get-in event-trace [:tags :interceptors])]]]))
|
||||||
[rc/label :label "Interceptors"]
|
|
||||||
|
|
||||||
[rc/h-box
|
|
||||||
:children [[:p "Subs Run"] [:p "Created"] [:p "Destroyed"]]]
|
|
||||||
[:p "Views Rendered"]
|
|
||||||
[rc/h-box
|
|
||||||
:children [[:p "Timing"] [:p "Animation Frames"]]]
|
|
||||||
]])
|
|
||||||
|
|
Loading…
Reference in New Issue