feat(graph-layers): add d3 dag layout

Author: ibgreen-openai

.eslintrc.cjs

@@ -17,6 +17,10 @@ module.exports = getESLintConfig({
       jest: true,
       es2020: true
     },
+    settings: {
+      // Stubbed modules that are available in the workspace but not installed from npm in CI
+      'import/core-modules': ['d3-dag']
+    },
     overrides: [
       {
         files: ['modules/*/src/**/*.{ts,tsx}', 'modules/*/test/**/*.{ts,tsx}'],

modules/editable-layers/src/lib/layers/segments-layer.ts

@@ -6,6 +6,8 @@ import {ArrowStyles, DEFAULT_STYLE, MAX_ARROWS} from '../style';
 import {NebulaLayer} from '../nebula-layer';
 import {toDeckColor} from '../../utils/utils';
 import {DeckCache} from '../deck-renderer/deck-cache';
+// PathMarkerLayer is resolved from another workspace package at build time.
+// eslint-disable-next-line import/no-unresolved
 import {PathMarkerLayer} from '@deck.gl-community/layers';
 
 const NEBULA_TO_DECK_DIRECTIONS = {

modules/graph-layers/README.md

@@ -2,6 +2,34 @@
 
 TBD
 
+## D3 DAG Layout
+
+`@deck.gl-community/graph-layers` now ships with a declarative wrapper around [`d3-dag`](https://github.com/erikbrinkman/d3-dag) so that directed acyclic graphs can be positioned with the classic Sugiyama pipeline. The layout enforces directed edges: undirected edges are rejected up-front and cyclic graphs cause the layout to emit `onLayoutError`, which allows the host application to surface meaningful error messages.
+
+```ts
+import {GraphLayer, D3DagLayout} from '@deck.gl-community/graph-layers';
+
+const dagLayout = new D3DagLayout({
+  nodeSize: [120, 48],
+  layering: 'longest-path',
+  decross: 'opt',
+  coord: 'greedy'
+});
+
+dagLayout.addEventListener('onLayoutError', () => {
+  console.warn('Input graph must be directed and acyclic.');
+});
+
+const layer = new GraphLayer({
+  id: 'dag-layer',
+  graph,
+  layout: dagLayout,
+  ...layerProps
+});
+```
+
+All three stages of the Sugiyama algorithm are configurable. Supply a preset string (`'longest-path'`, `'simplex'`, `'topological'`, `'coffman-graham'` for layering; `'two-layer'` or `'opt'` for decross; `'center'`, `'greedy'`, or `'quad'` for coordinate assignment) or pass the corresponding operator returned by `d3-dag` directly. The layout caches per-node coordinates and the polyline control points returned for each link so `getEdgePosition` can expose detailed path metadata to deck.gl edge layers.
+
 <p align="center">
   <img src="https://i.imgur.com/BF9aOEu.png" height="400" />
 </p>

modules/graph-layers/package.json

@@ -39,6 +39,7 @@
     "cardinal-spline-js": "^2.3.10",
     "color": "^4.2.3",
     "core-js": "^3.29.0",
+    "d3-dag": "^1.1.0",
     "d3": "^7.8.2",
     "d3-array": "^3.2.2",
     "d3-force": "^3.0.0",

modules/graph-layers/src/index.ts

@@ -14,6 +14,7 @@ export type {GraphLayoutState} from './core/graph-layout';
 export {GraphLayout} from './core/graph-layout';
 
 export {SimpleLayout} from './layouts//simple-layout';
+export {D3DagLayout} from './layouts/d3-dag/d3-dag-layout';
 export {D3ForceLayout} from './layouts/d3-force/d3-force-layout';
 export {GPUForceLayout} from './layouts/gpu-force/gpu-force-layout';
 export {RadialLayout as _RadialLayout} from './layouts/experimental/radial-layout';
@@ -37,6 +38,13 @@ export {loadSimpleJSONGraph} from './loaders/simple-json-graph-loader';
 export {mixedGetPosition} from './utils/layer-utils';
 export {log} from './utils/log';
 
+export type {
+  D3DagLayoutOptions,
+  LayeringPreset as D3DagLayeringPreset,
+  DecrossPreset as D3DagDecrossPreset,
+  CoordPreset as D3DagCoordPreset
+} from './layouts/d3-dag/d3-dag-layout';
+
 // DEPRECATED
 export {createGraph} from './loaders/create-graph';
 export {JSONLoader} from './loaders/simple-json-graph-loader';