Store path inspections in app-db

- Add middleware to save to localstorage

src/day8/re_frame/trace/db.cljs

@@ -7,7 +7,7 @@
         show-panel? (localstorage/get "show-panel" false)
         selected-tab (localstorage/get "selected-tab" :event)
         filter-items (localstorage/get "filter-items" [])
-        app-db-paths (localstorage/get "app-db-paths" '())
+        app-db-paths (into (sorted-map) (localstorage/get "app-db-paths" {}))
         json-ml-paths (localstorage/get "app-db-json-ml-expansions" #{})
         external-window? (localstorage/get "external-window?" false)
         using-trace? (localstorage/get "using-trace?" true)

src/day8/re_frame/trace/events.cljs

@@ -274,14 +274,63 @@
 
 ;; App DB
 
-(rf/reg-event-db
+(def app-db-path-mw
-  :app-db/paths
+  [(rf/path [:app-db :paths]) (rf/after #(localstorage/save! "app-db-paths" %))])
-  (fn [db [_ paths]]
-    (let [new-paths (into [] paths)]                        ;; Don't use sets, use vectors
-      (localstorage/save! "app-db-paths" paths)
-      (assoc-in db [:app-db :paths] paths))))
 
 (rf/reg-event-db
+  :app-db/create-path
+  app-db-path-mw
+  (fn [paths _]
+    (assoc paths (js/Date.now) {:diff? false :open? true :path []})))
+
+(rf/reg-event-db
+  :app-db/update-path
+  app-db-path-mw
+  (fn [paths [_ path-id path-str]]
+    (try
+      (let [cleaned-path path-str
+            trimmed-path (str/trim path-str)
+            cleaned-path (if (str/starts-with? trimmed-path "[")
+                           cleaned-path
+                           (str "[" cleaned-path))
+            cleaned-path (if (str/ends-with? trimmed-path "]")
+                           cleaned-path
+                           (str "]" cleaned-path))]
+        (assoc-in paths [path-id :path] (cljs.tools.reader.edn/read-string cleaned-path)))
+      (catch :default e
+        paths))))
+
+(rf/reg-event-db
+  :app-db/set-path-visibility
+  app-db-path-mw
+  (fn [paths [_ path-id open?]]
+    (assoc-in paths [path-id :open?] open?)))
+
+(rf/reg-event-db
+  :app-db/set-diff-visibility
+  app-db-path-mw
+  (fn [paths [_ path-id diff?]]
+    (let [open? (if diff?
+                  true
+                  (get-in paths [path-id :open?]))]
+      (-> paths
+          (assoc-in [path-id :diff?] diff?)
+          ;; If we turn on diffing then we want to also expand the path
+          (assoc-in [path-id :open?] open?)))))
+
+(rf/reg-event-db
+  :app-db/remove-path
+  app-db-path-mw
+  (fn [paths [_ path-id]]
+    (dissoc paths path-id)))
+
+(rf/reg-event-db
+  :app-db/paths
+  app-db-path-mw
+  (fn [db [_ paths]]
+    paths))
+
+#_(rf/reg-event-db
   :app-db/remove-path
   (fn [db [_ path]]
     (let [new-db (update-in db [:app-db :paths] #(remove (fn [p] (= p path)) %))]
@@ -289,7 +338,7 @@
       ;; TODO: remove from json-ml expansions too.
       new-db)))
 
-(rf/reg-event-db
+#_(rf/reg-event-db
   :app-db/add-path
   (fn [db _]
     (let [search-string (get-in db [:app-db :search-string])

src/day8/re_frame/trace/subs.cljs

@@ -57,7 +57,8 @@
   :app-db/paths
   :<- [:app-db/root]
   (fn [app-db-settings _]
-    (get app-db-settings :paths)))
+    (map #(assoc (val %) :id (key %))
+         (get app-db-settings :paths))))
 
 (rf/reg-sub
   :app-db/search-string

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

@@ -123,7 +123,7 @@
                  :label [rc/v-box
                          :align :center
                          :children ["+ path inspector"]]
-                 :on-click #(add-pod)]
+                 :on-click #(rf/dispatch [:app-db/create-path])]
                 [rc/h-box
                  :align :center
                  :gap common/gs-7s
@@ -168,7 +168,7 @@
                :class "noselect"
                :style {:cursor "pointer"}
                :attr {:title    (str (if open? "Close" "Open") " the pod bay doors, HAL")
-                      :on-click (rc/handler-fn (update-pod-field id :open? (not open?)))}
+                      :on-click #(rf/dispatch [:app-db/set-path-visibility id (not open?)])}
                :child [rc/box
                        :margin "auto"
                        :child [:span.arrow (if open? "▼" "▶")]]]
@@ -181,7 +181,7 @@
                                    :width   "-webkit-fill-available"} ;; This took a bit of finding!
                            :width "100%"
                            :model (pr-str path)
-                           :on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
+                           :on-change #(rf/dispatch [:app-db/update-path id %]) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
                            :on-submit #()                   ;; #(rf/dispatch [:app-db/add-path %])
                            :change-on-blur? false
                            :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]]
@@ -189,7 +189,7 @@
               [rc/box
                :class "app-db-path--button bm-muted-button noselect"
                :attr {:title    "Show diff"
-                      :on-click (rc/handler-fn (update-pod-field id :diff? (not diff?)))}
+                      :on-click #(rf/dispatch [:app-db/set-diff-visibility id (not diff?)])}
                :child [:img
                        {:src   (str "data:image/svg+xml;utf8," copy)
                         :style {:width  "19px"
@@ -198,7 +198,7 @@
               [rc/box
                :class "app-db-path--button bm-muted-button noselect"
                :attr {:title    "Remove this pod"
-                      :on-click (rc/handler-fn (delete-pod id))}
+                      :on-click #(rf/dispatch [:app-db/remove-path id])}
                :child [:img
                        {:src   (str "data:image/svg+xml;utf8," trash)
                         :style {:width  "13px"
@@ -284,13 +284,14 @@
                :label "add inspectors to show what happened to app-db"]]])
 
 (defn pod-section []
-  [rc/v-box
+  (let [pods @(rf/subscribe [:app-db/paths])]
-   :gap pod-gap
+    [rc/v-box
-   :children (if (empty? @*pods)
+     :gap pod-gap
-               [[no-pods]]
+     :children (if (empty? pods)
-               (doall (for [p @*pods]
+                 [[no-pods]]
-                        ^{:key (:id @*pods)}
+                 (doall (for [p pods]
-                        [pod p])))])
+                          ^{:key (:id pods)}
+                          [pod p])))]))
 
 ;; TODO: OLD UI - REMOVE
 (defn original-render [app-db]
@@ -317,23 +318,7 @@
         ;   [:div.input-error {:style {:color "red" :margin-top 5}}
         ;    "Please enter a valid path."])]]
 
-        [rc/h-box
+
-         :children [[:img.nav-icon
-                     {:title    "Load app-db snapshot"
-                      :class    (when-not @snapshot-ready? "inactive")
-                      :src      (str "data:image/svg+xml;utf8,"
-                                     (if @snapshot-ready?
-                                       reload
-                                       reload-disabled))
-                      :on-click #(when @snapshot-ready? (rf/dispatch-sync [:snapshot/load-snapshot]))}]
-                    [:img.nav-icon
-                     {:title    "Snapshot app-db"
-                      :class    (when @snapshot-ready? "active")
-                      :src      (str "data:image/svg+xml;utf8,"
-                                     (if @snapshot-ready?
-                                       snapshot-ready
-                                       snapshot))
-                      :on-click #(rf/dispatch-sync [:snapshot/save-snapshot])}]]]
 
         [:div.subtrees {:style {:margin "20px 0"}}
          (doall
@@ -363,7 +348,4 @@
    :style {:margin-right common/gs-19s}
    :children [[panel-header]
               [pod-section]
-              [rc/gap-f :size pod-gap]
+              [rc/gap-f :size pod-gap]]])
-
-              ;; TODO: OLD UI - REMOVE
-              #_[original-render app-db]]])