Render app-db state with symantic class names

src/day8/re_frame/trace.cljs

@@ -5,6 +5,7 @@
             [day8.re-frame.trace.components :as components]
             [day8.re-frame.trace.localstorage :as localstorage]
             [re-frame.trace :as trace :include-macros true]
+            [re-frame.db :as db]
             [cljs.pprint :as pprint]
             [clojure.string :as str]
             [clojure.set :as set]
@@ -27,8 +28,6 @@
       n
       "")))
 
-
-
 (def static-fns
   {:render
    (fn render []
@@ -399,7 +398,7 @@
                                           :traces [render-trace-panel]
                                           :subvis [subvis/render-subvis traces
                                                     [:div.panel-content-scrollable]]
-                                          :app-state [app-state/tab @traces])]]]))})))
+                                          :app-state [app-state/tab @db/app-db])]]]))})))
 
 (defn panel-div []
   (let [id    "--re-frame-trace--"

src/day8/re_frame/trace/app_state.cljs

@@ -1,16 +1,34 @@
 (ns day8.re-frame.trace.app-state
   (:require [reagent.core :as r]
-            [clojure.string :as str]))
+            [clojure.string :as str]
 
-(defn classname
+            [cljs.pprint :refer [pprint]]))
+
+
+(defn css-munge
+  [string]
+  (str/replace string #"\.|/" "-"))
+
+(defn namespace-css
+  [classname]
+  (str "re-frame-trace--" classname))
+
+(defn type-string
   [obj]
-  (str/replace (pr-str (type obj)) #"\.|/" "-"))
+  (cond
+    (number? obj)    "number"
+    (boolean? obj)   "boolean"
+    (string? obj)    "string"
+    (nil? obj)       "nil"
+    (keyword? obj)   "keyword"
+    (symbol? obj)    "symbol"
+    :else (pr-str (type obj))))
 
 (defn view
   [data]
-  (if (string? data)
-    [:span.data-string data]
-    [:div {:class (classname data)}]))
+  (if (coll? data)
+    [:div {:class (str (namespace-css "collection") " " (namespace-css (css-munge (type-string data))))}]
+    [:span {:class (namespace-css (css-munge (type-string data)))} (str data)]))
 
 (defn crawl
   [data]
@@ -19,5 +37,8 @@
     (view data)))
 
 (defn tab [data]
-  (println (crawl data))
-  (crawl data))
+  (pprint data)
+  (pprint (crawl data))
+  [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
+    [:div.panel-content-scrollable
+     (crawl data)]])