status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Daniel Compton 2018-01-15 15:24:28 +13:00
parent a51a9037f5
commit 6894e291a5
4 changed files with 73 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -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. - 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 ## Troubleshooting
* Try a `lein clean` * Try a `lein clean`

2
src/day8/re_frame/trace.cljs
View File

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

13
src/day8/re_frame/trace/events.cljs
View File

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

110
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -28,7 +28,8 @@
(def *pods (r/atom [{:id (gensym) :path "[\"x\" \"y\"]" :open? true :diff? true} (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 "[:abc 123]" :open? true :diff? false}
{:id (gensym) :path "[:a :b :c]" :open? false :diff? true} {: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 [] (defn add-pod []
(let [id (gensym)] (let [id (gensym)]
@ -52,54 +53,56 @@
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS ;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(defn panel-header [] (defn panel-header []
[rc/h-box (let [app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
:justify :between app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before]) ]
:align :center [rc/h-box
:margin (css-join common/gs-19s "0px") :justify :between
:children [[rc/button :align :center
:class "bm-muted-button" :margin (css-join common/gs-19s "0px")
:style {:width "129px" :children [[rc/button
:padding "0px"} :class "bm-muted-button"
:label [rc/v-box :style {:width "129px"
:align :center :padding "0px"}
:children ["+ path inspector"]] :label [rc/v-box
:on-click #(add-pod)] :align :center
[rc/h-box :children ["+ path inspector"]]
:align :center :on-click #(add-pod)]
:gap common/gs-7s [rc/h-box
:height "48px" :align :center
:padding (css-join "0px" common/gs-12s) :gap common/gs-7s
:style {:background-color "#fafbfc" :height "48px"
:border "1px solid #e3e9ed" :padding (css-join "0px" common/gs-12s)
:border-radius "3px"} :style {:background-color "#fafbfc"
:children [[rc/label :label "reset app-db to:"] :border "1px solid #e3e9ed"
[rc/button :border-radius "3px"}
:class "bm-muted-button" :children [[rc/label :label "reset app-db to:"]
:style {:width "129px" [rc/button
:padding "0px"} :class "bm-muted-button"
:label [rc/v-box :style {:width "129px"
:align :center :padding "0px"}
:children ["initial epoch state"]] :label [rc/v-box
:on-click #(println "Clicked [initial state]")] :align :center
[rc/v-box :children ["initial epoch state"]]
:width common/gs-81s :on-click #(rf/dispatch [:snapshot/load-snapshot @app-db-before])]
:align :center [rc/v-box
:children [[rc/label :width common/gs-81s
:style {:font-size "9px"} :align :center
:label "EVENT"] :children [[rc/label
[:img {:src (str "data:image/svg+xml;utf8," arrow-right)}] :style {:font-size "9px"}
[rc/label :label "EVENT"]
:style {:font-size "9px" [:img {:src (str "data:image/svg+xml;utf8," arrow-right)}]
:margin-top "-1px"} [rc/label
:label "PROCESSING"]]] :style {:font-size "9px"
[rc/button :margin-top "-1px"}
:class "bm-muted-button" :label "PROCESSING"]]]
:style {:width "129px" [rc/button
:padding "0px"} :class "bm-muted-button"
:label [rc/v-box :style {:width "129px"
:align :center :padding "0px"}
:children ["end epoch state"]] :label [rc/v-box
:on-click #(println "Clicked [end state]")]]]]]) :align :center
: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 open? diff?]}]
[rc/h-box [rc/h-box
@ -129,7 +132,7 @@
:padding (css-join "0px" common/gs-7s) :padding (css-join "0px" common/gs-7s)
:width "-webkit-fill-available"} ;; This took a bit of finding! :width "-webkit-fill-available"} ;; This took a bit of finding!
:width "100%" :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-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 %]) :on-submit #() ;; #(rf/dispatch [:app-db/add-path %])
:change-on-blur? false :change-on-blur? false
@ -169,7 +172,8 @@
app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after]) app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before]) app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before])
[diff-before diff-after _] (when render-diff? [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 [rc/v-box
:class "app-db-path" :class "app-db-path"
:style {:border-bottom-left-radius "3px" :style {:border-bottom-left-radius "3px"
@ -183,7 +187,7 @@
:padding common/gs-7s :padding common/gs-7s
:margin (css-join pad-padding pad-padding "0px" pad-padding)} :margin (css-join pad-padding pad-padding "0px" pad-padding)}
:children [[components/simple-render :children [[components/simple-render
@app-db-after (get-in @app-db-after path)
#_{:todos [1 2 3]} #_{:todos [1 2 3]}
#_(get-in @app-db path) #_(get-in @app-db path)
@ -240,7 +244,7 @@
:padding common/gs-7s :padding common/gs-7s
:margin (css-join "0px" pad-padding)} :margin (css-join "0px" pad-padding)}
:children [[components/simple-render :children [[components/simple-render
diff-before]]])) diff-after]]]))
(when open? (when open?
[rc/gap-f :size pad-padding])]])) [rc/gap-f :size pad-padding])]]))