From 5d4f21b89ff27be4271cfd8fc059171a3ce4911f Mon Sep 17 00:00:00 2001 From: saskali Date: Thu, 14 Sep 2017 16:44:44 +0200 Subject: [PATCH] Add trace filter by category (#71) * Add trace filter by category - fixes #39 - fixes #57 * Fix combination of filter types * Refactor filter - use idiom 'seq' to check for empty sequences * Make small refactorings in filter code * Refactor toggle-category-fn to use set operations --- resources/day8/re_frame/trace/main.css | 14 ++++++++++ resources/day8/re_frame/trace/main.less | 14 ++++++++++ src/day8/re_frame/trace.cljs | 34 ++++++++++++++++++++----- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/resources/day8/re_frame/trace/main.css b/resources/day8/re_frame/trace/main.css index 0be1a55..1824e41 100644 --- a/resources/day8/re_frame/trace/main.css +++ b/resources/day8/re_frame/trace/main.css @@ -394,3 +394,17 @@ #--re-frame-trace-- .filter-items-count.active:hover { text-decoration: line-through; } +#--re-frame-trace-- .filter-fields { + margin-top: 10px; +} +#--re-frame-trace-- .filter-category { + display: inline-block; + background: #efeef1; + cursor: pointer; + padding: 5px; + margin: 5px; + opacity: 0.3; +} +#--re-frame-trace-- .active { + opacity: 1; +} diff --git a/resources/day8/re_frame/trace/main.less b/resources/day8/re_frame/trace/main.less index 9189b4d..2a5c593 100644 --- a/resources/day8/re_frame/trace/main.less +++ b/resources/day8/re_frame/trace/main.less @@ -503,4 +503,18 @@ } } } + .filter-fields { + margin-top: 10px; + } + .filter-category { + display: inline-block; + background: #efeef1; + cursor: pointer; + padding: 5px; + margin: 5px; + opacity: 0.3; + } + .active { + opacity: 1; + } } diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 1849a13..deb7e99 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -6,6 +6,7 @@ [re-frame.trace :as trace :include-macros true] [cljs.pprint :as pprint] [clojure.string :as str] + [clojure.set :as set] [reagent.core :as r] [reagent.interop :refer-macros [$ $!]] [reagent.impl.util :as util] @@ -215,20 +216,27 @@ tag-str))]] [:td.trace--meta.trace--details-icon {:on-click #(.log js/console tags)}]])))))))) + (defn render-trace-panel [] (let [filter-input (r/atom "") filter-items (r/atom (localstorage/get "filter-items" [])) filter-type (r/atom :contains) input-error (r/atom false) + categories (r/atom #{:event :sub/run :sub/create}) trace-detail-expansions (r/atom {:show-all? false :overrides {}})] (add-watch filter-items :update-localstorage (fn [_ _ _ new-state] (localstorage/save! "filter-items" new-state))) (fn [] - (let [visible-traces (if (= @filter-items []) - @traces - (filter (apply every-pred (map query->fn @filter-items)) @traces)) + (let [toggle-category-fn (fn [category-keys] + (swap! categories #(if (set/superset? % category-keys) + (set/difference % category-keys) + (set/union % category-keys)))) + + visible-traces (cond->> @traces + (seq @categories) (filter (fn [trace] (when (contains? @categories (:op-type trace)) trace))) + (seq @filter-items) (filter (apply every-pred (map query->fn @filter-items)))) save-query (fn [_] (if (and (= @filter-type :slower-than) (js/isNaN (js/parseFloat @filter-input))) @@ -236,11 +244,23 @@ (do (reset! input-error false) (add-filter filter-items @filter-input @filter-type))))] - - [:div.tab-contents [:div.filter [:div.filter-control + [:ul.filter-categories "show: " + [:li.filter-category {:class (when (contains? @categories :event) "active") + :on-click #(toggle-category-fn #{:event})} + "events"] + [:li.filter-category {:class (when (contains? @categories :sub/run) "active") + :on-click #(toggle-category-fn #{:sub/run :sub/create})} + "subscriptions"] + [:li.filter-category {:class (when (contains? @categories :render) "active") + :on-click #(toggle-category-fn #{:render})} + "reagent"] + [:li.filter-category {:class (when (contains? @categories :re-frame.router/fsm-trigger) "active") + :on-click #(toggle-category-fn #{:re-frame.router/fsm-trigger :componentWillUnmount})} + "internals"]] + [:div.filter-fields [:select {:value @filter-type :on-change #(reset! filter-type (keyword (.. % -target -value)))} [:option {:value "contains"} "contains"] @@ -248,10 +268,10 @@ [:div.filter-control-input {:style {:margin-left 10}} [search-input {:on-save save-query :on-change #(reset! filter-input (.. % -target -value))}] - [components/icon-add] + [components/icon-add] (if @input-error [:div.input-error {:style {:color "red" :margin-top 5}} - "Please enter a valid number."])]] + "Please enter a valid number."])]]] [:ul.filter-items (map (fn [item] ^{:key (:id item)}