feat: support per-cluster direction (rankdir) for clusters/subgraphs

[sjackson0109]

This change allows clusters (subgraphs) to specify their own direction (rankdir), enabling correct layout for Mermaid diagrams and other use cases that require mixed directions within a single graph. The layout pipeline now recursively applies layout for clusters with a custom rankdir, and the data model is extended to support this property. All tests pass.

[sjackson0109]

Updated implementation — all tests passing ✅

I've pushed a corrected implementation to sjackson0109/dagre@feature/per-cluster-direction (latest commit: 9391f74).

Bugs fixed in the previous implementation

Three bugs were preventing the feature from working:

1. buildLayoutGraph stripped rankdir from node labels — nodeNumAttrs only allows numeric attributes, so the string rankdir was silently dropped before the layout pipeline ever saw it. Fixed by explicitly copying rankdir when present.

2. recursiveClusterLayout ran before runLayout — sub-layout positions were computed first, then runLayout(g, …) executed the main layout which completely overwrote every node position. The per-cluster work was discarded. Fixed by replacing this with applyClusterDirections which runs after runLayout completes.

3. Dead code in nesting-graph.ts — subgraphRankdirs was collected and stored on the graph label but never consumed anywhere in the pipeline. Removed.

What the new approach does

buildLayoutGraph  →  runLayout  →  applyClusterDirections  →  updateInputGraph

applyClusterDirections iterates every cluster (compound node) that has a rankdir different from the top-level graph. For each such cluster it:

• Builds a fresh Graph object containing only that cluster's descendants (avoids corrupting the main graph's nesting structure)
• Calls runLayout on the sub-graph with the cluster's rankdir
• Translates the sub-layout positions so the result is centred at the cluster's position in the main graph
• Updates the cluster's bounding box to reflect the new extents

Test coverage

6 new Jest tests added in test/layout-test.ts:

• LR cluster inside a TB graph
• TB cluster inside an LR graph
• Cluster with external connections still respects its own rankdir
• Cluster with no rankdir stays in parent graph direction
• Cluster whose rankdir matches parent is a no-op
• Sibling clusters with different directions

All 312 tests pass (272 pre-existing + 40 new assertions across 6 test cases).

[sjackson0109]

Note on pre-existing test failures in the Mermaid test suite

When the patches/dagre-d3-es@7.0.14.patch (the forward-port of this PR's changes into Mermaid's bundled copy of dagre) is applied and vitest is run across the full Mermaid workspace, 14 tests fail. All 14 of these failures are pre-existing bugs that predate this PR — they fail identically on the unpatched main branch.

Three specific failures stand out as worth noting for reviewers:

Test file	Failure	Notes
mermaidAPI.spec.ts	architecture-beta accessibility test	Pre-existing — fails on main without any layout changes
multi-diagram-id-uniqueness.spec.ts	"architecture" duplicate element IDs	Pre-existing — architecture renderer issue unrelated to dagre
svgDraw.spec.ts	architecture diagram SVGs > should add ids	Pre-existing — same architecture renderer issue

The remaining 11 failures are in mermaid-graphlib.spec.js (GLB4–GLB77) and are also pre-existing — they reproduce verbatim by running git stash to remove all PR-related changes and re-running the suite: the stash baseline shows 11 failed | 4 passed in that spec, exactly the same as after the patch is applied.

None of the 14 failures are regressions introduced by applyClusterDirections. The 312 tests in the dagre fork itself all pass (npm test: 28 suites PASS, 312/312 PASS, 0 fail).

[sjackson0109]

Any chance one of you guys can review and/or approve this PR?

@rustedgrail
@Nathan-Fenner
@ryanmadden-google
@wandri
@meganlee18
@SferaDev

[wandri]

It seems to work fine:

Test 1	Test 2

But I have weird result when we force an opposite direction in a cluster

Could you try to find a solution for this problem ?

Could you update demo.html with this new examples for example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dagre Interactive Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: #333;
            line-height: 1.6;
            background: #f5f5f5;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .subtitle {
            font-size: 1.1em;
            color: #7f8c8d;
        }

        .controls {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        .controls label {
            font-weight: 600;
            margin-right: 10px;
            color: #2c3e50;
        }

        .controls select {
            padding: 8px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 4px;
            font-size: 1em;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .controls select:hover {
            border-color: #3498db;
        }

        .controls select:focus {
            outline: none;
            border-color: #3498db;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: #fafafa;
        }

        .control-label {
            font-weight: 600;
            color: #7f8c8d;
            font-size: 0.8em;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

        .direction-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .direction-btn {
            padding: 6px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 4px;
            background: white;
            color: #7f8c8d;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            white-space: nowrap;
        }

        .direction-btn:hover {
            border-color: #3498db;
            color: #3498db;
        }

        .direction-btn.active {
            background: #3498db;
            border-color: #2980b9;
            color: white;
        }

        input[type="range"] {
            width: 120px;
            height: 6px;
            border-radius: 3px;
            background: #e0e0e0;
            outline: none;
            -webkit-appearance: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
        }

        input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            border: none;
        }

        .slider-value {
            min-width: 45px;
            text-align: right;
            color: #7f8c8d;
            font-size: 0.8em;
        }

        .demo-area {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .code-panel {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: auto;
            max-height: 600px;
        }

        .code-panel h3 {
            color: #f8f8f2;
            margin-bottom: 15px;
            font-size: 1.2em;
        }

        .code-panel pre {
            margin: 0;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.5;
        }

        .code-panel .keyword {
            color: #ff79c6;
        }

        .code-panel .string {
            color: #f1fa8c;
        }

        .code-panel .comment {
            color: #6272a4;
        }

        .code-panel .function {
            color: #50fa7b;
        }

        .code-panel .number {
            color: #bd93f9;
        }

        .svg-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        .svg-panel h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .svg-container {
            flex: 1;
            min-height: 500px;
            border: 2px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        svg {
            width: 100%;
            height: 100%;
            cursor: grab;
        }

        svg:active {
            cursor: grabbing;
        }

        .node rect {
            fill: #3498db;
            stroke: #2980b9;
            stroke-width: 2px;
            rx: 5px;
            ry: 5px;
            transition: fill 0.3s;
        }

        .node:hover rect {
            fill: #5dade2;
        }

        .node text {
            fill: white;
            font-size: 14px;
            font-weight: 600;
            text-anchor: middle;
            pointer-events: none;
        }

        .cluster rect {
            fill: #ecf0f1;
            stroke: #bdc3c7;
            stroke-width: 2px;
            stroke-dasharray: 6 3;
        }

        .cluster text {
            fill: #7f8c8d;
            font-size: 12px;
            font-weight: 600;
            text-anchor: middle;
            pointer-events: none;
        }

        .cluster-lr rect { stroke: #9b59b6; fill: #f5eef8; }
        .cluster-tb rect { stroke: #27ae60; fill: #eafaf1; }
        .cluster-bt rect { stroke: #e67e22; fill: #fef9e7; }
        .cluster-rl rect { stroke: #e74c3c; fill: #fdedec; }

        path.edge {
            fill: none;
            stroke: #7f8c8d;
            stroke-width: 2px;
        }

        marker {
            fill: #7f8c8d;
        }

        .edge-label {
            fill: white;
            stroke: #7f8c8d;
            stroke-width: 1px;
        }

        .edge-label text {
            fill: #2c3e50;
            font-size: 12px;
            text-anchor: middle;
        }

        footer {
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            color: #7f8c8d;
        }

        footer a {
            color: #3498db;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        @media (max-width: 1024px) {
            .demo-area {
                grid-template-columns: 1fr;
            }

            .code-panel {
                max-height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Dagre Interactive Demo</h1>
            <p class="subtitle">Directed graph layout library for JavaScript/TypeScript</p>
        </header>

        <div class="controls">
            <div class="control-group">
                <label for="example-select">Example:</label>
                <select id="example-select">
                    <option value="simple">Simple Hierarchy</option>
                    <option value="horizontal">Horizontal Layout</option>
                    <option value="complex">Complex Network</option>
                    <option value="cycles">Graph with Cycles</option>
                    <option value="perClusterSimple">Per-Cluster Direction</option>
                    <option value="perClusterComplex">CI/CD Pipeline (Multi-Cluster)</option>
                </select>
            </div>

            <div class="control-group">
                <span class="control-label">Direction</span>
                <div class="direction-buttons">
                    <button class="direction-btn active" data-direction="TB">↓ TB</button>
                    <button class="direction-btn" data-direction="BT">↑ BT</button>
                    <button class="direction-btn" data-direction="LR">→ LR</button>
                    <button class="direction-btn" data-direction="RL">← RL</button>
                </div>
            </div>

            <div class="control-group">
                <span class="control-label">Node</span>
                <input type="range" id="node-spacing" min="10" max="150" value="50" step="5">
                <span class="slider-value"><span id="node-spacing-value">50</span>px</span>
            </div>

            <div class="control-group">
                <span class="control-label">Rank</span>
                <input type="range" id="rank-spacing" min="20" max="300" value="50" step="10">
                <span class="slider-value"><span id="rank-spacing-value">50</span>px</span>
            </div>
        </div>

        <div class="demo-area">
            <div class="code-panel">
                <h3>Code Example</h3>
                <pre id="code-display"></pre>
            </div>

            <div class="svg-panel">
                <h3 id="graph-title">Graph Visualization</h3>
                <div class="svg-container">
                    <svg id="graph-svg">
                        <defs>
                            <marker id="arrowhead"
                                    markerWidth="10"
                                    markerHeight="10"
                                    refX="9"
                                    refY="3"
                                    orient="auto"
                                    markerUnits="strokeWidth">
                                <path d="M0,0 L0,6 L9,3 z" fill="#7f8c8d"/>
                            </marker>
                        </defs>
                        <g class="viewport">
                            <g class="clusters"></g>
                            <g class="edges"></g>
                            <g class="nodes"></g>
                        </g>
                    </svg>
                </div>
            </div>
        </div>

        <footer>
            <p>
                Powered by <a href="https://github.com/dagrejs/dagre" target="_blank">Dagre</a> |
                <a href="https://d3js.org" target="_blank">D3.js</a>
            </p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="dist/dagre.js"></script>
    <script>
        // Current graph settings
        let currentSettings = {
            direction: 'TB',
            nodeSpacing: 50,
            rankSpacing: 50
        };

        let currentExample = 'simple';
        let clusterDirections = {}; // { "exampleKey:nodeId": "LR" }

        // Example definitions
        const examples = {
            simple: {
                name: 'Simple Hierarchy (Top-to-Bottom)',
                description: 'Basic flowchart demonstrating default top-to-bottom layout',
                code: `const g = new dagre.graphlib.Graph();

// Configure graph layout
g.setGraph({
    rankdir: "TB",  // Top-to-bottom
    nodesep: 50,
    ranksep: 50
});

// Add nodes with dimensions
g.setNode("start", { width: 80, height: 40, label: "Start" });
g.setNode("plan", { width: 80, height: 40, label: "Plan" });
g.setNode("develop", { width: 80, height: 40, label: "Develop" });
g.setNode("test", { width: 80, height: 40, label: "Test" });
g.setNode("review", { width: 80, height: 40, label: "Review" });
g.setNode("deploy", { width: 80, height: 40, label: "Deploy" });

// Add edges
g.setEdge("start", "plan", {});
g.setEdge("plan", "develop", {});
g.setEdge("develop", "test", {});
g.setEdge("test", "review", {});
g.setEdge("review", "deploy", {});
g.setEdge("review", "develop", {});

// Run layout
dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph();
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });

                    g.setNode("start", { width: 80, height: 40, label: "Start" });
                    g.setNode("plan", { width: 80, height: 40, label: "Plan" });
                    g.setNode("develop", { width: 80, height: 40, label: "Develop" });
                    g.setNode("test", { width: 80, height: 40, label: "Test" });
                    g.setNode("review", { width: 80, height: 40, label: "Review" });
                    g.setNode("deploy", { width: 80, height: 40, label: "Deploy" });

                    g.setEdge("start", "plan", {});
                    g.setEdge("plan", "develop", {});
                    g.setEdge("develop", "test", {});
                    g.setEdge("test", "review", {});
                    g.setEdge("review", "deploy", {});
                    g.setEdge("review", "develop", {});

                    return g;
                }
            },

            horizontal: {
                name: 'Horizontal Layout (Left-to-Right)',
                description: 'State machine with left-to-right flow',
                code: `const g = new dagre.graphlib.Graph();

// Configure horizontal layout
g.setGraph({
    rankdir: "LR",  // Left-to-right
    nodesep: 40,
    ranksep: 60
});

// Add state nodes
g.setNode("idle", { width: 70, height: 40, label: "Idle" });
g.setNode("pending", { width: 70, height: 40, label: "Pending" });
g.setNode("active", { width: 70, height: 40, label: "Active" });
g.setNode("paused", { width: 70, height: 40, label: "Paused" });
g.setNode("completed", { width: 90, height: 40, label: "Completed" });
g.setNode("failed", { width: 70, height: 40, label: "Failed" });

// Add transitions
g.setEdge("idle", "pending", { label: "start", width: 35, height: 20 });
g.setEdge("pending", "active", { label: "begin", width: 35, height: 20 });
g.setEdge("active", "paused", { label: "pause", width: 40, height: 20 });
g.setEdge("paused", "active", { label: "resume", width: 50, height: 20 });
g.setEdge("active", "completed", { label: "finish", width: 40, height: 20 });
g.setEdge("active", "failed", { label: "error", width: 35, height: 20 });
g.setEdge("failed", "idle", {});

// Run layout
dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph();
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });

                    g.setNode("idle", { width: 70, height: 40, label: "Idle" });
                    g.setNode("pending", { width: 70, height: 40, label: "Pending" });
                    g.setNode("active", { width: 70, height: 40, label: "Active" });
                    g.setNode("paused", { width: 70, height: 40, label: "Paused" });
                    g.setNode("completed", { width: 90, height: 40, label: "Completed" });
                    g.setNode("failed", { width: 70, height: 40, label: "Failed" });

                    g.setEdge("idle", "pending", { label: "start", width: 35, height: 20 });
                    g.setEdge("pending", "active", { label: "begin", width: 35, height: 20 });
                    g.setEdge("active", "paused", { label: "pause", width: 40, height: 20 });
                    g.setEdge("paused", "active", { label: "resume", width: 50, height: 20 });
                    g.setEdge("active", "completed", { label: "finish", width: 40, height: 20 });
                    g.setEdge("active", "failed", { label: "error", width: 35, height: 20 });
                    g.setEdge("failed", "idle", {});

                    return g;
                }
            },

            complex: {
                name: 'Complex Network',
                description: 'Organization chart with multiple branches',
                code: `const g = new dagre.graphlib.Graph();

// Configure layout
g.setGraph({
    rankdir: "TB",
    nodesep: 60,
    ranksep: 80
});

// Add nodes with varying sizes
g.setNode("ceo", { width: 100, height: 50, label: "CEO" });
g.setNode("cto", { width: 90, height: 45, label: "CTO" });
g.setNode("cfo", { width: 90, height: 45, label: "CFO" });
g.setNode("coo", { width: 90, height: 45, label: "COO" });
g.setNode("dev", { width: 80, height: 40, label: "Dev Team" });
g.setNode("qa", { width: 80, height: 40, label: "QA Team" });
g.setNode("finance", { width: 80, height: 40, label: "Finance" });
g.setNode("hr", { width: 80, height: 40, label: "HR" });
g.setNode("ops", { width: 80, height: 40, label: "Operations" });
g.setNode("sales", { width: 80, height: 40, label: "Sales" });

// Add relationships
g.setEdge("ceo", "cto", {});
g.setEdge("ceo", "cfo", {});
g.setEdge("ceo", "coo", {});
g.setEdge("cto", "dev", {});
g.setEdge("cto", "qa", {});
g.setEdge("cfo", "finance", {});
g.setEdge("coo", "hr", {});
g.setEdge("coo", "ops", {});
g.setEdge("coo", "sales", {});

// Run layout
dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph();
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });

                    g.setNode("ceo", { width: 100, height: 50, label: "CEO" });
                    g.setNode("cto", { width: 90, height: 45, label: "CTO" });
                    g.setNode("cfo", { width: 90, height: 45, label: "CFO" });
                    g.setNode("coo", { width: 90, height: 45, label: "COO" });
                    g.setNode("dev", { width: 80, height: 40, label: "Dev Team" });
                    g.setNode("qa", { width: 80, height: 40, label: "QA Team" });
                    g.setNode("finance", { width: 80, height: 40, label: "Finance" });
                    g.setNode("hr", { width: 80, height: 40, label: "HR" });
                    g.setNode("ops", { width: 80, height: 40, label: "Operations" });
                    g.setNode("sales", { width: 80, height: 40, label: "Sales" });

                    g.setEdge("ceo", "cto", {});
                    g.setEdge("ceo", "cfo", {});
                    g.setEdge("ceo", "coo", {});
                    g.setEdge("cto", "dev", {});
                    g.setEdge("cto", "qa", {});
                    g.setEdge("cfo", "finance", {});
                    g.setEdge("coo", "hr", {});
                    g.setEdge("coo", "ops", {});
                    g.setEdge("coo", "sales", {});

                    return g;
                }
            },

            perClusterSimple: {
                name: 'Per-Cluster Direction (New Feature)',
                description: 'Global TB graph with LR clusters — each subgraph lays out horizontally inside a vertical flow',
                code: `const g = new dagre.graphlib.Graph({ compound: true });

// Global layout: Top-to-Bottom
g.setGraph({ rankdir: "TB", nodesep: 50, ranksep: 60 });
g.setDefaultEdgeLabel(() => ({}));

g.setNode("start", { width: 80, height: 40, label: "Start" });
g.setNode("end",   { width: 80, height: 40, label: "End" });

// Cluster "build" flows Left-to-Right internally
g.setNode("build",   { rankdir: "LR", label: "Build Pipeline" });
g.setNode("lint",    { width: 80, height: 40, label: "Lint" });
g.setNode("compile", { width: 80, height: 40, label: "Compile" });
g.setNode("bundle",  { width: 80, height: 40, label: "Bundle" });
g.setParent("lint",    "build");
g.setParent("compile", "build");
g.setParent("bundle",  "build");
g.setEdge("lint", "compile");
g.setEdge("compile", "bundle");

// Cluster "test" also flows Left-to-Right internally
g.setNode("test",        { rankdir: "LR", label: "Test Suite" });
g.setNode("unit",        { width: 80,  height: 40, label: "Unit" });
g.setNode("integration", { width: 100, height: 40, label: "Integration" });
g.setParent("unit",        "test");
g.setParent("integration", "test");
g.setEdge("unit", "integration");

// Top-level connections
g.setEdge("start",       "lint");
g.setEdge("bundle",      "unit");
g.setEdge("bundle",      "integration");
g.setEdge("integration", "end");

dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph({ compound: true });
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });
                    g.setDefaultEdgeLabel(() => ({}));

                    g.setNode("start", { width: 80, height: 40, label: "Start" });
                    g.setNode("end",   { width: 80, height: 40, label: "End" });

                    g.setNode("build",   { rankdir: "LR", label: "Build Pipeline" });
                    g.setNode("lint",    { width: 80, height: 40, label: "Lint" });
                    g.setNode("compile", { width: 80, height: 40, label: "Compile" });
                    g.setNode("bundle",  { width: 80, height: 40, label: "Bundle" });
                    g.setParent("lint",    "build");
                    g.setParent("compile", "build");
                    g.setParent("bundle",  "build");
                    g.setEdge("lint", "compile");
                    g.setEdge("compile", "bundle");

                    g.setNode("test",        { rankdir: "LR", label: "Test Suite" });
                    g.setNode("unit",        { width: 80,  height: 40, label: "Unit" });
                    g.setNode("integration", { width: 100, height: 40, label: "Integration" });
                    g.setParent("unit",        "test");
                    g.setParent("integration", "test");
                    g.setEdge("unit", "integration");

                    g.setEdge("start",       "lint");
                    g.setEdge("bundle",      "unit");
                    g.setEdge("bundle",      "integration");
                    g.setEdge("integration", "end");

                    return g;
                }
            },

            perClusterComplex: {
                name: 'CI/CD Pipeline (Multi-Cluster)',
                description: 'Complex compound graph: TB overall with multiple LR clusters and cross-cluster edges',
                code: `const g = new dagre.graphlib.Graph({ compound: true });

// Global layout: Top-to-Bottom
g.setGraph({ rankdir: "TB", nodesep: 60, ranksep: 80 });
g.setDefaultEdgeLabel(() => ({}));

// Entry / exit
g.setNode("trigger", { width: 90, height: 40, label: "Trigger" });
g.setNode("notify",  { width: 90, height: 40, label: "Notify" });
g.setNode("deploy",  { width: 90, height: 40, label: "Deploy" });

// Cluster: Source — flows LR
g.setNode("source",   { rankdir: "LR", label: "Source" });
g.setNode("checkout", { width: 90, height: 40, label: "Checkout" });
g.setNode("deps",     { width: 90, height: 40, label: "Install Deps" });
g.setParent("checkout", "source");
g.setParent("deps",     "source");
g.setEdge("checkout", "deps");

// Cluster: Quality — flows LR
g.setNode("quality", { rankdir: "LR", label: "Quality Gates" });
g.setNode("lint2",   { width: 80, height: 40, label: "Lint" });
g.setNode("types",   { width: 80, height: 40, label: "Typecheck" });
g.setNode("audit",   { width: 80, height: 40, label: "Audit" });
g.setParent("lint2", "quality");
g.setParent("types", "quality");
g.setParent("audit", "quality");
g.setEdge("lint2", "types");
g.setEdge("types", "audit");

// Cluster: Build — flows LR
g.setNode("build2",   { rankdir: "LR", label: "Build" });
g.setNode("compile2", { width: 90, height: 40, label: "Compile" });
g.setNode("bundle2",  { width: 90, height: 40, label: "Bundle" });
g.setNode("assets",   { width: 90, height: 40, label: "Assets" });
g.setParent("compile2", "build2");
g.setParent("bundle2",  "build2");
g.setParent("assets",   "build2");
g.setEdge("compile2", "bundle2");
g.setEdge("bundle2",  "assets");

// Cluster: Tests — flows LR
g.setNode("tests",       { rankdir: "LR", label: "Tests" });
g.setNode("unit2",       { width: 80,  height: 40, label: "Unit" });
g.setNode("e2e",         { width: 80,  height: 40, label: "E2E" });
g.setNode("perf",        { width: 80,  height: 40, label: "Perf" });
g.setParent("unit2", "tests");
g.setParent("e2e",   "tests");
g.setParent("perf",  "tests");
g.setEdge("unit2", "e2e");
g.setEdge("e2e",   "perf");

// Cross-cluster edges
g.setEdge("trigger",  "checkout");
g.setEdge("deps",     "lint2");
g.setEdge("deps",     "compile2");
g.setEdge("audit",    "unit2");
g.setEdge("assets",   "unit2");
g.setEdge("perf",     "deploy");
g.setEdge("deploy",   "notify");
g.setEdge("audit",    "notify", { label: "fail", width: 30, height: 20 });

dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph({ compound: true });
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });
                    g.setDefaultEdgeLabel(() => ({}));

                    g.setNode("trigger", { width: 90, height: 40, label: "Trigger" });
                    g.setNode("notify",  { width: 90, height: 40, label: "Notify" });
                    g.setNode("deploy",  { width: 90, height: 40, label: "Deploy" });

                    g.setNode("source",   { rankdir: "LR", label: "Source" });
                    g.setNode("checkout", { width: 90, height: 40, label: "Checkout" });
                    g.setNode("deps",     { width: 90, height: 40, label: "Install Deps" });
                    g.setParent("checkout", "source");
                    g.setParent("deps",     "source");
                    g.setEdge("checkout", "deps");

                    g.setNode("quality", { rankdir: "LR", label: "Quality Gates" });
                    g.setNode("lint2",   { width: 80, height: 40, label: "Lint" });
                    g.setNode("types",   { width: 80, height: 40, label: "Typecheck" });
                    g.setNode("audit",   { width: 80, height: 40, label: "Audit" });
                    g.setParent("lint2", "quality");
                    g.setParent("types", "quality");
                    g.setParent("audit", "quality");
                    g.setEdge("lint2", "types");
                    g.setEdge("types", "audit");

                    g.setNode("build2",   { rankdir: "LR", label: "Build" });
                    g.setNode("compile2", { width: 90, height: 40, label: "Compile" });
                    g.setNode("bundle2",  { width: 90, height: 40, label: "Bundle" });
                    g.setNode("assets",   { width: 90, height: 40, label: "Assets" });
                    g.setParent("compile2", "build2");
                    g.setParent("bundle2",  "build2");
                    g.setParent("assets",   "build2");
                    g.setEdge("compile2", "bundle2");
                    g.setEdge("bundle2",  "assets");

                    g.setNode("tests",  { rankdir: "LR", label: "Tests" });
                    g.setNode("unit2",  { width: 80, height: 40, label: "Unit" });
                    g.setNode("e2e",    { width: 80, height: 40, label: "E2E" });
                    g.setNode("perf",   { width: 80, height: 40, label: "Perf" });
                    g.setParent("unit2", "tests");
                    g.setParent("e2e",   "tests");
                    g.setParent("perf",  "tests");
                    g.setEdge("unit2", "e2e");
                    g.setEdge("e2e",   "perf");

                    g.setEdge("trigger",  "checkout");
                    g.setEdge("deps",     "lint2");
                    g.setEdge("deps",     "compile2");
                    g.setEdge("audit",    "unit2");
                    g.setEdge("assets",   "unit2");
                    g.setEdge("perf",     "deploy");
                    g.setEdge("deploy",   "notify");
                    g.setEdge("audit",    "notify", { label: "fail", width: 30, height: 20 });

                    return g;
                }
            },

            cycles: {
                name: 'Graph with Cycles',
                description: 'Demonstrates cycle handling and backward edges',
                code: `const g = new dagre.graphlib.Graph();

// Configure layout
g.setGraph({
    rankdir: "TB",
    nodesep: 50,
    ranksep: 70
});

// Add nodes
g.setNode("a", { width: 60, height: 40, label: "A" });
g.setNode("b", { width: 60, height: 40, label: "B" });
g.setNode("c", { width: 60, height: 40, label: "C" });
g.setNode("d", { width: 60, height: 40, label: "D" });
g.setNode("e", { width: 60, height: 40, label: "E" });
g.setNode("f", { width: 60, height: 40, label: "F" });

// Add edges with cycles
g.setEdge("a", "b", { weight: 2 });
g.setEdge("b", "c", { weight: 1 });
g.setEdge("c", "d", { weight: 1 });
g.setEdge("d", "e", { weight: 1 });
g.setEdge("e", "f", { weight: 1 });
g.setEdge("c", "a", { label: "cycle", weight: 1, width: 35, height: 20 });
g.setEdge("d", "b", { label: "back", weight: 1, width: 35, height: 20 });
g.setEdge("f", "a", { label: "loop", weight: 1, width: 35, height: 20 });

// Run layout (automatically handles cycles)
dagre.layout(g);`,
                buildGraph: function() {
                    const g = new dagre.graphlib.Graph();
                    g.setGraph({
                        rankdir: currentSettings.direction,
                        nodesep: currentSettings.nodeSpacing,
                        ranksep: currentSettings.rankSpacing
                    });

                    g.setNode("a", { width: 60, height: 40, label: "A" });
                    g.setNode("b", { width: 60, height: 40, label: "B" });
                    g.setNode("c", { width: 60, height: 40, label: "C" });
                    g.setNode("d", { width: 60, height: 40, label: "D" });
                    g.setNode("e", { width: 60, height: 40, label: "E" });
                    g.setNode("f", { width: 60, height: 40, label: "F" });

                    g.setEdge("a", "b", { weight: 2 });
                    g.setEdge("b", "c", { weight: 1 });
                    g.setEdge("c", "d", { weight: 1 });
                    g.setEdge("d", "e", { weight: 1 });
                    g.setEdge("e", "f", { weight: 1 });
                    g.setEdge("c", "a", { label: "cycle", weight: 1, width: 35, height: 20 });
                    g.setEdge("d", "b", { label: "back", weight: 1, width: 35, height: 20 });
                    g.setEdge("f", "a", { label: "loop", weight: 1, width: 35, height: 20 });

                    return g;
                }
            }
        };

        // Find the point where a line from node toward other exits node's bounding rect
        function rectBorderPoint(node, other) {
            const dx = other.x - node.x;
            const dy = other.y - node.y;
            if (dx === 0 && dy === 0) return { x: node.x, y: node.y };
            const hw = node.width / 2, hh = node.height / 2;
            const scale = Math.min(
                dx !== 0 ? hw / Math.abs(dx) : Infinity,
                dy !== 0 ? hh / Math.abs(dy) : Infinity
            );
            return { x: node.x + dx * scale, y: node.y + dy * scale };
        }

        // Syntax highlighting function
        function highlightCode(code) {
            return code
                .replace(/\b(const|let|var|new|function|return)\b/g, '<span class="keyword">$1</span>')
                .replace(/"([^"]*)"/g, '<span class="string">"$1"</span>')
                .replace(/\/\/(.*)/g, '<span class="comment">//$1</span>')
                .replace(/\b(\d+)\b/g, '<span class="number">$1</span>')
                .replace(/\.(setNode|setEdge|setGraph|layout)\b/g, '.<span class="function">$1</span>');
        }

        // Render graph function
        function renderGraph(graph) {
            // Run dagre layout
            dagre.layout(graph);

            // Get SVG elements
            const svg = d3.select('#graph-svg');
            const viewport = svg.select('.viewport');
            const clustersGroup = viewport.select('.clusters');
            const nodesGroup = viewport.select('.nodes');
            const edgesGroup = viewport.select('.edges');

            // Clear previous content
            clustersGroup.selectAll('*').remove();
            nodesGroup.selectAll('*').remove();
            edgesGroup.selectAll('*').remove();

            const isCompound = typeof graph.isCompound === 'function' && graph.isCompound();
            const isCluster = v => isCompound && graph.children(v).length > 0;

            // Render edges
            graph.edges().forEach(e => {
                const edge = graph.edge(e);
                const sourceNode = graph.node(e.v);
                const targetNode = graph.node(e.w);

                if (!edge || !sourceNode || !targetNode) return;

                let points;
                let labelX, labelY;

                if (isCompound) {
                    // Node positions were updated by applyClusterDirections after dagre
                    // computed edge routing, so edge.points are stale — recompute from
                    // final node positions.
                    const src = rectBorderPoint(sourceNode, targetNode);
                    const tgt = rectBorderPoint(targetNode, sourceNode);
                    points = [src, tgt];
                    labelX = (src.x + tgt.x) / 2;
                    labelY = (src.y + tgt.y) / 2;
                } else {
                    if (!edge.points || edge.points.length === 0) return;
                    points = edge.points;
                    labelX = edge.x;
                    labelY = edge.y;
                }

                const line = d3.line().x(d => d.x).y(d => d.y);

                edgesGroup.append('path')
                    .attr('class', 'edge')
                    .attr('d', line(points))
                    .attr('marker-end', 'url(#arrowhead)');

                // Add edge label if present
                if (edge.label && labelX !== undefined && labelY !== undefined) {
                    const labelGroup = edgesGroup.append('g')
                        .attr('class', 'edge-label')
                        .attr('transform', `translate(${labelX}, ${labelY})`);

                    const text = labelGroup.append('text')
                        .text(edge.label)
                        .attr('dy', '0.35em');

                    const bbox = text.node().getBBox();
                    const padding = 4;

                    labelGroup.insert('rect', 'text')
                        .attr('x', bbox.x - padding)
                        .attr('y', bbox.y - padding)
                        .attr('width', bbox.width + 2 * padding)
                        .attr('height', bbox.height + 2 * padding)
                        .attr('rx', 3);
                }
            });

            // Render nodes — clusters first (background), then leaf nodes

            const sortedNodes = graph.nodes().slice().sort((a, b) => {
                // clusters before leaves so they render behind
                return (isCluster(b) ? 1 : 0) - (isCluster(a) ? 1 : 0);
            });

            sortedNodes.forEach(v => {
                const node = graph.node(v);
                if (isCluster(v)) {
                    const rankdir = (node.rankdir || 'TB').toLowerCase();
                    const clusterGroup = clustersGroup.append('g')
                        .attr('class', `cluster cluster-${rankdir}`)
                        .attr('transform', `translate(${node.x}, ${node.y})`);

                    clusterGroup.append('rect')
                        .attr('x', -node.width / 2)
                        .attr('y', -node.height / 2)
                        .attr('width', node.width)
                        .attr('height', node.height)
                        .attr('rx', 6);

                    clusterGroup.append('text')
                        .attr('y', -node.height / 2 + 14)
                        .text(node.label || v);

                    // Direction dropdown
                    const foW = 58, foH = 22;
                    const fo = clusterGroup.append('foreignObject')
                        .attr('x', node.width / 2 - foW - 6)
                        .attr('y', -node.height / 2 + 3)
                        .attr('width', foW)
                        .attr('height', foH);

                    const sel = fo.append('xhtml:select')
                        .style('width', '100%')
                        .style('height', '100%')
                        .style('font-size', '11px')
                        .style('padding', '1px 4px')
                        .style('border', '1px solid #bdc3c7')
                        .style('border-radius', '3px')
                        .style('background', 'white')
                        .style('cursor', 'pointer');

                    const currentDir = (node.rankdir || 'TB').toUpperCase();
                    ['TB', 'BT', 'LR', 'RL'].forEach(dir => {
                        sel.append('xhtml:option')
                            .attr('value', dir)
                            .property('selected', dir === currentDir)
                            .text(dir);
                    });

                    const clusterId = v;
                    sel.on('change', function() {
                        clusterDirections[`${currentExample}:${clusterId}`] = this.value;
                        loadExample(currentExample);
                    });
                } else {
                    const nodeGroup = nodesGroup.append('g')
                        .attr('class', 'node')
                        .attr('transform', `translate(${node.x}, ${node.y})`);

                    nodeGroup.append('rect')
                        .attr('x', -node.width / 2)
                        .attr('y', -node.height / 2)
                        .attr('width', node.width)
                        .attr('height', node.height);

                    nodeGroup.append('text')
                        .attr('dy', '0.35em')
                        .text(node.label || v);
                }
            });

            // Calculate graph bounds
            const graphLabel = graph.graph();
            const graphWidth = graphLabel.width || 800;
            const graphHeight = graphLabel.height || 600;

            // Center and fit the graph
            const svgElement = document.getElementById('graph-svg');
            const containerWidth = svgElement.clientWidth;
            const containerHeight = svgElement.clientHeight;

            const scale = Math.min(
                (containerWidth - 40) / graphWidth,
                (containerHeight - 40) / graphHeight,
                1
            );

            const translateX = (containerWidth - graphWidth * scale) / 2;
            const translateY = (containerHeight - graphHeight * scale) / 2;

            viewport.attr('transform', `translate(${translateX}, ${translateY}) scale(${scale})`);

            // Setup zoom behavior
            const zoom = d3.zoom()
                .scaleExtent([0.1, 4])
                .on('zoom', (event) => {
                    viewport.attr('transform', event.transform);
                });

            svg.call(zoom);
        }

        // Update controls to match current settings
        function updateControls() {
            // Update direction buttons
            document.querySelectorAll('.direction-btn').forEach(btn => {
                if (btn.dataset.direction === currentSettings.direction) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            // Update sliders
            document.getElementById('node-spacing').value = currentSettings.nodeSpacing;
            document.getElementById('node-spacing-value').textContent = currentSettings.nodeSpacing;
            document.getElementById('rank-spacing').value = currentSettings.rankSpacing;
            document.getElementById('rank-spacing-value').textContent = currentSettings.rankSpacing;
        }

        // Load example function
        function loadExample(exampleKey) {
            currentExample = exampleKey;
            const example = examples[exampleKey];

            // Update title
            document.getElementById('graph-title').textContent = example.name;

            // Update code display
            document.getElementById('code-display').innerHTML = highlightCode(example.code);

            // Build and render graph, applying any per-cluster direction overrides
            const graph = example.buildGraph();
            if (typeof graph.isCompound === 'function' && graph.isCompound()) {
                graph.nodes().forEach(v => {
                    if (graph.children(v).length > 0) {
                        const override = clusterDirections[`${exampleKey}:${v}`];
                        if (override) graph.node(v).rankdir = override;
                    }
                });
            }
            renderGraph(graph);
        }

        // Event listener for example selector
        document.getElementById('example-select').addEventListener('change', (e) => {
            loadExample(e.target.value);
        });

        // Event listeners for direction buttons
        document.querySelectorAll('.direction-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                currentSettings.direction = btn.dataset.direction;
                updateControls();
                loadExample(currentExample);
            });
        });

        // Event listener for node spacing slider
        document.getElementById('node-spacing').addEventListener('input', (e) => {
            currentSettings.nodeSpacing = parseInt(e.target.value);
            document.getElementById('node-spacing-value').textContent = currentSettings.nodeSpacing;
            loadExample(currentExample);
        });

        // Event listener for rank spacing slider
        document.getElementById('rank-spacing').addEventListener('input', (e) => {
            currentSettings.rankSpacing = parseInt(e.target.value);
            document.getElementById('rank-spacing-value').textContent = currentSettings.rankSpacing;
            loadExample(currentExample);
        });

        // Load initial example
        loadExample('simple');
    </script>
</body>
</html>

[sjackson0109]

@wandri - Thanks for you testing this; and for the improved demo.html - very useful.

I don't see the same issues you are showing:

• blurry overlay of two nodes in the yellow area (BT cluster)
• horizontal arrangement in the red area (RT cluster)

[sjackson0109]

I'm now seeing @wandri

Notice these new buttons...

[sjackson0109]

All TB - shows a nice vertical stack:

And an overall LR, with cluster specific TBs, looks good:

And BT with cluster specific LRs, again looks good:

Commit '0e15ce7' Replaced the broken foreignObject dropdowns with HTML cluster controls, defaulted Build Pipeline to BT (which is why you saw BT in your examples @wandri)

[sjackson0109]

Changing default for clustered objects to LR

Committed 48ea024

[wandri]

Bravo 👏! Seems good. Just improve the code with this changes from #511 (review) and it will be good for me 👍 @sjackson0109

[sjackson0109]

@wandri thanks for review #511 (review)
I have re-read these comments, and replied beneath each suggestion. Whilst they were valid suggestions, i fear the underlying code-base has changed sufficiently now to render all of the concerns with 'setting data types' void.

Please can I ask you to review my comments and get back to me?

[wandri]

@sjackson0109 It seems that you have done changes on your branch feature/per-cluster-direction-architecture BUT not on feature/per-cluster-direction

[sjackson0109]

cowboy error :) fpush completed

[sjackson0109]

@wandri - I think i've now addressed all your suggestions. Any further thoughts?

[wandri]

@sjackson0109 I see many comments resolved but the code didn't change on this parts.

[sjackson0109]

hopefully this is the last round @wandri

[wandri]

Great work, I still have 3 omments

[sjackson0109]

@wandri - need a beer after this one :)

[wandri]

Good Job @sjackson0109, thanks for your effort.

@rustedgrail, it looks good to me.

[sjackson0109]

@rustedgrail - any chance of another review, and if possible a workflow approval?

[sjackson0109]

@wandri or @rustedgrail - Please can I ask for a progress update?

[wandri]

Good for me @sjackson0109. @rustedgrail ?

[rustedgrail]

This has been pushed in the 3.1 version. Thank you to both of you for the help!

[sjackson0109]

This pleases me :) thank you @rustedgrail