0

I'm using ngx-graph for an org tree chart in an Angular 10 site and the chart often doesn't appear when the page loads (and it never loads in Cypress.io tests). There isn't any error, it just doesn't appear (big blank space) and I have to refresh once or twice to get it to show. The rest of the page loads without issue. Any advice on how to debug this?

I was able to repro the issue here: https://stackblitz.com/edit/angular-material-10-org-chart

I used this example as the starting point: https://swimlane.github.io/ngx-graph/demos/examples#organization-tree

Start of the template:

<ngx-graph
      [view]="[800, 500]"
      [links]="links"
      [nodes]="nodes"
      [curve]="curve"
      [layout]="layout"
      [nodeWidth]="150"
      [nodeHeight]="100"
      [layoutSettings]="layoutSettings"
      [enableZoom]="false"
      [autoZoom]="true"
      [draggingEnabled]="false"
    >
      <ng-template #defsTemplate>
        <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
          <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
        </svg:marker>
      </ng-template>

Version:

"@swimlane/ngx-graph": "^7.2.0",

Edit: [update$]="update$" doesn’t appear to do anything. (As per Reload ngx-graph with new data). Also, I tried calling ngOnit() after changes and that doesn’t help either.

beachCode
  • 3,202
  • 8
  • 36
  • 69

0 Answers0