Wednesday, 20 August 2025

Dynamic level color change v1

Excellent idea. Let's do it step by step, starting with a very simple goal. This is the best way to make sure the connection between Power BI and Deneb is working correctly.

Our First Goal: When you select any item from a slicer, only that single node in the tree will turn red. All other nodes will stay visible and keep their original colors.

To do this, we will use the dynamic slicer setup from before, but we will use a much simpler Deneb JSON modification.


Part 1: Setting Up the Dynamic Slicer in Power BI

This part is the foundation and remains the same. If you have already done this correctly, you can just double-check your work.

Step 1.1: Create the Dynamic Slicer Table

Create a new table in Power BI using this DAX formula. This table will power our slicers.

Code snippet
Dynamic Slicer Table = 
DISTINCT(
    UNION(
        // Level 1
        FILTER(SELECTCOLUMNS('YourTable', "Level", "Level 1", "DisplayName", [level1], "NodeID", [level1]), [DisplayName] <> BLANK()),
        // Level 2
        FILTER(SELECTCOLUMNS('YourTable', "Level", "Level 2", "DisplayName", [level2], "NodeID", [level1] & "|" & [level2]), [DisplayName] <> BLANK()),
        // Level 3
        FILTER(SELECTCOLUMNS('YourTable', "Level", "Level 3", "DisplayName", [level3], "NodeID", [level1] & "|" & [level2] & "|" & [level3]), [DisplayName] <> BLANK()),
        // Level 4
        FILTER(SELECTCOLUMNS('YourTable', "Level", "Level 4", "DisplayName", [level4], "NodeID", [level1] & "|" & [level2] & "|" & [level3] & "|" & [level4]), [DisplayName] <> BLANK()),
        // Level 5
        FILTER(SELECTCOLUMNS('YourTable', "Level", "Level 5", "DisplayName", [level5], "NodeID", [level1] & "|" & [level2] & "|" & [level3] & "|" & [level4] & "|" & [level5]), [DisplayName] <> BLANK())
    )
)

(Remember to replace 'YourTable' with the name of your actual data table).

Step 1.2: Create the Slicers on your Report

  1. Add a slicer for the Level column from your new Dynamic Slicer Table.

  2. Add a second slicer for the DisplayName column from the Dynamic Slicer Table.

Step 1.3: Create the DAX Measure

Create a new measure to capture the selection.

Code snippet
Selected Node ID = SELECTEDVALUE('Dynamic Slicer Table'[NodeID], "")

Step 1.4: Configure the Deneb Visual

  1. Select your Deneb visual.

  2. Drag the [Selected Node ID] measure into the "Values" data role.

  3. Rename the measure in the field well to be exactly pbi_selected_node.


Part 2: Simple Deneb JSON Modification

For this part, it is best to start with your original JSON code to avoid any confusion from our previous, more complex attempts.

Step 2.1: Add a Single Signal

  1. Open the Deneb editor.

  2. Find the "signals": [...] array.

  3. Add the following signal inside the array. This is the only signal you need for this simple highlight.

JSON
    {
      "name": "slicerSelection",
      "value": null,
      "update": "data('dataset') && length(data('dataset')) > 0 ? data('dataset')[0]['pbi_selected_node'] : null"
    }

Step 2.2: Modify the Node Color

  1. Scroll down to the "marks": [...] array.

  2. Find the group mark with "name": "node".

  3. Inside that mark's "encode": { "update": { ... } } block, find the "fill" and "stroke" properties.

  4. Replace the existing fill and stroke lines with these new ones:

JSON
          "fill": {
            "signal": "datum.id === slicerSelection ? '#ffcccb' : merge(hsl(scale('colour', datum.treeParent)), {l:0.94})"
          },
          "stroke": {
            "signal": "datum.id === slicerSelection ? '#e60000' : merge(hsl(scale('colour', datum.treeParent)), {l:0.79})"
          },

Explanation of the code:

This signal expression checks: datum.id === slicerSelection ?. This means "Is the ID of the current node (datum.id) exactly the same as the ID from the slicer (slicerSelection)?"

  • If YES, the fill color becomes light red (#ffcccb) and the border becomes a strong red (#e60000).

  • If NO, the colors remain exactly as they were before, based on their branch.

Step 2.3: Apply Changes

Click the "Apply" button in the Deneb editor.

Now, your visual should behave exactly as you requested. The tree will be fully visible, and when you select any item from your slicer, only that specific node will turn red. This is a great first step to confirm the connection is working.

No comments:

Post a Comment