Removing Nodes weird behavior

[ThanasisArvas]

Hello,

I am trying to trigger the removal of specific nodes inside the onExpandOrCollapse() method. I am collecting the nodes that need to be removed inside the nodeExit() and then on the onExpandOrCollapse() I am invoking the removeNode() for them. Even though the nodes are correctly removed the state of the chart is somehow lost or something is misbehaving, so expanded state is lost for all nodes and then when expanding or collapsing nodes it shows weird behavior. Would you please be able to provide some input on why its not working as expected? I believe it has to do something with the timing but I cannot pinpoint exactly the issue.

Basically my goal is to show specific nodes only when they have a specific type of horizontal connections, and hide them when the horizontal connections is not visible anymore, meaning that the node they were connected to is now collapsed.

` .nodeExit(function (d) {
const exitingNode = d.data;
exitingNode.isVisible = false;
if (!exitingNode.visible) return;

    // Get all connections related to the exiting node
    const existingConnections = self.connections.filter(conn =>
      (conn.from === exitingNode.id || conn.to === exitingNode.id) && (conn.type === 'external' || conn.type === 'internal-user')
    );

    let otherNodes = [];
    // Collect all opposite nodes from the connections
    existingConnections.forEach(conn => {
      if (conn.from === exitingNode.id) {
        otherNodes.push(conn.to);
      } else if (conn.to === exitingNode.id) {
        otherNodes.push(conn.from);
      }
    });

    const tempConnections = self.connections.filter(conn =>
      conn.from !== exitingNode.id && conn.to !== exitingNode.id && conn.isVisible
    );


    otherNodes.forEach(nodeId => {
      if (tempConnections.filter(conn => conn.from === nodeId || conn.to === nodeId).length === 0) {
        self.nodesToRemove.push(nodeId);
      }
    });

    self.connections.forEach(item => {
      if (self.chart.getChartState().allNodes.some(d => d.id === item.from && d.data.isVisible) && self.chart.getChartState().allNodes.some(d => d.id === item.to && d.data.isVisible)) {
        item.isVisible = true;
      } else {
        item.isVisible = false;
      }
    })
  })
  .onExpandOrCollapse((d) => {
    //handle Root node collapse
    if (d.id === self.chart.getChartState().root.id && !d.children) {
      self.chart.initialExpandLevel(0);
    }
    //Remove Nodes
    self.nodesToRemove.forEach(nodeId => {
      const nodeToRemove = self.visualData.filter(node => node.id === nodeId)[0]
      if (nodeToRemove.idType === 'Contact') {
        //Line that breaks it
        self.chart.removeNode(nodeToRemove.parentId);
      } else {
        //Line that breaks it
        self.chart.removeNode(nodeToRemove.id);
      }
    });

    self.nodesToAdd.forEach(nd => {
      self.chart.addNode(nd);
    })

    //Set visible on connections
    self.connections.forEach(item => {
      if (self.chart.getChartState().allNodes.some(d => d.id === item.from && d.data.isVisible) && self.chart.getChartState().allNodes.some(d => d.id === item.to && d.data.isVisible)) {
        item.isVisible = true;
      } else {
        item.isVisible = false;
      }
    })

    self.nodesToAdd = [];
    self.nodesToRemove = [];


  })
  .nodeEnter(async function (d) {
    const enteringNode = d.data;
    enteringNode.isVisible = true;
    if (!enteringNode.visible) return;
    const connectedNodeIds = new Set();

    // Get all connections related to the exiting node
    const existingConnections = self.connections.filter(conn =>
      conn.from === enteringNode.id || conn.to === enteringNode.id
    );

    let nodesToAdd = [];
    // Collect all opposite nodes from the connections
    existingConnections.forEach(conn => {
      if (conn.from === enteringNode.id) {
        nodesToAdd.push(conn.to);
      } else if (conn.to === enteringNode.id) {
        nodesToAdd.push(conn.from);
      }
    });

    const newNodes = self.visualData.filter(node => nodesToAdd.includes(node.id));
    newNodes.forEach(node => {
      if (node.parentId !== self.chart.getChartState().root.id) {
        const parentNode = self.visualData.filter(nd => nd.id === node.parentId)[0];
        self.nodesToAdd.push(parentNode);
      }
      node._expanded = true;
      self.nodesToAdd.push(node);
    });


    self.connections.forEach(item => {
      if (self.chart.getChartState().allNodes.some(d => d.id === item.from && d.data.isVisible) && self.chart.getChartState().allNodes.some(d => d.id === item.to && d.data.isVisible)) {
        item.isVisible = true;
      } else {
        item.isVisible = false;
      }
    })

  })`