From 6894e291a5a52d99790a0f75e77deefb50517d01 Mon Sep 17 00:00:00 2001 From: Daniel Compton Date: Mon, 15 Jan 2018 15:24:28 +1300 Subject: [PATCH] Inspect paths into app-db and enable before/after app-db --- README.md | 13 +++ src/day8/re_frame/trace.cljs | 2 - src/day8/re_frame/trace/events.cljs | 13 +-- src/day8/re_frame/trace/view/app_db.cljs | 110 ++++++++++++----------- 4 files changed, 73 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index ec6e289..3fb184b 100644 --- a/README.md +++ b/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` diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 6d968eb..f8027d9 100644 --- a/src/day8/re_frame/trace.cljs +++ b/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 diff --git a/src/day8/re_frame/trace/events.cljs b/src/day8/re_frame/trace/events.cljs index 8243c0d..f17ce16 100644 --- a/src/day8/re_frame/trace/events.cljs +++ b/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)) ;;; diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index e953b43..64778ed 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/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,54 +53,56 @@ ;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS (defn panel-header [] - [rc/h-box - :justify :between - :align :center - :margin (css-join common/gs-19s "0px") - :children [[rc/button - :class "bm-muted-button" - :style {:width "129px" - :padding "0px"} - :label [rc/v-box - :align :center - :children ["+ path inspector"]] - :on-click #(add-pod)] - [rc/h-box - :align :center - :gap common/gs-7s - :height "48px" - :padding (css-join "0px" common/gs-12s) - :style {:background-color "#fafbfc" - :border "1px solid #e3e9ed" - :border-radius "3px"} - :children [[rc/label :label "reset app-db to:"] - [rc/button - :class "bm-muted-button" - :style {:width "129px" - :padding "0px"} - :label [rc/v-box - :align :center - :children ["initial epoch state"]] - :on-click #(println "Clicked [initial state]")] - [rc/v-box - :width common/gs-81s - :align :center - :children [[rc/label - :style {:font-size "9px"} - :label "EVENT"] - [:img {:src (str "data:image/svg+xml;utf8," arrow-right)}] - [rc/label - :style {:font-size "9px" - :margin-top "-1px"} - :label "PROCESSING"]]] - [rc/button - :class "bm-muted-button" - :style {:width "129px" - :padding "0px"} - :label [rc/v-box - :align :center - :children ["end epoch state"]] - :on-click #(println "Clicked [end state]")]]]]]) + (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 + :margin (css-join common/gs-19s "0px") + :children [[rc/button + :class "bm-muted-button" + :style {:width "129px" + :padding "0px"} + :label [rc/v-box + :align :center + :children ["+ path inspector"]] + :on-click #(add-pod)] + [rc/h-box + :align :center + :gap common/gs-7s + :height "48px" + :padding (css-join "0px" common/gs-12s) + :style {:background-color "#fafbfc" + :border "1px solid #e3e9ed" + :border-radius "3px"} + :children [[rc/label :label "reset app-db to:"] + [rc/button + :class "bm-muted-button" + :style {:width "129px" + :padding "0px"} + :label [rc/v-box + :align :center + :children ["initial epoch state"]] + :on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-before])] + [rc/v-box + :width common/gs-81s + :align :center + :children [[rc/label + :style {:font-size "9px"} + :label "EVENT"] + [:img {:src (str "data:image/svg+xml;utf8," arrow-right)}] + [rc/label + :style {:font-size "9px" + :margin-top "-1px"} + :label "PROCESSING"]]] + [rc/button + :class "bm-muted-button" + :style {:width "129px" + :padding "0px"} + :label [rc/v-box + :align :center + :children ["end epoch 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])]]))