Merge branch 'master' into feature/extend-filter

README.md

@@ -2,6 +2,10 @@
 
 A trace panel for re-frame.
 
+[![Clojars Project](https://img.shields.io/clojars/v/day8.re-frame/trace.svg)](https://clojars.org/day8.re-frame/trace)
+
+**Status:** Alpha.
+
 ## Motivation
 
 re-frame provides a data driven architecture, but we need to be able to inspect it. re-frame-trace takes inspiration from [redux-devtools](https://github.com/gaearon/redux-devtools), and provides several ways to visualise the structure and state of your re-frame application.
@@ -12,7 +16,9 @@ re-frame provides a data driven architecture, but we need to be able to inspect
 
 If you are using leiningen, modify `project.clj` in the following ways. When puzzling over the various possible leiningen configurations, it's often helpful to look at a sample [project.clj](https://github.com/technomancy/leiningen/blob/stable/sample.project.clj).
 
-- Add re-frame-trace as a dev dependency by placing `[day8.re-frame/trace "0.1.0"]` within `:profiles :dev :dependencies`. For example:
+[![Clojars Project](https://img.shields.io/clojars/v/day8.re-frame/trace.svg)](https://clojars.org/day8.re-frame/trace)
+
+- Add re-frame-trace as a dev dependency by placing `[day8.re-frame/trace "VERSION"]` within `:profiles :dev :dependencies`. For example:
 
   ```cljs
   :profiles

project.clj

@@ -1,4 +1,4 @@
-(defproject day8.re-frame/trace "0.1.3-SNAPSHOT"
+(defproject day8.re-frame/trace "0.1.4-SNAPSHOT"
   :description "Tracing and developer tools for re-frame apps"
   :url         "https://github.com/Day8/re-frame-trace"
   :license     {:name "MIT"}

src/day8/re_frame/trace.cljs

@@ -2,6 +2,7 @@
   (:require [day8.re-frame.trace.subvis :as subvis]
             [day8.re-frame.trace.styles :as styles]
             [day8.re-frame.trace.components :as components]
+            [day8.re-frame.trace.localstorage :as localstorage]
             [re-frame.trace :as trace :include-macros true]
             [cljs.pprint :as pprint]
             [clojure.string :as str]
@@ -201,14 +202,22 @@
                 (.toFixed duration 1) " ms"]]
               (when show-row?
                 [:tr {:key (str id "-details")}
-                 [:td {:col-span 3} (with-out-str (pprint/pprint (dissoc tags :query-v :event :duration)))]]))))))
+                 [:td {:col-span 3} (let [tag-str (with-out-str (pprint/pprint tags))
+                                          string-size-limit 400]
+                                      (if (< string-size-limit (count tag-str))
+                                        (str (subs tag-str 0 string-size-limit) " ...")
+                                        tag-str))]]))))))
 
 (defn render-trace-panel []
   (let [filter-input               (r/atom "")
-        filter-items               (r/atom [])
+        filter-items               (r/atom (localstorage/get "filter-items" []))
         filter-type                (r/atom :contains)
         input-error                (r/atom false)
         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 [showing-traces       (if (= @filter-items [])
                                    @traces
@@ -281,7 +290,7 @@
   ;; Add clear button
   ;; Filter out different trace types
   (let [position          (r/atom :right)
-        panel-width-ratio (r/atom 0.35)
+        panel-width-ratio (r/atom (localstorage/get "panel-width-ratio" 0.35))
         showing?          (r/atom false)
         dragging?         (r/atom false)
         pin-to-bottom?    (r/atom true)
@@ -306,6 +315,11 @@
                                    y (.-clientY e)]
                                (.preventDefault e)
                                (reset! panel-width-ratio (/ (- window-width x) window-width)))))]
+
+    (add-watch panel-width-ratio
+               :update-panel-width-ratio
+               (fn [_ _ _ new-state]
+                 (localstorage/save! "panel-width-ratio" new-state)))
     (r/create-class
       {:component-will-mount   (fn []
                                  (js/window.addEventListener "keydown" handle-keys)

src/day8/re_frame/trace/localstorage.cljs

@@ -0,0 +1,26 @@
+(ns day8.re-frame.trace.localstorage
+  (:require [goog.storage.Storage :as Storage]
+            [goog.storage.mechanism.HTML5LocalStorage :as html5localstore]
+            [cljs.reader :as reader])
+  (:refer-clojure :exclude [get]))
+
+(def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.)))
+
+(defn- safe-key [key]
+  "Adds a unique prefix to keys to ensure they don't collide with the host application"
+  (str "day8.re-frame.trace." key))
+
+(defn get
+  "Gets a re-frame-trace value from local storage."
+  ([key]
+   (get key nil))
+  ([key not-found]
+   (let [value (.get storage (safe-key key))]
+     (if (undefined? value)
+       not-found
+       (reader/read-string value)))))
+
+(defn save!
+  "Saves a re-frame-trace value to local storage."
+  [key value]
+  (.set storage (safe-key key) (pr-str value)))