Handle path-str changes from the user

src/day8/re_frame/trace/events.cljs

@@ -281,24 +281,46 @@
   :app-db/create-path
   app-db-path-mw
   (fn [paths _]
-    (assoc paths (js/Date.now) {:diff? false :open? true :path []})))
+    (assoc paths (js/Date.now) {:diff? false :open? true :path nil :path-str "[]" :valid-path? true})))
+
+(defn read-string-maybe [s]
+  (try (cljs.tools.reader.edn/read-string s)
+       (catch :default e
+         nil)))
+
+;; The core idea with :app-db/update-path and :app-db/update-path-blur
+;; is that we need to separate the users text input (`path-str`) with the
+;; parsing of that string (`path`). We let the user type any string that
+;; they like, and check it for validity on each change. If it is valid
+;; then we update `path` and mark the pod as valid. If it isn't valid then
+;; we don't update `path` and mark the pod as invalid.
+;;
+;; On blur of the input, we reset path-str to the last valid path, if
+;; the pod isn't currently valid.
 
 (rf/reg-event-db
   :app-db/update-path
   app-db-path-mw
   (fn [paths [_ path-id path-str]]
-    (try
+    (let [path  (read-string-maybe path-str)
-      (let [cleaned-path path-str
+          paths (assoc-in paths [path-id :path-str] path-str)]
-            trimmed-path (str/trim path-str)
+      (if (or (and (some? path)
-            cleaned-path (if (str/starts-with? trimmed-path "[")
+                   (sequential? path))
-                           cleaned-path
+              (str/blank? path-str))
-                           (str "[" cleaned-path))
+        (-> paths
-            cleaned-path (if (str/ends-with? trimmed-path "]")
+            (assoc-in [path-id :path] path)
-                           cleaned-path
+            (assoc-in [path-id :valid-path?] true))
-                           (str "]" cleaned-path))]
+        (assoc-in paths [path-id :valid-path?] false)))))
-        (assoc-in paths [path-id :path] (cljs.tools.reader.edn/read-string cleaned-path)))
+
-      (catch :default e
+(rf/reg-event-db
-        paths))))
+  :app-db/update-path-blur
+  app-db-path-mw
+  (fn [paths [_ path-id]]
+    (let [{:keys [valid-path? path]} (get paths path-id)]
+      (if valid-path?
+        paths
+        (-> (assoc-in paths [path-id :path-str] (pr-str path))
+            (assoc-in [path-id :valid-path?] true))))))
 
 (rf/reg-event-db
   :app-db/set-path-visibility

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

@@ -157,7 +157,7 @@
                                      :children ["end epoch state"]]
                              :on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-after])]]]]]))
 
-(defn pod-header [{:keys [id path open? diff?]}]
+(defn pod-header [{:keys [id path path-str open? diff?]}]
   [rc/h-box
    :class (str "app-db-path--header " (when-not open? "app-db-path--header__closed"))
    :align :center
@@ -176,11 +176,12 @@
                :class "app-db-path--path-header"
                :size "auto"
                :children [[rc/input-text
+                           :attr {:on-blur (fn [e] (rf/dispatch [:app-db/update-path-blur id]))}
                            :style {:height  "25px"
                                    :padding (css-join "0px" common/gs-7s)
                                    :width   "-webkit-fill-available"} ;; This took a bit of finding!
                            :width "100%"
-                           :model (pr-str path)
+                           :model path-str
                            :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