Inspect paths into app-db and enable before/after app-db

README.md

@@ -83,6 +83,19 @@ If you are using leiningen, modify `project.clj` in the following ways. When puz
 
 - When the panel is closed, tracing is disabled.
 
+## Use Cases
+
+### app-db
+
+* Inspect a portion of app-db's state with the path inspector, allowing you to focus on just the parts you care about.
+* Reset app-db to before an event was run to run it again, instead of resetting the whole application
+* Toggle app-db before and after states for running an event, to inspect UI changes. 
+
+### Timing
+
+* Answer the question "Why is my app slow when it runs this event?"
+* See whether time is spent in processing an event, or rendering the changes 
+
 ## Troubleshooting
 
 * Try a `lein clean`

src/day8/re_frame/trace.cljs

@@ -93,8 +93,6 @@
                                    :operation (last (str/split name #" > "))}
                                   (real-renderer c)))))
 
-
-
     (set! reagent.impl.component/static-fns static-fns)
 
     (set! reagent.impl.component/custom-wrapper

src/day8/re_frame/trace/events.cljs

@@ -328,18 +328,11 @@
       (localstorage/save! "app-db-json-ml-expansions" new-paths)
       new-paths)))
 
-(rf/reg-event-db
-  :snapshot/save-snapshot
-  [(rf/path [:snapshot])]
-  (fn [snapshot _]
-    (assoc snapshot :current-snapshot @re-frame.db/app-db)))
-
 (rf/reg-event-db
   :snapshot/load-snapshot
-  [(rf/path [:snapshot])]
-  (fn [snapshot _]
-    (reset! re-frame.db/app-db (:current-snapshot snapshot))
-    snapshot))
+  (fn [db [_ new-db]]
+    (reset! re-frame.db/app-db new-db)
+    db))
 
 ;;;
 

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

@@ -28,7 +28,8 @@
 (def *pods (r/atom [{:id (gensym) :path "[\"x\" \"y\"]" :open? true :diff? true}
                     {:id (gensym) :path "[:abc 123]" :open? true :diff? false}
                     {:id (gensym) :path "[:a :b :c]" :open? false :diff? true}
-                    {:id (gensym) :path "[\"hello\"]" :open? false :diff? false}]))
+                    {:id (gensym) :path "[\"hello\"]" :open? false :diff? false}
+                    {:id (gensym) :path [:boot-state] :open? true :diff? true}]))
 
 (defn add-pod []
   (let [id (gensym)]
@@ -52,6 +53,8 @@
 ;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
 
 (defn panel-header []
+  (let [app-db-after  (rf/subscribe [:app-db/current-epoch-app-db-after])
+        app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before]) ]
     [rc/h-box
      :justify :between
      :align :center
@@ -80,7 +83,7 @@
                              :label [rc/v-box
                                      :align :center
                                      :children ["initial epoch state"]]
-                           :on-click #(println "Clicked [initial state]")]
+                             :on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-before])]
                             [rc/v-box
                              :width common/gs-81s
                              :align :center
@@ -99,7 +102,7 @@
                              :label [rc/v-box
                                      :align :center
                                      :children ["end epoch state"]]
-                           :on-click #(println "Clicked [end state]")]]]]])
+                             :on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-after])]]]]]))
 
 (defn pod-header [{:keys [id path open? diff?]}]
   [rc/h-box
@@ -129,7 +132,7 @@
                                    :padding (css-join "0px" common/gs-7s)
                                    :width   "-webkit-fill-available"} ;; This took a bit of finding!
                            :width "100%"
-                           :model path
+                           :model (pr-str path)
                            :on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
                            :on-submit #()                   ;; #(rf/dispatch [:app-db/add-path %])
                            :change-on-blur? false
@@ -169,7 +172,8 @@
         app-db-after  (rf/subscribe [:app-db/current-epoch-app-db-after])
         app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before])
         [diff-before diff-after _] (when render-diff?
-                                     (clojure.data/diff @app-db-before @app-db-after))]
+                                     (clojure.data/diff (get-in @app-db-before path)
+                                                        (get-in @app-db-after path)))]
     [rc/v-box
      :class "app-db-path"
      :style {:border-bottom-left-radius  "3px"
@@ -183,7 +187,7 @@
                            :padding          common/gs-7s
                            :margin           (css-join pad-padding pad-padding "0px" pad-padding)}
                    :children [[components/simple-render
-                               @app-db-after
+                               (get-in @app-db-after path)
 
                                #_{:todos [1 2 3]}
                                #_(get-in @app-db path)
@@ -240,7 +244,7 @@
                              :padding          common/gs-7s
                              :margin           (css-join "0px" pad-padding)}
                      :children [[components/simple-render
-                                 diff-before]]]))
+                                 diff-after]]]))
                 (when open?
                   [rc/gap-f :size pad-padding])]]))