@peter.prib/renderengine 0.15.1 → 0.15.3

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/archimate/ArchimateCanvasEditor.js

@@ -1034,15 +1034,28 @@ export class ArchimateCanvasEditor extends DiagramEditor {
         return element ? treeLayerOf(element) : 'other';
     }
 
-    /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
+    /** An element's box holds any box; a group holds any box or nested group; on a canvas, a block holds boxes. */
     canHold(parentId, childId) {
+        if (!parentId || !childId || parentId === childId) return false;
         const parent = this.templates.get(parentId), child = this.templates.get(childId);
-        if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
+        if (!parent || !child) return false;
+        if (child instanceof ViewGroupTemplate && parent instanceof ViewGroupTemplate) {
+            return !this.isAncestor(childId, parentId);
+        }
+        if (parent instanceof ViewGroupTemplate) {
+            return !this.isAncestor(childId, parentId);
+        }
+        if (child instanceof ViewGroupTemplate) return false;
+        if (!parent.instance || !child.instance) return false;
         return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
     }
 
-    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
+    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them, or when dropped into a group. */
     nestsOnDrop(parentId, childId) {
+        const parent = this.templates.get(parentId);
+        if (parent instanceof ViewGroupTemplate) {
+            return this.canHold(parentId, childId);
+        }
         if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
         return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
     }
@@ -1050,13 +1063,16 @@ export class ArchimateCanvasEditor extends DiagramEditor {
     nestCommand(childId, parentId) {
         const child = this.templates.get(childId)?.instance;
         if (!child) return null;
-        return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
+        const parentTemplate = parentId ? this.templates.get(parentId) : null;
+        const parentTarget = parentTemplate?.instance ?? (parentTemplate instanceof ViewGroupTemplate ? parentTemplate : null);
+        return new NestInstanceCommand(child, parentTarget);
     }
 
-    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
+    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). Groups have no relationship. */
     nested(changes) {
         let chain = Promise.resolve();
         for (const { childId, parentId } of changes) {
+            if (this.templates.get(parentId) instanceof ViewGroupTemplate) continue;
             chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
         }
         return chain;

package/src/charting/archimate/ViewGroupTemplate.js

@@ -47,8 +47,11 @@ export class ViewGroupTemplate extends GlyphTemplate {
         return this.view.model.getFolder(this.id);
     }
 
-    get name() { return this.folder?.name ?? 'Group'; }
-    set name(value) { if (this.folder) this.folder.name = value || 'Group'; }
+    get name() { return this.folder?.name ?? this.layout?.name ?? 'Group'; }
+    set name(value) {
+        if (this.folder) this.folder.name = value || 'Group';
+        if (this.layout) this.layout.name = value || 'Group';
+    }
 
     // The layout keeps the top-left corner; a template is placed by its centre.
     get x() { return this.layout.x + this.width / 2; }

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/DiagramJsonFileFormat.js

@@ -0,0 +1,32 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { DiagramModel } from './DiagramModel.js';
+
+/**
+ * DiagramJsonFileFormat — a diagram model as a file (`.diagram.json` or `.json`):
+ * its name, palette category, line style defaults, views with templates, edges,
+ * waypoints and arrangements (DiagramModel#toJSON), read back by DiagramModel.fromJSON.
+ */
+export class DiagramJsonFileFormat extends ModelFileFormat {
+    get label() { return '.diagram.json'; }
+    get accept() { return '.diagram.json,.json'; }
+    get fileName() { return 'diagrams.diagram.json'; }
+    get featureName() { return 'DiagramJson'; }
+
+    /** JSON with a diagram model's shape: templateType and views array, or views array of diagrams. */
+    recognizes(text) {
+        try {
+            const json = JSON.parse(text);
+            return !!json && typeof json === 'object' && (Array.isArray(json.views) || typeof json.templateType === 'string');
+        } catch {
+            return false;
+        }
+    }
+
+    export(model) {
+        return { data: JSON.stringify(model.toJSON(), null, 2), mimeType: 'application/json' };
+    }
+
+    import(text) {
+        return DiagramModel.fromJSON(JSON.parse(text));
+    }
+}

package/src/charting/diagramModel/DiagramModel.js

@@ -36,4 +36,43 @@ export class DiagramModel extends ViewSetModel {
     setTemplateType(templateType) {
         this.templateType = templateType;
     }
+
+    /** The diagram model as plain JSON: its name, templateType, line style defaults, active view and views. */
+    toJSON() {
+        return {
+            version: 1,
+            name: this.name,
+            templateType: this.templateType,
+            edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+            currentViewId: this.currentViewId,
+            views: this.views().map(v => v.toJSON()),
+        };
+    }
+
+    /** Reconstruct a DiagramModel from plain JSON. */
+    static fromJSON(json, historyOptions = {}) {
+        if (!json) throw new TypeError('DiagramModel.fromJSON requires a JSON object');
+        const model = new DiagramModel({
+            name: json.name ?? '',
+            templateType: json.templateType ?? 'generic',
+            edgeStyle: json.edgeStyle ?? {},
+            historyOptions,
+        });
+        const views = (json.views ?? []).map(vData => DiagramView.fromJSON(vData, model.historyOptions));
+        for (const view of views) {
+            model._insertView(model._adopt(view), { current: view.id === json.currentViewId });
+        }
+        if (json.currentViewId && model._views.has(json.currentViewId)) {
+            model.currentViewId = json.currentViewId;
+        } else if (model._views.size > 0 && !model.currentViewId) {
+            model.currentViewId = model._views.keys().next().value;
+        }
+        const maxNum = Math.max(0, ...model.views().map(v => {
+            const m = String(v.id).match(/\d+$/);
+            return m ? parseInt(m[0], 10) : 0;
+        }));
+        model._nextId = maxNum + 1;
+        model.markSaved();
+        return model;
+    }
 }