0

I am trying to implement expand and collapse child nodes in react-flow in a react application. I have tried to use the hidden property of nodes and edges to hide.

 const hide = (hidden: boolean) => (nodeOrEdge: any) => {
  const value = nodeOrEdge.id.includes("hidden");
  if (value) {
    nodeOrEdge.hidden = hidden;
  }
  return nodeOrEdge;
  };

But this implementation checks for text 'hidden' in the id property and hides it. But I want to hide entire child nodes and edges when the parent node is clicked. Also tried creating a group element and placed child nodes inside it.

The onNodeClick property returns the current node and also getOutgoers() and getConnectedEdges() all the outgoing nodes and connected edges.

const onNodeClick = (_: ReactMouseEvent, node: Node) => {
    console.log("clicked node", node);
    let n = getOutgoers(node, nodes, edges);
    let e = getConnectedEdges(nodes, edges);
    console.log("All outgoing node", n);
    console.log("All connected edges", e);
};

I'm trying to find a cleaner way to hide child nodes if one clicks on a parent node that has child nodes and edges. Any help or suggestions would be beneficial. The code up to this point is at codesandbox

simpywatch
  • 43
  • 5

1 Answers1

2

Custom Expand and Collapse Feature for ReactFlow Charts (No Premium Edition Required)

I have created a custom expand and collapse feature for ReactFlow charts that functions similarly to the premium expand and collapse feature available in the library. While it may not be identical to the premium version, it is a viable alternative that demonstrates the possibility of implementing this functionality without needing a premium edition.

I have added the snippet to codesandbox you can experience it here Click Here

https://codesandbox.io/s/dynamic-flow-chart-4494qt

user21988229
  • 21
  • 3