@peter.prib/renderengine 0.14.0 → 0.15.1

package/src/workspace/Workspace.js

@@ -169,15 +169,134 @@ export class Workspace extends HTMLElement {
         }));
     }
 
+    /** Return every partId referenced by a registered perspective's layout. */
+    partIdsForPerspective(name) {
+        const layout = this.perspectives.get(name);
+        if (!layout) return [];
+        try {
+            return createLayout(layout).partIds();
+        } catch {
+            return [];
+        }
+    }
+
+    /**
+     * Activate a perspective containing `partId` (if not already visible), scroll
+     * the part's pane into the center of the viewport, and pulse a highlight ring.
+     */
+    focusPart(partId, perspectiveName = null) {
+        if (!partId) return false;
+        const targetPerspective = perspectiveName
+            ?? (this.activePerspective && this.partIdsForPerspective(this.activePerspective).includes(partId)
+                ? this.activePerspective
+                : [...this.perspectives.keys()].find(p => this.partIdsForPerspective(p).includes(partId)));
+        if (targetPerspective && targetPerspective !== this.activePerspective) {
+            this.activatePerspective(targetPerspective);
+        }
+        const host = this._rootEl?.querySelector(`[data-part-id="${partId}"]`);
+        const pane = host?.closest('.ws-pane') ?? host;
+        if (!pane) return false;
+        pane.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
+        pane.classList.remove('ws-pane-flash');
+        void pane.offsetWidth;
+        pane.classList.add('ws-pane-flash');
+        setTimeout(() => pane.classList.remove('ws-pane-flash'), 1500);
+        return true;
+    }
+
     _renderPerspectiveButtons() {
         if (!this._perspectivesEl) return;
-        render(this._perspectivesEl, [...this.perspectives.keys()].map(name => ({
-            tag: 'button',
-            cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
-            text: name,
-            attrs: { type: 'button' },
-            on: { click: () => this.activatePerspective(name) },
-        })));
+        render(this._perspectivesEl, [...this.perspectives.keys()].map(name => {
+            const parts = this.partIdsForPerspective(name)
+                .map(id => this.getPart(id))
+                .filter(Boolean);
+            const hasSubmenu = parts.length > 1;
+            let listEl = null;
+            let submenuEl = null;
+
+            const buildSubmenuRows = (filterText = '') => {
+                const q = filterText.trim().toLowerCase();
+                const filtered = q
+                    ? parts.filter(p => (p.title ?? p.id).toLowerCase().includes(q))
+                    : parts;
+                return filtered.map(part => ({
+                    cls: 'ws-perspective-submenu-row',
+                    children: [
+                        {
+                            tag: 'button',
+                            cls: 'ws-perspective-submenu-item',
+                            text: part.title ?? part.id,
+                            attrs: { type: 'button', title: `Jump to ${part.title ?? part.id}` },
+                            on: {
+                                click: (e) => {
+                                    e.stopPropagation();
+                                    submenuEl?.classList.remove('ws-submenu-open');
+                                    this.focusPart(part.id, name);
+                                },
+                            },
+                        },
+                        ...(part.actions ?? []).filter(a => !a.separator).map(action => ({
+                            tag: 'button',
+                            cls: 'ws-perspective-submenu-action',
+                            text: action.label,
+                            attrs: { type: 'button', title: action.title ?? action.label },
+                            on: {
+                                click: (e) => {
+                                    e.stopPropagation();
+                                    submenuEl?.classList.remove('ws-submenu-open');
+                                    action.onClick?.(part, e);
+                                },
+                            },
+                        })),
+                    ],
+                }));
+            };
+
+            return {
+                cls: 'ws-perspective-item',
+                on: {
+                    mouseenter: () => submenuEl?.classList.add('ws-submenu-open'),
+                    mouseleave: () => submenuEl?.classList.remove('ws-submenu-open'),
+                },
+                children: [
+                    {
+                        tag: 'button',
+                        cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
+                        attrs: { type: 'button' },
+                        on: { click: () => this.activatePerspective(name) },
+                        children: [
+                            { tag: 'span', text: name },
+                            hasSubmenu && { tag: 'span', cls: 'ws-perspective-caret', text: ' ▾' },
+                        ],
+                    },
+                    hasSubmenu && {
+                        cls: 'ws-perspective-submenu',
+                        ref: n => { submenuEl = n; },
+                        children: [
+                            parts.length > 8 && {
+                                cls: 'ws-perspective-submenu-search-wrap',
+                                children: [{
+                                    tag: 'input',
+                                    cls: 'ws-perspective-submenu-search',
+                                    attrs: { type: 'search', placeholder: `Filter ${name} (${parts.length})…` },
+                                    on: {
+                                        click: e => e.stopPropagation(),
+                                        input: e => {
+                                            if (listEl) render(listEl, buildSubmenuRows(e.target.value));
+                                        },
+                                    },
+                                }],
+                            },
+                            {
+                                cls: 'ws-perspective-submenu-list',
+                                ref: n => { listEl = n; },
+                                children: buildSubmenuRows(),
+                            },
+                        ],
+                    },
+                ],
+            };
+        }));
     }
 
     /* ── Theming ────────────────────────────────────────────────────────── */

package/src/workspace/archimateServices.js

@@ -1,6 +1,7 @@
 import {
     RenderEngine, ArchimateModel, ArchimateSpecializationSelector, DerivedRelationships, DiagramTabs, ModelTree,
     SettingsManager, buildAnalysisPanel, buildModelTreePanel, fromArchimateView, parseArchiModel, toArchimateModel,
+    NavigatorModel, NavigatorPanel, buildNavigatorPanel,
     parseArchiFile, toArchiFile, toArchiExport, showGlobalSettingsDialog, showPropertiesDialog, showDiagramPropertiesDialog,
 } from '../index.js';
 
@@ -21,6 +22,9 @@ export const ARCHIMATE_SERVICES = Object.freeze({
     SettingsManager,
     buildAnalysisPanel,
     buildModelTreePanel,
+    NavigatorModel,
+    NavigatorPanel,
+    buildNavigatorPanel,
     fromArchimateView,
     parseArchiModel,
     parseArchiFile,

package/src/workspace/index.js

@@ -56,6 +56,9 @@ export {
     LIGHT_THEME, DARK_THEME, MIDNIGHT_THEME, SEPIA_THEME,
 } from './themes.js';
 export { ChartPart } from './parts/ChartPart.js';
+// Chart views in one part (they use ChartPart, so they sit with it, outside BUILTIN_PARTS).
+export { ViewsPart } from './parts/ViewsPart.js';
+export { DecisionWorkbenchPart } from './parts/DecisionWorkbenchPart.js';
 export { DataModelPart } from './parts/DataModelPart.js';
 export { RequirementsPart } from './parts/RequirementsPart.js';
 export { ModelHosted } from './parts/ModelHosted.js';

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -281,7 +281,7 @@ export class ArchimateCanvasPart extends EditorPart {
             if (!analysisHost) return;
             analysisHost.replaceChildren(buildAnalysisPanel(doc, {
                 model, elementId: elementId && model.getElement(elementId) ? elementId : null,
-                onSelectItem: (info) => this.modelTree.select(info.id, info.kind),
+                onSelectItem: (info) => this.modelTree.select(info.id, info.kind), onSelectView: (viewId) => { if (viewId !== this.model.currentViewId) this.model.switchTo(viewId); },
             }));
         };
         this.editor.onSelectionChange(({ templateId }) => {

package/src/workspace/parts/DecisionWorkbenchPart.js

@@ -0,0 +1,58 @@
+/**
+ * DecisionWorkbenchPart — the Decision Workbench as one part: a SADIS workbench document
+ * (decisionengine's `{ kind: 'sadis-workbench', report, plan?, before? }`) shown as its views.
+ *
+ * Everything about showing views — tabs, the chart grid, notes, opening a file, being embeddable in
+ * any layout — is `ViewsPart`'s; this adds only what differs for this kind of document: reading it
+ * through `DecisionWorkbench` (which turns decisionengine's JSON into views), and the calendar its
+ * delivery plan is drawn on (when period 1 starts, how many days a period is). That split is why it
+ * is a subclass: a second kind of document is a second subclass, not a flag on one class.
+ *
+ * Spec: `ViewsPart`'s, plus `document` (a workbench document to show at once), `start` and
+ * `periodDays` (the calendar; default the report's as-of time and 14 days).
+ */
+import { ViewsPart } from './ViewsPart.js';
+import { DecisionWorkbench } from '../../charting/decision/DecisionWorkbench.js';
+
+export class DecisionWorkbenchPart extends ViewsPart {
+    static type = 'decision-workbench';
+
+    constructor(spec = {}) {
+        super({ empty: 'Open a workbench file: decisionengine\'s SADIS Explorer downloads one ("Download for the Decision Workbench").', ...spec });
+        this.calendar = { start: spec.start, periodDays: spec.periodDays ?? 14 };
+        if (spec.document !== undefined) this.read(spec.document);
+    }
+
+    viewsFrom(doc) {
+        return DecisionWorkbench.from(doc, this.controlValues()).views().map((view) => view.toJSON());
+    }
+
+    controls() {
+        const field = { padding: '2px 4px', font: 'inherit' };
+        return [
+            { tag: 'label', children: [
+                { tag: 'span', text: 'Period 1 starts ' },
+                { tag: 'input', attrs: { type: 'date', value: this.calendar.start ?? '' }, style: field,
+                  on: { change: (e) => { this.calendar.start = e.target.value || undefined; this.reread(); } } },
+            ]},
+            { tag: 'label', children: [
+                { tag: 'span', text: 'Days per period ' },
+                { tag: 'input', attrs: { type: 'number', min: '1', value: String(this.calendar.periodDays) }, style: { ...field, width: '4em' },
+                  on: { change: (e) => { this.calendar.periodDays = Number(e.target.value) || 14; this.reread(); } } },
+            ]},
+        ];
+    }
+
+    controlValues() {
+        return { start: this.calendar.start, periodDays: this.calendar.periodDays };
+    }
+
+    read(doc) {
+        const ok = super.read(doc);
+        if (ok) {
+            const asOf = doc.report.asOf?.businessTime?.slice(0, 10);
+            this.say(`${doc.report.config}: ${doc.report.entries.length} candidates${asOf ? `, as of ${asOf}` : ''}`);
+        }
+        return ok;
+    }
+}

package/src/workspace/parts/ViewsPart.js

@@ -0,0 +1,196 @@
+/**
+ * ViewsPart — a set of chart views in one part: a tab per view, each a grid of charts and its notes.
+ *
+ * A view is plain data — `{ id, title, charts: [{ title, chartType, data, options? }], notes? }`,
+ * `chartType` a CHART_CATALOG key — so anything that can say what it wants drawn can be shown here
+ * without a page of its own: a report, an analysis, a monitoring summary. The Decision Workbench
+ * (`DecisionWorkbenchPart`) is one; any other producer of views is another, by spec or by subclass.
+ *
+ * Why it is one part, not a perspective per view. A part drops into any layout — a tab, a split, a
+ * dashboard cell, a WorkArea document — beside whatever else the host shows; perspectives belong to
+ * the whole workspace, so a producer that registered its own would take over the host's. Inside, it
+ * composes the parts that already exist (`ChartPart` per chart, `ListPart` for notes) rather than
+ * drawing anything itself, so a chart here behaves as a chart anywhere: same sizing, same redraw.
+ *
+ * Why subclasses read files, not a reader in the spec. A spec stays JSON (the workspace serializes
+ * it), so a function cannot ride in it. The base reads a document that already is `{ views: [...] }`;
+ * a subclass that reads something else overrides `viewsFrom(doc)` (and `accept`, `controls()`,
+ * `controlValues()` for options its reader takes) — one subclass per kind of document.
+ *
+ * Spec: `{ views?, open?: boolean, empty?: string }`. With `open` (default true) a toolbar opens a
+ * file (`accept`); `read(doc)` does the same from code. The views shown are kept in `spec.views`,
+ * so a serialized workspace comes back showing them.
+ */
+import { Part } from '../Part.js';
+import { el } from '../dom.js';
+import { ChartPart } from './ChartPart.js';
+import { ListPart } from './ListPart.js';
+import { CHART_CATALOG } from '../../chartCatalog.js';
+
+/** Chart categories drawn as small tiles across the top of a view rather than as full charts. */
+const TILE_CATEGORIES = new Set(['gauge']);
+
+export class ViewsPart extends Part {
+    static type = 'views';
+
+    /** File types the toolbar offers to open. */
+    static accept = '.json';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.views = spec.views ?? [];
+        this.allowOpen = spec.open !== false;
+        this.empty = spec.empty ?? 'Open a file to show its views.';
+        this.active = this.views[0]?.id ?? null;
+        /** The chart and notes parts made for the views shown, torn down when they change. @private */
+        this._children = [];
+    }
+
+    /**
+     * Where each view's charts go: tiles (gauge-like charts) share the top row, the rest take half a
+     * row each, or the whole row when a view has one; notes go underneath. Pure: the layout rule,
+     * kept apart from the DOM so it can be read and tested on its own.
+     * @returns {Array<{id, title, items: Array<{kind: 'chart'|'notes', index?: number, span: number, tile?: boolean}>}>}
+     */
+    static layout(views) {
+        return views.map((view) => {
+            const charts = view.charts ?? [];
+            const isTile = (chart) => TILE_CATEGORIES.has(CHART_CATALOG.find((c) => c.key === chart.chartType)?.category);
+            const tiles = charts.filter(isTile).length;
+            const others = charts.length - tiles;
+            const items = charts.map((chart, index) => (isTile(chart)
+                ? { kind: 'chart', index, tile: true, span: Math.max(1, Math.floor(12 / tiles)) }
+                : { kind: 'chart', index, tile: false, span: others === 1 ? 12 : 6 }));
+            if (view.notes?.length) items.push({ kind: 'notes', span: 12 });
+            return { id: view.id, title: view.title ?? view.id, items };
+        });
+    }
+
+    /** The views a document holds. The base takes `{ views: [...] }`; a subclass reads its own kind of document. */
+    viewsFrom(doc) {
+        if (!doc || !Array.isArray(doc.views)) throw new Error('Not a views document: it has no views list');
+        return doc.views;
+    }
+
+    /** Extra toolbar fields a subclass's reader takes (element specs). */
+    controls() { return []; }
+
+    /** The values of those fields, for `viewsFrom`. */
+    controlValues() { return {}; }
+
+    /** Show the views a document holds; a document that cannot be read is said so, and the views shown stay. */
+    read(doc) {
+        let views;
+        try {
+            views = this.viewsFrom(doc);
+        } catch (err) {
+            this.say(err.message);
+            return false;
+        }
+        this.document = doc;
+        this.show(views);
+        return true;
+    }
+
+    /** Show `views`, replacing those shown. */
+    show(views) {
+        this.views = views;
+        this.spec.views = views;
+        if (!views.some((v) => v.id === this.active)) this.active = views[0]?.id ?? null;
+        if (this.mounted) this.renderViews();
+    }
+
+    say(text) {
+        if (this._message) this._message.textContent = text;
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%', minHeight: '0' });
+        if (this.allowOpen) {
+            this.container.appendChild(el({
+                cls: 'ws-views-toolbar',
+                style: { display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap', padding: '6px 8px' },
+                children: [
+                    { tag: 'label', children: [
+                        { tag: 'span', text: 'Open ' },
+                        { tag: 'input', attrs: { type: 'file', accept: this.constructor.accept }, on: { change: (e) => this.openFile(e.target) } },
+                    ]},
+                    ...this.controls(),
+                    { tag: 'span', cls: 'ws-views-message', style: { opacity: '0.75' }, ref: (n) => { this._message = n; } },
+                ],
+            }));
+        }
+        this._tabs = this.container.appendChild(el({ cls: 'ws-views-tabs', style: { display: 'flex', gap: '4px', padding: '0 8px' } }));
+        this._body = this.container.appendChild(el({ cls: 'ws-views-body', style: { flex: '1 1 auto', minHeight: '0', overflow: 'auto' } }));
+        this.onDispose(() => this.clearChildren());
+        this.renderViews();
+    }
+
+    async openFile(input) {
+        const file = input.files?.[0];
+        if (!file) return;
+        let doc;
+        try {
+            doc = JSON.parse(await file.text());
+        } catch (err) {
+            this.say(`Not JSON: ${err.message}`);
+            return;
+        }
+        this.read(doc);
+    }
+
+    /** Re-read the document shown, as when a control's value changes. */
+    reread() {
+        if (this.document !== undefined) this.read(this.document);
+    }
+
+    clearChildren() {
+        for (const part of this._children) part.dispose?.();
+        this._children = [];
+    }
+
+    renderViews() {
+        this.clearChildren();
+        this._tabs.textContent = '';
+        this._body.textContent = '';
+        if (!this.views.length) {
+            this._body.appendChild(el({ tag: 'p', cls: 'ws-views-empty', style: { padding: '12px', opacity: '0.75' }, text: this.empty }));
+            return;
+        }
+        for (const view of ViewsPart.layout(this.views)) {
+            this._tabs.appendChild(el({
+                tag: 'button', attrs: { type: 'button' }, cls: view.id === this.active ? 'ws-views-tab active' : 'ws-views-tab',
+                style: { fontWeight: view.id === this.active ? '600' : '400' },
+                text: view.title, on: { click: () => { this.active = view.id; this.renderViews(); } },
+            }));
+        }
+        const view = this.views.find((v) => v.id === this.active);
+        const placed = ViewsPart.layout([view])[0];
+        const grid = this._body.appendChild(el({
+            cls: 'ws-views-grid',
+            style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '8px', padding: '8px' },
+        }));
+        for (const item of placed.items) {
+            // A cell is a part host, as a layout's pane is (`.ws-part-host`: flex, the part fills it), so a
+            // chart here sizes to its cell exactly as it would to a pane; only the cell's height is its own.
+            const cell = grid.appendChild(el({
+                cls: 'ws-views-cell ws-part-host',
+                style: { gridColumn: `span ${item.span}`, height: item.kind === 'chart' ? (item.tile ? '130px' : '380px') : 'auto', minWidth: '0' },
+            }));
+            const part = item.kind === 'chart'
+                ? new ChartPart(this.chartSpec(view, item.index))
+                : new ListPart({ id: `${this.id}-${view.id}-notes`, title: 'Notes', channel: `${this.id}:notes:${view.id}`, items: view.notes });
+            part.mount(cell, this.ctx);
+            this._children.push(part);
+        }
+    }
+
+    /** The ChartPart spec for a view's chart. */
+    chartSpec(view, index) {
+        const chart = view.charts[index];
+        return {
+            id: `${this.id}-${view.id}-${index}`, title: chart.title, chartType: chart.chartType, rendererType: 'svg',
+            options: { ...chart.options, title: chart.title, data: chart.data },
+        };
+    }
+}

package/src/workspace/styles.js

@@ -57,7 +57,42 @@ export const WORKSPACE_CSS = `
 }
 .ws-toolbar-title { font-weight: 600; }
 .ws-toolbar-spacer { flex: 1; }
-.ws-perspectives { display: flex; gap: 2px; }
+.ws-perspectives { display: flex; gap: 2px; }
+.ws-perspective-item { position: relative; display: inline-flex; }
+.ws-perspective-caret { font-size: 10px; opacity: .75; }
+.ws-perspective-submenu {
+  display: none; position: absolute; top: 100%; right: 0; z-index: 1600;
+  min-width: 260px; max-width: 380px; background: var(--ws-panel-bg); color: var(--ws-fg);
+  border: 1px solid var(--ws-border); border-radius: 0 0 6px 6px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 4px 0;
+}
+.ws-perspective-submenu.ws-submenu-open { display: flex; flex-direction: column; }
+.ws-perspective-submenu-search-wrap { padding: 4px 8px 6px; border-bottom: 1px solid var(--ws-border); }
+.ws-perspective-submenu-search {
+  width: 100%; padding: 4px 8px; font: inherit; font-size: 12px;
+  background: var(--ws-bg); color: var(--ws-fg); border: 1px solid var(--ws-border); border-radius: 4px;
+}
+.ws-perspective-submenu-list { max-height: 68vh; overflow-y: auto; }
+.ws-perspective-submenu-row {
+  display: flex; align-items: center; gap: 4px; padding: 1px 6px;
+}
+.ws-perspective-submenu-row:hover { background: rgba(127,127,127,.15); }
+.ws-perspective-submenu-item {
+  flex: 1 1 auto; text-align: left; padding: 5px 6px; font: inherit; font-size: 12px;
+  background: transparent; color: var(--ws-fg); border: none; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ws-perspective-submenu-action {
+  flex: 0 0 auto; padding: 2px 6px; font: inherit; font-size: 10px; font-family: monospace;
+  background: rgba(127,127,127,.15); color: var(--ws-fg);
+  border: 1px solid var(--ws-border); border-radius: 3px; cursor: pointer; opacity: .8;
+}
+.ws-perspective-submenu-action:hover { opacity: 1; background: var(--ws-accent); color: #000; border-color: var(--ws-accent); }
+@keyframes ws-pane-flash-anim {
+  0%, 30% { box-shadow: 0 0 0 3px var(--ws-accent), 0 6px 20px rgba(0,0,0,.22); }
+  100% { box-shadow: none; }
+}
+.ws-pane-flash { animation: ws-pane-flash-anim 1.4s ease-out; }
 .ws-perspective-btn {
   padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
   color: var(--ws-toolbar-fg); background: rgba(127,127,127,.12);