Add new state snapshotting feature

CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. This change
 
 ## [Unreleased]
 
+### Added
+
+* New state snapshotting feature: Click the camera to snapshot app-db, and click the load button to restore to your snapshot. 
+
 ### Changed
 
 * Switched from LESS to Garden styles. Now interactive development and debugging of re-frame-trace is even faster.

README.md

@@ -106,4 +106,6 @@ If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md).
 
 ## Citations
 
-[open](https://thenounproject.com/search/?q=popout&i=334227) by Bluetip Design from the Noun Project
+* [open](https://thenounproject.com/search/?q=popout&i=334227) by Bluetip Design from the Noun Project
+* [reload](https://thenounproject.com/adnen.kadri/collection/arrows/?i=798299) by Adnen Kadri from the Noun Project
+* [Camera](https://thenounproject.com/search/?q=snapshot&i=200965) by Christian Shannon from the Noun Project

resources/day8/re_frame/trace/images/open-external.svg

@@ -1,9 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" x="0px" y="0px">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 10 10" x="0px" y="0px">
-    <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"/>
+    <path fill="#444444" d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"/>
-    <text x="0" y="23" fill="#000000" font-size="5px" font-weight="bold"
-          font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design
-    </text>
-    <text x="0" y="28" fill="#000000" font-size="5px" font-weight="bold"
-          font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project
-    </text>
 </svg>

resources/day8/re_frame/trace/images/reload-disabled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+    <path  fill="#666666" d="M27.773,22.766c2.379-6.494-0.967-13.711-7.459-16.091c-4.11-1.506-8.5-0.707-11.777,1.721l1.483-6.743L7.09,1.009  l-1.946,8.85L4.5,12.79l2.93,0.646v-0.001l8.85,1.948l0.645-2.931l-6.794-1.494c2.514-1.963,5.943-2.642,9.152-1.466  c4.939,1.81,7.486,7.302,5.676,12.242c-1.811,4.938-7.302,7.484-12.242,5.675c-4.155-1.522-6.604-5.646-6.207-9.858l-2.896-1.06  c-0.918,5.798,2.354,11.64,8.07,13.735C18.178,32.604,25.395,29.259,27.773,22.766z"/>
+</svg>

resources/day8/re_frame/trace/images/reload.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+    <path  fill="#444444" d="M27.773,22.766c2.379-6.494-0.967-13.711-7.459-16.091c-4.11-1.506-8.5-0.707-11.777,1.721l1.483-6.743L7.09,1.009  l-1.946,8.85L4.5,12.79l2.93,0.646v-0.001l8.85,1.948l0.645-2.931l-6.794-1.494c2.514-1.963,5.943-2.642,9.152-1.466  c4.939,1.81,7.486,7.302,5.676,12.242c-1.811,4.938-7.302,7.484-12.242,5.675c-4.155-1.522-6.604-5.646-6.207-9.858l-2.896-1.06  c-0.918,5.798,2.354,11.64,8.07,13.735C18.178,32.604,25.395,29.259,27.773,22.766z"/>
+</svg>

resources/day8/re_frame/trace/images/snapshot-ready.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+    <g>
+        <g>
+            <path fill="#444444" d="M91.9,30.6H75.8l-10.2-14c-0.7-1-1.9-1.6-3.1-1.6H38.8c-1.2,0-2.4,0.6-3.1,1.6l-9.6,14H8.5c-1.9,0-3.5,1.6-3.5,3.5v49.4    c0,1.9,1.6,3.5,3.5,3.5h83.4c1.9,0,3.5-1.6,3.5-3.5V34.1C95.5,32.2,93.9,30.6,91.9,30.6z M88.4,80H12.1V37.6h16.8    c1.7,0,3.1-1.2,3.5-2.8l8.5-12.3h19.8l9,12.3c0.4,1.6,1.8,2.8,3.4,2.8h15.4V80z"/>
+            <g>
+                <path fill="#A66900" d="M50.2,73.9c-9.8,0-17.7-7.9-17.7-17.7s7.9-17.7,17.7-17.7s17.7,7.9,17.7,17.7S60,73.9,50.2,73.9z M50.2,46.1     c-5.6,0-10.1,4.5-10.1,10.1s4.5,10.1,10.1,10.1s10.1-4.5,10.1-10.1S55.8,46.1,50.2,46.1z"/>
+            </g>
+            <g>
+                <circle fill="#A66900" cx="79.8" cy="44.7" r="2.4"/></g>
+        </g>
+    </g>
+</svg>

resources/day8/re_frame/trace/images/snapshot.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+    <g>
+        <g>
+            <path fill="#444444" d="M91.9,30.6H75.8l-10.2-14c-0.7-1-1.9-1.6-3.1-1.6H38.8c-1.2,0-2.4,0.6-3.1,1.6l-9.6,14H8.5c-1.9,0-3.5,1.6-3.5,3.5v49.4    c0,1.9,1.6,3.5,3.5,3.5h83.4c1.9,0,3.5-1.6,3.5-3.5V34.1C95.5,32.2,93.9,30.6,91.9,30.6z M88.4,80H12.1V37.6h16.8    c1.7,0,3.1-1.2,3.5-2.8l8.5-12.3h19.8l9,12.3c0.4,1.6,1.8,2.8,3.4,2.8h15.4V80z"/>
+            <g>
+                <path fill="#444444" d="M50.2,73.9c-9.8,0-17.7-7.9-17.7-17.7s7.9-17.7,17.7-17.7s17.7,7.9,17.7,17.7S60,73.9,50.2,73.9z M50.2,46.1     c-5.6,0-10.1,4.5-10.1,10.1s4.5,10.1,10.1,10.1s10.1-4.5,10.1-10.1S55.8,46.1,50.2,46.1z"/>
+            </g>
+            <g>
+                <circle fill="#444444" cx="79.8" cy="44.7" r="2.4"/></g>
+        </g>
+    </g>
+</svg>

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

@@ -1,4 +1,5 @@
 (ns day8.re-frame.trace.components.container
+  (:require-macros [day8.re-frame.trace.utils.macros :as macros])
   (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
             [re-frame.db :as db]
             [day8.re-frame.trace.panels.app-db :as app-db]
@@ -6,35 +7,67 @@
             [day8.re-frame.trace.panels.traces :as traces]
             [day8.re-frame.trace.panels.subs :as subs]
             [re-frame.trace]
-            [reagent.core :as r]))
+            [reagent.core :as r]
+            [day8.re-frame.trace.utils.re-com :as rc]))
 
 (defn tab-button [panel-id title]
   (let [selected-tab @(rf/subscribe [:settings/selected-tab])]
     [:button {:class    (str "tab button " (when (= selected-tab panel-id) "active"))
               :on-click #(rf/dispatch [:settings/selected-tab panel-id])} title]))
 
+(def reload (macros/slurp-macro "day8/re_frame/trace/images/reload.svg"))
+(def reload-disabled (macros/slurp-macro "day8/re_frame/trace/images/reload-disabled.svg"))
+(def open-external (macros/slurp-macro "day8/re_frame/trace/images/open-external.svg"))
+(def snapshot (macros/slurp-macro "day8/re_frame/trace/images/snapshot.svg"))
+(def snapshot-ready (macros/slurp-macro "day8/re_frame/trace/images/snapshot-ready.svg"))
+
 (defn devtools-inner [traces opts]
   (let [selected-tab     (rf/subscribe [:settings/selected-tab])
         panel-type       (:panel-type opts)
         external-window? (= panel-type :popup)
-        unloading?       (rf/subscribe [:global/unloading?])]
+        unloading?       (rf/subscribe [:global/unloading?])
+        snapshot-ready?  (rf/subscribe [:snapshot/snapshot-ready?])]
     [:div.panel-content
      {:style {:width "100%" :display "flex" :flex-direction "column"}}
+     [rc/h-box
+      :class "panel-content-top nav"
+      :justify :between
+      :children
+      [[rc/h-box
+        :children
+        [(tab-button :traces "Traces")
+         (tab-button :app-db "App DB")
+         (tab-button :subs "Subs")
+         #_(tab-button :subvis "SubVis")
+         ]]
+       [rc/h-box
+        :align :center
+        :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 #(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])}]
+         (when-not external-window?
+           [:img.nav-icon.active
+            {:src      (str "data:image/svg+xml;utf8,"
+                            open-external)
+             :on-click #(rf/dispatch-sync [:global/launch-external])}])]]]]
      (when (and external-window? @unloading?)
        [:h1.host-closed "Host window has closed. Reopen external window to continue tracing."])
      (when-not (re-frame.trace/is-trace-enabled?)
        [:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
-     [:div.panel-content-top
-      [:div.nav
-       (tab-button :traces "Traces")
-       (tab-button :app-db "App DB")
-       (tab-button :subs "Subs")
-       #_ (tab-button :subvis "SubVis")
-       (when-not external-window?
-         [:img.popout-icon
-          {:src      (str "data:image/svg+xml;utf8,"
-                          "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\" x=\"0px\" y=\"0px\">\n    <path fill=\"#444444\" d=\"M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z\"/>\n</svg>\n")
-           :on-click #(rf/dispatch-sync [:global/launch-external])}])]]
      (case @selected-tab
        :traces [traces/render-trace-panel traces]
        :app-db [app-db/render-state db/app-db]

src/day8/re_frame/trace/events.cljs

@@ -5,6 +5,7 @@
             [day8.re-frame.trace.utils.localstorage :as localstorage]
             [clojure.string :as str]
             [reagent.core :as r]
+            [re-frame.db]
             [day8.re-frame.trace.components.container :as container]
             [day8.re-frame.trace.styles :as styles]))
 
@@ -208,3 +209,16 @@
                       (conj paths path))]
       (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))

src/day8/re_frame/trace/styles.cljs

@@ -225,11 +225,14 @@
 
    [:.icon-button {:font-size "10px"}]
    [:button.tab {}]
-   [:.popout-icon
+   [:.nav-icon
-    {:max-width "15px"
+    {:width   "15px"
-     :cursor    "pointer"
+     :height  "15px"
-     :padding   "0 5px"
+     :cursor  "pointer"
-     :margin    "0 5px"}]
+     :padding "0 5px"
+     :margin  "0 5px"}
+    ["&.inactive"
+     {:cursor "initial"}]]
    [:.tab
     {:background     "transparent"
      :border-radius  0

src/day8/re_frame/trace/subs.cljs

@@ -66,3 +66,16 @@
   :global/unloading?
   (fn [db _]
     (get-in db [:global :unloading?])))
+
+;;
+
+(rf/reg-sub
+  :snapshot/snapshot-root
+  (fn [db _]
+    (:snapshot db)))
+
+(rf/reg-sub
+  :snapshot/snapshot-ready?
+  :<- [:snapshot/snapshot-root]
+  (fn [snapshot _]
+    (contains? snapshot :current-snapshot)))