Introduce the latest Feature options from workflow_graph into the Dart wrapper.

package.json

@@ -31,7 +31,6 @@
     "@angular/compiler": "^17.0.7",
     "@angular/compiler-cli": "^17.0.7",
     "@angular/localize": "^17.0.7",
-    "@types/dagre": "0.7.48",
     "@types/jasmine": "~4.3.0",
     "@types/lodash": "^4.14.196",
     "@types/node": "18.11.9",
@@ -58,7 +57,7 @@
     "@angular/material": "^17.0.4",
     "@angular/platform-browser": "^17.0.7",
     "@angular/platform-browser-dynamic": "^17.0.7",
-    "dagre": "^0.8.5",
+    "@dagrejs/dagre": "1.1.3",
     "lodash": "^4.17.21",
     "rxjs": "7.5.7",
     "safevalues": "^1.0.1",

src/app/data_types_internal.ts

@@ -489,6 +489,13 @@ export interface FeatureToggleOptions {
    * Custom themes can override the theme behavior.
    */
   theme?: Theme;
+
+  /**
+   * Whether the layout should respect the order of the nodes in the graph
+   * instead of optimizing for space according to the layout algorithm.
+   * Defaults to `false`.
+   */
+  respectNodeOrder?: boolean;
 }
 /**
  * Default set of functionality to enable / disable in the DAG Component
@@ -513,6 +520,7 @@ export const defaultFeatures: FeatureToggleOptions = {
   hideProgressCell: false,
   disableLoadingMaterialStyles: false,
   theme: 'light',
+  respectNodeOrder: false,
 };
 
 /**

src/app/directed_acyclic_graph.spec.ts

@@ -19,7 +19,6 @@ import {CdkDragMove} from '@angular/cdk/drag-drop';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component, EventEmitter, Input, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync} from '@angular/core/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 
 import {ScreenshotTest} from '../screenshot_test';
 
@@ -28,7 +27,6 @@ import {DagStateService} from './dag-state.service';
 import {STATE_SERVICE_PROVIDER} from './dag-state.service.provider';
 import {DirectedAcyclicGraph, DirectedAcyclicGraphModule, generateTheme} from './directed_acyclic_graph';
 import {DagNode as Node, type GraphSpec, type NodeRef} from './node_spec';
-import {TEST_IMPORTS, TEST_PROVIDERS} from './test_providers';
 import {DirectedAcyclicGraphHarness} from './test_resources/directed_acyclic_graph_harness';
 import {createDagSkeletonWithCustomGroups, createDagSkeletonWithGroups, fakeGraph, fakeGraphWithEdgeOffsets} from './test_resources/fake_data';
 import {initTestBed} from './test_resources/test_utils';
@@ -140,7 +138,7 @@ describe('Directed Acyclic Graph Renderer', () => {
         fixture.destroy();
       }));
 
-      function setup(
+      async function setup(
           options: {hideControlNodeOnExpand?: boolean,
                     expanded?: boolean} = {}) {
         const {
@@ -153,16 +151,17 @@ describe('Directed Acyclic Graph Renderer', () => {
             Node.createFromSkeleton(skeleton.skeleton, skeleton.state);
         fixture.componentRef.setInput('graph', graphSpec);
         fixture.detectChanges();
+        await fixture.whenStable();
       }
 
       it('renders correctly', async () => {
-        setup();
+        await setup();
         await screenShot.expectMatch(`graph_custom_control_node`);
       });
 
       it('renders correctly with group expanded and control hidden',
          async () => {
-           setup({expanded: true});
+           await setup({expanded: true});
            await screenShot.expectMatch(
                `graph_expanded_with_custom_control_node_hidden`);
          });

src/app/directed_acyclic_graph.ts

@@ -20,7 +20,7 @@ import {CdkDragEnd, CdkDragMove, CdkDragStart, DragDropModule} from '@angular/cd
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Optional, Output, TemplateRef, ViewChild} from '@angular/core';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import * as dagre from 'dagre';  // from //third_party/javascript/typings/dagre
+import * as dagre from '@dagrejs/dagre';
 import {Subject, Subscription} from 'rxjs';
 import {takeUntil, throttleTime} from 'rxjs/operators';
 

src/app/directed_acyclic_graph_raw.ts

@@ -19,7 +19,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {CdkDrag, CdkDragMove, CdkDragStart, DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, NgModule, OnDestroy, OnInit, Optional, Output, QueryList, TemplateRef, ViewChildren} from '@angular/core';
-import * as dagre from 'dagre';  // from //third_party/javascript/typings/dagre
+import * as dagre from '@dagrejs/dagre';
 import {Subscription} from 'rxjs';
 
 import {DagStateService} from './dag-state.service';
@@ -637,7 +637,10 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     for (const node of this.nodes) {
       g.setNode(node.id, setNodeSizeProps(node, this.dims, this.collapsed));
     }
-    dagre.layout(g);
+
+    dagre.layout(g, {
+      disableOptimalOrderHeuristic: this.features.respectNodeOrder ?? false
+    });
 
 
     this.positionAllElementsOnGraph();
@@ -697,7 +700,9 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
       g.setEdge(e.from, e.to, e);
     }
 
-    dagre.layout(g);
+    dagre.layout(g, {
+      disableOptimalOrderHeuristic: this.features.respectNodeOrder ?? false
+    });
 
     this.positionAllElementsOnGraph();
     this.updateGraphSize();