Add new event panel

CHANGELOG.md

@@ -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.
 
 
 

src/day8/re_frame/trace/common_styles.cljs

@@ -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")

src/day8/re_frame/trace/metamorphic.cljc

@@ -85,8 +85,7 @@
 (defn summarise-event [ev]
   (-> ev
       (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]

src/day8/re_frame/trace/styles.cljs

@@ -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"))
 

src/day8/re_frame/trace/view/app_db.cljs

@@ -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

src/day8/re_frame/trace/view/components.cljs

@@ -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? "▼ " "▶ ")]]

src/day8/re_frame/trace/view/container.cljs

@@ -133,9 +133,7 @@
                     :gap      "7px"
                     :align    :end
                     :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 :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
               }

src/day8/re_frame/trace/view/event.cljs

@@ -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
+  (let [event-trace @(rf/subscribe [:epochs/current-event-trace])]
-   :padding "12px 0px"
+    [rc/v-box
-   :children [[rc/label :label "Event"]
+     :class "event-panel"
-              [rc/label :label "Dispatch Point"]
+     :gap common/gs-19s
-              [rc/label :label "Coeffects"]
+     :children [[event-section "Coeffects" (get-in event-trace [:tags :coeffects])]
-              [rc/label :label "Effects"]
+                [event-section "Effects" (get-in event-trace [:tags :effects])]
-              [rc/label :label "Interceptors"]
+                [event-section "Interceptors" (get-in event-trace [:tags :interceptors])]]]))
-
-              [rc/h-box
-               :children [[:p "Subs Run"] [:p "Created"] [:p "Destroyed"]]]
-              [:p "Views Rendered"]
-              [rc/h-box
-               :children [[:p "Timing"] [:p "Animation Frames"]]]
-              ]])