Unable to print or export large hierarchies

Question

I'm attempting to use the Angular Diagram control to display a hierarchy. I'm new to Syncfusion controls. I just started my evaluation period. For most of the cases it is used for (1 - 100 nodes), it works great. I am able to export or print the diagram just fine. But, there are some cases where I need to display a lot of nodes (~10,000). It will render the nodes eventually, however, if I export to anything but SVG, it does not work. In my local development it just appears to do nothing. No errors in the console, it just appears to die?

I have created a Stackblitz to demonstrate. It is currently set to render 11,111 nodes. Be patient, it will load.

To that end, I have a small list of questions:

Are there events on the diagram control that would let me know when rendering is complete? This would allow me to show a progress indicator to the user until it is done.
Is there anything I can do to get the export/print to work? Export to SVG always seems to work, but I'm guessing that's because the control itself is rendering an SVG? I could be wrong. Either way, my app is used by non-technical users, and SVGs aren't the most popular or friendly format to be giving them.
When used in my app (not demonstrated in the stackblitsz) the user can change some filters which causes a new diagram to be built from a new set of data. If I have one of these large dataset rendered, and the new options would only be rendering 10 nodes, it seems to take a long time to remove the old nodes and display the new ones. Is there a preferred method for changing the underlying data in a diagram? I can provide sample code for that as well. But maybe that should be a separate post.

Thanks in advance for your help!

Aravind Ravi · Accepted Answer

Hi Jeff,

Please find the response for queries in below table

Are there events on the diagram control that would let me know when rendering is complete? This would allow me to show a progress indicator to the user until it is done.

Once diagram gets created, diagram created event gets triggered. In that event you can hide the progress indicator. Please find the below code snippet for how to use created event.

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]="connDefaults"

[getNodeDefaults]="nodeDefaults" [layout]="layout" [dataSourceSettings]="data" [tool]="tool"

[snapSettings]="snapSettings" (created)="created($event)">

</ejs-diagram>

Multiple-page

To export the diagram with multiple-page set the multiplePage as true in the export options and set page height and width as 500, 500, set region as PageSettings. So that diagram gets exported with multiple page. Please refer below code snippet

public exportPng() {

let exportOptions: IExportOptions = {};

exportOptions.format = "PNG";

exportOptions.mode = "Download";

exportOptions.region = "PageSettings";

exportOptions.margin = { left: 10, right: 10, top: 10, bottom: 10 };

exportOptions.multiplePage = false;

exportOptions.fileName = "Hierarchy";

exportOptions.pageHeight = 700;

exportOptions.pageWidth = 700;

exportOptions.multiplePage = true;

this.diagram.exportDiagram(exportOptions);

}

Regards

Aravind Ravi

Aravind Ravi · Answer

Hi Jeff, 
 
We are validating your requirements and update you with more details on December 21st 2020. 
 
Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Jeff, 

On analyzing the provided sample, the diagram has been rendered with width as 1,97,000. By default, in the canvas, there is a limitation to export the canvas. In the diagram we have used the toDataURL to get the get the diagram content and export that content as a PNG image. So if we export the canvas with width as 1,97,000 means then diagram does not gets export due to its limitations. Please find the below link for more information 

Link: https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations 

In the sample you have tried to export the diagram with width and height as 20000, 20000. So while on export diagram has been exported, but due to large  height and width, nodes are rendered as thin line. Please refer below screenshot 

  

We can able to overcome this, by using the exportoptions’s custombounds. In the export options custom bounds set the bounds to export as top 0, left 0, height 500, width 500. So that diagram get exported with given bounds alone.  





public exportPng() { 
    let exportOptions: IExportOptions = {}; 
    exportOptions.format = "PNG"; 
    exportOptions.mode = "Download"; 
    exportOptions.region = "CustomBounds"; 
    exportOptions.margin = { left: 10, right: 10, top: 10, bottom: 10 }; 
    exportOptions.multiplePage = false; 
    exportOptions.fileName = "Hierarchy"; 
    exportOptions.bounds.x = 0; 
    exportOptions.bounds.x = 0; 
    exportOptions.bounds.height = 500; 
    exportOptions.bounds.width = 500; 
    this.diagram.exportDiagram(exportOptions); 
  } 

Regards 
Aravind Ravi

Jeff Proefrock · Answer

Thank you for the response. I implemented your suggestion in my Stackblitz. It should be noted that I had to modify your code slightly as it seems that `bounds` is not instantiated in `exportOptions`

exportOptions.bounds = new Rect(0, 0, 500, 500);

That does indeed successfully export a PNG. However, it's only the 500x500 image of the upper left corner of the entire hierarchy. I attempted to switch `multiplePage` to true and thought I was going to have success having the control give me all the 500x500 images for the entire export. It exported 2, then stopped. Any thoughts on how to get the entire hierarchy exported or printed?

Jeff Proefrock · Answer

There is also the open question of an event to know when the hierarchy is fully rendered. Are there events on the diagram control that would let me know when rendering is complete? This would allow me to show a progress indicator to the user until it is done.