How did you do the dashed border on the selected node demo?

[ndtreviv]

I see that you've added some docs on selecting nodes.

How did you do the dashed border around the node on node 19 below:

[ndtreviv]

Actually, I can see that in the docs, but the issue is that it's not re-rendering for me...

I'm using react, like so:

  const [selectedNode, setSelectedNode] = useState(null);
...
        <VisGraph
          selectedNodeId={selectedNode}
          events={{
            [Graph.selectors.node]: {
              click: useCallback((n) => { setSelectedNode(n.id); }, [])
            },
            [Graph.selectors.background]: {
              click: useCallback((n) => { setSelectedNode(undefined); }, [])
            }
          }}
        />

I'm also console.log('SELECTED', selectedNode); and can confirm that the component is being re-rendered, but the chart doesn't update to show the node is selected (or deselected when clicking on the background):

Interestingly, when I edit the code and it hot-reloads the node is magically selected.
What do I need to do to force it to render as selected?

[rokotyan]

@ndtreviv Probably a bug, we'll take a look

[reb-dev]

Hi @ndtreviv , thanks for reporting this! It was indeed a bug on our end. A fix will be pushed soon, however as a temporary fix you can supply data to the SingleContainer component instead and it will work as expected.

<VisSingleContainer data={data} ...>
  <VisGraph selectedNodeId={selectedNodeId} .../>
</VisSingleContainer>

[ndtreviv]

Hmm...the data is already being set on the container...
I'll wait for the fix anyway and see if it helps.