Add basic data structure views and styles

resources/day8/re_frame/trace/main.css

@@ -22,6 +22,9 @@
      ========================================================================== */
   background: white;
   font-family: 'courier new', monospace;
+  color: #222222;
+  /* app-state data viewer
+     ========================================================================== */
 }
 #--re-frame-trace-- * {
   all: unset;
@@ -415,3 +418,41 @@
 #--re-frame-trace-- .active {
   opacity: 1;
 }
+#--re-frame-trace-- .re-frame-trace--collection {
+  border-left: 1px solid #efeef1;
+  margin-left: 10px;
+  padding-left: 10px;
+}
+#--re-frame-trace-- .re-frame-trace--primative:not(:first-child) {
+  margin-left: 10px;
+}
+#--re-frame-trace-- .re-frame-trace--boolean {
+  font-style: italic;
+}
+#--re-frame-trace-- .re-frame-trace--string:before {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .re-frame-trace--string:after {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .re-frame-trace--nil {
+  text-decoration: line-through;
+  font-style: italic;
+}
+#--re-frame-trace-- .re-frame-trace--keyword {
+  color: #616cdb;
+}
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentArrayMap:before,
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentTreeMap:before,
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentVector:before {
+  color: #8f8f8f;
+  content: "{";
+}
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentArrayMap:after,
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentTreeMap:after,
+#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentVector:after {
+  color: #8f8f8f;
+  content: "}";
+}

resources/day8/re_frame/trace/main.less

@@ -241,6 +241,7 @@
 
   background: white;
   font-family: 'courier new', monospace;
+  color: @text-color;
 
   table {
     width: 100%;
@@ -523,4 +524,54 @@
   .active {
     opacity: 1;
   }
+
+  /* app-state data viewer
+     ========================================================================== */
+
+  .re-frame-trace--collection {
+    border-left: 1px solid @light-gray;
+    margin-left: 10px;
+    padding-left: 10px;
+    // background: rgba(0, 0, 0, 0.07);
+  }
+  .re-frame-trace--primative:not(:first-child) {
+    margin-left: 10px;
+    // color: @text-color-muted;
+  }
+  .re-frame-trace--number {
+  }
+  .re-frame-trace--boolean {
+    font-style: italic;
+  }
+  .re-frame-trace--string {
+    &:before {
+      color: @text-color-muted;
+      content: "\"";
+    }
+    &:after {
+      color: @text-color-muted;
+      content: "\"";
+    }
+  }
+  .re-frame-trace--nil {
+    text-decoration: line-through;
+    font-style: italic;
+  }
+  .re-frame-trace--keyword {
+    color: @light-purple;
+  }
+  .re-frame-trace--symbol {
+  }
+  .re-frame-trace--cljs-core-PersistentArrayMap,
+  .re-frame-trace--cljs-core-PersistentTreeMap,
+  .re-frame-trace--cljs-core-PersistentVector {
+    &:before {
+      color: @text-color-muted;
+      content: "{";
+    }
+    &:after {
+      color: @text-color-muted;
+      content: "}";
+    }
+  }
 }

src/day8/re_frame/trace.cljs

@@ -399,7 +399,6 @@
                                           :subvis [subvis/render-subvis traces
                                                     [:div.panel-content-scrollable]]
                                           :app-state [app-state/tab @db/app-db])]]]))})))
-
 (defn panel-div []
   (let [id    "--re-frame-trace--"
         panel (.getElementById js/document id)]

src/day8/re_frame/trace/app_state.cljs

@@ -27,8 +27,8 @@
 (defn view
   [data]
   (if (coll? data)
-    [:div {:class (str (namespace-css "collection") " " (namespace-css (css-munge (type-string 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)]))
+    [:span {:class (str (namespace-css "primative") " " (namespace-css (css-munge (type-string data))))} (str data)]))
 
 (defn crawl
   [data]
@@ -37,8 +37,6 @@
     (view data)))
 
 (defn tab [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)]])