diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index 7c1652e..9ecc1c1 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/src/day8/re_frame/trace/view/app_db.cljs @@ -23,6 +23,35 @@ (def pod-gap common/gs-19s) ;; or 31? (def pad-padding common/gs-7s) +;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS + +(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}] + #_[])) + +(defn add-pod [] + (let [id (gensym)] + (println "Added pod" id) + (swap! *pods concat [{:id id :path "" :open? true :diff? false}]))) + +(defn delete-pod [id] + (println "Deleted pod" id) + (reset! *pods (filterv #(not= id (:id %)) @*pods))) + +(defn update-pod-field + [id field new-val] + (let [f (fn [pod] + (if (= id (:id pod)) + (do + ;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val) + (assoc pod field new-val)) + pod))] + (reset! *pods (mapv f @*pods)))) + +;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS + (defn panel-header [] [rc/h-box :justify :between @@ -35,7 +64,7 @@ :label [rc/v-box :align :center :children ["+ path inspector"]] - :on-click #(println "Clicked [+ path inspector]")] + :on-click #(add-pod)] [rc/h-box :align :center :gap common/gs-7s @@ -47,11 +76,11 @@ :children [[rc/label :label "reset app-db to:"] [rc/button :class "bm-muted-button" - :style {:width "79px" + :style {:width "129px" :padding "0px"} :label [rc/v-box :align :center - :children ["initial state"]] + :children ["initial epoch state"]] :on-click #(println "Clicked [initial state]")] [rc/v-box :width common/gs-81s @@ -66,127 +95,126 @@ :label "PROCESSING"]]] [rc/button :class "bm-muted-button" - :style {:width "79px" + :style {:width "129px" :padding "0px"} :label [rc/v-box :align :center - :children ["end state"]] + :children ["end epoch state"]] :on-click #(println "Clicked [end state]")]]]]]) -(defn path-header [path] - (let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) - *pod-open (r/atom true)] - (fn [path] - [rc/h-box - :class "app-db-path--header" - :style {:border-top-left-radius "3px" - :border-top-right-radius "3px"} - :align :center - :height common/gs-31s - :children [[rc/box - :width "36px" - :height common/gs-31s - :class "noselect" - :style {:cursor "pointer"} - :attr {:title (str (if @*pod-open "Close" "Open") " the pod bay doors, HAL") - :on-click (rc/handler-fn - (swap! *pod-open not) - (println "Clicked [arrow]"))} - :child [rc/box - :margin "auto" - :child [:span.arrow (if @*pod-open "▼" "▶")]]] - [rc/h-box - :size "auto" - :class "app-db-path--path-header" - :children [[rc/input-text - ;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) - :style {:height "25px" - :padding (css-join "0px" common/gs-7s) - :width "-webkit-fill-available"} ;; This took a bit of finding! - :width "100%" - :model search-string - :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) - :on-submit #(rf/dispatch [:app-db/add-path %]) - :change-on-blur? false - :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] - [rc/gap-f :size common/gs-12s] - [rc/box - :class "bm-muted-button noselect" - :style {:width "25px" - :height "25px" - :padding "0px" - :border-radius "3px" - :cursor "pointer"} - :attr {:title "Show diff" - :on-click (rc/handler-fn (println "Clicked [copy]"))} - :child [:img - {:src (str "data:image/svg+xml;utf8," copy) - :style {:width "19px" - :margin "0px 3px"}}]] - [rc/gap-f :size common/gs-12s] - [rc/box - :class "bm-muted-button noselect" - :style {:width "25px" - :height "25px" - :padding "0px" - :border-radius "3px" - :cursor "pointer"} - :attr {:title "Remove this pod" - :on-click (rc/handler-fn - ;(rf/dispatch [:app-db/remove-path %]) - (println "Clicked [delete]"))} - :child [:img - {:src (str "data:image/svg+xml;utf8," trash) - :style {:width "13px" - :margin "0px 6px"}}]] - [rc/gap-f :size common/gs-12s]]]))) +(defn pod-header [{:keys [id path open? diff?]}] + [rc/h-box + :class "app-db-path--header" + :style (merge {:border-top-left-radius "3px" + :border-top-right-radius "3px"} + (when-not open? + {:border-bottom-left-radius "3px" + :border-bottom-right-radius "3px"})) + :align :center + :height common/gs-31s + :children [[rc/box + :width "36px" + :height common/gs-31s + :class "noselect" + :style {:cursor "pointer"} + :attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL") + :on-click (rc/handler-fn (update-pod-field id :open? (not open?)))} + :child [rc/box + :margin "auto" + :child [:span.arrow (if open? "▼" "▶")]]] + [rc/h-box + :size "auto" + :class "app-db-path--path-header" + :children [[rc/input-text + :style {:height "25px" + :padding (css-join "0px" common/gs-7s) + :width "-webkit-fill-available"} ;; This took a bit of finding! + :width "100%" + :model 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 + :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] + [rc/gap-f :size common/gs-12s] + [rc/box + :class "bm-muted-button noselect" + :style {:width "25px" + :height "25px" + :padding "0px" + :border-radius "3px" + :cursor "pointer"} + :attr {:title "Show diff" + :on-click (rc/handler-fn (update-pod-field id :diff? (not diff?)))} + :child [:img + {:src (str "data:image/svg+xml;utf8," copy) + :style {:width "19px" + :margin "0px 3px"}}]] + [rc/gap-f :size common/gs-12s] + [rc/box + :class "bm-muted-button noselect" + :style {:width "25px" + :height "25px" + :padding "0px" + :border-radius "3px" + :cursor "pointer"} + :attr {:title "Remove this pod" + :on-click (rc/handler-fn (delete-pod id))} + :child [:img + {:src (str "data:image/svg+xml;utf8," trash) + :style {:width "13px" + :margin "0px 6px"}}]] + [rc/gap-f :size common/gs-12s]]]) -(defn pod [path] +(defn pod [{:keys [id path open? diff?] :as pod-info}] [rc/v-box :class "app-db-path" - :style {:border-bottom-left-radius "3px" + :style {:border-bottom-left-radius "3px" :border-bottom-right-radius "3px"} - :children [[path-header path] - [rc/v-box - :height "90px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join pad-padding pad-padding "0px" pad-padding)} - :children ["---main-section---"]] - - [rc/v-box - :height common/gs-19s - :justify :end - :style {:margin (css-join "0px" pad-padding)} - :children [[rc/hyperlink - ;:class "app-db-path--label" - :label "ONLY BEFORE" - :on-click #(println "Clicked [ONLY BEFORE]")]]] - [rc/v-box - :height "60px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join "0px" pad-padding)} - :children ["---before-diff---"]] - - [rc/v-box - :height common/gs-19s - :justify :end - :style {:margin (css-join "0px" pad-padding)} - :children [[rc/hyperlink - ;:class "app-db-path--label" - :label "ONLY AFTER" - :on-click #(println "Clicked [ONLY AFTER]")]]] - [rc/v-box - :height "60px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join "0px" pad-padding)} - :children ["---after-diff---"]] - [rc/gap-f :size pad-padding]]]) + :children [[pod-header pod-info] + (when open? + [rc/v-box + :height "90px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join pad-padding pad-padding "0px" pad-padding)} + :children ["---main-section---"]]) + (when (and open? diff?) + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY BEFORE" + :on-click #(println "Clicked [ONLY BEFORE]")]]]) + (when (and open? diff?) + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---before-diff---"]]) + (when (and open? diff?) + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY AFTER" + :on-click #(println "Clicked [ONLY AFTER]")]]]) + (when (and open? diff?) + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---after-diff---"]]) + (when open? + [rc/gap-f :size pad-padding])]]) (defn no-pods [] [rc/h-box @@ -201,18 +229,13 @@ :label "add inspectors to show what happened to app-db"]]]) (defn pod-section [] - (let [ - pods [["x" "y"] [:abc 123] nil] - ;pods nil - ] - (fn [] - [rc/v-box - :gap pod-gap - :children (if (empty? pods) - [[no-pods]] - (doall (for [p pods] - ^{:key (str p)} - [pod p])))]))) + [rc/v-box + :gap pod-gap + :children (if (empty? @*pods) + [[no-pods]] + (doall (for [p @*pods] + ^{:key (:id @*pods)} + [pod p])))]) ;; TODO: OLD UI - REMOVE (defn original-render [app-db] @@ -222,7 +245,11 @@ input-error (r/atom false) snapshot-ready? (rf/subscribe [:snapshot/snapshot-ready?])] (fn [] - [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column" :border "1px solid lightgrey"}} + [:div + {:style {:flex "1 1 auto" + :display "flex" + :flex-direction "column" + :border "1px solid lightgrey"}} [:div.panel-content-scrollable [rc/input-text :model search-string @@ -282,7 +309,6 @@ :children [[panel-header] [pod-section] [rc/gap-f :size pod-gap] - [original-render app-db]]]) - - + ;; TODO: OLD UI - REMOVE + #_[original-render app-db]]]) diff --git a/src/day8/re_frame/trace/view/subs.cljs b/src/day8/re_frame/trace/view/subs.cljs index a36558c..f59538e 100644 --- a/src/day8/re_frame/trace/view/subs.cljs +++ b/src/day8/re_frame/trace/view/subs.cljs @@ -21,6 +21,27 @@ (def pod-gap common/gs-19s) ;; or 31? (def pad-padding common/gs-7s) +;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS + +(def *pods (r/atom [{:type :destroyed :layer "3" :path [:todo/blah] :open? true :diff? true} + {:type :created :layer "3" :path [:todo/completed] :open? true :diff? true} + {:type :re-run :layer "3" :path [:todo/completed] :open? true :diff? true} + {:type :re-run :layer "2" :path [:todo/blah] :open? true :diff? true} + {:type :not-run :layer "3" :path [:todo/blah] :open? true :diff? true}] + #_[])) + +(defn update-pod-field + [id field new-val] + (let [f (fn [pod] + (if (= id (:id pod)) + (do + ;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val) + (assoc pod field new-val)) + pod))] + (reset! *pods (mapv f @*pods)))) + +;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS + (defn tag-color [type] (let [types {:created "#9b51e0" :destroyed "#f2994a" @@ -88,110 +109,110 @@ :style {:margin-top "6px"} :on-change #()]]]]]) -(defn path-header [{:keys [type layer path]}] - (let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) - *pod-open (r/atom true)] - (fn [{:keys [type layer path]}] - [rc/h-box - :class "app-db-path--header" - :style {:border-top-left-radius "3px" - :border-top-right-radius "3px"} - :align :center - :height common/gs-31s - :children [[rc/box - :width "36px" - :height common/gs-31s - :class "noselect" - :style {:cursor "pointer"} - :attr {:title (str (if @*pod-open "Close" "Open") " the pod bay doors, HAL") - :on-click (rc/handler-fn - (swap! *pod-open not) - (println "Clicked [arrow]"))} - :child [rc/box - :margin "auto" - :child [:span.arrow (if @*pod-open "▼" "▶")]]] - [rc/box - :width "64px" ;; (100-36)px from box above - :child [tag type (-> type tag-desc :short)]] - [rc/h-box - :size "auto" - :class "app-db-path--path-header" - :children [[rc/input-text - ;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) - :style {:height "25px" - :padding (css-join "0px" common/gs-7s) - :width "-webkit-fill-available"} ;; This took a bit of finding! - :width "100%" - :model search-string - :disabled? true - :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) - :on-submit #(rf/dispatch [:app-db/add-path %]) - :change-on-blur? false - :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] - [rc/gap-f :size common/gs-12s] - [rc/label :label (str "Layer " layer)] - [rc/gap-f :size common/gs-12s] - [rc/box - :class "bm-muted-button noselect" - :style {:width "25px" - :height "25px" - :padding "0px" - :border-radius "3px" - :cursor "pointer"} - :attr {:title "Show diff" - :on-click (rc/handler-fn (println "Clicked [copy]"))} - :child [:img - {:src (str "data:image/svg+xml;utf8," copy) - :style {:width "19px" - :margin "0px 3px"}}]] - [rc/gap-f :size common/gs-12s]]]))) +(defn pod-header [{:keys [id type layer path open? diff?]}] + [rc/h-box + :class "app-db-path--header" + :style {:border-top-left-radius "3px" + :border-top-right-radius "3px"} + :align :center + :height common/gs-31s + :children [[rc/box + :width "36px" + :height common/gs-31s + :class "noselect" + :style {:cursor "pointer"} + :attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL") + :on-click (rc/handler-fn + (swap! open? not) + (println "Clicked [arrow]"))} + :child [rc/box + :margin "auto" + :child [:span.arrow (if open? "▼" "▶")]]] + [rc/box + :width "64px" ;; (100-36)px from box above + :child [tag type (-> type tag-desc :short)]] + [rc/h-box + :size "auto" + :class "app-db-path--path-header" + :children [[rc/input-text + :style {:height "25px" + :padding (css-join "0px" common/gs-7s) + :width "-webkit-fill-available"} ;; This took a bit of finding! + :width "100%" + :model path + :disabled? true + :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 + :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] + [rc/gap-f :size common/gs-12s] + [rc/label :label (str "Layer " layer)] + [rc/gap-f :size common/gs-12s] + [rc/box + :class "bm-muted-button noselect" + :style {:width "25px" + :height "25px" + :padding "0px" + :border-radius "3px" + :cursor "pointer"} + :attr {:title "Show diff" + :on-click (rc/handler-fn (update-pod-field id :diff? (not diff?)))} + :child [:img + {:src (str "data:image/svg+xml;utf8," copy) + :style {:width "19px" + :margin "0px 3px"}}]] + [rc/gap-f :size common/gs-12s]]]) -(defn pod [pod-info] +(defn pod [{:keys [id type layer path open? diff?] :as pod-info}] [rc/v-box :class "app-db-path" :style {:border-bottom-left-radius "3px" :border-bottom-right-radius "3px"} - :children [[path-header pod-info] - [rc/v-box - :height "90px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join pad-padding pad-padding "0px" pad-padding)} - :children ["---main-section---"]] - - [rc/v-box - :height common/gs-19s - :justify :end - :style {:margin (css-join "0px" pad-padding)} - :children [[rc/hyperlink - ;:class "app-db-path--label" - :label "ONLY BEFORE" - :on-click #(println "Clicked [ONLY BEFORE]")]]] - [rc/v-box - :height "60px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join "0px" pad-padding)} - :children ["---before-diff---"]] - - [rc/v-box - :height common/gs-19s - :justify :end - :style {:margin (css-join "0px" pad-padding)} - :children [[rc/hyperlink - ;:class "app-db-path--label" - :label "ONLY AFTER" - :on-click #(println "Clicked [ONLY AFTER]")]]] - [rc/v-box - :height "60px" - :min-width "100px" - :style {:background-color cljs-dev-tools-background - :padding common/gs-7s - :margin (css-join "0px" pad-padding)} - :children ["---after-diff---"]] - [rc/gap-f :size pad-padding]]]) + :children [[pod-header pod-info] + (when open? + [rc/v-box + :height "90px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join pad-padding pad-padding "0px" pad-padding)} + :children ["---main-section---"]]) + (when (and open? diff?) + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY BEFORE" + :on-click #(println "Clicked [ONLY BEFORE]")]]]) + (when (and open? diff?) + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---before-diff---"]]) + (when (and open? diff?) + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY AFTER" + :on-click #(println "Clicked [ONLY AFTER]")]]]) + (when (and open? diff?) + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---after-diff---"]]) + (when open? + [rc/gap-f :size pad-padding])]]) (defn no-pods [] [rc/h-box @@ -202,22 +223,13 @@ :children [[rc/label :label "There are no subscriptions to show"]]]) (defn pod-section [] - (let [ - pods [{:type :destroyed :layer "3" :path [:todo/blah]} - {:type :created :layer "3" :path [:todo/completed]} - {:type :re-run :layer "3" :path [:todo/completed]} - {:type :re-run :layer "2" :path [:todo/blah]} - {:type :not-run :layer "3" :path [:todo/blah]}] - ;pods nil - ] - (fn [] - [rc/v-box - :gap pod-gap - :children (if (empty? pods) - [[no-pods]] - (doall (for [p pods] - ^{:key (str p)} - [pod p])))]))) + [rc/v-box + :gap pod-gap + :children (if (empty? @*pods) + [[no-pods]] + (doall (for [p @*pods] + ^{:key (str p)} + [pod p])))]) (defn render [] [] @@ -228,8 +240,11 @@ [rc/gap-f :size pod-gap] ;; TODO: OLD UI - REMOVE - [:div.panel-content-scrollable {:style {:border "1px solid lightgrey"}} - [:div.subtrees {:style {:margin "20px 0"}} + #_[:div.panel-content-scrollable + {:style {:border "1px solid lightgrey" + :margin "0px"}} + [:div.subtrees + {:style {:margin "20px 0"}} (doall (->> @subs/query->reaction (sort-by (fn [me] (ffirst (key me))))