Update UI for subs

src/day8/re_frame/trace/styles.cljs

@@ -1,6 +1,6 @@
 (ns day8.re-frame.trace.styles
   (:require [mranderson047.garden.v1v3v3.garden.core :as garden]
-            [mranderson047.garden.v1v3v3.garden.units :refer [em px percent]]
+            [mranderson047.garden.v1v3v3.garden.units :as units :refer [em px percent]]
             [mranderson047.garden.v1v3v3.garden.color :as color]
             [mranderson047.garden.v1v3v3.garden.selectors :as s]
             [day8.re-frame.trace.common-styles :as common]
@@ -256,7 +256,7 @@
     {:background-color common/white-background-color
      :color            common/text-color
      :width            "48px"                               ;common/gs-50s
-     :height           "17px"                               ;common/gs-19s
+     :height           "19px"                               ;common/gs-19s
      :font-size        "10px"
      :font-weight      "bold"
      :border           "1px solid #bdbdbd"
@@ -274,6 +274,8 @@
    [".rft-tag__subscription_not_run"
     {:background-color common/sub-not-run-color
      :color "white"}]
+   [".rft-tag__short"
+    {:width common/gs-19}]
 
    [:.button {:padding       "5px 5px 3px"
               :margin        "5px"

src/day8/re_frame/trace/subs.cljs

@@ -474,9 +474,11 @@
                                                           (assoc sub :previous-value (:previous-value state))
                                                           sub)]
                                        sub)))
-                       (sort-by :order sub-sort-val))]
+                       (sort-by :order sub-sort-val)        ;; Also sort by subscription-id
+                       #_(sort-by :path))]
     subx))
 
+
 (rf/reg-sub
   :subs/pre-epoch-state
   :<- [:subs/current-epoch-sub-state]

src/day8/re_frame/trace/view/subs.cljs

@@ -6,7 +6,8 @@
             [mranderson047.reagent.v0v7v0.reagent.core :as r]
             [day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
             [day8.re-frame.trace.common-styles :as common]
-            [day8.re-frame.trace.view.components :as components])
+            [day8.re-frame.trace.view.components :as components]
+            [mranderson047.garden.v1v3v3.garden.units :as units])
   (:require-macros [day8.re-frame.trace.utils.macros :as macros]))
 
 ;(s/def ::query-v any?)
@@ -44,6 +45,9 @@
 (defn sub-tag [type label]
   [components/tag (sub-tag-class type) label])
 
+(defn short-sub-tag [type label]
+  [components/tag (str (sub-tag-class type) " rft-tag__short") label])
+
 (defn title-tag [type title label]
   [rc/v-box
    :class "noselect"
@@ -112,7 +116,13 @@
                        :margin "auto"
                        :child [:span.arrow (if open? "▼" "▶")]]]
               [rc/h-box
-               :children (into [] (map (fn [o] [sub-tag o (short-tag-desc o)])) order)]
+               :width "75px"
+               :gap common/gs-5s
+               :children (into []
+                               (comp
+                                 (take 3)
+                                 (map (fn [o] [short-sub-tag o (short-tag-desc o)])))
+                               order)]
 
               #_[rc/box
                  ;:width "64px"                                ;; (100-36)px from box above