@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/charting/datamodel/DataModelCompared.js

@@ -0,0 +1,127 @@
+import { ComparedKind } from '../diagramModel/ComparedKind.js';
+
+/** A plain copy of JSON-shaped data. */
+const copy = (value) => (value === undefined ? undefined : JSON.parse(JSON.stringify(value)));
+
+/**
+ * The kinds two DataModels are compared on and merged by (ModelComparison,
+ * as for ArchiMate models): each level's entities and relationships, the
+ * mappings between levels, contexts and perspectives, in the order a merge
+ * brings them (what is needed first). Where a box sits is layout, not content:
+ * two models alike but for where their boxes are, are alike.
+ */
+
+/** A list of a model's held in an array (`list(model)`), each by an id; bring puts a copy in place or adds it. */
+class ListCompared extends ComparedKind {
+    constructor() {
+        super();
+        if (new.target === ListCompared) throw new TypeError('ListCompared is abstract — subclass it');
+    }
+
+    /** The array the model holds them in. @abstract */
+    list(model) { throw new Error(`${this.constructor.name} must implement list()`); }
+
+    items(model) { return this.list(model); }
+    get(model, id) { return this.items(model).find(item => this.idOf(item) === id) ?? null; }
+
+    /** Put a copy of `item` at its place (in place of the one with its id, else last); undone, as it was. */
+    bring(model, item) {
+        const list = this.list(model);
+        const twin = this.copyOf(item);
+        const at = list.findIndex(x => this.idOf(x) === this.idOf(item));
+        if (at < 0) {
+            list.push(twin);
+            return () => { const i = list.indexOf(twin); if (i >= 0) list.splice(i, 1); };
+        }
+        const old = list[at];
+        list[at] = twin;
+        return () => { const i = list.indexOf(twin); if (i >= 0) list[i] = old; };
+    }
+
+    /** A copy to put in the other model. */
+    copyOf(item) { return copy(item); }
+}
+
+/** One level's entities: compared on all but where they are drawn. */
+export class LevelEntitiesCompared extends ListCompared {
+    constructor(level) {
+        super();
+        this.level = level;
+    }
+
+    get key() { return `${this.level}-entity`; }
+    get label() { return `${this.level.charAt(0).toUpperCase()}${this.level.slice(1)} entities`; }
+    list(model) { return model.level(this.level).entities; }
+
+    content(entity) {
+        const { x, y, ...rest } = entity;
+        return copy(rest);
+    }
+}
+
+/**
+ * One level's relationships: known by their id, else by their ends and name
+ * (a relationship often has no id); each needs its two ends at that level.
+ */
+export class LevelRelationshipsCompared extends ListCompared {
+    constructor(level) {
+        super();
+        this.level = level;
+    }
+
+    get key() { return `${this.level}-relationship`; }
+    get label() { return `${this.level.charAt(0).toUpperCase()}${this.level.slice(1)} relationships`; }
+    list(model) { return model.level(this.level).relationships; }
+    idOf(r) { return r.id ?? `${r.source}->${r.target}${r.name ? `:${r.name}` : ''}`; }
+    nameOf(r) { return `${r.source} ${r.name || '→'} ${r.target}`; }
+    content(r) { return copy(r); }
+    requires(r) { return [[`${this.level}-entity`, r.source], [`${this.level}-entity`, r.target]]; }
+}
+
+/** The mappings between levels, a pair each: a pair needs its two entities. */
+export class MappingsCompared extends ComparedKind {
+    get key() { return 'mapping'; }
+    get label() { return 'Mappings'; }
+
+    items(model) {
+        return model.mappings.flatMap(m => m.pairs.map(([a, b]) => ({ id: `${m.from}:${a}->${m.to}:${b}`, from: m.from, to: m.to, a, b })));
+    }
+
+    nameOf(p) { return `${p.a} → ${p.b} (${p.from} to ${p.to})`; }
+    content() { return {}; }
+    requires(p) { return [[`${p.from}-entity`, p.a], [`${p.to}-entity`, p.b]]; }
+
+    bring(model, p) {
+        const mapping = model.mapping(p.from, p.to);
+        if (mapping.pairs.some(([a, b]) => a === p.a && b === p.b)) return () => {};
+        mapping.add(p.a, p.b);
+        return () => { mapping.pairs = mapping.pairs.filter(([a, b]) => !(a === p.a && b === p.b)); };
+    }
+}
+
+/** Perspectives and contexts are classes; their JSON is what counts, and a copy is one made from it. */
+class ModelPartsCompared extends ListCompared {
+    content(item) { return copy(item.toJSON()); }
+    copyOf(item) { return new item.constructor(copy(item.toJSON())); }
+}
+
+export class ContextsCompared extends ModelPartsCompared {
+    get key() { return 'context'; }
+    get label() { return 'Contexts'; }
+    list(model) { return model.contexts; }
+}
+
+/** Data types: an attribute names one by its id or name; a structure's fields others. */
+export class DataTypesCompared extends ModelPartsCompared {
+    get key() { return 'data-type'; }
+    get label() { return 'Data types'; }
+    list(model) { return model.dataTypes; }
+}
+
+/** A perspective needs the context it is read in. */
+export class PerspectivesCompared extends ModelPartsCompared {
+    get key() { return 'perspective'; }
+    get label() { return 'Perspectives'; }
+    list(model) { return model.perspectives; }
+    requires(p) { return p.context ? [['context', p.context]] : []; }
+}

package/src/charting/datamodel/DataModelFileFormat.js

@@ -0,0 +1,33 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { DataModel } from './DataModel.js';
+
+/**
+ * DataModelFileFormat — a data model as a file (`.datamodel.json`): its name,
+ * its levels, the mappings between them, where its boxes and notes are, and
+ * its perspectives and contexts (DataModel#toJSON), read back by `new
+ * DataModel(json)`. The older one-entity form reads too.
+ */
+export class DataModelFileFormat extends ModelFileFormat {
+    get label() { return '.datamodel.json'; }
+    get accept() { return '.datamodel.json,.json'; }
+    get fileName() { return 'model.datamodel.json'; }
+    get featureName() { return 'DataModel'; }
+
+    /** JSON with a data model's shape: levels, or the older entities. */
+    recognizes(text) {
+        try {
+            const json = JSON.parse(text);
+            return !!json && typeof json === 'object' && (!!json.levels || Array.isArray(json.entities));
+        } catch {
+            return false;
+        }
+    }
+
+    export(model) {
+        return { data: JSON.stringify(model.toJSON(), null, 2), mimeType: 'application/json' };
+    }
+
+    import(text) {
+        return new DataModel(JSON.parse(text));
+    }
+}

package/src/charting/datamodel/DataModelPerspective.js

@@ -5,8 +5,32 @@
  * Customer, Ledger the Billing), with relationships renamed too
  * (`relationshipNames`, by relationship id), and names the context it is
  * usually read in (`context`, a DataModelContext id).
+ *
+ * A kind of perspective that says more (a BIAN ServiceDomain) is a subclass,
+ * registered by its `kind` (`DataModelPerspective.register`); a spec's `kind`
+ * makes one of it (`DataModelPerspective.from`). What it adds to a view, the view
+ * asks it: entities it shows besides (`alsoShows`), how an entity is marked
+ * (`decorate`), notes (`notes`). The plain perspective adds none.
  */
 export class DataModelPerspective {
+    /** What this kind of perspective is called in a spec (`kind`) and in menus. */
+    static kind = 'perspective';
+    static kindLabel = 'Perspective';
+
+    /** Perspective classes by kind. */
+    static KINDS = new Map();
+
+    /** Make a kind of perspective known, so a spec of its `kind` makes one. */
+    static register(PerspectiveClass) {
+        DataModelPerspective.KINDS.set(PerspectiveClass.kind, PerspectiveClass);
+    }
+
+    /** A perspective from a spec, of the class its `kind` names (a plain one without). */
+    static from(spec) {
+        const Kind = DataModelPerspective.KINDS.get(spec?.kind) ?? DataModelPerspective;
+        return new Kind(spec);
+    }
+
     /**
      * @param {Object} spec
      * @param {string} spec.id
@@ -38,6 +62,26 @@ export class DataModelPerspective {
         return this.names[entity.id] ?? entity.name;
     }
 
+    /** Entities at a level this perspective shows besides what realises its concepts (none here). */
+    alsoShows(level) {
+        return [];
+    }
+
+    /** How an entity it shows is marked at a level: `{ color?, details? }` (nothing here). */
+    decorate(entity, level) {
+        return {};
+    }
+
+    /** The business objects (logical entities) it owns, as a BIAN service domain does (none here). */
+    ownedEntities() {
+        return [];
+    }
+
+    /** Notes it adds at a level: `[{ id, text, attachTo }]` (none here). */
+    notes(level) {
+        return [];
+    }
+
     /** What a relationship is called here. */
     relationshipNameOf(relationship) {
         return (relationship.id && this.relationshipNames[relationship.id]) ?? relationship.name;
@@ -76,6 +120,7 @@ export class DataModelPerspective {
 
     toJSON() {
         return {
+            ...(this.constructor.kind !== DataModelPerspective.kind && { kind: this.constructor.kind }),
             id: this.id, name: this.name, description: this.description,
             entities: this.entities ? [...this.entities] : null,
             names: { ...this.names }, relationshipNames: { ...this.relationshipNames }, context: this.context,

package/src/charting/datamodel/DataType.js

@@ -0,0 +1,108 @@
+/** Where the ISO 20022 standards repository describes a type, by its name. */
+const ISO20022_TYPE_URL = 'https://www.iso20022.org/standardsrepository/type/';
+
+/**
+ * DataType — a type an attribute can have, defined once in the model and named
+ * by the attributes of that type (`attribute.type` its id or name): what BIAN
+ * publishes as its data types and DAMA-DMBOK2 calls a domain. This base is a
+ * plain named type (a text, a value, a date, perhaps based on another:
+ * `basedOn`); EnumerationType and StructuredType add their values and fields.
+ * A type may say which ISO 20022 type it is (`iso20022`, linked by
+ * `iso20022Url`). Kinds register as perspective kinds do (`kind` in a spec).
+ */
+export class DataType {
+    /** What this kind is called in a spec (`kind`) and in menus. */
+    static kind = 'type';
+    static kindLabel = 'Type';
+
+    /** DataType classes by kind. */
+    static KINDS = new Map();
+
+    /** Make a kind of data type known, so a spec of its `kind` makes one. */
+    static register(TypeClass) {
+        DataType.KINDS.set(TypeClass.kind, TypeClass);
+    }
+
+    /** A data type from a spec, of the class its `kind` names (a plain one without). */
+    static from(spec) {
+        const Kind = DataType.KINDS.get(spec?.kind) ?? DataType;
+        return new Kind(spec);
+    }
+
+    /** Where the ISO 20022 standards repository describes a type (its name), or null. */
+    static iso20022Url(name) {
+        return name ? `${ISO20022_TYPE_URL}${encodeURIComponent(name)}` : null;
+    }
+
+    /**
+     * @param {Object} spec
+     * @param {string} spec.id
+     * @param {string} [spec.name] - Its id when unset
+     * @param {string} [spec.description]
+     * @param {string} [spec.basedOn] - The type it narrows ('Text', 'Decimal', another's id)
+     * @param {string} [spec.iso20022] - The ISO 20022 type it is ('CurrencyCode')
+     */
+    constructor({ id, name = id, description = '', basedOn = '', iso20022 = '' } = {}) {
+        if (!id) throw new TypeError('DataType must have an id');
+        Object.assign(this, { id, name, description, basedOn, iso20022 });
+    }
+
+    /** Its ISO 20022 type's page, or null. */
+    get iso20022Url() {
+        return DataType.iso20022Url(this.iso20022);
+    }
+
+    /** What it is in a few words, for a hover: its kind, and what it holds. */
+    summary() {
+        return this.basedOn ? `${this.name} (${this.basedOn})` : this.name;
+    }
+
+    /** Its rows when drawn as a box: `[{ name, type? }]` (none for a plain type). */
+    rows() {
+        return [];
+    }
+
+    /** The other data types it names (by id or name), as a structure's fields do (none here). */
+    uses() {
+        return this.basedOn ? [this.basedOn] : [];
+    }
+
+    toJSON() {
+        return {
+            ...(this.constructor !== DataType && { kind: this.constructor.kind }),
+            id: this.id, name: this.name,
+            ...(this.description && { description: this.description }),
+            ...(this.basedOn && { basedOn: this.basedOn }),
+            ...(this.iso20022 && { iso20022: this.iso20022 }),
+        };
+    }
+
+    /** Its dialog's fields: name, description, what it is based on, its ISO 20022 type. */
+    static fields(model, type = null) {
+        return [
+            { key: 'name', label: 'Name', type: 'text', value: type?.name ?? '' },
+            { key: 'description', label: 'Description', type: 'textarea', rows: 2, value: type?.description ?? '' },
+            { key: 'basedOn', label: 'Based on', type: 'text', value: type?.basedOn ?? '', placeholder: 'Text, Decimal, Date… or another data type' },
+            { key: 'iso20022', label: 'ISO 20022 type', type: 'text', value: type?.iso20022 ?? '', placeholder: 'e.g. CurrencyCode' },
+        ];
+    }
+
+    /** A spec from those fields. */
+    static specFrom(values) {
+        return {
+            ...(this !== DataType && { kind: this.kind }),
+            name: String(values.name ?? '').trim(),
+            description: String(values.description ?? '').trim(),
+            basedOn: String(values.basedOn ?? '').trim(),
+            iso20022: String(values.iso20022 ?? '').trim(),
+        };
+    }
+
+    /** Lines `name | more` from a textarea, each split on its first bar. @protected */
+    static lines(text) {
+        return String(text ?? '').split('\n').map(l => l.trim()).filter(Boolean).map(line => {
+            const bar = line.indexOf('|');
+            return bar < 0 ? [line, ''] : [line.slice(0, bar).trim(), line.slice(bar + 1).trim()];
+        });
+    }
+}

package/src/charting/datamodel/EnumerationType.js

@@ -0,0 +1,51 @@
+import { DataType } from './DataType.js';
+
+/**
+ * EnumerationType — a data type whose values are a fixed list, each perhaps
+ * with what it means (BIAN's `…typevalues`, a code list): `values` as
+ * `[{ name, description? }]`. Drawn as a box with a row per value.
+ */
+export class EnumerationType extends DataType {
+    static kind = 'enumeration';
+    static kindLabel = 'Enumeration';
+
+    /** @param {Object} spec - As DataType, plus `values: [{ name, description? }]` (or plain names) */
+    constructor({ values = [], ...spec } = {}) {
+        super(spec);
+        this.values = values.map(v => (typeof v === 'object' && v ? { name: String(v.name), ...(v.description && { description: v.description }) } : { name: String(v) }));
+    }
+
+    summary() {
+        const shown = this.values.slice(0, 6).map(v => v.name).join(', ');
+        return `${this.name}: one of ${shown}${this.values.length > 6 ? `, … (${this.values.length})` : ''}`;
+    }
+
+    rows() {
+        return this.values.map(v => ({ name: v.name }));
+    }
+
+    toJSON() {
+        return { ...super.toJSON(), values: this.values.map(v => ({ ...v })) };
+    }
+
+    /** A plain type's fields, then its values a line each: `name | what it means`. */
+    static fields(model, type = null) {
+        return [
+            ...DataType.fields(model, type),
+            {
+                key: 'values', label: 'Values', type: 'textarea', rows: 6,
+                value: (type?.values ?? []).map(v => (v.description ? `${v.name} | ${v.description}` : v.name)).join('\n'),
+                hint: 'One a line: value | what it means (optional)',
+            },
+        ];
+    }
+
+    static specFrom(values) {
+        return {
+            ...super.specFrom(values),
+            values: DataType.lines(values.values).map(([name, description]) => ({ name, ...(description && { description }) })),
+        };
+    }
+}
+
+DataType.register(EnumerationType);

package/src/charting/datamodel/ServiceDomain.js

@@ -0,0 +1,177 @@
+import { DataModelPerspective } from './DataModelPerspective.js';
+import { BianNotation } from '../../bian.js';
+
+/** How a service domain's control record and behaviour qualifiers are coloured where it is seen through. */
+const CONTROL_RECORD_COLOR = '#fde68a';
+const QUALIFIER_COLOR = '#e0f2fe';
+
+/**
+ * ServiceDomain — a BIAN service domain as a kind of perspective: it sees the
+ * concepts it covers (as any perspective), and it is more. It sits in a business
+ * area and business domain, manages one kind of asset (`asset`) with one
+ * functional pattern (`pattern`, BianNotation), and keeps a control record (a
+ * logical entity: what its instances are, named for the asset and the
+ * pattern's generic artifact) broken down by behaviour qualifiers (each a
+ * logical entity, of a qualifier type). Its service operations (its semantic
+ * API) follow: the pattern's action terms on the control record and each
+ * qualifier (BianNotation.serviceOperations).
+ *
+ * Seen through at the logical level it shows its control record and qualifiers,
+ * whatever they realise, marked (colour, and what each is on hover), with a note
+ * of its service operations on the control record.
+ */
+export class ServiceDomain extends DataModelPerspective {
+    static kind = 'service-domain';
+    static kindLabel = 'Service domain';
+
+    /**
+     * @param {Object} spec - As DataModelPerspective, plus:
+     * @param {string} [spec.businessArea]
+     * @param {string} [spec.businessDomain]
+     * @param {string} [spec.asset] - What it manages ('Current Account'); its name when unset
+     * @param {string} [spec.pattern] - A BIAN functional pattern ('Fulfill')
+     * @param {string|null} [spec.controlRecord] - The logical entity its control record is
+     * @param {Array<{id?: string, name: string, type?: string, entity?: string}>} [spec.qualifiers]
+     *   Behaviour qualifiers: a name, a qualifier type (default the pattern's), the logical entity it is
+     * @param {string[]} [spec.owns] - Other business objects (logical entities) it owns
+     */
+    constructor({ businessArea = '', businessDomain = '', asset = '', pattern = 'Fulfill', controlRecord = null, qualifiers = [], owns = [], ...spec } = {}) {
+        super(spec);
+        /** Business objects (logical entities) it owns besides its control record and qualifiers. */
+        this.owns = [...owns];
+        this.businessArea = businessArea;
+        this.businessDomain = businessDomain;
+        this.asset = asset;
+        this.pattern = pattern;
+        this.controlRecord = controlRecord;
+        this.qualifiers = qualifiers.map((q, i) => ({ ...q, id: q.id ?? `${this.id}-bq-${i + 1}` }));
+    }
+
+    /** Its functional pattern (BianFunctionalPattern), or null for one BIAN does not have. */
+    get functionalPattern() {
+        return BianNotation.functionalPattern(this.pattern);
+    }
+
+    /** Its control record's name: the asset (else its name) and the pattern's generic artifact. */
+    get controlRecordName() {
+        return this.functionalPattern?.controlRecordName(this.asset || this.name) ?? (this.asset || this.name);
+    }
+
+    /** A qualifier's type: its own, else its pattern's. */
+    qualifierType(qualifier) {
+        return qualifier.type || this.functionalPattern?.qualifierType || '';
+    }
+
+    /** Its default service operations (BianNotation.serviceOperations). */
+    serviceOperations() {
+        return BianNotation.serviceOperations(this.pattern, {
+            serviceDomain: this.name, controlRecord: this.controlRecordName, qualifiers: this.qualifiers.map(q => q.name),
+        });
+    }
+
+    /** The business objects it owns: its control record, its qualifiers' entities, and those it names (`owns`). */
+    ownedEntities() {
+        return [...new Set([this.controlRecord, ...this.qualifiers.map(q => q.entity), ...this.owns].filter(Boolean))];
+    }
+
+    /** At the logical level, the business objects it owns. */
+    alsoShows(level) {
+        return level === 'logical' ? this.ownedEntities() : [];
+    }
+
+    /** At the logical level, its control record and qualifiers are coloured and say what they are. */
+    decorate(entity, level) {
+        if (level !== 'logical') return {};
+        if (entity.id === this.controlRecord) {
+            return { color: CONTROL_RECORD_COLOR, details: { 'control record': this.controlRecordName, 'functional pattern': this.pattern, 'service domain': this.name } };
+        }
+        const qualifier = this.qualifiers.find(q => q.entity === entity.id);
+        return qualifier
+            ? { color: QUALIFIER_COLOR, details: { 'behaviour qualifier': `${qualifier.name} (${this.qualifierType(qualifier)})`, 'service domain': this.name } }
+            : {};
+    }
+
+    /** At the logical level, a note of its service operations, on its control record. */
+    notes(level) {
+        if (level !== 'logical' || !this.controlRecord) return [];
+        return [{ id: `${this.id}-operations`, text: this.operationsSummary(), attachTo: [this.controlRecord] }];
+    }
+
+    /** Its service operations in a few lines: the terms, on what. */
+    operationsSummary() {
+        const ops = this.serviceOperations();
+        const terms = (pick) => [...new Set(ops.filter(pick).map(o => o.actionTerm))].join(', ');
+        const qualifiers = this.qualifiers.map(q => q.name);
+        return [
+            `${this.name}: ${terms(o => o.target === this.name)}`,
+            `${this.controlRecordName}: ${terms(o => o.target === this.controlRecordName && !o.qualifier)}`,
+            ...(qualifiers.length ? [`each of ${qualifiers.join(', ')}: the same`] : []),
+        ].join('\n');
+    }
+
+    toJSON() {
+        return {
+            ...super.toJSON(),
+            businessArea: this.businessArea, businessDomain: this.businessDomain, asset: this.asset, pattern: this.pattern,
+            controlRecord: this.controlRecord, qualifiers: this.qualifiers.map(q => ({ ...q })), owns: [...this.owns],
+        };
+    }
+
+    /**
+     * Its dialog's fields: a perspective's, then where it sits, its asset and
+     * pattern (BIAN's, each described), its control record (a logical entity),
+     * and its qualifiers a line each: `name | type | logical entity`.
+     */
+    static fields(model, domain = null) {
+        const logical = model.level('logical').entities;
+        const entityName = (id) => logical.find(e => e.id === id)?.name ?? id ?? '';
+        return [
+            ...DataModelPerspective.fields(model, domain),
+            { type: 'heading', label: 'Service domain' },
+            { key: 'businessArea', label: 'Business area', type: 'text', value: domain?.businessArea ?? '' },
+            { key: 'businessDomain', label: 'Business domain', type: 'text', value: domain?.businessDomain ?? '' },
+            { key: 'asset', label: 'Asset it manages', type: 'text', value: domain?.asset ?? '', placeholder: 'its name' },
+            {
+                key: 'pattern', label: 'Functional pattern', type: 'select', value: domain?.pattern ?? 'Fulfill',
+                choices: BianNotation.functionalPatterns().map(p => [p.name, `${p.name} — ${p.artifact}`]),
+            },
+            {
+                key: 'controlRecord', label: 'Control record', type: 'select', value: domain?.controlRecord ?? '',
+                choices: [['', 'None yet'], ...logical.map(e => [e.id, e.name])],
+            },
+            {
+                key: 'qualifiers', label: 'Behaviour qualifiers', type: 'textarea', rows: 4,
+                value: (domain?.qualifiers ?? []).map(q => [q.name, q.type ?? '', entityName(q.entity)].join(' | ')).join('\n'),
+                hint: `One a line: name | type (${BianNotation.qualifierTypes().slice(0, 4).join(', ')}…; blank: the pattern's) | logical entity (by name)`,
+            },
+            {
+                key: 'owns', label: 'Also owns', type: 'checklist', value: domain?.owns ?? [],
+                choices: logical.map(e => [e.id, e.name]),
+            },
+        ];
+    }
+
+    /** A service domain's spec from those fields (a qualifier kept keeps its id; a type BIAN lacks is left to the pattern). */
+    static specFrom(values, model, domain = null) {
+        const logical = model.level('logical').entities;
+        const entityOf = (word) => logical.find(e => e.id === word || e.name.toLowerCase() === word.toLowerCase())?.id ?? null;
+        const qualifiers = String(values.qualifiers ?? '').split('\n').map(l => l.trim()).filter(Boolean).map(line => {
+            const [name, type = '', entity = ''] = line.split('|').map(p => p.trim());
+            const kept = domain?.qualifiers.find(q => q.name === name);
+            return {
+                ...(kept && { id: kept.id }), name,
+                ...(BianNotation.isQualifierType(type) && { type }),
+                ...(entityOf(entity) && { entity: entityOf(entity) }),
+            };
+        });
+        return {
+            kind: ServiceDomain.kind,
+            ...DataModelPerspective.specFrom(values, model),
+            businessArea: (values.businessArea ?? '').trim(), businessDomain: (values.businessDomain ?? '').trim(),
+            asset: (values.asset ?? '').trim(), pattern: values.pattern || 'Fulfill',
+            controlRecord: values.controlRecord || null, qualifiers, owns: [...(values.owns ?? [])],
+        };
+    }
+}
+
+DataModelPerspective.register(ServiceDomain);

package/src/charting/datamodel/ServiceLandscape.js

@@ -0,0 +1,104 @@
+import { BianNotation } from '../../bian.js';
+
+/** The colour of a service domain's box, by its functional pattern's place among BIAN's (none: grey). */
+const PATTERN_COLORS = ['#fde68a', '#bbf7d0', '#bfdbfe', '#fbcfe8', '#ddd6fe', '#fed7aa', '#a5f3fc', '#e9d5ff', '#fecaca', '#d9f99d'];
+const NO_PATTERN_COLOR = '#e5e7eb';
+
+/**
+ * ServiceLandscape — a model's service domains laid out as BIAN draws its
+ * service landscape: a column per business area, in it a frame per business
+ * domain, in that the service domains (each a box coloured by its functional
+ * pattern, and on hover its pattern, control record and asset). Service
+ * domains with no area or domain go under "No business area" / "No business
+ * domain". The layout follows from the structure, so it is made anew each time.
+ *
+ * `view(serviceDomains)` gives what dataModelDiagram draws: entities (a box per
+ * service domain, its id `landscape:<id>`), and the frames as graphDiagram
+ * folders (`folders`, `elementFolders`).
+ */
+export class ServiceLandscape {
+    static BOX = Object.freeze({ width: 160, height: 56 });
+    static GAP = 16;
+    static HEADER = 24;
+    static PAD = 12;
+    /** Service domains side by side in a business domain's frame. */
+    static ACROSS = 2;
+    static NO_AREA = 'No business area';
+    static NO_DOMAIN = 'No business domain';
+    static PREFIX = 'landscape:';
+
+    /** A service domain's id from a landscape box's id, or null. */
+    static serviceDomainOf(nodeId) {
+        return String(nodeId).startsWith(ServiceLandscape.PREFIX) ? String(nodeId).slice(ServiceLandscape.PREFIX.length) : null;
+    }
+
+    /** The colour of a functional pattern's service domains. */
+    static colorOf(pattern) {
+        const i = BianNotation.functionalPatterns().findIndex(p => p.name === pattern);
+        return i < 0 ? NO_PATTERN_COLOR : PATTERN_COLORS[i % PATTERN_COLORS.length];
+    }
+
+    /**
+     * Business areas, each with its business domains, each with its service
+     * domains, in the order they first come.
+     * @param {Array<ServiceDomain>} serviceDomains
+     * @returns {Array<{name: string, domains: Array<{name: string, serviceDomains: Array}>}>}
+     */
+    static areas(serviceDomains) {
+        const areas = new Map();
+        for (const sd of serviceDomains) {
+            const area = sd.businessArea || ServiceLandscape.NO_AREA;
+            const domain = sd.businessDomain || ServiceLandscape.NO_DOMAIN;
+            if (!areas.has(area)) areas.set(area, new Map());
+            const domains = areas.get(area);
+            if (!domains.has(domain)) domains.set(domain, []);
+            domains.get(domain).push(sd);
+        }
+        return [...areas].map(([name, domains]) => ({ name, domains: [...domains].map(([d, list]) => ({ name: d, serviceDomains: list })) }));
+    }
+
+    /**
+     * What to draw (see the class).
+     * @param {Array<ServiceDomain>} serviceDomains
+     * @returns {{entities, relationships, annotations, links, folders, elementFolders}}
+     */
+    static view(serviceDomains) {
+        const { BOX, GAP, HEADER, PAD, ACROSS, PREFIX } = ServiceLandscape;
+        const domainWidth = ACROSS * BOX.width + (ACROSS - 1) * GAP + 2 * PAD;
+        const areaWidth = domainWidth + 2 * PAD;
+        const entities = [], areaFolders = [], domainFolders = [], elementFolders = [];
+        ServiceLandscape.areas(serviceDomains).forEach((area, a) => {
+            const areaId = `landscape-area-${a + 1}`;
+            const x = 20 + a * (areaWidth + GAP);
+            let y = 20 + HEADER + PAD;
+            area.domains.forEach((domain, d) => {
+                const domainId = `${areaId}-domain-${d + 1}`;
+                const rows = Math.ceil(domain.serviceDomains.length / ACROSS);
+                const height = HEADER + PAD + rows * BOX.height + (rows - 1) * GAP + PAD;
+                domainFolders.push({ id: domainId, name: domain.name, parentId: areaId, x: x + PAD, y, width: domainWidth, height });
+                domain.serviceDomains.forEach((sd, i) => {
+                    const id = `${PREFIX}${sd.id}`;
+                    const pattern = sd.functionalPattern;
+                    entities.push({
+                        id, name: sd.name, level: 'landscape',
+                        x: x + 2 * PAD + (i % ACROSS) * (BOX.width + GAP) + BOX.width / 2,
+                        y: y + HEADER + PAD + Math.floor(i / ACROSS) * (BOX.height + GAP) + BOX.height / 2,
+                        width: BOX.width, height: BOX.height,
+                        color: ServiceLandscape.colorOf(sd.pattern),
+                        description: sd.description,
+                        details: {
+                            'functional pattern': pattern ? `${pattern.name} (${pattern.artifact})` : (sd.pattern || 'none'),
+                            'control record': sd.controlRecordName,
+                            ...(sd.asset && { asset: sd.asset }),
+                        },
+                    });
+                    elementFolders.push([id, domainId]);
+                });
+                y += height + GAP;
+            });
+            areaFolders.push({ id: areaId, name: area.name, x, y: 20, width: areaWidth, height: y - 20 - GAP + PAD });
+        });
+        // Areas first, so they are drawn behind their domains.
+        return { entities, relationships: [], annotations: [], links: [], folders: [...areaFolders, ...domainFolders], elementFolders };
+    }
+}