@peter.prib/renderengine 0.15.2 → 0.15.3

package/src/charting/DiagramViewPropertiesDialog.js

@@ -2,26 +2,33 @@ import { ViewPropertiesDialog } from './ViewPropertiesDialog.js';
 import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
 import { EDGE_STYLE_PROPERTIES } from './edgeStyle/EdgeStyleSchema.js';
 import { SetStyleCommand } from './edgeStyle/SetStyleCommand.js';
+import { CompositeCommand } from './CommandHistory.js';
+
+const TITLE_POSITIONS = [['none', 'None'], ['top', 'Top'], ['bottom', 'Bottom']];
+const WATERMARK_ROTATIONS = [['0°', 'Horizontal (0°)'], ['-45°', 'Diagonal (-45°)'], ['-90°', 'Vertical (-90°)']];
+const WATERMARK_REPEATS = [['none', 'Center (single)'], ['repeat', 'Repeated grid'], ['tile', 'Tiled pattern']];
 
 /**
  * DiagramViewPropertiesDialog — a template-editor diagram's properties plus
- * its line-style defaults: the diagram level of the line-style cascade
- * (diagram → model → tool), each property inheriting unless set. The style
- * change is one step on the model's undo history. Used by
- * DiagramEditorPart.
+ * its line-style defaults and visual appearance (background, title band, watermark):
+ * the diagram level of the line-style cascade (diagram → model → tool) and
+ * the diagram appearance settings. Changes are undoable on the diagram's history.
+ * Used by DiagramEditorPart.
  */
 export class DiagramViewPropertiesDialog extends ViewPropertiesDialog {
     /**
      * @param {Object} options - As ViewPropertiesDialog, plus:
      * @param {EdgeStyleCascade} options.cascade - The diagram's line-style levels, the diagram's own keyed `levelKey`
      * @param {string} [options.levelKey] - Which level is this diagram's
-     * @param {() => void} [options.onStyleChange] - After the style changes (e.g. redraw)
+     * @param {() => void} [options.onStyleChange] - After the line style changes
+     * @param {() => void} [options.onSettingsChange] - After the appearance settings change
      */
-    constructor({ cascade, levelKey = 'view', onStyleChange = () => {}, ...rest }) {
+    constructor({ cascade, levelKey = 'view', onStyleChange = () => {}, onSettingsChange = () => {}, ...rest }) {
         super(rest);
         this.cascade = cascade;
         this.levelKey = levelKey;
         this.onStyleChange = onStyleChange;
+        this.onSettingsChange = onSettingsChange;
     }
 
     /** The diagram's own line style (its level's style object). */
@@ -30,17 +37,54 @@ export class DiagramViewPropertiesDialog extends ViewPropertiesDialog {
     }
 
     sections() {
+        const ownSettings = this.view.viewSettings ?? {};
         return [
             { type: 'heading', label: 'Line style' },
             ...inheritableFields(EDGE_STYLE_PROPERTIES, this.style, this.cascade.inheritedBy(this.levelKey)),
+            { type: 'heading', label: 'Appearance' },
+            { key: 'background', label: 'Background', type: 'color', value: ownSettings.background || '#ffffff' },
+            { key: 'backgroundImage', label: 'Background image', type: 'text', value: ownSettings.backgroundImage ?? '', placeholder: 'URL (optional)' },
+            { key: 'bandTitle', label: 'Title band', type: 'text', value: ownSettings.title ?? '', placeholder: 'Text shown above or below the diagram' },
+            { key: 'titlePosition', label: 'Title position', type: 'select', value: ownSettings.titlePosition || 'none', choices: TITLE_POSITIONS },
+            { key: 'watermark', label: 'Watermark', type: 'text', value: ownSettings.watermark ?? '', placeholder: 'CONFIDENTIAL, DRAFT, ...' },
+            { key: 'watermarkRotation', label: 'Watermark rotation', type: 'select', value: ownSettings.watermarkRotation || '-45°', choices: WATERMARK_ROTATIONS },
+            { key: 'watermarkOpacity', label: 'Watermark opacity', type: 'number', min: 0, max: 100, step: 5, value: ownSettings.watermarkOpacity ?? 20 },
+            { key: 'watermarkRepeat', label: 'Watermark repeat', type: 'select', value: ownSettings.watermarkRepeat || 'none', choices: WATERMARK_REPEATS },
         ];
     }
 
     applySections(values) {
+        // Line style
         const patch = readInheritableFields(EDGE_STYLE_PROPERTIES, values);
-        const changed = Object.entries(patch).some(([k, v]) => this.style[k] !== v);
-        if (!changed) return;
-        this.view.history.execute(new SetStyleCommand(this.style, patch, 'Diagram line style'));
-        this.onStyleChange();
+        const styleChanged = Object.entries(patch).some(([k, v]) => this.style[k] !== v);
+
+        // Appearance
+        const ownSettings = this.view.viewSettings ?? (this.view.viewSettings = {});
+        const appearancePatch = {};
+        if ('background' in values) appearancePatch.background = values.background;
+        if ('backgroundImage' in values) appearancePatch.backgroundImage = values.backgroundImage?.trim() || undefined;
+        if ('bandTitle' in values) appearancePatch.title = values.bandTitle?.trim() || undefined;
+        if ('titlePosition' in values) appearancePatch.titlePosition = values.titlePosition && values.titlePosition !== 'none' ? values.titlePosition : undefined;
+        if ('watermark' in values) appearancePatch.watermark = values.watermark?.trim() || undefined;
+        if ('watermarkRotation' in values) appearancePatch.watermarkRotation = values.watermarkRotation && values.watermarkRotation !== '-45°' ? values.watermarkRotation : undefined;
+        if ('watermarkOpacity' in values) appearancePatch.watermarkOpacity = values.watermarkOpacity != null && Number(values.watermarkOpacity) !== 20 ? Number(values.watermarkOpacity) : undefined;
+        if ('watermarkRepeat' in values) appearancePatch.watermarkRepeat = values.watermarkRepeat && values.watermarkRepeat !== 'none' ? values.watermarkRepeat : undefined;
+
+        const appearanceChanged = Object.entries(appearancePatch).some(([k, v]) => ownSettings[k] !== v);
+
+        if (styleChanged && appearanceChanged) {
+            this.view.history.execute(new CompositeCommand('Diagram properties', [
+                new SetStyleCommand(this.style, patch, 'Diagram line style'),
+                new SetStyleCommand(ownSettings, appearancePatch, 'Diagram appearance'),
+            ]));
+            this.onStyleChange();
+            this.onSettingsChange();
+        } else if (styleChanged) {
+            this.view.history.execute(new SetStyleCommand(this.style, patch, 'Diagram line style'));
+            this.onStyleChange();
+        } else if (appearanceChanged) {
+            this.view.history.execute(new SetStyleCommand(ownSettings, appearancePatch, 'Diagram appearance'));
+            this.onSettingsChange();
+        }
     }
 }

package/src/charting/Legend.js

@@ -90,9 +90,8 @@ export class Legend {
             const hidden = !!item.hidden;
             const color = hidden ? '#ccc' : item.color;
             const textColor = hidden ? '#ccc' : '#333';
-            const attrs = {};
+            const attrs = { legendItem: true };
             if (item.dataIndex !== undefined) {
-                attrs.legendItem = true;
                 attrs.dataIndex = item.dataIndex;
             }
 

package/src/charting/Statistics.js

@@ -131,4 +131,18 @@ export class Statistics {
         }
         return points;
     }
+
+    /**
+     * Asynchronous Gaussian-kernel density estimate, using GPU compute backend when available.
+     * @param {number[]} values
+     * @param {object} [options]
+     * @param {import('../compute/ComputeBackend.js').ComputeBackend} [options.backend]
+     * @returns {Promise<Array<{x: number, density: number}>>}
+     */
+    static async kernelDensityEstimateAsync(values, options = {}) {
+        if (options.backend) {
+            return options.backend.kernelDensityEstimateAsync(values, options);
+        }
+        return Statistics.kernelDensityEstimate(values, options);
+    }
 }

package/src/charting/charts/BarChart.js

@@ -3,6 +3,7 @@ import { Legend } from '../Legend.js';
 import { DataFilter } from '../DataFilter.js';
 import { BarChartBase } from './BarChartBase.js';
 import { Annotations } from '../Annotations.js';
+import { ChartData } from '../ChartData.js';
 
 /**
  * BarChart — vertical bar chart with optional legend and hidden items.
@@ -15,6 +16,32 @@ export class BarChart extends BarChartBase {
         this._dataFilter = dataFilter;
     }
 
+    _setup() {
+        const data = this.data;
+        const options = this.options;
+        this._catField = options.colorCol
+            ?? (Array.isArray(data) && data.some(d => d?.category != null) ? 'category'
+              : Array.isArray(data) && data.some(d => d?.group != null) ? 'group' : null);
+        super._setup();
+        this._catColors = new Map();
+        if (this._catField && Array.isArray(data)) {
+            for (const d of data) {
+                const cat = ChartData.readColorCol(d, this._catField);
+                if (cat != null && !this._catColors.has(cat)) {
+                    this._catColors.set(cat, this._palette.colorAt(this._catColors.size));
+                }
+            }
+        }
+        const showCatLegend = Boolean(this._catField && this._catColors.size > 0 && options.legend !== false && options.showLegend !== false);
+        if (showCatLegend && options.width === undefined) {
+            const legendItems = [...this._catColors].map(([cat, color]) => ({ label: String(cat), color }));
+            this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, {
+                items: legendItems,
+                itemHeight: 20, markerSize: 10,
+            });
+        }
+    }
+
     _computeMaxValue() {
         const data = this.data;
         const rawMax = Math.max(...data.map(d => d.value)) || 1;
@@ -42,16 +69,27 @@ export class BarChart extends BarChartBase {
         const { bandWidth, margin } = this._bandScale(data.length);
         const textAnchor = this.renderer.centerTextAnchor;
 
+        const colorFor = (d, i) => {
+            if (this._catField) {
+                const cat = ChartData.readColorCol(d, this._catField);
+                if (cat != null && this._catColors.has(cat)) {
+                    return this._catColors.get(cat);
+                }
+            }
+            return colors ? this._palette.colorAt(i) : barColor;
+        };
+
         if (this._isHorizontal()) {
             data.forEach((d, i) => {
                 if (this._dataFilter.has(i)) return;
-                const color = colors ? this._palette.colorAt(i) : barColor;
+                const color = colorFor(d, i);
                 const bar = this._barSpan(d.value);
                 const barY = y + i * (bandWidth + margin);
+                const series = this._catField ? ChartData.readColorCol(d, this._catField) : null;
 
                 this._datum(this.renderer.rect(bar.top, barY, bar.height, bandWidth, color, null, {
                     bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}`,
-                }), { label: d.label });
+                }), { label: d.label, series: series != null ? String(series) : null });
 
                 // Category label on left
                 this.renderer.text(d.label, x - 8, barY + bandWidth / 2, {
@@ -73,11 +111,12 @@ export class BarChart extends BarChartBase {
                 return; // Skip rendering the bar if it's hidden
             }
 
-            const color = colors ? this._palette.colorAt(i) : barColor;
+            const color = colorFor(d, i);
             const bar = this._barSpan(d.value);
             const barX = x + i * (bandWidth + margin);
+            const series = this._catField ? ChartData.readColorCol(d, this._catField) : null;
 
-            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
+            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label, series: series != null ? String(series) : null });
             // The value just past the bar's end: above a bar going up, below one going down.
             this.renderer.text(String(d.value), barX + bandWidth / 2, d.value < 0 ? bar.end + 12 : bar.end - 5, { textAnchor, fontSize: '10px', fill: '#333' });
             if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
@@ -88,9 +127,19 @@ export class BarChart extends BarChartBase {
         const data = this.data;
         const options = this.options;
         const { x, y, width } = this._plotBox;
-        const { colors, showLegend = false } = options;
+        const colors = options.colors;
+        const showCatLegend = Boolean(this._catField && this._catColors.size > 0 && options.legend !== false && options.showLegend !== false);
 
-        if (showLegend && colors) {
+        if (showCatLegend) {
+            const legendItems = [...this._catColors].map(([cat, color]) => ({
+                label: String(cat),
+                color,
+            }));
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
+                itemHeight: 20, markerSize: 10,
+            }).draw(this.renderer);
+        } else if ((options.showLegend || options.legend) && colors) {
             const legendItems = data.map((d, i) => ({
                 label: d.label,
                 color: this._palette.colorAt(i),
@@ -111,7 +160,9 @@ export class BarChart extends BarChartBase {
      */
     onClick(event, hitShape) {
         if (!hitShape || !hitShape.legendItem) return;
-        this._dataFilter.toggle(hitShape.dataIndex);
-        this.render();
+        if (hitShape.dataIndex != null) {
+            this._dataFilter.toggle(hitShape.dataIndex);
+            this.render();
+        }
     }
 }

package/src/charting/charts/HexbinChart.js

@@ -72,6 +72,21 @@ export class HexbinChart extends Chart {
         return bins;
     }
 
+    /**
+     * Asynchronous 2D hexagonal binning, offloading to GPU when backend provided.
+     * @param {Array<{px: number, py: number, [key: string]: any}>} points
+     * @param {number} r
+     * @param {object} [options]
+     * @param {import('../../compute/ComputeBackend.js').ComputeBackend} [options.backend]
+     * @returns {Promise<Map<string, {cx: number, cy: number, count: number, points: Array}>>}
+     */
+    static async binPointsAsync(points, r, options = {}) {
+        if (options.backend) {
+            return options.backend.binHexbinsAsync(points, r, options);
+        }
+        return HexbinChart.binPoints(points, r);
+    }
+
     _render() {
         const data = this.data;
         if (!Array.isArray(data) || !data.length) return;

package/src/charting/charts/LollipopChart.js

@@ -1,6 +1,7 @@
 import { Axis } from '../Axis.js';
 import { Legend } from '../Legend.js';
 import { BarChartBase } from './BarChartBase.js';
+import { ChartData } from '../ChartData.js';
 
 /**
  * LollipopChart — stem-and-dot alternative to a bar chart for high-cardinality or multi-series
@@ -29,13 +30,34 @@ export class LollipopChart extends BarChartBase {
     _setup() {
         this._norm = LollipopChart._normalize(this.data);
         super._setup();
-        const showLegend = this.options.legend ?? this._norm.isMulti;
-        if (showLegend && this._norm.isMulti && this.options.width === undefined) {
+        this._catField = !this._norm.isMulti
+            ? (this.options.colorCol
+                ?? (Array.isArray(this.data) && this.data.some(d => d?.category != null) ? 'category'
+                  : Array.isArray(this.data) && this.data.some(d => d?.group != null) ? 'group' : null))
+            : null;
+        this._catColors = new Map();
+        if (this._catField && Array.isArray(this.data)) {
+            for (const d of this.data) {
+                const cat = ChartData.readColorCol(d, this._catField);
+                if (cat != null && !this._catColors.has(cat)) {
+                    this._catColors.set(cat, this._palette.colorAt(this._catColors.size));
+                }
+            }
+        }
+        const hasCatLegend = Boolean(this._catField && this._catColors.size > 0);
+        const showLegend = this.options.legend ?? (this._norm.isMulti || hasCatLegend);
+        if (showLegend && (this._norm.isMulti || hasCatLegend) && this.options.width === undefined) {
             this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
         }
     }
 
     _legendOptions() {
+        if (this._catField && this._catColors.size > 0) {
+            return {
+                items: [...this._catColors].map(([cat, color]) => ({ label: String(cat), color })),
+                itemHeight: 20, markerSize: 10, marker: 'circle',
+            };
+        }
         return {
             items: this._norm.series.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
             itemHeight: 20, markerSize: 10,
@@ -74,18 +96,30 @@ export class LollipopChart extends BarChartBase {
                     ? bandX + bandWidth / 2
                     : bandX + ((sIdx + 0.5) / seriesCount) * bandWidth;
                 const span = this._barSpan(pt.value);
-                const col = isMulti || colors ? this._palette.colorAt(sIdx) : singleColor;
+
+                let col;
+                let catVal = null;
+                if (!isMulti && this._catField) {
+                    catVal = ChartData.readColorCol(pt, this._catField);
+                    col = catVal != null && this._catColors.has(catVal)
+                        ? this._catColors.get(catVal)
+                        : (colors ? this._palette.colorAt(i) : singleColor);
+                } else {
+                    col = isMulti || colors ? this._palette.colorAt(sIdx) : singleColor;
+                }
+
                 const tip = isMulti ? `${s.name} - ${label}: ${pt.value}` : `${label}: ${pt.value}`;
 
                 this.renderer.path(`M${cx},${zeroY} L${cx},${span.end}`, 'none', { color: col, width: stemWidth });
+                const datumSeries = isMulti ? s.name : (catVal != null ? String(catVal) : null);
                 if (typeof this.renderer.circle === 'function') {
                     this._datum(this.renderer.circle(cx, span.end, radius, col, { color: '#fff', width: 1.5 }, {
                         tooltip: tip,
-                    }), { label, series: isMulti ? s.name : null });
+                    }), { label, series: datumSeries });
                 } else {
                     this._datum(this.renderer.rect(cx - radius, span.end - radius, radius * 2, radius * 2, col, null, {
                         tooltip: tip,
-                    }), { label, series: isMulti ? s.name : null });
+                    }), { label, series: datumSeries });
                 }
             });
             if (i % labelStep === 0) {
@@ -95,8 +129,9 @@ export class LollipopChart extends BarChartBase {
     }
 
     _afterBars() {
-        const showLegend = this.options.legend ?? this._norm.isMulti;
-        if (showLegend && this._norm.isMulti) {
+        const hasCatLegend = Boolean(this._catField && this._catColors.size > 0);
+        const showLegend = this.options.legend ?? (this._norm.isMulti || hasCatLegend);
+        if (showLegend && (this._norm.isMulti || hasCatLegend)) {
             const { x, y, width } = this._plotBox;
             Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
         }

package/src/charting/decision/DecisionWorkbench.js

@@ -5,11 +5,12 @@
  *
  * It reads decisionengine's JSON, not decisionengine: a workbench document
  *
- *   { kind: 'sadis-workbench', report, plan?, before? }
+ *   { kind: 'sadis-workbench', report, plan?, before?, graph? }
  *
  * holds a report's `toJSON()` (the ranked candidates, each with its score's
  * parts), optionally a delivery plan's `toJSON()` and an earlier report to
- * replay against. Each view is a `WorkbenchView` subclass naming the charts it
+ * replay against, and the scored portfolio graph (`{ nodes, edges }`) to explore. Each view is a
+ * `WorkbenchView` subclass naming the charts it
  * shows (`{ title, chartType, data, options }`, `chartType` a CHART_CATALOG key)
  * and notes for what a chart cannot show; a view needing what the document
  * lacks (a plan, perspectives, an earlier report) is not offered.
@@ -17,7 +18,11 @@
  * DOM-free: a workspace page puts each chart in a ChartPart.
  */
 
+import { NavigatorModel } from '../modelTree/NavigatorModel.js';
+
 const KIND = 'sadis-workbench';
+/** SADIS's relationships that carry value up the basin, and those that make one candidate wait on another. */
+const CONTRIBUTES = ['ENABLES', 'IMPLEMENTS', 'REALIZES', 'SUPPORTS'];
 const DAY = 24 * 60 * 60 * 1000;
 const pct = (share) => Math.round(share * 1000) / 10;
 const round = (n) => Math.round(n * 1000) / 1000;
@@ -115,6 +120,64 @@ export class ArchitectureView extends WorkbenchView {
     }
 }
 
+/**
+ * The first candidate's neighbourhood in the portfolio graph: the ways its value goes up to each objective
+ * it reaches, and what waits on it. Read with `NavigatorModel` over the graph document (a `DocumentGraph`),
+ * the same walker the ArchiMate modeller's Navigator uses; drawn as a graph diagram.
+ */
+export class ExploreView extends WorkbenchView {
+    static id = 'explore';
+    static title = 'Explore';
+
+    available() { return Boolean(this.workbench.graph); }
+
+    /** The candidate explored, the navigator, the ways up and what waits on it. */
+    explore() {
+        const { workbench } = this;
+        const top = workbench.entries[0];
+        const navigator = NavigatorModel.forGraph(workbench.graph, { rootId: top.id });
+        const ways = top.basin.reaches.map((r) => navigator.findPaths(top.id, r.id, { direction: 'outgoing', maxDepth: r.hops, allowedKinds: CONTRIBUTES })[0])
+            .filter(Boolean);
+        const waiting = [
+            navigator.traceImpact(top.id, { direction: 'incoming', allowedKinds: ['DEPENDS_ON'] }),
+            navigator.traceImpact(top.id, { direction: 'outgoing', allowedKinds: ['BLOCKS'] }),
+        ];
+        return { top, navigator, ways, waiting };
+    }
+
+    charts() {
+        const { top, navigator, ways, waiting } = this.explore();
+        const nodes = new Map([[top.id, navigator.model.getElement(top.id)]]);
+        const edges = new Map();
+        for (const way of ways) {
+            for (const element of way.elements) nodes.set(element.id, element);
+            for (const rel of way.relationships) edges.set(rel.id, rel);
+        }
+        for (const impact of waiting) {
+            for (const element of impact.elements) nodes.set(element.id, element);
+            for (const rel of impact.relationships) edges.set(rel.id, rel);
+        }
+        return [{
+            title: `${top.name}: its ways to the objectives, and what waits on it`,
+            chartType: 'graph',
+            data: null,
+            options: {
+                nodes: [...nodes.values()].filter(Boolean).map((e) => ({ id: e.id, label: e.name, group: e.type })),
+                edges: [...edges.values()].map((r) => ({ source: r.source, target: r.target, label: r.kind })),
+            },
+        }];
+    }
+
+    notes() {
+        const { top, ways, waiting } = this.explore();
+        const waits = [...new Map(waiting.flatMap((i) => i.elements).map((e) => [e.id, e.name])).values()];
+        return [
+            ...ways.map((way) => `${way.elements.map((e) => e.name).join(' → ')} (${way.length} ${way.length === 1 ? 'step' : 'steps'})`),
+            waits.length ? `Waiting on ${top.name}: ${waits.join(', ')}` : `Nothing waits on ${top.name}`,
+        ];
+    }
+}
+
 /** The delivery plan: when each candidate is worked on, and how full each period is. */
 export class DeliveryView extends WorkbenchView {
     static id = 'delivery';
@@ -245,7 +308,7 @@ export class ReplayView extends WorkbenchView {
     }
 }
 
-export const WORKBENCH_VIEWS = Object.freeze([ExecutiveView, ArchitectureView, DeliveryView, PortfolioView, ReplayView]);
+export const WORKBENCH_VIEWS = Object.freeze([ExecutiveView, ArchitectureView, ExploreView, DeliveryView, PortfolioView, ReplayView]);
 
 export class DecisionWorkbench {
     static KIND = KIND;
@@ -261,6 +324,9 @@ export class DecisionWorkbench {
             throw new Error('A plan, when given, is decisionengine\'s plan.toJSON(): periods and value');
         }
         if (doc.before !== undefined && !isReport(doc.before)) throw new Error('An earlier report, when given, is a report.toJSON() too');
+        if (doc.graph !== undefined && !(doc.graph && Array.isArray(doc.graph.nodes) && Array.isArray(doc.graph.edges))) {
+            throw new Error('A graph, when given, is the scored portfolio as a graph document: { nodes, edges }');
+        }
         return new DecisionWorkbench(doc, calendar);
     }
 
@@ -269,7 +335,7 @@ export class DecisionWorkbench {
      * @param {{start?: string|number, periodDays?: number}} [calendar] - when period 1 starts (default: the report's
      *   as-of business time, else today) and how long a period is (default 14 days), for the delivery plan's dates
      */
-    constructor({ report, plan = null, before = null }, { start, periodDays = 14 } = {}) {
+    constructor({ report, plan = null, before = null, graph = null }, { start, periodDays = 14 } = {}) {
         const from = start ?? report.asOf?.businessTime ?? Date.now();
         const ms = typeof from === 'number' ? from : Date.parse(from);
         if (!Number.isFinite(ms)) throw new Error(`The calendar's start is ${JSON.stringify(start)}, not a date`);
@@ -278,6 +344,7 @@ export class DecisionWorkbench {
         this.report = report;
         this.plan = plan;
         this.before = before;
+        this.graph = graph;
         this.entries = [...report.entries].sort((a, b) => a.rank - b.rank);
         this.byId = new Map(this.entries.map((e) => [e.id, e]));
     }

package/src/charting/diagramModel/DiagramView.js

@@ -18,11 +18,12 @@ export class DiagramView extends DiagramEditorState {
      * @param {Map<string, Template>} [options.templates]
      * @param {Map<string, Edge>} [options.edges]
      * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
+     * @param {Object} [options.viewSettings] - Diagram appearance: background, watermark, title band
      * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
      * @param {string} [options.documentation]
      * @param {Arrangement} [options.arrangement]
      */
-    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
+    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, viewSettings = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
         super({ historyOptions, arrangement });
         this.historyOptions = historyOptions;
         this.id = id;
@@ -31,6 +32,7 @@ export class DiagramView extends DiagramEditorState {
         this.templates = templates;
         this.edges = edges;
         this.edgeStyle = edgeStyle;
+        this.viewSettings = viewSettings;
     }
 
     /** The shapes are what stack. */
@@ -52,6 +54,7 @@ export class DiagramView extends DiagramEditorState {
             })),
             edges: [...this.edges.values()].map(e => (typeof e.toJSON === 'function' ? e.toJSON() : JSON.parse(JSON.stringify(e)))),
             edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+            ...(this.viewSettings && Object.keys(this.viewSettings).length ? { viewSettings: JSON.parse(JSON.stringify(this.viewSettings)) } : {}),
             ...(this.arrangement && { arrangement: this.arrangement.toJSON() }),
         };
     }
@@ -75,6 +78,7 @@ export class DiagramView extends DiagramEditorState {
             templates,
             edges,
             edgeStyle: json.edgeStyle ?? {},
+            viewSettings: json.viewSettings ? JSON.parse(JSON.stringify(json.viewSettings)) : {},
             documentation: json.documentation,
             historyOptions,
             arrangement,
@@ -89,9 +93,10 @@ export class DiagramView extends DiagramEditorState {
             templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
             edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
             edgeStyle: { ...this.edgeStyle },
+            viewSettings: { ...(this.viewSettings ?? {}) },
             documentation: this.documentation,
             historyOptions,
-            arrangement: this.arrangement.copy(),   // template ids are kept
+            arrangement: this.arrangement?.copy() ?? null,   // template ids are kept
         });
     }
 }

package/src/charting/diagrams/GraphDiagram3D.js

@@ -149,4 +149,19 @@ export class GraphDiagram3D extends Diagram3D {
         }
         return pos;
     }
+
+    /**
+     * Asynchronous 3D force layout simulation, offloading to GPU when backend provided.
+     * @param {Array<{id: string, x?: number, y?: number, z?: number}>} nodes
+     * @param {Array<{source: string, target: string}>} edges
+     * @param {object} [options]
+     * @param {import('../../compute/ComputeBackend.js').ComputeBackend} [options.backend]
+     * @returns {Promise<Map<string, {x: number, y: number, z: number, vx: number, vy: number, vz: number}>>}
+     */
+    static async layoutForce3DAsync(nodes, edges, options = {}) {
+        if (options.backend) {
+            return options.backend.layoutForce3DAsync(nodes, edges, options);
+        }
+        return GraphDiagram3D.layoutForce3D(nodes, edges, options);
+    }
 }

package/src/charting/graph/GraphSource.js

@@ -0,0 +1,72 @@
+/**
+ * GraphSource — what a graph walker reads, whatever the graph is.
+ *
+ * `NavigatorModel` (step-by-step exploration, `findPaths`, `traceImpact`) asks a graph four questions:
+ *
+ * - `getElement(id)` — the element, `{ id, name, type, ... }`, or null;
+ * - `relationshipsFor(id)` — `{ incoming, outgoing }`, each relationship `{ id, source, target, kind }`;
+ * - `viewsContaining(id)` — the views that draw it (none, for a graph that has no views);
+ * - `layerOf(element)` — the band it belongs to, for grouping and colour.
+ *
+ * Why an interface. Traversal is the same for any graph; only these reads differ. So there is one walker,
+ * and each kind of graph answers the four questions: `ArchimateModel` answers them already (its layers
+ * from `treeLayerOf`), and `DocumentGraph` answers them for a graph document — `{ nodes, edges }`, the
+ * shape sqlengine stores graphs in and decisionengine scores — so a portfolio, a dependency graph or any
+ * stored graph is explored the way an ArchiMate model is, without a second walker.
+ *
+ * A subclass implements the four reads; this base says what is missing rather than failing obscurely.
+ */
+export class GraphSource {
+    getElement() { throw new Error(`${this.constructor.name} must implement getElement(id)`); }
+    relationshipsFor() { throw new Error(`${this.constructor.name} must implement relationshipsFor(id)`); }
+    viewsContaining() { return []; }
+    layerOf(element) { return element?.type ?? 'other'; }
+}
+
+/**
+ * DocumentGraph — a graph document (`{ nodes: [{ id, labels, props }], edges: [{ id?, from, to, type, props }] }`)
+ * as a GraphSource. A node's type is its first label and its name `props.name` (else its id); an edge's
+ * kind is its `type`, its id its own or one made from its ends. Its layer is its type, so a portfolio's
+ * capabilities, epics and objectives band apart. Indexed once, read many.
+ */
+export class DocumentGraph extends GraphSource {
+    /** True for something shaped like a graph document. */
+    static isDocument(doc) {
+        return Boolean(doc) && Array.isArray(doc.nodes) && (doc.edges === undefined || Array.isArray(doc.edges));
+    }
+
+    constructor(doc) {
+        super();
+        if (!DocumentGraph.isDocument(doc)) throw new Error('A graph document has a nodes list (and an edges list)');
+        this.elements = new Map();
+        for (const node of doc.nodes) {
+            if (node?.id == null) continue;
+            this.elements.set(node.id, Object.freeze({
+                id: node.id, name: node.props?.name ?? String(node.id), type: node.labels?.[0] ?? 'Node',
+                labels: node.labels ?? [], props: node.props ?? {},
+            }));
+        }
+        this.incoming = new Map();
+        this.outgoing = new Map();
+        (doc.edges ?? []).forEach((edge, i) => {
+            if (!this.elements.has(edge?.from) || !this.elements.has(edge?.to)) return;
+            const relationship = Object.freeze({
+                id: edge.id ?? `${edge.from}-${edge.type}-${edge.to}-${i}`, source: edge.from, target: edge.to,
+                kind: edge.type, name: edge.props?.name ?? edge.type, props: edge.props ?? {},
+            });
+            push(this.outgoing, edge.from, relationship);
+            push(this.incoming, edge.to, relationship);
+        });
+    }
+
+    getElement(id) { return this.elements.get(id) ?? null; }
+
+    relationshipsFor(id) {
+        return { incoming: this.incoming.get(id) ?? [], outgoing: this.outgoing.get(id) ?? [] };
+    }
+}
+
+function push(map, key, value) {
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(value);
+}