status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add new event panel

This commit is contained in:
Daniel Compton 2018-01-29 22:54:22 +13:00
parent 6465a09d08
commit 7efeb61208
8 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. This change
### 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.
* 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.
@ -20,7 +21,7 @@ All notable changes to this project will be documented in this file. This change
* External windows not loading
* All app-db and subscription path expansions are now independent of each other [#134](https://github.com/Day8/re-frame-trace/issues/134).
* Layer 2/3 calculations are more accurate now. We now use the last seen layer level when a subscription runs, to inform it's layer level if it was created or destroyed.
* View namespaces that are ignored are no longer shown when showing traces for all epochs.
* View namespaces that are ignored are no longer shown when showing traces for all epochs.

3
src/day8/re_frame/trace/common_styles.cljs
View File

@ -50,6 +50,8 @@
(def sub-re-run-color "#219653")
(def sub-not-run-color "#bdbdbd")
(def expansion-button-horizontal-padding (px 2))
(defn panel-style
([border-radius]
{:background-color "#fafbfc"
@ -128,6 +130,7 @@
(def sidebar-item-check-color strong-button-background-color)
(def sidebar-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-text-color "white")

3
src/day8/re_frame/trace/metamorphic.cljc
View File

@ -85,8 +85,7 @@
(defn summarise-event [ev]
(-> ev
(dissoc :start :duration :end :child-of)
(utils/dissoc-in [:tags :app-db-before])
(utils/dissoc-in [:tags :app-db-after])))
(update :tags dissoc :app-db-before :app-db-after :effects :coeffects)))
(defn summarise-match [match]

9
src/day8/re_frame/trace/styles.cljs
View File

@ -9,7 +9,8 @@
[day8.re-frame.trace.view.app-db :as app-db]
[cljs.spec.alpha :as spec]
[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-hint common/background-gray-hint)
@ -408,12 +409,13 @@
[:.toggle {:color text-color-muted
:cursor "pointer"
:line-height 1}]
["> span" {:vertical-align "text-top"}]]
["> span" {:vertical-align "text-top"}]
[:li {:margin 0}]]
[:.host-closed {:font-size (em 4)
:background-color (color/rgba 255 255 0 0.8)}]
[:.expansion-button {:font-family "sans-serif"
:width (px 16)
:padding "0 2px"
:padding [[0 common/expansion-button-horizontal-padding]]
:vertical-align "middle"}]
[:.bm-muted-button {:font-size "14px"
:height "23px"
@ -433,6 +435,7 @@
re-frame-trace-styles
app-db/app-db-styles
timing/timing-styles
event/event-styles
settings/settings-styles]))
;(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css"))

2
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -46,7 +46,7 @@
:border-bottom-right-radius border-radius}]
[:.app-db-path--header
{:background-color "#797B7B" ; Name this navbar tint-lighter
{:background-color common/navbar-tint-lighter
:color "white"
:height common/gs-31
:border-top-left-radius border-radius

5
src/day8/re_frame/trace/view/components.cljs
View File

@ -209,12 +209,13 @@
(nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
@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])]
(fn [data]
[:div
{:class (str/join " " ["re-frame-trace--object"
(when @expanded? "expanded")])}
(when @expanded? "expanded")
class])}
#_[:span {:class "toggle"
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
[:button.expansion-button (if @expanded? "▼ " "▶ ")]]

6
src/day8/re_frame/trace/view/container.cljs
View File

@ -133,9 +133,7 @@
:gap "7px"
:align :end
:height "50px"
;; TODO: event tab
:children [(when (:debug? opts)
(tab-button :event "Event"))
:children [(tab-button :event "Event")
(tab-button :app-db "app-db")
(tab-button :subs "Subs")
;(tab-button :views "Views")
@ -151,7 +149,7 @@
[rc/v-box
:size "auto"
: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")
;:overflow "auto" ;; TODO: Might have to put this back or add scrolling within the panels
}

61
src/day8/re_frame/trace/view/event.cljs
View File

@ -1,19 +1,50 @@
(ns day8.re-frame.trace.view.event
(: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 []
[rc/v-box
:padding "12px 0px"
:children [[rc/label :label "Event"]
[rc/label :label "Dispatch Point"]
[rc/label :label "Coeffects"]
[rc/label :label "Effects"]
[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"]]]
]])
(let [event-trace @(rf/subscribe [:epochs/current-event-trace])]
[rc/v-box
:class "event-panel"
:gap common/gs-19s
:children [[event-section "Coeffects" (get-in event-trace [:tags :coeffects])]
[event-section "Effects" (get-in event-trace [:tags :effects])]
[event-section "Interceptors" (get-in event-trace [:tags :interceptors])]]]))