Update timing panel

src/day8/re_frame/trace/common_styles.cljs

@@ -50,6 +50,12 @@
 (def sub-re-run-color "#219653")
 (def sub-not-run-color "#bdbdbd")
 
+(defn panel-style
+  ([border-radius]
+   {:background-color "#fafbfc"
+    :border           "1px solid #e3e9ed"
+    :border-radius    border-radius
+    :padding          [[0 gs-12s]]}))
 
 ;; The colors defined below are (of course) available to your app without further ado
 ;;

src/day8/re_frame/trace/metamorphic.cljc

@@ -75,13 +75,13 @@
   (and (fsm-trigger? event)
        (= (:operation event)
           [:scheduled :run-queue])))
-;
+
 (defn request-animation-frame? [event]
   (= :raf (:op-type event)))
-;
-;(defn request-animation-frame-end? [event history pattern-sequence pattern]
-;  (= :raf-end (:op-type event)))
-;
+
+(defn request-animation-frame-end? [event]
+  (= :raf-end (:op-type event)))
+
 (defn summarise-event [ev]
   (-> ev
       (dissoc :start :duration :end :child-of)

src/day8/re_frame/trace/subs.cljs

@@ -237,10 +237,28 @@
       (metam/elapsed-time start-of-epoch end-of-epoch))))
 
 (rf/reg-sub
-  :timing/animation-frame-count
+  :timing/animation-frame-traces
   :<- [:traces/current-event-traces]
   (fn [traces]
-    (count (filter metam/request-animation-frame? traces))))
+    (filter #(or (metam/request-animation-frame? %)
+                 (metam/request-animation-frame-end? %))
+            traces)))
+
+(rf/reg-sub
+  :timing/animation-frame-count
+  :<- [:timing/animation-frame-traces]
+  (fn [frame-traces]
+    (count (filter metam/request-animation-frame? frame-traces))))
+
+(rf/reg-sub
+  :timing/animation-frame-time
+  :<- [:timing/animation-frame-traces]
+  (fn [frame-traces [_ frame-number]]
+    (let [frames (partition 2 frame-traces)
+          [start end] (first (drop (dec frame-number) frames))]
+      (metam/elapsed-time start end))))
+
+
 
 (rf/reg-sub
   :timing/event-processing-time

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

@@ -73,6 +73,8 @@
      :font-size       "11px"
      :margin-bottom   "2px"}]
 
+   [:.app-db-panel (common/panel-style border-radius)]
+
    [:.app-db-panel-button
     {:width   "129px"
      :padding "0px"}]
@@ -103,13 +105,10 @@
                          :children ["+ path inspector"]]
                  :on-click #(rf/dispatch [:app-db/create-path])]
                 [rc/h-box
+                 :class "app-db-panel"
                  :align :center
                  :gap common/gs-7s
                  :height "48px"
-                 :padding (css-join "0px" common/gs-12s)
-                 :style {:background-color "#fafbfc"
-                         :border           "1px solid #e3e9ed"
-                         :border-radius    border-radius}
                  :children [[rc/label :label "reset app-db to:"]
                             [rc/button
                              :class "bm-muted-button app-db-panel-button"

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

@@ -22,7 +22,30 @@
    [:ol
     {"-webkit-padding-start" "20px"}]
    [:li
-    {:margin "0 0 1em 0"}]])
+    {:margin "0 0 1em 0"}]
+
+   [".rft-tag__timing"
+    {:background-color common/disabled-background-color
+     :border           (str "1px solid " common/border-line-color)
+     :font-weight      "normal"
+     :font-size        "14px"}]
+
+   [".timing-part-panel"
+    (merge (common/panel-style "3px")
+           {:padding "12px"})]
+
+   ])
+
+(defn timing-tag [label]
+  [components/tag "rft-tag__timing" label])
+
+(defn timing-section
+  [label time]
+  [rc/v-box
+   :align :center
+   :gap "3px"
+   :children [[rc/label :class "bm-textbox-label" :label label]
+              [timing-tag (str time "ms")]]])
 
 (defn render []
   (let [timing-data-available? @(rf/subscribe [:timing/data-available?])]
@@ -31,30 +54,27 @@
        :class "timing-details"
        :children [
                   [rc/h-box
+                   :gap common/gs-12s
+                   :class "timing-part-panel"
                    :children
-                   [[rc/label :label "Total"]
-                    [components/tag "grey" (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
-                    [rc/label :label "Event"]
-                    [components/tag "grey" (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
+                   [[timing-section "total" @(rf/subscribe [:timing/total-epoch-time])]
+                    [timing-section "event" @(rf/subscribe [:timing/event-processing-time])]
                     ]]
-                  (for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))]
+                  (for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))
+                        :let [frame-time (rf/subscribe [:timing/animation-frame-time frame])]]
                     (list
                       ^{:key (str "af-line" frame)}
                       [rc/line :class "timing-details--line"]
                       ^{:key (str "af" frame)}
                       [rc/h-box
+                       :align :center
+                       :class "timing-part-panel"
+                       :gap "25px"
                        :children
-                       [[rc/label :label (str "AF #" frame)]
-                        "Subs"
-                        "2ms"
-                        "Views"
-                        "2ms"
-
-
-                        ]]))
-                  ;[rc/label :label "Animation Frames"]
-                  ;[rc/label :label "Render/Subscription time"]
-                  ;[rc/label :label (str @(rf/subscribe [:timing/render-time]) "ms")]
+                       [[rc/label :label (str "Animation frame #" frame)]
+                        [timing-section "total" @frame-time]
+                      #_  [timing-section "subs" 2]
+                      #_  [timing-section "views" 3]]]))
 
                   [rc/line :class "timing-details--line"]