        (reduce (fn [acc [property value]]
                  (assoc acc (keyword property) value)) {})))
 
-(def config {:initial-hierarchy-depth-budget false})
+(declare jsonml->hiccup)
 
-(declare jsonml->hiccup)
+(def default-cljs-devtools-prefs @devtools.prefs/default-config)
+
+(def customized-cljs-devtools-prefs
+  {:header-style ""
+   :none-style   "display: none"
+   :index-tag    [:span :none-style] ;;; Hide the index spans on the left hand of collections. Shows how many elements in a collection.
+   :initial-hierarchy-depth-budget false})
+
+(def effective-cljs-devtools-prefs (merge default-cljs-devtools-prefs customized-cljs-devtools-prefs))
+
+(defn make-devtools-api-call [api-fn & args]
+  (with-cljs-devtools-prefs effective-cljs-devtools-prefs
+    (apply api-fn args)))
+
+(defn cljs-devtools-header [& args]
+  (apply make-devtools-api-call devtools.formatters.core/header-api-call args))
+
+(defn cljs-devtools-body [& args]
+  (apply make-devtools-api-call devtools.formatters.core/body-api-call args))
 
 (defn data-structure [jsonml]
   (let [expanded? (r/atom false)]

(ns day8.re-frame.trace.app-db
  (:require [reagent.core :as r]
            [clojure.string :as str]
            [devtools.formatters.core :as cljs-devtools]
            [day8.re-frame.trace.localstorage :as localstorage]
            [day8.re-frame.trace.components :as components]))

(devtools.prefs/set-pref! :header-style "")

;; Hide the index spans on the left hand of collections. Shows how many elements in a collection.
(devtools.prefs/set-pref! :none-style "display: none")
(devtools.prefs/set-pref! :index-tag [:span :none-style])

(defn string->css [css-string]
  "This function converts jsonml css-strings to valid css maps for hiccup.

          (and @expanded?
               (or (string? data)
                   (number? data))) [:div {:style {:margin "10px 0"}} data]
          @expanded? (jsonml->hiccup (cljs-devtools-header data)))]])))

(defn render-state [data]
  (let [subtree-input (r/atom "")
