Improvements to the previous and next arrows

- Disable when there are no more events
- Automatically pause when changing epoch

src/day8/re_frame/trace/events.cljs

@@ -119,7 +119,9 @@
 (rf/reg-event-db
   :settings/play
   (fn [db _]
-    (assoc-in db [:settings :paused?] false)))
+    (-> db
+        (assoc-in [:settings :paused?] false)
+        (assoc-in [:epochs :current-epoch-index] nil))))
 
 ;; Global
 
@@ -347,17 +349,19 @@
   (fn [matches [_ rt]]
     (:matches rt)))
 
-(rf/reg-event-db
+(rf/reg-event-fx
   :epochs/previous-epoch
   [(rf/path [:epochs :current-epoch-index])]
-  (fn [index _]
+  (fn [ctx _]
-    ((fnil dec 0) index)))
+    {:db ((fnil dec 0) (:db ctx))
+     :dispatch [:settings/pause]}))
 
-(rf/reg-event-db
+(rf/reg-event-fx
   :epochs/next-epoch
   [(rf/path [:epochs :current-epoch-index])]
-  (fn [index _]
+  (fn [ctx _]
-    ((fnil inc 0) index)))
+    {:db ((fnil inc 0) (:db ctx))
+     :dispatch [:settings/pause]}))
 
 (rf/reg-event-db
   :traces/update-traces

src/day8/re_frame/trace/styles.cljs

@@ -305,6 +305,8 @@
                   :padding          (px 5)
                   :cursor           "pointer"
                   :user-select      "none"}]
+    [:span.arrow__disabled {:color common/disabled-background-color
+                            :cursor "auto"}]
     [:span.event-header {:color            common/text-color
                          :background-color common/standard-background-color
                          :padding          (px 5)

src/day8/re_frame/trace/subs.cljs

@@ -141,14 +141,19 @@
     (:epochs db)))
 
 (rf/reg-sub
-  :epochs/current-event
+  :epochs/current-match
   :<- [:epochs/epoch-root]
   (fn [epochs _]
-    (let [matches (:matches epochs)
+    (let [matches       (:matches epochs)
           current-index (:current-epoch-index epochs)
-          match (nth matches (+ (count matches) (or current-index 0)) (last matches))
+          match         (nth matches (+ (count matches) (or current-index 0)) (last matches))]
-          event (get-in (metam/matched-event match) [:tags :event])]
+      match)))
-      event)))
+
+(rf/reg-sub
+  :epochs/current-event
+  :<- [:epochs/current-match]
+  (fn [match _]
+    (get-in (metam/matched-event match) [:tags :event])))
 
 (rf/reg-sub
   :epochs/number-of-matches
@@ -171,17 +176,27 @@
 
 (rf/reg-sub
   :epochs/beginning-trace-id
-  :<- [:epochs/epoch-root]
+  :<- [:epochs/current-match]
-  (fn [epochs]
+  (fn [match]
-    ;; TODO: make it use the real match
+    (:id (first match))))
-    (let [match (last (:matches epochs))]
-      (:id (first match)))))
 
 (rf/reg-sub
   :epochs/ending-trace-id
-  :<- [:epochs/epoch-root]
+  :<- [:epochs/current-match]
-  (fn [epochs]
+  (fn [match]
-    ;; TODO: make it use the real match
+    (:id (last match))))
-    (let [match (last (:matches epochs))]
-      (:id (last match)))))
 
+(rf/reg-sub
+  :epochs/older-epochs-available?
+  :<- [:epochs/current-event-index]
+  :<- [:epochs/number-of-matches]
+  (fn [[current total]]
+    (pos? (+ current total -1))))
+
+(rf/reg-sub
+  :epochs/newer-epochs-available?
+  :<- [:epochs/current-event-index]
+  :<- [:epochs/number-of-matches]
+  (fn [[current total]]
+    (and (not (zero? current))
+         (some? current))))

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

@@ -77,16 +77,23 @@
    [right-hand-buttons external-window?]])
 
 (defn standard-header [external-window?]
-  (let [current-event @(rf/subscribe [:epochs/current-event])]
+  (let [current-event @(rf/subscribe [:epochs/current-event])
+        older-epochs-available? @(rf/subscribe [:epochs/older-epochs-available?])
+        newer-epochs-available? @(rf/subscribe [:epochs/newer-epochs-available?])]
     [[rc/h-box
       :align    :center
       :size     "auto"
       :gap      common/gs-12s
-      :children [[:span.arrow {:on-click #(rf/dispatch [:epochs/previous-epoch])} "◀"]
+      :children [[:span.arrow (if older-epochs-available?
+                                {:on-click #(rf/dispatch [:epochs/previous-epoch])}
+                                {:class "arrow__disabled"}) "◀"]
                  [rc/v-box
                   :size "auto"
                   :children [[:span.event-header (prn-str current-event)]]]
-                 [:span.arrow {:on-click #(rf/dispatch [:epochs/next-epoch])} "▶"]]]
+                 [:span.arrow (if newer-epochs-available?
+                                {:on-click #(rf/dispatch [:epochs/next-epoch])}
+                                {:class "arrow__disabled"})
+                  "▶"]]]
      [rc/gap-f :size common/gs-12s]
      [rc/line :size "2px" :color common/sidebar-heading-divider-color]
      [right-hand-buttons external-window?]])