[BHP1-1317] Add Color Shading to Result Matrices

bases/behave_components/src/cljs/behave/components/matrix_table.cljs

@@ -17,7 +17,18 @@
           [:th.table-header__header {:scope "col"} header-name])
         (conj [:th.table-header__header {:scope "col"}]))]])
 
-(defn matrix-table [{:keys [title sub-title column-headers row-headers data rows-label cols-label]}]
+(defn matrix-table
+  "A component for constructing a table
+  - title : string
+  - sub-title : string
+  - column-headers : sequence of column ids [col1 col2, ... ]
+  - row-headers : sequence of row ids [row1, row2, ... ]
+  - data : a sequence of [row1 col1] -> value
+  - rows-label : string
+  - cols-labl : string
+  - cell-colors : a map of [row col] -> hex color
+  "
+  [{:keys [title sub-title column-headers row-headers data rows-label cols-label cell-colors]}]
   (let [column-headers      (->params column-headers)
         row-headers         (->params row-headers)
         data                (->params data)
@@ -32,6 +43,7 @@
         [:tr.table-row
          [:th.table-header__header {:scope "row"} row-name]
          (for [column-header column-headers
-               :let          [j (:key column-header)]]
+               :let          [j (:key column-header)
+                              color (get cell-colors [i j])]]
            ^{:key j}
-           [:td.table-cell (get data [i j])])])]]))
+           [:td.table-cell {:style (when color {:background-color color})} (get data [i j])])])]]))

components/map_utils/src/map_utils/core.cljc

@@ -12,8 +12,21 @@
   "Assoc k onto m with v. If k already exists, conj v into a vector."
   [m k v]
   (assoc m k
-    (if-let [cur (get m k)]
-      (if (vector? cur)
-        (conj cur v)
-        [cur v])
-      v)))
+         (if-let [cur (get m k)]
+           (if (vector? cur)
+             (conj cur v)
+             [cur v])
+           v)))
+
+(defn update-map
+  "Update map given"
+  ([m value-fn]
+   (reduce-kv (fn [m k v]
+                (assoc m k (value-fn v)))
+              {}
+              m))
+  ([m value-fn key-fn]
+   (reduce-kv (fn [m k v]
+                (assoc m (key-fn k) (value-fn v)))
+              {}
+              m)))

components/map_utils/src/map_utils/interface.cljc

@@ -10,3 +10,7 @@
        :doc      "Associate a key with a value in a map. If the key already exists in the map,
                  a vector of values is associated with the key."}
   assoc-conj c/assoc-conj)
+
+(def ^{:argslist '([map value-fn & key-fn])
+       :doc      "Update map keys and/or value"}
+  update-map c/update-map)

development/migrations/2026_04_09_add_fire_type_color_tag_set.clj

@@ -0,0 +1,101 @@
+(ns migrations.2026-04-09-add-fire-type-color-tag-set
+  (:require [behave-cms.server        :as cms]
+            [behave-cms.store         :refer [default-conn]]
+            [datomic.api              :as d]
+            [schema-migrate.interface :as sm]))
+
+;; ===========================================================================================================
+;; Overview
+;; ===========================================================================================================
+
+;; 1. Create "Fire Type" color tag set with 3 tags: Surface, Torching, Crowning
+;; 2. Link the CrownFireType list to the new tag set via :list/color-tag-set
+;; 3. Assign :list-option/color-tag-ref to each of the 4 CrownFireType list options:
+;;    - "Surface"   → Surface tag
+;;    - "Torching"  → Torching tag
+;;    - "CondCrown" → Surface tag
+;;    - "Crowning"  → Crowning tag
+
+;; ===========================================================================================================
+;; Initialize
+;; ===========================================================================================================
+
+(cms/init-db!)
+
+#_{:clj-kondo/ignore [:missing-docstring]}
+(def conn (default-conn))
+
+;; ===========================================================================================================
+;; Payload
+;; ===========================================================================================================
+
+;; Creates the Fire Type tag set and links it to the CrownFireType list.
+;; The temp id -1 is used to reference the tag set from the list entity within the same transaction.
+
+#_{:clj-kondo/ignore [:missing-docstring]}
+(def payload
+  (sm/postwalk-insert
+   [{:db/id                                                      -1
+     :tag-set/name                                               "Fire Type"
+     :tag-set/translation-key                                    "behaveplus:tags:fire-type"
+     :tag-set/color?                                             true
+     :tag-set/tags
+     [{:db/id               -2
+       :tag/name            "Surface"
+       :tag/color           "#95AC3380"
+       :tag/translation-key "behaveplus:tags:fire-type:surface"
+       :tag/order           0}
+      {:db/id               -3
+       :tag/name            "Torching"
+       :tag/color           "#FFDA0D80"
+       :tag/translation-key "behaveplus:tags:fire-type:torching"
+       :tag/order           1}
+      {:db/id               -4
+       :tag/name            "Crowning"
+       :tag/color           "#95AC33B2"
+       :tag/translation-key "behaveplus:tags:fire-type:crowning"
+       :tag/order           2}]}
+    {:db/id              (sm/name->eid conn :list/name "CrownFireType")
+     :list/color-tag-set -1}]))
+
+#_{:clj-kondo/ignore [:missing-docstring]}
+(def translations-payload
+  (sm/build-translations-payload
+   conn
+   {"behaveplus:tags:fire-type"          "Fire Type"
+    "behaveplus:tags:fire-type:surface"  "Surface"
+    "behaveplus:tags:fire-type:torching" "Torching"
+    "behaveplus:tags:fire-type:crowning" "Crowning"
+    "behaveplus:color_by"                "Color by"}))
+
+;; ===========================================================================================================
+;; Transact Payload
+;; ===========================================================================================================
+
+(comment
+  ;; Phase 1: create the tag set, link it to the list, and add translations
+  #_{:clj-kondo/ignore [:missing-docstring]}
+  (def tx-data @(d/transact conn (concat payload translations-payload)))
+
+  ;; Phase 2: assign color-tag-ref to each CrownFireType list option.
+  ;; Must run AFTER Phase 1 so the tag eids exist for sm/t-key->eid lookups.
+  (let [list-options    (:list/options (d/entity (d/db conn) (sm/name->eid conn :list/name "CrownFireType")))
+        name->t-key     {"Surface"   "behaveplus:tags:fire-type:surface"
+                         "Torching"  "behaveplus:tags:fire-type:torching"
+                         "CondCrown" "behaveplus:tags:fire-type:surface"
+                         "Crowning"  "behaveplus:tags:fire-type:crowning"}
+        options-payload (->> list-options
+                             (keep (fn [{eid :db/id opt-name :list-option/name}]
+                                     (when-let [t-key (get name->t-key opt-name)]
+                                       {:db/id                     eid
+                                        :list-option/color-tag-ref (sm/t-key->eid conn t-key)})))
+                             vec)]
+    (def tx-data-2 @(d/transact conn options-payload))))
+
+;; ===========================================================================================================
+;; In case we need to rollback.
+;; ===========================================================================================================
+
+(comment
+  (sm/rollback-tx! conn tx-data-2)
+  (sm/rollback-tx! conn tx-data))

projects/behave/resources/public/css/app-style.css

@@ -1600,3 +1600,31 @@ body {
   text-align: left;
 }
 
+.result-matrices__color-selector {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 12px;
+}
+
+.result-matrices__color-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.result-matrices__color-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.result-matrices__color-legend__swatch {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+