@peter.prib/renderengine 0.15.0 → 0.15.2

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

@@ -1,131 +1,144 @@
-import { render } from '../dom.js';
-import { EditorShell } from '../EditorShell.js';
-import { EditorPart } from './EditorPart.js';
-import { DiagramEditor } from '../../charting/DiagramEditor.js';
-import { MenuBar } from '../../charting/MenuBar.js';
-import { DiagramModel } from '../../charting/diagramModel/index.js';
-import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
-import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
-import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-/**
- * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
- * palette, one tab per diagram and the canvas, over a DiagramModel.
- *
- * Spec (JSON): `templateType` (palette category), `tabOrientation`
- * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
- * (localStorage key for the tool-level line style; `null` keeps it in memory).
- *
- * Line styles cascade line → diagram (`view.edgeStyle`) → model
- * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
- * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
- * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
- * BUILTIN_PARTS: register it explicitly.
- */
-export class DiagramEditorPart extends EditorPart {
-    static type = 'diagram-editor';
-    static viewNoun = 'diagram';
-
-    constructor(spec = {}) {
-        super(spec);
-        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
-        // The editor is rebuilt with the canvas on every render, which follows every model change.
-        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
-    }
-
-    createModel(spec) {
-        const store = spec.toolStyleKey === null ? null
-            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
-        this.toolEdgeStyle = store?.load({}) ?? {};
-        const model = new DiagramModel({
-            name: spec.name ?? '',
-            templateType: spec.templateType ?? 'generic',
-            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
-            historyOptions: { onChange: () => store?.save(this.toolEdgeStyle) },
-        });
-        model.createView(spec.diagramTitle ?? 'Diagram 1');
-        return model;
-    }
-
-    render() {
-        const model = this.model;
-        const view = model.currentView;
-        const doc = this.document;
-        const canvasId = `diagram-canvas-${this.id}`;
-
-        const canvas = doc.createElementNS(SVG_NS, 'svg');
-        canvas.id = canvasId;
-        canvas.setAttribute('viewBox', '0 0 800 600');
-        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
-        const elements = doc.createElementNS(SVG_NS, 'g');
-        elements.id = 'elements';
-        canvas.appendChild(elements);
-
-        const tabs = this.viewTabs({ orientation: this.tabOrientation });
-
-        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
-        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
-        palette.classList.add('ws-diagram-palette');
-        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
-        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
-        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
-
-        // The editor is bound to the view's own maps and history: nothing to save back on switch.
-        const previous = this.editor;
-        previous?.dispose();
-        this.editor = new DiagramEditor({
-            diagramContainerId: canvasId,
-            model,
-            templateType: model.templateType,
-            onTemplateTypeChange: (type) => model.setTemplateType(type),
-            templates: view.templates,
-            edges: view.edges,
-            history: view.history,
-            arrangement: view.arrangement,
-            edgeStyleLevels: this.edgeStyleLevels(view),
-        });
-        if (previous) {
-            this.editor.showGrid = previous.showGrid;
-            this.editor.gridSize = previous.gridSize;
-            this.editor.showExportArea = previous.showExportArea;
-            this.editor.exportOptions = previous.exportOptions;
-        }
-        this.editor.initPaletteForDiagramType(palette, model.templateType);
-        this.menuBar?.dispose();
-        this.menuBar = new MenuBar({
-            container: menuBarEl,
-            editor: this.editor,
-            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
-        }).render();
-        this.editor.render();
-    }
-
-    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
-    edgeStyleLevels(view) {
-        return [
-            { key: 'view', label: 'Diagram', style: view.edgeStyle },
-            { key: 'model', label: 'Model', style: this.model.edgeStyle },
-            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
-        ];
-    }
-
-    /** A diagram's properties: name, documentation and its line-style defaults. */
-    showViewProperties(view) {
-        return new DiagramViewPropertiesDialog({
-            model: this.model,
-            view,
-            document: this.document,
-            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
-            // The editor shows the current diagram; a style change there needs a redraw.
-            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
-        }).open();
-    }
-
-    dispose() {
-        this.menuBar?.dispose();
-        this._unsubscribe();
-        super.dispose();
-    }
-}
+import { render } from '../dom.js';
+import { EditorShell } from '../EditorShell.js';
+import { EditorPart } from './EditorPart.js';
+import { DiagramEditor } from '../../charting/DiagramEditor.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { DiagramModel, DiagramJsonFileFormat } from '../../charting/diagramModel/index.js';
+import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
+import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
+import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
+ * palette, one tab per diagram and the canvas, over a DiagramModel.
+ *
+ * Spec (JSON): `templateType` (palette category), `tabOrientation`
+ * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
+ * (localStorage key for the tool-level line style; `null` keeps it in memory).
+ *
+ * Line styles cascade line → diagram (`view.edgeStyle`) → model
+ * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
+ * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
+ * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
+ * BUILTIN_PARTS: register it explicitly.
+ */
+export class DiagramEditorPart extends EditorPart {
+    static type = 'diagram-editor';
+    static viewNoun = 'diagram';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
+        // The editor is rebuilt with the canvas on every render, which follows every model change.
+        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
+    }
+
+    createModel(spec) {
+        if (spec.model instanceof DiagramModel) return spec.model;
+        const store = spec.toolStyleKey === null ? null
+            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
+        this.toolEdgeStyle = store?.load({}) ?? {};
+        const historyOptions = { onChange: () => store?.save(this.toolEdgeStyle) };
+        if (spec.views) {
+            return DiagramModel.fromJSON(spec, historyOptions);
+        }
+        const model = new DiagramModel({
+            name: spec.name ?? '',
+            templateType: spec.templateType ?? 'generic',
+            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
+            historyOptions,
+        });
+        model.createView(spec.diagramTitle ?? 'Diagram 1');
+        return model;
+    }
+
+    fileFormats() {
+        return this.spec.fileFormats ? [new DiagramJsonFileFormat()] : [];
+    }
+
+    saveFormat() {
+        return this.fileFormats()[0];
+    }
+
+    render() {
+        const model = this.model;
+        const view = model.currentView;
+        const doc = this.document;
+        const canvasId = `diagram-canvas-${this.id}`;
+
+        const canvas = doc.createElementNS(SVG_NS, 'svg');
+        canvas.id = canvasId;
+        canvas.setAttribute('viewBox', '0 0 800 600');
+        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
+        const elements = doc.createElementNS(SVG_NS, 'g');
+        elements.id = 'elements';
+        canvas.appendChild(elements);
+
+        const tabs = this.viewTabs({ orientation: this.tabOrientation });
+
+        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
+        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
+        palette.classList.add('ws-diagram-palette');
+        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
+        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
+        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+        // The editor is bound to the view's own maps and history: nothing to save back on switch.
+        const previous = this.editor;
+        previous?.dispose();
+        this.editor = new DiagramEditor({
+            diagramContainerId: canvasId,
+            model,
+            templateType: model.templateType,
+            onTemplateTypeChange: (type) => model.setTemplateType(type),
+            templates: view.templates,
+            edges: view.edges,
+            history: view.history,
+            arrangement: view.arrangement,
+            edgeStyleLevels: this.edgeStyleLevels(view),
+        });
+        if (previous) {
+            this.editor.showGrid = previous.showGrid;
+            this.editor.gridSize = previous.gridSize;
+            this.editor.showExportArea = previous.showExportArea;
+            this.editor.exportOptions = previous.exportOptions;
+        }
+        this.editor.initPaletteForDiagramType(palette, model.templateType);
+        this.menuBar?.dispose();
+        this.menuBar = new MenuBar({
+            container: menuBarEl,
+            editor: this.editor,
+            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
+        }).render();
+        this.editor.render();
+    }
+
+    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
+    edgeStyleLevels(view) {
+        return [
+            { key: 'view', label: 'Diagram', style: view.edgeStyle },
+            { key: 'model', label: 'Model', style: this.model.edgeStyle },
+            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
+        ];
+    }
+
+    /** A diagram's properties: name, documentation and its line-style defaults. */
+    showViewProperties(view) {
+        return new DiagramViewPropertiesDialog({
+            model: this.model,
+            view,
+            document: this.document,
+            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
+            // The editor shows the current diagram; a style change there needs a redraw.
+            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
+        }).open();
+    }
+
+    dispose() {
+        this.menuBar?.dispose();
+        this._unsubscribe();
+        super.dispose();
+    }
+}

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 },
+        };
+    }
+}