Wednesday, 20 August 2025

Dynamic level color change 3

 Of course. This is the final step to get the full path highlighting you wanted.


Let's break it down. Your request is: highlight the entire path from the top-level parent down to the node you selected.


The great news is that our setup is 95% of the way there. The Power BI configuration is perfect, and the signals we added in the last step are exactly what we need. We only need to make one small change to the Deneb JSON to tell it to color the *whole path* instead of just the *single node*.


-----


### **Deneb JSON Modification**


You do **not** need to change anything in Power BI.


#### **Step 1: The Signals are Correct**


The signals `slicerSelection` and `slicerHighlightPath` that we set up are already correctly identifying the full path from the parent to the child. We don't need to change them.


#### **Step 2: Modify the Node Color Logic**


This is the only change you need to make. We will tell the nodes to check if they are "in the path" instead of checking if they are "the selected node".


1. Open the Deneb editor.

2. Scroll down to the `"marks": [...]` array.

3. Find the group mark with `"name": "node"`.

4. Inside that mark's `"encode": { "update": { ... } }` block, **replace** the `fill` and `stroke` properties with these new ones:


<!-- end list -->


```json

          "fill": {

            "signal": "slicerSelection && slicerSelection !== '' ? (indexof(slicerHighlightPath, datum.id) > -1 ? '#ffcccb' : '#ffffff') : merge(hsl(scale('colour', datum.treeParent)), {l:0.94})"

          },

          "stroke": {

            "signal": "slicerSelection && slicerSelection !== '' ? (indexof(slicerHighlightPath, datum.id) > -1 ? '#e60000' : '#d3d3d3') : merge(hsl(scale('colour', datum.treeParent)), {l:0.79})"

          },

```


**Explanation of the Change:**


  * Previously, the code checked `datum.id === slicerSelection`.

  * The new code checks `indexof(slicerHighlightPath, datum.id) > -1`.

  * This new condition asks, "Is the ID of the current node (`datum.id`) present anywhere inside the `slicerHighlightPath` array?" Since that array contains the selected node and all its parents, this simple change will color the entire path red.


#### **Step 3: The Link Colors are Already Correct**


The logic we added in the last step for the links (`"type": "path"`) already uses `slicerHighlightPath`. It's already set up to color the entire path of lines red. You do not need to change it.


#### **Step 4: Apply Changes**


Click the "Apply" button in the Deneb editor.


Now, your visual will work exactly as requested. When you use your slicers to select any node, that node and its entire chain of parents back to the root will turn red. The lines connecting them will also be red, and everything else in the tree will be a neutral white and grey.

No comments:

Post a Comment