Inspect paths into app-db and enable before/after app-db
This commit is contained in:
parent
a51a9037f5
commit
6894e291a5
13
README.md
13
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.
|
- 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`
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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))
|
|
||||||
|
|
||||||
;;;
|
;;;
|
||||||
|
|
||||||
|
|
|
@ -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])]]))
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue