Is there a built-in way to enable hiding or expanding of all the child nodes of a node?

[starter-dev]

Here's an example of what I mean:

2023-02-17.00-52-28.-.Trim.mp4

[bcakmakoglu]

There's no built-in mechanism to hide all children of a parent node, no.

You can just toggle it yourself with something like this

const parentId = parentNode.id // let's assume you have to parent node available

getNodes.value.filter(n => n.parentNode === parentId).forEach(c => (c.hidden = true))

[starter-dev]

Got it! Thank you so much!

[starter-dev]

I somewhat found another way using the getConnectedEdges utility. I didn't read the whole docs so I found this method while reading this discussion: #446

This is the recursive function to hide the children/grandchildren of a node. This function will be called when a node is clicked:

const toggleChildNode = (node: GraphNode, hideNode: boolean) => {
  const connectedEdges = getConnectedEdges([node], edges.value)

  connectedEdges.forEach((edge) => {
    const targetNode = findNode(edge.target)

    if (targetNode) {
      // Don't toggle the specific node that was clicked because we only want to toggle the children
      if (targetNode.id !== node.id) {
        targetNode.hidden = hideNode

        toggleChildNode(targetNode, hideNode)
      }
    }
  })
}

Node's click event handler:

click: (event: NodeMouseEvent) => {
  // Id of the first child node detected
  const firstChildNodeIdDetected = getConnectedEdges([event.node], edges.value)
    .map((e) => e.target) // 'target' is the id of the node
    .filter((targetId) => targetId !== event.node.id)[0] // filter the ids so the node that was clicked will not be included
  const firstChildNodeDetected: GraphNode | undefined = findNode(firstChildNodeIdDetected)
  /**
   * If there is a child node detected, use its hidden attribute value to determine if you want to show or hide the children
   * 
   * It means that if the first child node is hidden, then it assumes you want to show all the children; if it is not hidden, it assumes that you want to hide all the children.
   * 
   * If no child node is detected, just make the value 'true'
   */

  const toHide: boolean = !(firstChildNodeDetected?.hidden ?? false)

  toggleChildNode(event.node, toHide)
}

2023-02-17.06-39-36.-.Trim.mp4

Please feel free to express your thoughts on this. Thank you!