From 99e83496ccb57e27651ed04c2e306025536e7205 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Tue, 22 Aug 2017 18:02:33 +0200 Subject: [PATCH 1/5] Enable selecting trace names as filters --- src/day8/re_frame/trace.cljs | 32 +++++++++++++++++++++-------- src/day8/re_frame/trace/styles.cljs | 5 +++++ 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index cbf8431..16de8aa 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -144,11 +144,19 @@ (fn [trace] (< (:query query) (:duration trace))))) -(defn render-traces [showing-traces] +(defn render-traces [showing-traces filter-items] (doall (for [{:keys [op-type id operation tags duration] :as trace} showing-traces] - (let [padding {:padding "0px 5px 0px 5px"} - row-style (merge padding {:border-top (case op-type :event "1px solid lightgrey" nil)}) + (let [hover-trace (r/atom false) + padding {:padding "0px 5px 0px 5px"} + row-style (merge padding {:border-top (case op-type :event "1px solid lightgrey" nil)}) + op-name (if (= PersistentVector (type (js->clj operation))) + (second operation) + operation) + save-query (fn [filter-for-string] + (swap! filter-items conj {:id (random-uuid) + :query (str/lower-case (name filter-for-string)) + :filter-type :contains})) #_#__ (js/console.log (devtools/header-api-call tags))] (list [:tr {:key id :style {:color (case op-type @@ -158,10 +166,18 @@ :render "purple" :re-frame.router/fsm-trigger "#fd701e" nil)}} - [:td {:style row-style} (str op-type)] - [:td {:style row-style} (if (= PersistentVector (type (js->clj operation))) - (second operation) - operation)] + [:td {:style row-style + :on-click #(save-query op-type)} + [:div {:class (str "op-type " (when @hover-trace "active-trace")) + :on-mouse-over #(reset! hover-trace true) + :on-mouse-leave #(reset! hover-trace false)} + (str op-type)]] + [:td {:style row-style + :on-click #(save-query op-name)} + [:div {:class (str "op-name " (when @hover-trace "active-trace")) + :on-mouse-over #(reset! hover-trace true) + :on-mouse-leave #(reset! hover-trace false)} + op-name]] [:td {:style (merge row-style { ; :font-weight (if (< slower-than-bold-int duration) @@ -233,7 +249,7 @@ (when (pos? (count @traces)) [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])] [:th "meta"]] - [:tbody (render-traces showing-traces)]]]])))) + [:tbody (render-traces showing-traces filter-items)]]]])))) (defn resizer-style [draggable-area] {:position "absolute" :z-index 2 :opacity 0 diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index e43b018..4dc7128 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/src/day8/re_frame/trace/styles.cljs @@ -66,6 +66,11 @@ #--re-frame-trace-- .filter-items li .filter-item-string { color: #616cdb; } +#--re-frame-trace-- .active-trace { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.05); + width: fit-content; +} #--re-frame-trace-- .icon { display: inline-block; width: 1em; From 5258a17451f603317be8e158ce3c5491635b70cc Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Wed, 23 Aug 2017 10:39:29 +0200 Subject: [PATCH 2/5] Refactor css hover state --- src/day8/re_frame/trace.cljs | 13 ++++--------- src/day8/re_frame/trace/styles.cljs | 4 ++-- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 16de8aa..f11b011 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -147,10 +147,9 @@ (defn render-traces [showing-traces filter-items] (doall (for [{:keys [op-type id operation tags duration] :as trace} showing-traces] - (let [hover-trace (r/atom false) - padding {:padding "0px 5px 0px 5px"} + (let [padding {:padding "0px 5px 0px 5px"} row-style (merge padding {:border-top (case op-type :event "1px solid lightgrey" nil)}) - op-name (if (= PersistentVector (type (js->clj operation))) + op-name (if (vector? operation) (second operation) operation) save-query (fn [filter-for-string] @@ -168,15 +167,11 @@ nil)}} [:td {:style row-style :on-click #(save-query op-type)} - [:div {:class (str "op-type " (when @hover-trace "active-trace")) - :on-mouse-over #(reset! hover-trace true) - :on-mouse-leave #(reset! hover-trace false)} + [:div.op-string (str op-type)]] [:td {:style row-style :on-click #(save-query op-name)} - [:div {:class (str "op-name " (when @hover-trace "active-trace")) - :on-mouse-over #(reset! hover-trace true) - :on-mouse-leave #(reset! hover-trace false)} + [:div.op-string op-name]] [:td {:style (merge row-style { diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index 4dc7128..b181994 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/src/day8/re_frame/trace/styles.cljs @@ -66,9 +66,9 @@ #--re-frame-trace-- .filter-items li .filter-item-string { color: #616cdb; } -#--re-frame-trace-- .active-trace { +#--re-frame-trace-- .op-string:hover { cursor: pointer; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.08); width: fit-content; } #--re-frame-trace-- .icon { From 48f17700d3415dfc20239f741221522dbd30f144 Mon Sep 17 00:00:00 2001 From: Daniel Compton Date: Fri, 25 Aug 2017 10:46:20 +1200 Subject: [PATCH 3/5] Improve behaviour of text filtering - Make only the text itself clickable - Stop propagation of the event any further, preventing the trace from also being toggled. --- src/day8/re_frame/trace.cljs | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index d13d9de..ef98c94 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -172,14 +172,18 @@ nil)}} [:td {:style row-style} [:button (if show-row? "▼" "▶")]] - [:td {:style row-style - :on-click #(save-query op-type)} + [:td {:style row-style} [:div.op-string - (str op-type)]] - [:td {:style row-style - :on-click #(save-query op-name)} + [:span {:on-click (fn [ev] + (save-query op-type) + (.stopPropagation ev)) + :style {:cursor "pointer"}} (str op-type)]]] + [:td {:style row-style} [:div.op-string - op-name]] + [:span {:on-click (fn [ev] + (save-query op-name) + (.stopPropagation ev)) + :style {:cursor "pointer"}}] op-name]] [:td {:style (merge row-style { ; :font-weight (if (< slower-than-bold-int duration) From 50deba528169e9ebc87d8458886a0dd0f2b58e25 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Tue, 29 Aug 2017 16:43:27 +0200 Subject: [PATCH 4/5] Refactor save query function --- src/day8/re_frame/trace.cljs | 43 ++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index ef98c94..41e82da 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -144,20 +144,27 @@ (fn [trace] (< (:query query) (:duration trace))))) -(defn render-traces [showing-traces filter-items trace-detail-expansions] +(defn add-filter [filter-items filter-input filter-type from-mouse?] + (swap! filter-items conj {:id (random-uuid) + :query (if from-mouse? + (str/lower-case (name filter-input)) + (if (= @filter-type :contains) + (str/lower-case @filter-input) + (js/parseFloat @filter-input))) + :filter-type (if from-mouse? + :contains + @filter-type)})) + +(defn render-traces [showing-traces filter-items filter-input trace-detail-expansions] (doall (for [{:keys [op-type id operation tags duration] :as trace} showing-traces] (let [padding {:padding "0px 5px 0px 5px"} row-style (merge padding {:border-top (case op-type :event "1px solid lightgrey" nil)}) - show-row? (get-in @trace-detail-expansions [:overrides id] - (:show-all? @trace-detail-expansions)) + show-row? (get-in @trace-detail-expansions [:overrides id] + (:show-all? @trace-detail-expansions)) op-name (if (vector? operation) (second operation) operation) - save-query (fn [filter-for-string] - (swap! filter-items conj {:id (random-uuid) - :query (str/lower-case (name filter-for-string)) - :filter-type :contains})) #_#__ (js/console.log (devtools/header-api-call tags))] (list [:tr {:key id :on-click (fn [ev] @@ -175,15 +182,15 @@ [:td {:style row-style} [:div.op-string [:span {:on-click (fn [ev] - (save-query op-type) - (.stopPropagation ev)) - :style {:cursor "pointer"}} (str op-type)]]] + (add-filter filter-items (name op-type) :contains true) + (.stopPropagation ev))} + (str op-type)]]] [:td {:style row-style} [:div.op-string [:span {:on-click (fn [ev] - (save-query op-name) - (.stopPropagation ev)) - :style {:cursor "pointer"}}] op-name]] + (add-filter filter-items (name op-name) :contains true) + (.stopPropagation ev))} + op-name]]] [:td {:style (merge row-style { ; :font-weight (if (< slower-than-bold-int duration) @@ -212,11 +219,9 @@ (reset! input-error true) (do (reset! input-error false) - (swap! filter-items conj {:id (random-uuid) - :query (if (= @filter-type :contains) - (str/lower-case @filter-input) - (js/parseFloat @filter-input)) - :filter-type @filter-type}))))] + (add-filter filter-items filter-input filter-type false))))] + + [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}} [:div.filter-control [:div.filter-control-input @@ -264,7 +269,7 @@ (when (pos? (count @traces)) [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])] [:th "meta"]] - [:tbody (render-traces showing-traces filter-items trace-detail-expansions)]]]])))) + [:tbody (render-traces showing-traces filter-items filter-input trace-detail-expansions)]]]])))) (defn resizer-style [draggable-area] {:position "absolute" :z-index 2 :opacity 0 From e3c9eb6947106ad33d3473111889ac3d8e145362 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Thu, 31 Aug 2017 11:55:54 +0200 Subject: [PATCH 5/5] Refactor adding new filters --- src/day8/re_frame/trace.cljs | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index a6d012d..d3cea13 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -145,16 +145,12 @@ (fn [trace] (< (:query query) (:duration trace))))) -(defn add-filter [filter-items filter-input filter-type from-mouse?] +(defn add-filter [filter-items filter-input filter-type] (swap! filter-items conj {:id (random-uuid) - :query (if from-mouse? - (str/lower-case (name filter-input)) - (if (= @filter-type :contains) - (str/lower-case @filter-input) - (js/parseFloat @filter-input))) - :filter-type (if from-mouse? - :contains - @filter-type)})) + :query (if (= filter-type :contains) + (str/lower-case filter-input) + (js/parseFloat filter-input)) + :filter-type filter-type})) (defn render-traces [showing-traces filter-items filter-input trace-detail-expansions] (doall @@ -183,13 +179,13 @@ [:td {:style row-style} [:div.op-string [:span {:on-click (fn [ev] - (add-filter filter-items (name op-type) :contains true) + (add-filter filter-items (name op-type) :contains) (.stopPropagation ev))} (str op-type)]]] [:td {:style row-style} [:div.op-string [:span {:on-click (fn [ev] - (add-filter filter-items (name op-name) :contains true) + (add-filter filter-items (name op-name) :contains) (.stopPropagation ev))} op-name]]] [:td @@ -228,7 +224,7 @@ (reset! input-error true) (do (reset! input-error false) - (add-filter filter-items filter-input filter-type false))))] + (add-filter filter-items @filter-input @filter-type))))] [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}