Performance issue for javascript event's on large amount of data

[NemanjaRCT]

Hi,

I have parent node with about 190 children (dynamically loaded from endpoint).
Graph is displayed pretty quick, and moving/zooming works pretty well.
I have attached click listeners on nodes, so when I click node to select it, or when I click menu button, it takes 4+ seconds to respond

I am using angular. In .nodeUpdate I'am creating new component, and reacting like this this.subscription.add(componentRef.instance.selectNode.subscribe(this.handleSelectNode));

Any ideas how to improve performances?

this.diagram = new OrgChart<DiagramNodeData>()
      .nodeContent((node: any) => {
        return `<div class="diagram-node-container" style="width:${node.width}px;height:${node.height}px"></div>`;
      })
      .linkUpdate(() => { select('#diagram.links-wrapper').attr('stroke', () => '#000') })
      .nodeUpdate((node: any, index: number, nodes: any) => {
        const componentRef = this.viewContainerRef.createComponent(DiagramNodeComponent);
        componentRef.instance.diagramNode = node.data;
        componentRef.instance.isAccountNode = node.data.Id === this.currentId;
        componentRef.changeDetectorRef.detectChanges();
        this.subscription.add(componentRef.instance.selectNode.subscribe(this.handleSelectNode));
        const content = componentRef.location.nativeElement;
        const nodeHTMLElement = (nodes[index] as unknown as HTMLDivElement);
        const containerHTMLElement = nodeHTMLElement.querySelector('.diagram-node-container');
        containerHTMLElement!.innerHTML = '';
        containerHTMLElement!.appendChild(content);
        select(nodeHTMLElement).select('.diagram-node-container').on('click', _ => { select(nodeHTMLElement).raise() });
      })
      .container('#diagram')
      .data(this.diagramData)
      .scaleExtent([0.65, 1.10])
      .render().fit({ scale: false })
  }

[bumbeishvili]

Hi, unless you provide online sample with the issue reproduced, I will not be able to help

You can fork and extend this sample - https://stackblitz.com/edit/angular-ivy-gneris