Unable to generate 2000 nodes showing us page unresponsive in browser

[DHEERAJ PANDEY]

I wanted to load data in chunk, lets say n first load i wants to populate 2000 and when dblclick to node load another 2000 nodes.

Problem: When loading data it takes too much long time, page goes unresponsive (keeps loading)

please help me to improve load time.

below is my code:

import {

  ConnectorModel,

  ContextMenuSettingsModel,

  DataBinding,

  Diagram,

  DiagramAllModule,

  DiagramConstraints,

  DiagramTools,

  HierarchicalTree,

  IDoubleClickEventArgs,

  LayoutAnimation,

  LayoutModel,

  LayoutOrientation,

  NodeModel,

  OverviewAllModule,

  SnapConstraints,

  SnapSettingsModel

} from '@syncfusion/ej2-angular-diagrams';

import { CommonModule } from '@angular/common';

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { DiagramComponent } from '@syncfusion/ej2-angular-diagrams';

import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';

import { IEntityModel } from './shared/Model/entity.model';

import { EntityRelatedData } from './shared/data/entity';

import { DiagramConfigService } from './shared/services/diagram.config.service';

import { LayoutMode } from '@syncfusion/ej2/treemap';

Diagram.Inject(DataBinding, HierarchicalTree, LayoutAnimation);

@Component({

  standalone: true,

  imports: [DiagramAllModule, FormsModule, CommonModule, DialogModule, OverviewAllModule],

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.scss'],

  encapsulation: ViewEncapsulation.None,

})

export class AppComponent {

  @ViewChild('diagram')

  public diagram: DiagramComponent | undefined;

  @ViewChild('dialog')

  public dialog: DialogComponent | undefined;

  public diagramData: IEntityModel[] = [];

  public enityData: IEntityModel[] = [];

  public orientations: LayoutOrientation[] = ['TopToBottom', 'BottomToTop', 'LeftToRight', 'RightToLeft'];

  public selectedOrientation: LayoutOrientation = 'BottomToTop';

  public selectedEntity: IEntityModel = { EntityName: EntityRelatedData[0].EntityName, EntityCode: EntityRelatedData[0].EntityCode };

  public tool: DiagramTools = DiagramTools.Default;

  public showLegend: boolean = false;

  public selectedNode: NodeModel | null = null;

  public nodes: NodeModel[] = [];

  public connectors: ConnectorModel[] = [];

  public layout: LayoutModel = {};

  public data: IEntityModel[] = [];

  public showCloseIcon: Boolean = true;

  public showDialog: Boolean = false;

  public snapSettings: SnapSettingsModel = {

    constraints: SnapConstraints.None,

  };

  public diagramConstraints: DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Virtualization;

  public contextMenu: ContextMenuSettingsModel = {};

  public range: number = 2000;

  public constructor(private diagramConfigService: DiagramConfigService) { }

  ngOnInit() {

    this.renderNodes('9573497');

    this.layout = {

      type: 'ComplexHierarchicalTree',

      verticalSpacing: 320,

      horizontalSpacing: 300,

      enableAnimation: true,

      orientation: selectedOrientation,

      /*connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,*/

      margin: { left: 20, right: 20, top: 50, bottom: 0 },

      horizontalAlignment: "Center",

      verticalAlignment: "Center",

      getLayoutInfo: (node: Node, tree: TreeInfo) => {

        if (!tree.hasSubTree) {

          tree.orientation = 'Vertical';

          tree.type = 'Right';

        }

      },

    }

    if (this.diagram) {

      //this.diagram.updateViewPort();

      this.diagram.doLayout();

    }

  }

  public renderNodes(entityCode: string): any {

    this.nodes.push({

      id: entityCode.toString(),

      width: 100,

      height: 100,

      annotations: [{ content: entityCode.toString() }],

      //shape: { type: 'Basic', shape: 'Rectangle' },

      //style: { strokeColor: '#1E88E5', strokeWidth: 2 }

    });

    for (let i: number = 0; i < this.range; i++) {

      this.nodes.push({

        id: i.toString(),

        width: 100,

        height: 100,

        annotations: [{ content: (entityCode + "--" + i).toString() }],

        //shape: { type: 'Basic', shape: 'Rectangle' },

        //style: { strokeColor: '#1E88E5', strokeWidth: 2 }

      });

      this.connectors.push({

        id: 'connector' + i,

        sourceID: entityCode,

        targetID: i.toString(),

        type: 'Orthogonal'

      });

    }

    return this.nodes;

  }

  public renderChildNodes(entityCode: string): any {

    const nodeStart: number = parseInt(entityCode) * 100;

    const nodeEnd: number = nodeStart + this.range;

    for (let i: number = nodeStart; i <= nodeEnd; i++) {

      this.nodes.push({

        id: i.toString(),

        width: 100,

        height: 100,

        annotations: [{ content: (entityCode + "--" + i).toString() }],

        //shape: { type: 'Basic', shape: 'Rectangle' },

        //style: { strokeColor: '#1E88E5', strokeWidth: 2 }

      });

      this.connectors.push({

        id: 'connector' + i,

        sourceID: entityCode,

        targetID: i.toString(),

        type: 'Orthogonal'

      });

    }

    return this.nodes;

  }

  public nodeDoubleClick(args: IDoubleClickEventArgs): void {

    const node = args.source as NodeModel;

    if (node && node.id) {

      const entityCode = node.id;

      this.renderChildNodes(entityCode);

      if (this.diagram) {

        this.diagram.nodes = [...this.nodes];

        this.diagram.connectors = [...this.connectors];

        //this.diagram.layout = this.layout;

        this.diagram.refresh();

        //this.diagram.dataBind(); // Ensure the diagram is updated with new nodes and connectors

        this.diagram.doLayout(); // Recalculate the layout

      }

    }

  }

}

[Vivisa Ganesan]

Hi,

The diagram has rendered 6000 nodes in 30 seconds, which is a valid timeframe for rendering this volume of nodes. We did not encounter any browser responsiveness issues during this process. Could you please provide details on your performance metrics so we can validate and share further updates?

Regards,

Vivisa