Neither diagram is plotted nor giving any error for large input data

Hi,

I am using following diagram configuration:

const createDiagram = (userMapService: UserMapService): go.Diagram => {
  const { make } = go.GraphObject;

  return make(go.Diagram, {
    'undoManager.isEnabled': true,
    'textEditingTool.selectsTextOnActivate': false,
    'commandHandler.archetypeGroupData': { isGroup: true, vertical: true },
    padding: 20,
    mouseDrop: (e) => {
      finishDrop(e, null);
    }, 
    'dragSelectingTool.isEnabled': true,
    'draggingTool.isEnabled': false,
    model: make(go.GraphLinksModel, {
      linkKeyProperty: 'key',
    }),
    ChangedSelection: userMapService.selectionChanged,
    BackgroundSingleClicked: userMapService.clearPropertiesSelection,
    TextEdited: userMapService.nodeNameChanged,
    layout: make(go.TreeLayout, {
      layerSpacing: 40, 
      nodeSpacing: 40, 
      angle: 90, 
    }),
  });
};

For Small amount of data(diagramNodeData consisting around 500 nodes and diagramLinkData consisting around 1000 links) it is working fine .
But when we tried with larger set of data of around 1400 nodes and 2000 links, it was taking around 5-8 min to load and after that neither diagram was plotted nor any error was coming.
Can you please guide me how to debug this.
If you want i can even share the sample data vai mail, can’t post the data here as the data size is of around 1mb.

So your graph is not tree-structured. What kind of connectivity is there?
What is your link template?

This is a screenshot of diagram.
If you want i can share the exported image of this diagram but here I am not able to add that big image. Exported image size is of around 9mb


PFA the exported image with very limited data.

My Link Template:

const linkTemplate = (diagram: go.Diagram) => {
  diagram.linkTemplate = make(
    go.Link,
    {
      selectable: false,
      routing: go.Link.AvoidsNodes,
      corner: REM_VALUE,
      toEndSegmentLength: REM_VALUE,
      layerName: 'Background', // don't cross in front of any nodes
      toShortLength: 8,
    },
    make(
      go.Shape,
      { isPanelMain: true, stroke: COLOR.COOL_GREY, strokeWidth: 1.5 },
      new go.Binding('stroke', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('strokeWidth', 'isHighlighted', (h) => (h ? 2 : 1.5)).ofObject()
    ),
    make(
      go.Shape, // the arrowhead
      { toArrow: 'Triangle', scale: 1, fill: COLOR.COOL_GREY, stroke: COLOR.COOL_GREY },
      new go.Binding('stroke', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('fill', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('scale', 'isHighlighted', (h) => (h ? 1 : 1.2)).ofObject()
    )
  );
};

Thanks for the screenshots, including the Overview.
Does most of the delay go away if you set Link.routing to go.Link.Orthogonal?

Yes it is Working, but it is also overlapping some nodes…
Which is disturbing other functionalities…

Like in the below image the links are overlapping many nodes.

And Time Difference is way too much
Before which was taking 5-8 min is now maximum 5 seconds

I was just trying to identify the cause of the initial delay. I’ll see if there is a work-around for you using AvoidsNodes routing.

Ohhh!
Ya that would be a great help…

Thank you in advance…

Try this sample: Asynchronous AvoidsNodes Routing

It has the link template with Link.routing set to go.Link.Orthogonal, which is very fast.
Then after something is showing in the viewport, it starts setting Link.routing to go.Link.AvoidsNodes, one at a time, asynchronously. It gives precedence to those Orthogonal Links that are in or that cross the viewport. Eventually (after minutes?) all of the links in the diagram will have been routed with “AvoidsNodes” routing.

It also turns off that routing while a tool is operating, to greatly improve responsiveness of tools. But it may take some time for a link to be rerouted before the tool starts operating, or before any other interaction, including selection or scrolling or zooming.

Try using the [EDIT: latest] library.
This has greatly improved the performance for common cases.
This is a beta release, so please tell us if you encounter any problems.

You might still want to use the DelayLinkRoutingCurve class that is defined in the aforementioned Asynchronous AvoidsNodes Routing sample if you really want to show the diagram as soon as possible at the expense of getting the routing right later.

The example is suitable for us.
But can you guide me how to achieve it…
The sample do not have a source code…

As with almost all of our samples, the complete implementation is present in a script element in the page itself. Other than extensions, which are separate files.

Can we use the same approach for Angular project as well…?
I have tried to do so but re-routing is not happning.

Sure. All you need is to add the DelayLinkRoutingCurve class to your app and then add its use in your initDiagram method. Oh, and you need to use v2.1.33 which I expect to release today or tomorrow.

Hi Walter,
I have tried implementing as below but still it is not working,
It is plotting as per go.Link.Orthogonal and once plotted it should have re-routed each links to go.Link.AvoidsNodes, but it is not doing that.
Please let me know where I am going wrong…

1.) gojs and gojs-angular versions as follows:

"gojs": "2.1.38",
"gojs-angular": "1.0.2",

2.) Link Templates:

function linkTemplate(diagram: go.Diagram) {
  diagram.linkTemplate = make(
    go.Link,
    {
      selectionAdorned: false,
      routing: go.Link.Orthogonal, //go.Link.AvoidsNodes,
      corner: REM_VALUE,
      toEndSegmentLength: REM_VALUE,
      layerName: 'Background', // don't cross in front of any nodes
      toShortLength: 8,
    },
    make(
      go.Shape,
      { isPanelMain: true, stroke: COLOR.COOL_GREY, strokeWidth: 1.5 },
      new go.Binding('stroke', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('strokeWidth', 'isHighlighted', (h) => (h ? 2.5 : 1.5)).ofObject(),
      new go.Binding('stroke', 'isSelected', selectedColor).ofObject(),
      new go.Binding('strokeWidth', 'isSelected', (h) => (h ? 2.5 : 1.5)).ofObject()
    ),
    make(
      go.Shape, // the arrowhead
      { toArrow: 'Triangle', scale: 1, fill: COLOR.COOL_GREY, stroke: COLOR.COOL_GREY },
      new go.Binding('stroke', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('fill', 'isHighlighted', highlightColor).ofObject(),
      new go.Binding('scale', 'isHighlighted', (h) => (h ? 1 : 1.2)).ofObject(),
      new go.Binding('stroke', 'isSelected', selectedColor).ofObject(),
      new go.Binding('fill', 'isSelected', selectedColor).ofObject(),
      new go.Binding('scale', 'isSelected', (h) => (h ? 1 : 1.2)).ofObject()
    )
  );
}

3.) Diagram config:

const createDiagram = (service): go.Diagram => {

  const { make } = go.GraphObject;
  const diagram = make(go.Diagram, {

    'undoManager.isEnabled': true,

    'textEditingTool.selectsTextOnActivate': false,

    'commandHandler.archetypeGroupData': { isGroup: true, vertical: true },

    initialScale: 0.9,
    padding: 20,
    mouseDrop: (e) => {
      finishDrop(e, null);
    }, // finishDrop will be called when a drag-drop occurs in the Diagram's background
    'dragSelectingTool.isEnabled': true,
    'draggingTool.isEnabled': false,
    model: make(go.GraphLinksModel, {
      linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel

    }),
    ChangedSelection: service.selectionChanged,
    BackgroundSingleClicked: service.clearPropertiesSelection,
    TextEdited: service.nodeNameChanged,
    layout: make(go.TreeLayout, {
      layerSpacing: 60,
      nodeSpacing: 60,
      angle: 90, 
      setsChildPortSpot: false,
      setsPortSpot: false,
    }),
  });
const delay = new DelayLinkRoutingCurve(diagram, null);
return diagram;
};
  1. ) and have imported DelayLinkRoutingCurve class.

Try setting a breakpoint in the DelayLinkRoutingCurve.startAvoiding code. Maybe it’s being called too early, before your diagram has been loaded.

Thanks Walte,
Actually Now I am calling startAvoiding function once my diagram is loaded and is working fine.
Just want to confirm if I am calling startAvoiding function multiple time it doesnt make any issue right…?
I mean i am calling it everytime my diagram is drawn…

When do you mean “everytime my diagram is drawn”?