Use re-frame for settings and config

src/day8/re_frame/trace.cljs

@@ -5,6 +5,9 @@
             [day8.re-frame.trace.components.components :as components]
             [day8.re-frame.trace.utils.localstorage :as localstorage]
             [day8.re-frame.trace.panels.traces :as traces]
+            [day8.re-frame.trace.events]
+            [day8.re-frame.trace.subs]
+            [day8.re-frame.trace.db :as trace.db]
             [re-frame.trace :as trace :include-macros true]
             [re-frame.db :as db]
             [cljs.pprint :as pprint]
@@ -19,7 +22,8 @@
             [goog.object :as gob]
             [re-frame.interop :as interop]
 
-            [devtools.formatters.core :as devtools]))
+            [devtools.formatters.core :as devtools]
+            [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
 
 
 ;; from https://github.com/reagent-project/reagent/blob/3fd0f1b1d8f43dbf169d136f0f905030d7e093bd/src/reagent/impl/component.cljs#L274
@@ -165,8 +169,8 @@
   ;; Add clear button
   ;; Filter out different trace types
   (let [position             (r/atom :right)
-        panel-width%         (r/atom (localstorage/get "panel-width-ratio" 0.35))
+        panel-width%         (rf/subscribe [:settings/panel-width%])
-        showing?             (r/atom (localstorage/get "show-panel" false))
+        showing?             (rf/subscribe [:settings/show-panel?])
         dragging?            (r/atom false)
         pin-to-bottom?       (r/atom true)
         selected-tab         (r/atom (localstorage/get "selected-tab" :traces))
@@ -182,7 +186,7 @@
                                  (when (and (not entering-input?) combo-key?)
                                    (cond
                                      (and (= key "h") (.-ctrlKey e))
-                                     (do (swap! showing? not)
+                                     (do (rf/dispatch [:settings/toggle-panel])
                                          (toggle-traces showing?)
                                          (.preventDefault e))))))
         handle-mousemove     (fn [e]
@@ -191,22 +195,9 @@
                                        y                (.-clientY e)
                                        new-window-width js/window.innerWidth]
                                    (.preventDefault e)
-                                   ;; Set a minimum width of 5% to prevent people from accidentally dragging it too small.
+                                   (rf/dispatch [:settings/panel-width% (/ (- new-window-width x) new-window-width)])
-                                   (reset! panel-width% (max (/ (- new-window-width x) new-window-width) 0.05))
                                    (reset! window-width new-window-width))))
         handle-mouse-up      (fn [e] (reset! dragging? false))]
-    (add-watch panel-width%
-               :update-panel-width-ratio
-               (fn [_ _ _ new-state]
-                 (localstorage/save! "panel-width-ratio" new-state)))
-    (add-watch showing?
-               :update-show-panel
-               (fn [_ _ _ new-state]
-                 (localstorage/save! "show-panel" new-state)))
-    (add-watch selected-tab
-               :update-selected-tab
-               (fn [_ _ _ new-state]
-                 (localstorage/save! "selected-tab" new-state)))
     (r/create-class
       {:component-will-mount   (fn []
                                  (toggle-traces showing?)
@@ -240,9 +231,9 @@
                                       [:div.panel-content-top
                                        [:div.nav
                                         [:button {:class    (str "tab button " (when (= @selected-tab :traces) "active"))
-                                                  :on-click #(reset! selected-tab :traces)} "Traces"]
+                                                  :on-click #(rf/dispatch [:settings/selected-tab :traces])} "Traces"]
                                         [:button {:class    (str "tab button " (when (= @selected-tab :app-db) "active"))
-                                                  :on-click #(reset! selected-tab :app-db)} "App DB"]
+                                                  :on-click #(rf/dispatch [:settings/selected-tab :app-db])} "App DB"]
                                         #_[:button {:class    (str "tab button " (when (= @selected-tab :subvis) "active"))
                                                     :on-click #(reset! selected-tab :subvis)} "SubVis"]]]
                                       (case @selected-tab
@@ -283,3 +274,6 @@
 (defn inject-devtools! []
   (inject-styles)
   (r/render [devtools] (panel-div)))
+
+(defn init-db! []
+  (trace.db/init-db))

src/day8/re_frame/trace/db.cljs

@@ -0,0 +1,15 @@
+(ns day8.re-frame.trace.db
+  (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
+            [day8.re-frame.trace.utils.localstorage :as localstorage]))
+
+(defn init-db []
+  (let [panel-width% (localstorage/get "panel-width-ratio" 0.35)
+        show-panel? (localstorage/get "show-panel" false)
+        selected-tab (localstorage/get "selected-tab" :traces)
+        filter-items (localstorage/get "filter-items" [])
+        app-db-paths (localstorage/get "app-db-paths" #{})]
+    (rf/dispatch [:settings/panel-width% panel-width%])
+    (rf/dispatch [:settings/show-panel? show-panel?])
+    (rf/dispatch [:settings/selected-tab selected-tab])
+    (rf/dispatch [:traces/filter-items filter-items])
+    (rf/dispatch [:app-db/paths app-db-paths])))

src/day8/re_frame/trace/events.cljs

@@ -0,0 +1,38 @@
+(ns day8.re-frame.trace.events
+  (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
+            [day8.re-frame.trace.utils.localstorage :as localstorage]))
+
+(rf/reg-event-db
+  :settings/panel-width%
+  (fn [db [_ width%]]
+    (localstorage/save! "panel-width-ratio" (max width% 0.05))
+    (assoc-in db [:settings :panel-width%] (max width% 0.05))))
+
+(rf/reg-event-db
+  :settings/selected-tab
+  (fn [db [_ selected-tab]]
+    (localstorage/save! "selected-tab" selected-tab)
+    (assoc-in db [:settings :selected-tab] selected-tab)))
+
+(rf/reg-event-db
+  :settings/show-panel?
+  (fn [db [_ show-panel?]]
+    (localstorage/save! "show-panel" show-panel?)
+    (assoc-in db [:settings :show-panel?] show-panel?)))
+
+(rf/reg-event-db
+  :settings/toggle-panel
+  (fn [db _]
+    (let [show-panel? (not (get-in db [:settings :show-panel?]))]
+      (localstorage/save! "show-panel" show-panel?)
+      (assoc-in db [:settings :show-panel?] show-panel?))))
+
+(rf/reg-event-db
+  :traces/filter-items
+  (fn [db [_ filter-items]]
+    (assoc-in db [:traces :filter-items] filter-items)))
+
+(rf/reg-event-db
+  :app-db/paths
+  (fn [db [_ paths]]
+    (assoc-in db [:app-db :paths] paths)))

src/day8/re_frame/trace/preload.cljs

@@ -4,5 +4,6 @@
 
 ;; Use this namespace with the :preloads compiler option to perform the necessary setup for enabling tracing:
 ;; {:compiler {:preloads [day8.re-frame.trace.preload] ...}}
+(trace/init-db!)
 (trace/init-tracing!)
 (trace/inject-devtools!)

src/day8/re_frame/trace/subs.cljs

@@ -0,0 +1,17 @@
+(ns day8.re-frame.trace.subs
+  (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
+
+(rf/reg-sub
+  :settings/panel-width%
+  (fn [db _]
+    (get-in db [:settings :panel-width%])))
+
+(rf/reg-sub
+  :settings/show-panel?
+  (fn [db _]
+    (get-in db [:settings :show-panel?])))
+
+(rf/reg-sub
+  :settings/selected-tab
+  (fn [db _]
+    (get-in db [:settings :selected-tab])))