@peter.prib/renderengine 0.2.11 → 0.4.0

package/src/workspace/parts/DataModelPart.js

@@ -1,735 +1,668 @@
-import { ChartPart } from './ChartPart.js';
-import { el } from '../dom.js';
-import { MenuBar } from '../../charting/MenuBar.js';
-import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
-import { FormDialog } from '../../charting/FormDialog.js';
-import { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
-import { DataModelNotation } from '../../datamodel.js';
-import {
-    DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
-    BianSemanticApiReader, DataType, EnumerationType, StructuredType, NamingStandard, ClassificationScheme, ClassificationLens,
-    SqlDdlFileFormat, ModelScorecard,
-} from '../../charting/datamodel/index.js';
-import { pickFile } from '../../charting/toolbar/pickFile.js';
-import { ModelFile } from './ModelFile.js';
-import { EditorPart } from './EditorPart.js';
-import { downloadPng, downloadSvg, downloadBlob } from '../../exportImage.js';
-
-/**
- * DataModelPart — a data model (DataModel, drawn by dataModelDiagram) in a
- * pane: its conceptual, logical and physical levels, each its own schema, and
- * how they map; seen through a perspective (whose concepts, under whose names)
- * read in a context (what they mean here, the rules that hold, where and
- * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
- * of them, Level offering the views that are no level (DataModel.OTHER_VIEWS:
- * Mapping, the levels side by side joined where they map; Service landscape,
- * the service domains in their business areas and domains, a double-click
- * seeing the model through one), and its Model menu makes, changes and removes
- * perspectives and contexts and reads service domains from a BIAN landscape. Boxes and notes stay where they were dragged. Export ▸ saves the
- * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
- * ChartPart's.
- *
- * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
- * editor's model is (ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
- * • while changed since, and asking before the page is left with changes
- * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
- * several models open, a tab each, and with that part's `keep` it is kept in
- * this browser and backed up (File ▸ This browser), as the modeller's are.
- *
- * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
- * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
- * — the model as DataModel takes it (or `entities`/`relationships` in the older
- * one-entity form); `perspective`/`context` the ids chosen; `level` default
- * 'logical' ('mapping' for the mapping view), `notation` default 'crowsfoot';
- * `options` anything else dataModelDiagram takes (editable, resizable by default).
- */
-export class DataModelPart extends ChartPart {
-    static type = 'data-model';
-
-    constructor(spec = {}) {
-        const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
-        super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
-        /** The file it is open from and saved to. */
-        this.file = new ModelFile(this);
-        /** Its id among the models kept in this browser, or null. */
-        this.keepId = spec.keepId ?? null;
-        this._adoptModel(new DataModel(spec));
-        /** The ids chosen, or null. */
-        this.perspectiveId = perspective;
-        this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
-        /** The level the drawing on screen is of (where a drag is kept). */
-        this._drawnLevel = level;
-    }
-
-    // ===== A model saved as a file, kept, backed up =====
-
-    /** Its file formats: the data model's own. */
-    fileFormats() {
-        return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
-    }
-
-    saveFormat() {
-        return this.fileFormats()[0];
-    }
-
-    /** The ModelsPart it is a tab of, or null. */
-    get modelsHost() {
-        return this.ctx?.models ?? null;
-    }
-
-    /** The page it is in. */
-    get document() {
-        return this.container?.ownerDocument ?? globalThis.document;
-    }
-
-    /** What its tab and the page title show: the file's name (or the model's), and • while changed. */
-    get fileLabel() {
-        return this.file.label;
-    }
-
-    /** The model as kept in this browser (ModelFile#keepEntry). */
-    keepEntry() {
-        return this.file.keepEntry();
-    }
-
-    /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
-    replaceModel(model) {
-        this._adoptModel(model);
-        this.perspectiveId = null;
-        this.contextId = null;
-        if (!this.mounted) return;
-        // Not rendered again (that would add a second toolbar and canvas): the toolbar
-        // shows the new model's choices, and it is drawn. What was on screen is the
-        // other model's, so where its boxes were is not kept into this one.
-        this._drawnLevel = null;
-        this._changed();
-        this._redraw();
-    }
-
-    /** A model opened from a file in a host's new tab (as EditorPart does). */
-    onImported(model) {
-        return EditorPart.prototype.onImported.call(this, model);
-    }
-
-    /** The file or its saved state changed: a ModelsPart's tab follows it. */
-    onFileState() {
-        this.modelsHost?.fileStateChanged?.(this);
-    }
-
-    /** Edit `model`: every change of it shows (• and the title) and is kept. @private */
-    _adoptModel(model) {
-        this._unsubscribeEdits?.();
-        this.model = model;
-        model.markSaved();
-        this._unsubscribeEdits = model.onEdit(() => {
-            this.file.showState();
-            this.modelsHost?.modelEdited?.(this);
-        });
-    }
-
-    mount(host, ctx) {
-        const first = !this.mounted;
-        super.mount(host, ctx);
-        if (first) {
-            this.file.listen();
-            this.file.showState();
-        }
-    }
-
-    /**
-     * File ▸: Open…, Save, Save As…, then with a ModelsPart New model and Close
-     * model, and This browser ▸ (keeping and backups).
-     */
-    fileItems() {
-        const host = this.modelsHost;
-        return EditorPart.tidyMenu([
-            ...this.file.menuItems(),
-            ...(host ? [
-                { separator: true },
-                ...EditorPart.menuGroup('New', [{ label: 'New model', action: () => host.newModel() }, ...(host.baseItems?.() ?? [])]),
-                { label: 'Duplicate model', action: () => host.duplicate(this) },
-                { label: 'Close model', action: () => host.closeModel(this.id) },
-                ...EditorPart.menuGroup('This browser', host.keepItems?.(this) ?? []),
-            ] : []),
-        ]);
-    }
-
-    /** Edit ▸: undo and redo (a merge is one step). */
-    editItems() {
-        const history = this.model.history;
-        return [
-            { label: history.canUndo ? `Undo ${history.undoLabel}` : 'Undo', disabled: !history.canUndo || undefined, action: () => { history.undo(); this._redraw(); } },
-            { label: history.canRedo ? `Redo ${history.redoLabel}` : 'Redo', disabled: !history.canRedo || undefined, action: () => { history.redo(); this._redraw(); } },
-        ];
-    }
-
-    /** Run a model-wide edit (a merge) as one undo step, then redraw. */
-    runModelEdit(command) {
-        if (!command) return null;
-        this.model.history.execute(command);
-        this._changed();
-        this._redraw();
-        return command;
-    }
-
-    /** The entities at the level shown (the concepts in the mapping view). */
-    get entities() {
-        return this.model.level(DataModel.otherView(this.level) ? 'conceptual' : this.level).entities;
-    }
-    get level() { return this.chartOptions.level; }
-    get notation() { return this.chartOptions.notation; }
-    /** The perspective chosen (DataModelPerspective), or null. */
-    get perspective() { return this.model.perspective(this.perspectiveId); }
-    /** The context chosen (DataModelContext), or null. */
-    get context() { return this.model.context(this.contextId); }
-
-    /** Show another level ('conceptual', 'logical', 'physical'), or how they map ('mapping'). */
-    setLevel(level) {
-        this.chartOptions.level = level;
-        this._redraw();
-    }
-
-    /** Draw the model in another notation ('chen', 'crowsfoot', 'uml'). */
-    setNotation(notation) {
-        this.chartOptions.notation = notation;
-        this._redraw();
-    }
-
-    /** See the model through a perspective (an id; null: the whole schema), in the context it is read in, if it names one. */
-    setPerspective(id) {
-        this.perspectiveId = id || null;
-        const own = this.perspective?.context;
-        if (own) this.contextId = own;
-        this._redraw();
-    }
-
-    /** Read the model in a context (an id; null: the schema's own descriptions). */
-    setContext(id) {
-        this.contextId = id || null;
-        this._redraw();
-    }
-
-    /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
-    drawOptions() {
-        return {
-            ...this.chartOptions,
-            ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }),
-            ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
-            ...(this.editsLevel && this.editingOptions()),
-            ...(this.level === DataModel.MAPPING && this.lineageOptions()),
-        };
-    }
-
-    /**
-     * Show an entity's lineage: the mapping view, what it realises and what
-     * realises it (DataModel#lineage) as they are, the rest greyed.
-     */
-    showLineage(level, id) {
-        this.lineageFocus = { level, id };
-        this.setLevel(DataModel.MAPPING);
-    }
-
-    /**
-     * In the mapping view: an entity's lineage picked out (`lineageFocus`), and
-     * its menus to show another's or show all again.
-     */
-    lineageOptions() {
-        const view = {};
-        const focus = this.lineageFocus;
-        if (focus) {
-            const { up, down } = this.model.lineage(focus.level, focus.id);
-            const on = new Set([`${focus.level}:${focus.id}`, ...[...up, ...down].map(({ level, entity }) => `${level}:${entity.id}`)]);
-            const drawn = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: DataModel.MAPPING });
-            view.entities = drawn.entities.map(e => (on.has(e.id) ? e : { ...e, color: '#f3f4f6' }));
-            view.links = drawn.links.map(l => (on.has(l.source) && on.has(l.target) ? l : { ...l, color: '#e5e7eb' }));
-        }
-        const split = (nodeId) => { const i = String(nodeId).indexOf(':'); return [nodeId.slice(0, i), nodeId.slice(i + 1)]; };
-        return {
-            ...view,
-            contextMenuItems: [{ label: 'Show lineage', action: (node) => { const [level, id] = split(node.id); this.showLineage(level, id); } }],
-            canvasContextMenuItems: [{ label: 'Show all', action: () => { this.lineageFocus = null; this._redraw(); } }],
-        };
-    }
-
-    /** Whether what is shown is a level of the schema (so its entities and relationships can be edited here). */
-    get editsLevel() {
-        return !DataModel.otherView(this.level);
-    }
-
-    /**
-     * At a level of the schema: double-click an entity or a relationship to
-     * edit it; right-click one to edit or delete it, or the canvas for a new
-     * entity there or a new relationship. (These stand in for graphDiagram's
-     * own, which change only the drawing.)
-     */
-    editingOptions() {
-        const relationshipOf = (drawn) => this.model.relationshipIndex(this.level, drawn);
-        const isEntity = (node) => !!this.model.level(this.level).entity(node.id);
-        return {
-            onNodeDoubleClick: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))),
-            onEdgeDoubleClick: (edge) => this.editRelationship(relationshipOf(edge)),
-            contextMenuItems: [
-                { label: 'Edit…', action: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))) },
-                { label: 'Delete', action: (node) => (isEntity(node) ? this.removeEntity(node.id) : this.removeRelationship(relationshipOf(node))) },
-                { label: 'Show lineage', action: (node) => { if (isEntity(node)) this.showLineage(this.level, node.id); } },
-            ],
-            edgeContextMenuItems: [
-                { label: 'Edit relationship…', action: (edge) => this.editRelationship(relationshipOf(edge)) },
-                { label: 'Delete relationship', action: (edge) => this.removeRelationship(relationshipOf(edge)) },
-            ],
-            canvasContextMenuItems: [
-                { label: `New ${this.levelInfo.entityNoun.toLowerCase()} here…`, action: (subject, engine, point) => this.editEntity(null, point) },
-                { label: 'New relationship…', action: () => this.editRelationship(null) },
-            ],
-        };
-    }
-
-    /** The level shown, as DataModelNotation has it (its nouns, its dialogs' fields). */
-    get levelInfo() {
-        return DataModelNotation.level(this.level);
-    }
-
-    /**
-     * An entity's dialog at the level shown (none: a new one, placed at
-     * `point` or below the others): its level's fields (name, definition, and
-     * at the logical and physical levels its attributes as a table). Saved, it
-     * is one undo step.
-     */
-    editEntity(id, point = null) {
-        if (!this.editsLevel) return null;
-        const info = this.levelInfo;
-        const schema = this.model.level(this.level);
-        const entity = id ? schema.entity(id) : null;
-        if (id && !entity) return null;
-        const scheme = this.model.classificationScheme;
-        const context = { typeNames: this.model.dataTypes.map(t => t.name), sensitivities: scheme.levels.map(l => l.name), categories: scheme.categories };
-        const title = entity ? `${info.entityNoun}: ${entity.name}` : `New ${info.entityNoun.toLowerCase()}`;
-        return this._dialog(title, info.entityFields(entity, context), (values) => {
-            const spec = info.entitySpecFrom(values, entity);
-            if (!entity) Object.assign(spec, point ?? this._freeSpot(schema));
-            this.runModelEdit(this.model.saveEntityCommand(this.level, id, spec));
-        });
-    }
-
-    /** Where a new entity goes with no point given: below what is there. @private */
-    _freeSpot(schema) {
-        const ys = schema.entities.map(e => e.y).filter(Number.isFinite);
-        return { x: 160, y: (ys.length ? Math.max(...ys) : 0) + 160 };
-    }
-
-    removeEntity(id) {
-        if (!this.editsLevel || !this.model.level(this.level).entity(id)) return null;
-        return this.runModelEdit(this.model.removeEntityCommand(this.level, id));
-    }
-
-    /** A relationship's dialog at the level shown (`index` null or -1: a new one); saved, one undo step. */
-    editRelationship(index) {
-        if (!this.editsLevel) return null;
-        const info = this.levelInfo;
-        const schema = this.model.level(this.level);
-        const relationship = index == null || index < 0 ? null : schema.relationships[index];
-        if (!schema.entities.length) return null;
-        const title = relationship ? `Relationship: ${relationship.name || `${relationship.source} – ${relationship.target}`}` : 'New relationship';
-        return this._dialog(title, info.relationshipFields(schema.entities, relationship), (values) => {
-            this.runModelEdit(this.model.saveRelationshipCommand(this.level, relationship ? index : null, info.relationshipSpecFrom(values, relationship)));
-        }, ({ source, target }) => (source && target ? null : 'Choose both ends'));
-    }
-
-    removeRelationship(index) {
-        if (!this.editsLevel || index == null || index < 0) return null;
-        return this.runModelEdit(this.model.removeRelationshipCommand(this.level, index));
-    }
-
-    /** See the model through a service domain (an id), at the logical level, where its business objects are. */
-    openServiceDomain(id) {
-        if (!this.model.perspective(id)) return;
-        this.chartOptions.level = 'logical';
-        this.setPerspective(id);
-    }
-
-    render() {
-        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
-        const toolbar = this.container.appendChild(el({}));
-        super.render();
-        Object.assign(this.canvasHost.style, { flex: '1 1 auto', minHeight: '0', height: 'auto' });
-        this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.container.ownerDocument }).render();
-    }
-
-    /**
-     * Model ▸ (perspectives and contexts of one's own), Perspective and Context
-     * (when the model has any; the context's scope beside them), Level (each
-     * level from DataModelNotation, then Mapping) and Notation, and Export ▸.
-     */
-    menuBarItems() {
-        const { perspectives, contexts } = this.model;
-        const host = this.modelsHost;
-        return [
-            new ToolbarMenu('File', () => this.fileItems()),
-            new ToolbarMenu('Edit', () => this.editItems()),
-            ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
-            new ToolbarMenu('Model', () => this.modelItems()),
-            ...(perspectives.length ? [new ToolbarSelect('Perspective',
-                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, p.description])],
-                () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
-            ...(contexts.length ? [
-                new ToolbarSelect('Context',
-                    () => [['', 'None'], ...this.model.contexts.map(c => [c.id, c.name, c.description])],
-                    () => this.contextId ?? '', (v) => this.setContext(v)),
-                new ToolbarText(() => this.context?.scope ?? ''),
-            ] : []),
-            new ToolbarSelect('Level', () => [
-                ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
-                ...DataModel.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
-            ], () => this.level, (v) => this.setLevel(v)),
-            new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
-            new ToolbarMenu('Export', () => this.exportItems()),
-        ];
-    }
-
-    /** Model ▸: make, change or remove a perspective or a context (the one chosen). */
-    modelItems() {
-        return [
-            { label: `New ${this.editsLevel ? this.levelInfo.entityNoun.toLowerCase() : 'entity'}…`, disabled: !this.editsLevel || undefined, action: () => this.editEntity(null) },
-            { label: 'New relationship…', disabled: !this.editsLevel || !this.model.level(this.level).entities.length || undefined, action: () => this.editRelationship(null) },
-            { separator: true },
-            { label: 'New perspective…', action: () => this.editPerspective(null) },
-            { label: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
-            { label: 'New classification lens…', action: () => this.editPerspective(null, ClassificationLens) },
-            { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
-            { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
-            { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
-            { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
-            { separator: true },
-            ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
-            { separator: true },
-            { label: 'New context…', action: () => this.editContext(null) },
-            { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
-            { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
-            { separator: true },
-            { label: 'Check model…', action: () => this.checkModel() },
-            { label: 'Scorecard…', action: () => this.scoreModel() },
-            ...EditorPart.menuGroup('Naming standard', this.namingItems()),
-            { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
-        ];
-    }
-
-    /**
-     * Service domains from BIAN's published service landscape (an ArchiMate
-     * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
-     * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
-     * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
-     * @returns {Promise<Command|null>}
-     */
-    readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
-        let found = 0;
-        return this.readInto({
-            ...options, accept: '.archimate,.xml', what: 'the landscape',
-            command: (bytes, name) => {
-                const specs = reader.read(BianLandscapeReader.parse(bytes));
-                found = specs.length;
-                return this.model.serviceDomainsCommand(specs, `"${name}"`);
-            },
-            nothing: (name) => (found
-                ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
-                : `"${name}" has no service domains (Capabilities with none inside them).`),
-            then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
-        });
-    }
-
-    /**
-     * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
-     * or JSON; BianSemanticApiReader): its control record and behaviour
-     * qualifiers as logical entities, the schemas they use as data types, and
-     * the service domain, as one undo step (DataModel#bringCommand); then the
-     * model is seen through it at the logical level. An entity the model has
-     * by name stays as it is and is used.
-     * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
-     * @returns {Promise<Command|null>}
-     */
-    readSemanticApi({ depth = 1, ...options } = {}) {
-        let read = null;
-        return this.readInto({
-            ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
-            command: (bytes, name) => {
-                const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
-                read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
-                const [sd] = read.serviceDomains;
-                return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
-            },
-            nothing: (name) => `"${name}" brings nothing the model does not have.`,
-            then: () => {
-                // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
-                const [sd] = read.serviceDomains;
-                const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
-                this.chartOptions.level = 'logical';
-                this.perspectiveId = here?.id ?? sd.id;
-            },
-        });
-    }
-
-    /**
-     * Ask for a file, make a command from its bytes, and run it as one undo
-     * step; a file that cannot be read, or brings nothing, is reported.
-     * @param {Object} how
-     * @param {string} how.accept - The file chooser's filter
-     * @param {string} how.what - What is read, for the report ('the landscape')
-     * @param {(bytes: Uint8Array, name: string) => Command|null} how.command
-     * @param {(name: string) => string} how.nothing - The report when the command is null
-     * @param {() => void} [how.then] - What to show once it is run (before the redraw)
-     * @param {(accept: string) => Promise<File|null>} [how.chooseFile]
-     * @param {(message: string) => void} [how.report]
-     * @returns {Promise<Command|null>}
-     */
-    async readInto({ accept, what, command: make, nothing, then = () => {}, chooseFile = null, report = null }) {
-        const doc = this.container?.ownerDocument ?? globalThis.document;
-        const tell = report ?? ((message) => (doc.defaultView ?? globalThis).alert(message));
-        const file = await (chooseFile ?? ((filter) => pickFile(filter, doc)))(accept);
-        if (!file) return null;
-        let command;
-        try {
-            command = make(new Uint8Array(await file.arrayBuffer()), file.name);
-        } catch (err) {
-            tell(`Could not read ${what}: ${err.message}`);
-            return null;
-        }
-        if (!command) {
-            tell(nothing(file.name));
-            return null;
-        }
-        then();
-        this.runModelEdit(command);
-        return command;
-    }
-
-    /**
-     * The Data Model Scorecard (ModelScorecard): each category as the model
-     * measures it, a reviewer's score and note, its weight; the total in the
-     * title. Saved, the reviews and weights are kept (one undo step).
-     */
-    scoreModel() {
-        const card = this.model.scored();
-        const results = card.results();
-        const { score, coverage } = card.total(results);
-        const title = score == null ? 'Scorecard: nothing scored yet' : `Scorecard: ${score} of 100 (${coverage}% of the weight scored)`;
-        return this._dialog(title, card.fields(results), (values) => {
-            this.runModelEdit(this.model.scorecardCommand(ModelScorecard.specFrom(values)));
-        }, () => null);
-    }
-
-    /** The classification scheme's dialog (its sensitivity levels in order, its categories); saved, one undo step. */
-    editClassificationScheme() {
-        return this._dialog('Classification scheme', ClassificationScheme.fields(this.model.classificationScheme), (values) => {
-            this.runModelEdit(this.model.classificationSchemeCommand(ClassificationScheme.specFrom(values)));
-        }, (values) => (ClassificationScheme.specFrom(values).levels.length ? null : 'Give it at least one level'));
-    }
-
-    /** Model ▸ Naming standard ▸: edit it, start from the conventional one, or remove it (Check model… checks names against it). */
-    namingItems() {
-        const has = !!this.model.namingStandard;
-        return [
-            { label: has ? 'Edit…' : 'Set…', action: () => this.editNamingStandard() },
-            ...(has ? [] : [{ label: 'Use the conventional one', action: () => this.runModelEdit(this.model.namingStandardCommand(NamingStandard.CONVENTIONAL)) }]),
-            ...(has ? [{ label: 'Remove', action: () => this.runModelEdit(this.model.namingStandardCommand(null)) }] : []),
-        ];
-    }
-
-    /**
-     * The naming standard's dialog (NamingStandard.fields: a rule per level for
-     * entities and attributes); saved, one undo step. A standard that asks
-     * nothing is none.
-     */
-    editNamingStandard() {
-        return this._dialog('Naming standard', NamingStandard.fields(this.model.namingStandard), (values) => {
-            const spec = NamingStandard.specFrom(values);
-            const asks = Object.values(spec).some(kinds => Object.values(kinds).some(r => r.style || r.classWords.length || r.maxLength || Object.keys(r.abbreviations).length));
-            this.runModelEdit(this.model.namingStandardCommand(asks ? spec : null));
-        }, () => null);
-    }
-
-    /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
-    dataTypeItems() {
-        const types = this.model.dataTypes;
-        return [
-            ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
-            ...(types.length ? [
-                { separator: true },
-                { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
-                { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
-                { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
-            ] : []),
-        ];
-    }
-
-    /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
-    editDataType(type, Kind = type?.constructor ?? DataType) {
-        const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
-        return this._dialog(title, Kind.fields(this.model, type), (values) => {
-            const spec = Kind.specFrom(values, this.model, type);
-            if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
-            this.chartOptions.level = DataModel.DATA_TYPES;
-            this._changed();
-            this._redraw();
-        });
-    }
-
-    removeDataType(id) {
-        this.model.removeDataType(id);
-        if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
-        this._changed();
-        this._redraw();
-    }
-
-    /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
-    checkModel() {
-        const findings = this.model.checker().run();
-        new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
-        return findings;
-    }
-
-    /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
-    revealFinding(finding) {
-        if (finding.kind === 'perspective') {
-            this.chartOptions.level = 'logical';
-            this.setPerspective(finding.ids[0]);
-        } else if (finding.kind === 'mapping') {
-            this.setLevel(DataModel.MAPPING);
-        } else if (finding.kind === 'data-type') {
-            this.setLevel(DataModel.DATA_TYPES);
-        } else if (finding.level) {
-            this.setLevel(finding.level);
-        }
-        this.menuBar?.render?.();
-    }
-
-    /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
-    editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
-        const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
-        return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
-            const spec = Kind.specFrom(values, this.model, perspective);
-            const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
-            this._changed();
-            this.setPerspective(saved.id);
-        });
-    }
-
-    /** A dialog making a context (none given) or changing one (DataModelContext.fields); applied, it is the one read in. */
-    editContext(context) {
-        return this._dialog(context ? `Context: ${context.name}` : 'New context', DataModelContext.fields(this.model, context), (values) => {
-            const spec = DataModelContext.specFrom(values, this.model, context);
-            const saved = context ? this.model.updateContext(context.id, spec) : this.model.addContext(spec);
-            this._changed();
-            this.setContext(saved.id);
-        });
-    }
-
-    removePerspective(id) {
-        this.model.removePerspective(id);
-        this._changed();
-        this.setPerspective(null);
-    }
-
-    removeContext(id) {
-        this.model.removeContext(id);
-        this._changed();
-        this.setContext(null);
-    }
-
-    /** Open a form (a name is needed). @private */
-    _dialog(title, fields, apply, validate = ({ name }) => ((name ?? '').trim() ? null : 'Give it a name')) {
-        return new FormDialog({
-            title, fields, submitLabel: 'Save', idPrefix: 'data-model-',
-            document: this.container?.ownerDocument ?? globalThis.document,
-            validate, onApply: apply,
-        }).open();
-    }
-
-    /** The perspectives or contexts changed: the toolbar shows them anew. @private */
-    _changed() {
-        if (this.menuBar) this.menuBar.items = this.menuBarItems();
-        this.menuBar?.render?.();
-    }
-
-    /** Export ▸: the picture, as PNG or SVG, named after the model. */
-    exportItems() {
-        const name = this.model.name || this.title || 'data-model';
-        return [
-            { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
-            { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
-            { separator: true },
-            { label: 'SQL DDL (physical level)', action: () => this.exportDdl() },
-        ];
-    }
-
-    /** The physical level as SQL DDL (SqlDdlFileFormat), downloaded as the model's name. Returns the file. */
-    exportDdl({ download = (file, fileName) => downloadBlob(new (this.document.defaultView ?? globalThis).Blob([file.data], { type: file.mimeType }), fileName) } = {}) {
-        const file = new SqlDdlFileFormat().export(this.model);
-        download(file, `${String(this.model.name || this.title || 'model').replace(/[^A-Za-z0-9._-]+/g, '-')}.sql`);
-        return file;
-    }
-
-    /** Redraw now (a choice made), when there is somewhere to draw. @private */
-    _redraw() {
-        if (this.canvasHost) this._draw();
-        // Its toolbar shows what is drawn, however it was chosen (a finding, a lineage, a service domain opened).
-        this.menuBar?.refresh?.();
-    }
-
-    /**
-     * Keep where the boxes and notes were dragged (the drawing is made anew each
-     * time): on the level shown, or in the mapping view's own layout. Then draw.
-     */
-    _draw() {
-        if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
-        this._drawnLevel = this.level;
-        super._draw();
-    }
-
-    /**
-     * Keep where the drawing on screen has its boxes and notes: on the level
-     * it shows, or in the mapping view's layout. Returns whether any moved. @private
-     */
-    _keepPlaces() {
-        const pos = this.engine?._graph?.pos;
-        if (!pos || !this._drawnLevel) return false;
-        let moved = false;
-        const place = (p, before, put) => {
-            if (!p || (before && before.x === p.x && before.y === p.y)) return;
-            put({ x: p.x, y: p.y });
-            moved = true;
-        };
-        const other = DataModel.otherView(this._drawnLevel);
-        if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
-        if (other) {
-            for (const [id, p] of pos) {
-                if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; });
-            }
-            return moved;
-        }
-        for (const entity of this.model.level(this._drawnLevel).entities) {
-            place(pos.get(entity.id), entity, (at) => Object.assign(entity, at));
-        }
-        for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
-            const p = pos.get(rule.id);
-            const before = this.model.notePlace(this._drawnLevel, rule);
-            place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at));
-        }
-        return moved;
-    }
-
-    dispose() {
-        this._unsubscribeEdits?.();
-        this.file.restoreTitle();
-        this.menuBar?.dispose?.();
-        super.dispose();
-    }
-
-    /** The spec again: the model (with where its boxes are), what is chosen, and the other options. */
-    serialize() {
-        const { options, chartType, ...base } = super.serialize();
-        const { level, notation, ...rest } = options;
-        return {
-            ...base, ...this.model.toJSON(),
-            perspective: this.perspectiveId, context: this.contextId, level, notation, options: rest,
-        };
-    }
-}
+import { ChartPart } from './ChartPart.js';
+import { el } from '../dom.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
+import { DataModelNotation } from '../../datamodel.js';
+import {
+    DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
+    BianSemanticApiReader, DataType, EnumerationType, StructuredType, NamingStandard, ClassificationScheme, ClassificationLens,
+    SqlDdlFileFormat, ModelScorecard,
+} from '../../charting/datamodel/index.js';
+import { ModelHosted } from './ModelHosted.js';
+import { EditorPart } from './EditorPart.js';
+import { downloadPng, downloadSvg, downloadBlob } from '../../exportImage.js';
+import { layout, LAYOUTS } from '../../charting/arrangement/layouts.js';
+import { DataModelDiagram } from '../../charting/diagrams/DataModelDiagram.js';
+
+/**
+ * DataModelPart — a data model (DataModel, drawn by dataModelDiagram) in a
+ * pane: its conceptual, logical and physical levels, each its own schema, and
+ * how they map; seen through a perspective (whose concepts, under whose names)
+ * read in a context (what they mean here, the rules that hold, where and
+ * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
+ * of them, Level offering the views that are no level (DataModel.OTHER_VIEWS:
+ * Mapping, the levels side by side joined where they map; Service landscape,
+ * the service domains in their business areas and domains, a double-click
+ * seeing the model through one), and its Model menu makes, changes and removes
+ * perspectives and contexts and reads service domains from a BIAN landscape. Boxes and notes stay where they were dragged. Export ▸ saves the
+ * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
+ * ChartPart's.
+ *
+ * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
+ * editor's model is (ModelHosted: ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
+ * • while changed since, and asking before the page is left with changes
+ * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
+ * several models open, a tab each, and with that part's `keep` it is kept in
+ * this browser and backed up (File ▸ This browser), as the modeller's are.
+ *
+ * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
+ * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
+ * — the model as DataModel takes it (or `entities`/`relationships` in the older
+ * one-entity form); `perspective`/`context` the ids chosen; `level` default
+ * 'logical' ('mapping' for the mapping view), `notation` default 'crowsfoot';
+ * `options` anything else dataModelDiagram takes (editable, resizable by default).
+ */
+export class DataModelPart extends ModelHosted(ChartPart) {
+    static type = 'data-model';
+
+    constructor(spec = {}) {
+        const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
+        super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
+        this._adoptModel(new DataModel(spec));
+        /** The ids chosen, or null. */
+        this.perspectiveId = perspective;
+        this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
+        /** The level the drawing on screen is of (where a drag is kept). */
+        this._drawnLevel = level;
+    }
+
+    // ===== A model saved as a file, kept, backed up =====
+
+    /** Its file formats: the data model's own. */
+    fileFormats() {
+        return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
+    }
+
+    /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
+    replaceModel(model) {
+        this._adoptModel(model);
+        this.perspectiveId = null;
+        this.contextId = null;
+        if (!this.mounted) return;
+        // Not rendered again (that would add a second toolbar and canvas): the toolbar
+        // shows the new model's choices, and it is drawn. What was on screen is the
+        // other model's, so where its boxes were is not kept into this one.
+        this._drawnLevel = null;
+        this._drawnPlaces = null;
+        this._changed();
+        this._redraw();
+    }
+
+    /** Edit ▸: undo and redo (a merge is one step), and laying the level shown out again. */
+    editItems() {
+        return [
+            ...this.undoItems(),
+            ...(this.editsLevel ? [
+                { separator: true },
+                { label: 'Lay out', items: LAYOUTS.map(([kind, label]) => ({ label, action: () => this.runModelEdit(this.layoutCommand(kind)) })) },
+            ] : []),
+        ];
+    }
+
+    /**
+     * Lay the boxes of the level shown out again — what is drawn there (the
+     * perspective's), by one of the arrangement's layouts (LAYOUTS: grid,
+     * circle, trees, force-directed, by kind), its lines guiding the trees and
+     * the force. Where each box goes is kept in the model as a drag would be.
+     * One undo step; null on a view that is no level of the schema.
+     * @param {string} kind - A LAYOUTS key
+     */
+    layoutCommand(kind) {
+        if (!this.editsLevel) return null;
+        const level = this.level;
+        const view = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level });
+        const notation = DataModelNotation.notation(this.notation);
+        const boxes = view.entities.map(e => {
+            const node = DataModelDiagram.buildNode({ ...e, x: Number.isFinite(e.x) ? e.x : 0, y: Number.isFinite(e.y) ? e.y : 0 }, { level, notation });
+            const b = DataModelDiagram.boxOf(node);
+            return { id: e.id, left: b.x0, top: b.y0, width: b.x1 - b.x0, height: b.y1 - b.y0, kind: e.role ?? e.kind ?? '' };
+        });
+        const placed = layout(kind, boxes, {
+            edges: (view.relationships ?? []).map(r => ({ source: r.source, target: r.target })),
+            categoryOf: (box) => box.kind,
+        });
+        const sizes = new Map(boxes.map(b => [b.id, b]));
+        const label = LAYOUTS.find(([k]) => k === kind)?.[1] ?? kind;
+        return this.model.editCommand(`Lay out: ${label}`, (model) => {
+            for (const p of placed) {
+                const entity = model.level(level).entity(p.id), b = sizes.get(p.id);
+                if (entity) Object.assign(entity, { x: Math.round(p.left + b.width / 2), y: Math.round(p.top + b.height / 2) });
+            }
+        });
+    }
+
+    /** An edit shown: the toolbar's choices anew, and drawn. */
+    afterModelEdit() {
+        this._changed();
+        this._redraw();
+    }
+
+    /** The entities at the level shown (the concepts in the mapping view). */
+    get entities() {
+        return this.model.level(DataModel.otherView(this.level) ? 'conceptual' : this.level).entities;
+    }
+    get level() { return this.chartOptions.level; }
+    get notation() { return this.chartOptions.notation; }
+    /** The perspective chosen (DataModelPerspective), or null. */
+    get perspective() { return this.model.perspective(this.perspectiveId); }
+    /** The context chosen (DataModelContext), or null. */
+    get context() { return this.model.context(this.contextId); }
+
+    /** Show another level ('conceptual', 'logical', 'physical'), or how they map ('mapping'). */
+    setLevel(level) {
+        this.chartOptions.level = level;
+        this._redraw();
+    }
+
+    /** Draw the model in another notation ('chen', 'crowsfoot', 'uml'). */
+    setNotation(notation) {
+        this.chartOptions.notation = notation;
+        this._redraw();
+    }
+
+    /** See the model through a perspective (an id; null: the whole schema), in the context it is read in, if it names one. */
+    setPerspective(id) {
+        this.perspectiveId = id || null;
+        const own = this.perspective?.context;
+        if (own) this.contextId = own;
+        this._redraw();
+    }
+
+    /** Read the model in a context (an id; null: the schema's own descriptions). */
+    setContext(id) {
+        this.contextId = id || null;
+        this._redraw();
+    }
+
+    /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
+    drawOptions() {
+        return {
+            ...this.chartOptions,
+            ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }),
+            ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
+            ...(this.editsLevel && this.editingOptions()),
+            ...(this.level === DataModel.MAPPING && this.lineageOptions()),
+        };
+    }
+
+    /**
+     * Show an entity's lineage: the mapping view, what it realises and what
+     * realises it (DataModel#lineage) as they are, the rest greyed.
+     */
+    showLineage(level, id) {
+        this.lineageFocus = { level, id };
+        this.setLevel(DataModel.MAPPING);
+    }
+
+    /**
+     * In the mapping view: an entity's lineage picked out (`lineageFocus`), and
+     * its menus to show another's or show all again.
+     */
+    lineageOptions() {
+        const view = {};
+        const focus = this.lineageFocus;
+        if (focus) {
+            const { up, down } = this.model.lineage(focus.level, focus.id);
+            const on = new Set([`${focus.level}:${focus.id}`, ...[...up, ...down].map(({ level, entity }) => `${level}:${entity.id}`)]);
+            const drawn = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: DataModel.MAPPING });
+            view.entities = drawn.entities.map(e => (on.has(e.id) ? e : { ...e, color: '#f3f4f6' }));
+            view.links = drawn.links.map(l => (on.has(l.source) && on.has(l.target) ? l : { ...l, color: '#e5e7eb' }));
+        }
+        const split = (nodeId) => { const i = String(nodeId).indexOf(':'); return [nodeId.slice(0, i), nodeId.slice(i + 1)]; };
+        return {
+            ...view,
+            contextMenuItems: [{ label: 'Show lineage', action: (node) => { const [level, id] = split(node.id); this.showLineage(level, id); } }],
+            canvasContextMenuItems: [{ label: 'Show all', action: () => { this.lineageFocus = null; this._redraw(); } }],
+        };
+    }
+
+    /** Whether what is shown is a level of the schema (so its entities and relationships can be edited here). */
+    get editsLevel() {
+        return !DataModel.otherView(this.level);
+    }
+
+    /**
+     * At a level of the schema: double-click an entity or a relationship to
+     * edit it; right-click one to edit or delete it, or the canvas for a new
+     * entity there or a new relationship. (These stand in for graphDiagram's
+     * own, which change only the drawing.)
+     */
+    editingOptions() {
+        const relationshipOf = (drawn) => this.model.relationshipIndex(this.level, drawn);
+        const isEntity = (node) => !!this.model.level(this.level).entity(node.id);
+        return {
+            onNodeDoubleClick: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))),
+            onEdgeDoubleClick: (edge) => this.editRelationship(relationshipOf(edge)),
+            contextMenuItems: [
+                { label: 'Edit…', action: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))) },
+                { label: 'Delete', action: (node) => (isEntity(node) ? this.removeEntity(node.id) : this.removeRelationship(relationshipOf(node))) },
+                { label: 'Show lineage', action: (node) => { if (isEntity(node)) this.showLineage(this.level, node.id); } },
+            ],
+            edgeContextMenuItems: [
+                { label: 'Edit relationship…', action: (edge) => this.editRelationship(relationshipOf(edge)) },
+                { label: 'Delete relationship', action: (edge) => this.removeRelationship(relationshipOf(edge)) },
+            ],
+            canvasContextMenuItems: [
+                { label: `New ${this.levelInfo.entityNoun.toLowerCase()} here…`, action: (subject, engine, point) => this.editEntity(null, point) },
+                { label: 'New relationship…', action: () => this.editRelationship(null) },
+            ],
+        };
+    }
+
+    /** The level shown, as DataModelNotation has it (its nouns, its dialogs' fields). */
+    get levelInfo() {
+        return DataModelNotation.level(this.level);
+    }
+
+    /**
+     * An entity's dialog at the level shown (none: a new one, placed at
+     * `point` or below the others): its level's fields (name, definition, and
+     * at the logical and physical levels its attributes as a table). Saved, it
+     * is one undo step.
+     */
+    editEntity(id, point = null) {
+        if (!this.editsLevel) return null;
+        const info = this.levelInfo;
+        const schema = this.model.level(this.level);
+        const entity = id ? schema.entity(id) : null;
+        if (id && !entity) return null;
+        const scheme = this.model.classificationScheme;
+        const context = { typeNames: this.model.dataTypes.map(t => t.name), sensitivities: scheme.levels.map(l => l.name), categories: scheme.categories };
+        const title = entity ? `${info.entityNoun}: ${entity.name}` : `New ${info.entityNoun.toLowerCase()}`;
+        return this._dialog(title, info.entityFields(entity, context), (values) => {
+            const spec = info.entitySpecFrom(values, entity);
+            if (!entity) Object.assign(spec, point ?? this._freeSpot(schema));
+            this.runModelEdit(this.model.saveEntityCommand(this.level, id, spec));
+        });
+    }
+
+    /** Where a new entity goes with no point given: below what is there. @private */
+    _freeSpot(schema) {
+        const ys = schema.entities.map(e => e.y).filter(Number.isFinite);
+        return { x: 160, y: (ys.length ? Math.max(...ys) : 0) + 160 };
+    }
+
+    removeEntity(id) {
+        if (!this.editsLevel || !this.model.level(this.level).entity(id)) return null;
+        return this.runModelEdit(this.model.removeEntityCommand(this.level, id));
+    }
+
+    /** A relationship's dialog at the level shown (`index` null or -1: a new one); saved, one undo step. */
+    editRelationship(index) {
+        if (!this.editsLevel) return null;
+        const info = this.levelInfo;
+        const schema = this.model.level(this.level);
+        const relationship = index == null || index < 0 ? null : schema.relationships[index];
+        if (!schema.entities.length) return null;
+        const title = relationship ? `Relationship: ${relationship.name || `${relationship.source} – ${relationship.target}`}` : 'New relationship';
+        return this._dialog(title, info.relationshipFields(schema.entities, relationship), (values) => {
+            this.runModelEdit(this.model.saveRelationshipCommand(this.level, relationship ? index : null, info.relationshipSpecFrom(values, relationship)));
+        }, ({ source, target }) => (source && target ? null : 'Choose both ends'));
+    }
+
+    removeRelationship(index) {
+        if (!this.editsLevel || index == null || index < 0) return null;
+        return this.runModelEdit(this.model.removeRelationshipCommand(this.level, index));
+    }
+
+    /** See the model through a service domain (an id), at the logical level, where its business objects are. */
+    openServiceDomain(id) {
+        if (!this.model.perspective(id)) return;
+        this.chartOptions.level = 'logical';
+        this.setPerspective(id);
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+        const toolbar = this.container.appendChild(el({}));
+        super.render();
+        Object.assign(this.canvasHost.style, { flex: '1 1 auto', minHeight: '0', height: 'auto' });
+        this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.container.ownerDocument }).render();
+    }
+
+    /**
+     * Model ▸ (perspectives and contexts of one's own), Perspective and Context
+     * (when the model has any; the context's scope beside them), Level (each
+     * level from DataModelNotation, then Mapping) and Notation, and Export ▸.
+     */
+    menuBarItems() {
+        const { perspectives, contexts } = this.model;
+        const host = this.modelsHost;
+        return [
+            new ToolbarMenu('File', () => this.fileItems()),
+            new ToolbarMenu('Edit', () => this.editItems()),
+            ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
+            new ToolbarMenu('Model', () => this.modelItems()),
+            ...(perspectives.length ? [new ToolbarSelect('Perspective',
+                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, p.description])],
+                () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
+            ...(contexts.length ? [
+                new ToolbarSelect('Context',
+                    () => [['', 'None'], ...this.model.contexts.map(c => [c.id, c.name, c.description])],
+                    () => this.contextId ?? '', (v) => this.setContext(v)),
+                new ToolbarText(() => this.context?.scope ?? ''),
+            ] : []),
+            new ToolbarSelect('Level', () => [
+                ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
+                ...DataModel.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
+            ], () => this.level, (v) => this.setLevel(v)),
+            new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
+            new ToolbarMenu('Export', () => this.exportItems()),
+        ];
+    }
+
+    /** Model ▸: make, change or remove a perspective or a context (the one chosen). */
+    modelItems() {
+        return [
+            { label: `New ${this.editsLevel ? this.levelInfo.entityNoun.toLowerCase() : 'entity'}…`, disabled: !this.editsLevel || undefined, action: () => this.editEntity(null) },
+            { label: 'New relationship…', disabled: !this.editsLevel || !this.model.level(this.level).entities.length || undefined, action: () => this.editRelationship(null) },
+            { separator: true },
+            { label: 'New perspective…', action: () => this.editPerspective(null) },
+            { label: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
+            { label: 'New classification lens…', action: () => this.editPerspective(null, ClassificationLens) },
+            { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
+            { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
+            { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
+            { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
+            { separator: true },
+            ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
+            { separator: true },
+            { label: 'New context…', action: () => this.editContext(null) },
+            { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
+            { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
+            { separator: true },
+            { label: 'Check model…', action: () => this.checkModel() },
+            { label: 'Scorecard…', action: () => this.scoreModel() },
+            ...EditorPart.menuGroup('Naming standard', this.namingItems()),
+            { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
+        ];
+    }
+
+    /**
+     * Service domains from BIAN's published service landscape (an ArchiMate
+     * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
+     * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
+     * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
+     * @returns {Promise<Command|null>}
+     */
+    readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
+        let found = 0;
+        return this.readInto({
+            ...options, accept: '.archimate,.xml', what: 'the landscape',
+            command: (bytes, name) => {
+                const specs = reader.read(BianLandscapeReader.parse(bytes));
+                found = specs.length;
+                return this.model.serviceDomainsCommand(specs, `"${name}"`);
+            },
+            nothing: (name) => (found
+                ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
+                : `"${name}" has no service domains (Capabilities with none inside them).`),
+            then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
+        });
+    }
+
+    /**
+     * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
+     * or JSON; BianSemanticApiReader): its control record and behaviour
+     * qualifiers as logical entities, the schemas they use as data types, and
+     * the service domain, as one undo step (DataModel#bringCommand); then the
+     * model is seen through it at the logical level. An entity the model has
+     * by name stays as it is and is used.
+     * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
+     * @returns {Promise<Command|null>}
+     */
+    readSemanticApi({ depth = 1, ...options } = {}) {
+        let read = null;
+        return this.readInto({
+            ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
+            command: (bytes, name) => {
+                const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
+                read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
+                const [sd] = read.serviceDomains;
+                return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
+            },
+            nothing: (name) => `"${name}" brings nothing the model does not have.`,
+            then: () => {
+                // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
+                const [sd] = read.serviceDomains;
+                const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
+                this.chartOptions.level = 'logical';
+                this.perspectiveId = here?.id ?? sd.id;
+            },
+        });
+    }
+
+    /**
+     * The Data Model Scorecard (ModelScorecard): each category as the model
+     * measures it, a reviewer's score and note, its weight; the total in the
+     * title. Saved, the reviews and weights are kept (one undo step).
+     */
+    scoreModel() {
+        const card = this.model.scored();
+        const results = card.results();
+        const { score, coverage } = card.total(results);
+        const title = score == null ? 'Scorecard: nothing scored yet' : `Scorecard: ${score} of 100 (${coverage}% of the weight scored)`;
+        return this._dialog(title, card.fields(results), (values) => {
+            this.runModelEdit(this.model.scorecardCommand(ModelScorecard.specFrom(values)));
+        }, () => null);
+    }
+
+    /** The classification scheme's dialog (its sensitivity levels in order, its categories); saved, one undo step. */
+    editClassificationScheme() {
+        return this._dialog('Classification scheme', ClassificationScheme.fields(this.model.classificationScheme), (values) => {
+            this.runModelEdit(this.model.classificationSchemeCommand(ClassificationScheme.specFrom(values)));
+        }, (values) => (ClassificationScheme.specFrom(values).levels.length ? null : 'Give it at least one level'));
+    }
+
+    /** Model ▸ Naming standard ▸: edit it, start from the conventional one, or remove it (Check model… checks names against it). */
+    namingItems() {
+        const has = !!this.model.namingStandard;
+        return [
+            { label: has ? 'Edit…' : 'Set…', action: () => this.editNamingStandard() },
+            ...(has ? [] : [{ label: 'Use the conventional one', action: () => this.runModelEdit(this.model.namingStandardCommand(NamingStandard.CONVENTIONAL)) }]),
+            ...(has ? [{ label: 'Remove', action: () => this.runModelEdit(this.model.namingStandardCommand(null)) }] : []),
+        ];
+    }
+
+    /**
+     * The naming standard's dialog (NamingStandard.fields: a rule per level for
+     * entities and attributes); saved, one undo step. A standard that asks
+     * nothing is none.
+     */
+    editNamingStandard() {
+        return this._dialog('Naming standard', NamingStandard.fields(this.model.namingStandard), (values) => {
+            const spec = NamingStandard.specFrom(values);
+            const asks = Object.values(spec).some(kinds => Object.values(kinds).some(r => r.style || r.classWords.length || r.maxLength || Object.keys(r.abbreviations).length));
+            this.runModelEdit(this.model.namingStandardCommand(asks ? spec : null));
+        }, () => null);
+    }
+
+    /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
+    dataTypeItems() {
+        const types = this.model.dataTypes;
+        return [
+            ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
+            ...(types.length ? [
+                { separator: true },
+                { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
+                { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
+                { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
+            ] : []),
+        ];
+    }
+
+    /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
+    editDataType(type, Kind = type?.constructor ?? DataType) {
+        const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, type), (values) => {
+            const spec = Kind.specFrom(values, this.model, type);
+            if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
+            this.chartOptions.level = DataModel.DATA_TYPES;
+            this._changed();
+            this._redraw();
+        });
+    }
+
+    removeDataType(id) {
+        this.model.removeDataType(id);
+        if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
+        this._changed();
+        this._redraw();
+    }
+
+    /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
+    checkModel() {
+        const findings = this.model.checker().run();
+        new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
+        return findings;
+    }
+
+    /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
+    revealFinding(finding) {
+        if (finding.kind === 'perspective') {
+            this.chartOptions.level = 'logical';
+            this.setPerspective(finding.ids[0]);
+        } else if (finding.kind === 'mapping') {
+            this.setLevel(DataModel.MAPPING);
+        } else if (finding.kind === 'data-type') {
+            this.setLevel(DataModel.DATA_TYPES);
+        } else if (finding.level) {
+            this.setLevel(finding.level);
+        }
+        this.menuBar?.render?.();
+    }
+
+    /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
+    editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
+        const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
+            const spec = Kind.specFrom(values, this.model, perspective);
+            const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
+            this._changed();
+            this.setPerspective(saved.id);
+        });
+    }
+
+    /** A dialog making a context (none given) or changing one (DataModelContext.fields); applied, it is the one read in. */
+    editContext(context) {
+        return this._dialog(context ? `Context: ${context.name}` : 'New context', DataModelContext.fields(this.model, context), (values) => {
+            const spec = DataModelContext.specFrom(values, this.model, context);
+            const saved = context ? this.model.updateContext(context.id, spec) : this.model.addContext(spec);
+            this._changed();
+            this.setContext(saved.id);
+        });
+    }
+
+    removePerspective(id) {
+        this.model.removePerspective(id);
+        this._changed();
+        this.setPerspective(null);
+    }
+
+    removeContext(id) {
+        this.model.removeContext(id);
+        this._changed();
+        this.setContext(null);
+    }
+
+    /** Open a form (a name is needed). @private */
+    _dialog(title, fields, apply, validate = ({ name }) => ((name ?? '').trim() ? null : 'Give it a name')) {
+        return new FormDialog({
+            title, fields, submitLabel: 'Save', idPrefix: 'data-model-',
+            document: this.container?.ownerDocument ?? globalThis.document,
+            validate, onApply: apply,
+        }).open();
+    }
+
+    /** The perspectives or contexts changed: the toolbar shows them anew. @private */
+    _changed() {
+        if (this.menuBar) this.menuBar.items = this.menuBarItems();
+        this.menuBar?.render?.();
+    }
+
+    /** Export ▸: the picture, as PNG or SVG, named after the model. */
+    exportItems() {
+        const name = this.model.name || this.title || 'data-model';
+        return [
+            { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
+            { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
+            { separator: true },
+            { label: 'SQL DDL (physical level)', action: () => this.exportDdl() },
+        ];
+    }
+
+    /** The physical level as SQL DDL (SqlDdlFileFormat), downloaded as the model's name. Returns the file. */
+    exportDdl({ download = (file, fileName) => downloadBlob(new (this.document.defaultView ?? globalThis).Blob([file.data], { type: file.mimeType }), fileName) } = {}) {
+        const file = new SqlDdlFileFormat().export(this.model);
+        download(file, `${String(this.model.name || this.title || 'model').replace(/[^A-Za-z0-9._-]+/g, '-')}.sql`);
+        return file;
+    }
+
+    /** Redraw now (a choice made), when there is somewhere to draw. @private */
+    _redraw() {
+        if (this.canvasHost) this._draw();
+        // Its toolbar shows what is drawn, however it was chosen (a finding, a lineage, a service domain opened).
+        this.menuBar?.refresh?.();
+    }
+
+    /**
+     * Keep where the boxes and notes were dragged (the drawing is made anew each
+     * time): on the level shown, or in the mapping view's own layout. Then draw.
+     */
+    _draw() {
+        if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
+        this._drawnLevel = this.level;
+        super._draw();
+        this._drawnPlaces = this._placesOnScreen();
+    }
+
+    /** Where the drawing has each box and note now, a copy a drag does not change. @private */
+    _placesOnScreen() {
+        const pos = this.engine?._graph?.pos;
+        return pos ? new Map([...pos].map(([id, p]) => [id, { x: p.x, y: p.y }])) : null;
+    }
+
+    /**
+     * Keep where the drawing on screen has its boxes and notes: on the level
+     * it shows, or in the mapping view's layout. Returns whether any moved.
+     * A box the model has a place for and that was not moved on screen since
+     * it was drawn keeps the model's place — the model may have moved it
+     * since (laid out, an undo), and the screen still shows where it was. @private
+     */
+    _keepPlaces() {
+        const pos = this.engine?._graph?.pos;
+        if (!pos || !this._drawnLevel) return false;
+        let moved = false;
+        const place = (p, before, put, id) => {
+            if (!p || (before && before.x === p.x && before.y === p.y)) return;
+            const drawn = this._drawnPlaces?.get(id);
+            if (drawn && drawn.x === p.x && drawn.y === p.y && Number.isFinite(before?.x) && Number.isFinite(before?.y)) return;
+            put({ x: p.x, y: p.y });
+            moved = true;
+        };
+        const other = DataModel.otherView(this._drawnLevel);
+        if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
+        if (other) {
+            for (const [id, p] of pos) {
+                if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; }, id);
+            }
+            return moved;
+        }
+        for (const entity of this.model.level(this._drawnLevel).entities) {
+            place(pos.get(entity.id), entity, (at) => Object.assign(entity, at), entity.id);
+        }
+        for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
+            const p = pos.get(rule.id);
+            const before = this.model.notePlace(this._drawnLevel, rule);
+            place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at), rule.id);
+        }
+        return moved;
+    }
+
+    dispose() {
+        this.menuBar?.dispose?.();
+        super.dispose();
+    }
+
+    /** The spec again: the model (with where its boxes are), what is chosen, and the other options. */
+    serialize() {
+        const { options, chartType, ...base } = super.serialize();
+        const { level, notation, ...rest } = options;
+        return {
+            ...base, ...this.model.toJSON(),
+            perspective: this.perspectiveId, context: this.contextId, level, notation, options: rest,
+        };
+    }
+}