@peter.prib/renderengine 0.2.4 → 0.2.6

package/src/charting/modelTree/TreeViewMode.js

@@ -1,110 +1,131 @@
-/**
- * Abstract base class for tree grouping/presentation modes.
- * Subclasses implement buildGroups() to organize model elements into groups.
- */
-
-export class TreeViewMode {
-    static key = null;          // registry key; subclasses override
-    static label = '';          // human-readable label; subclasses override
-
-    constructor() {
-        if (new.target === TreeViewMode) {
-            throw new TypeError('TreeViewMode is abstract — subclass it');
-        }
-        if (!this.constructor.key) {
-            throw new TypeError(`${this.constructor.name} must define static key`);
-        }
-    }
-
-    /**
-     * Build groups from model elements.
-     * @param {ArchimateModel} model
-     * @param {Object} opts
-     * @param {string} opts.filterText - text to filter by (case-insensitive name/type/layer)
-     * @param {Set<string>} opts.typeIds - filter by element type (e.g. Set(['type:business-actor']))
-     * @param {Set<string>} opts.specializationIds - filter by specialization (e.g. Set(['spec:Microservice']))
-     * @param {Set<string>} opts.propertyIds - filter by property values (e.g. Set(['propval:Owner=Alice']))
-     * @returns {Array<{label, items: Array<{id, kind, label, type}>}>}
-     */
-    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
-        throw new Error(`${this.constructor.name} must implement buildGroups()`);
-    }
-
-    /**
-     * Check if an item matches all active filters (text + type + specialization + properties).
-     * Subclasses can override for custom filtering logic.
-     * @protected
-     */
-    _matchesFilter(item, { text = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
-        // Text filter (label or type)
-        if (text) {
-            const textLower = text.toLowerCase();
-            const label = (item.label ?? '').toLowerCase();
-            const type = (item.type ?? '').toLowerCase();
-            if (!label.includes(textLower) && !type.includes(textLower)) {
-                return false;
-            }
-        }
-
-        // Type filter (elements only; 'type:business-actor' format)
-        if (typeIds && typeIds.size > 0 && item.kind === 'element') {
-            const typeId = `type:${item.type}`;
-            if (!typeIds.has(typeId)) {
-                return false;
-            }
-        }
-
-        // Specialization filter (elements only; 'spec:Microservice' format)
-        if (specializationIds && specializationIds.size > 0 && item.kind === 'element') {
-            if (!item.specialization) {
-                // Elements without specialization don't match specialization filters
-                return false;
-            }
-            const specId = `spec:${item.specialization}`;
-            if (!specializationIds.has(specId)) {
-                return false;
-            }
-        }
-
-        // Property filter ('propval:PropertyName=Value' format; both elements and relationships)
-        if (propertyIds && propertyIds.size > 0) {
-            if (!Array.isArray(item.properties)) {
-                // No properties defined — doesn't match property filter
-                return false;
-            }
-            // Check if any property matches the filter
-            const matches = item.properties.some(prop => {
-                const propId = `propval:${prop.name}=${prop.value}`;
-                return propertyIds.has(propId);
-            });
-            if (!matches) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    /** Group items into {label, items} structure. @protected */
-    _group(items, keyFn, labelFn) {
-        const groups = new Map();
-        for (const item of items) {
-            const key = keyFn(item);
-            if (!groups.has(key)) {
-                groups.set(key, { label: labelFn(key), items: [] });
-            }
-            groups.get(key).items.push(item);
-        }
-        return Array.from(groups.values());
-    }
-
-    /** Get elements from model (handles both ArchimateModel.elements() and ArchimateView.elements). @protected */
-    _getElements(model) {
-        return typeof model.elements === 'function' ? model.elements() : model.elements;
-    }
-
-    /** Get relationships from model (handles both ArchimateModel.relationships() and ArchimateView.relationships). @protected */
-    _getRelationships(model) {
-        return typeof model.relationships === 'function' ? model.relationships() : model.relationships;
-    }
-}
+/**
+ * Abstract base class for tree grouping/presentation modes.
+ * Subclasses implement buildGroups() to organize model elements into groups.
+ */
+
+export class TreeViewMode {
+    static key = null;          // registry key; subclasses override
+    static label = '';          // human-readable label; subclasses override
+
+    constructor() {
+        if (new.target === TreeViewMode) {
+            throw new TypeError('TreeViewMode is abstract — subclass it');
+        }
+        if (!this.constructor.key) {
+            throw new TypeError(`${this.constructor.name} must define static key`);
+        }
+    }
+
+    /**
+     * Build groups from model elements.
+     * @param {ArchimateModel} model
+     * @param {Object} opts
+     * @param {string} opts.filterText - text to filter by (case-insensitive name/type/layer)
+     * @param {boolean} [opts.inDescriptions] - the text may be found in an item's description (documentation) too
+     * @param {Set<string>} opts.typeIds - filter by element type (e.g. Set(['type:business-actor']))
+     * @param {Set<string>} opts.specializationIds - filter by specialization (e.g. Set(['spec:Microservice']))
+     * @param {Set<string>} opts.propertyIds - filter by property values (e.g. Set(['propval:Owner=Alice']))
+     * @returns {Array<{label, items: Array<{id, kind, label, type}>}>}
+     */
+    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null, inDescriptions = false } = {}) {
+        throw new Error(`${this.constructor.name} must implement buildGroups()`);
+    }
+
+    /** A tree item for a model element: what the filters look at. @protected */
+    _elementItem(el) {
+        return {
+            id: el.id, kind: 'element', label: el.name || '(unnamed)', type: el.type, layer: el.layer, icon: el.icon,
+            specialization: el.specialization, properties: el.properties, description: el.documentation ?? el.description ?? '',
+        };
+    }
+
+    /** A tree item for a relationship. @protected */
+    _relationshipItem(rel) {
+        return {
+            id: rel.id, kind: 'relationship', label: rel.label || `${rel.source} → ${rel.target}`, type: rel.kind,
+            properties: rel.properties, description: rel.documentation ?? rel.description ?? '',
+        };
+    }
+
+    /** The items of `list` that every filter keeps. @protected */
+    _filtered(list, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null, inDescriptions = false } = {}) {
+        return list.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds, inDescriptions }));
+    }
+
+    /**
+     * Check if an item matches all active filters (text + type + specialization + properties).
+     * Subclasses can override for custom filtering logic.
+     * @protected
+     */
+    _matchesFilter(item, { text = '', typeIds = null, specializationIds = null, propertyIds = null, inDescriptions = false } = {}) {
+        // Text filter (label or type; the description too when asked)
+        if (text) {
+            const textLower = text.toLowerCase();
+            const fields = [item.label, item.type, ...(inDescriptions ? [item.description] : [])];
+            if (!fields.some(f => String(f ?? '').toLowerCase().includes(textLower))) {
+                return false;
+            }
+        }
+
+        // Type filter (elements only; 'type:business-actor' format)
+        if (typeIds && typeIds.size > 0 && item.kind === 'element') {
+            const typeId = `type:${item.type}`;
+            if (!typeIds.has(typeId)) {
+                return false;
+            }
+        }
+
+        // Specialization filter (elements only; 'spec:Microservice' format)
+        if (specializationIds && specializationIds.size > 0 && item.kind === 'element') {
+            if (!item.specialization) {
+                // Elements without specialization don't match specialization filters
+                return false;
+            }
+            const specId = `spec:${item.specialization}`;
+            if (!specializationIds.has(specId)) {
+                return false;
+            }
+        }
+
+        // Property filter ('propval:PropertyName=Value' format; both elements and relationships)
+        if (propertyIds && propertyIds.size > 0) {
+            if (!Array.isArray(item.properties)) {
+                // No properties defined — doesn't match property filter
+                return false;
+            }
+            // Check if any property matches the filter
+            const matches = item.properties.some(prop => {
+                const propId = `propval:${prop.name}=${prop.value}`;
+                return propertyIds.has(propId);
+            });
+            if (!matches) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    /** Group items into {label, items} structure. @protected */
+    _group(items, keyFn, labelFn) {
+        const groups = new Map();
+        for (const item of items) {
+            const key = keyFn(item);
+            if (!groups.has(key)) {
+                groups.set(key, { label: labelFn(key), items: [] });
+            }
+            groups.get(key).items.push(item);
+        }
+        return Array.from(groups.values());
+    }
+
+    /** Get elements from model (handles both ArchimateModel.elements() and ArchimateView.elements). @protected */
+    _getElements(model) {
+        return typeof model.elements === 'function' ? model.elements() : model.elements;
+    }
+
+    /** Get relationships from model (handles both ArchimateModel.relationships() and ArchimateView.relationships). @protected */
+    _getRelationships(model) {
+        return typeof model.relationships === 'function' ? model.relationships() : model.relationships;
+    }
+}

package/src/charting/modelTree/modes/FlatTreeMode.js

@@ -1,46 +1,32 @@
-import { TreeViewMode } from '../TreeViewMode.js';
-
-/**
- * Tree mode: flat alphabetical list of all elements and relationships.
- */
-export class FlatTreeMode extends TreeViewMode {
-    static key = 'flat';
-    static label = 'Flat';
-
-    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
-        // Build element items (include specialization and properties for filtering)
-        const elementItems = this._getElements(model).map(el => ({
-            id: el.id,
-            kind: 'element',
-            label: el.name || '(unnamed)',
-            type: el.type,
-            icon: el.icon,
-            specialization: el.specialization,
-            properties: el.properties,
-        }));
-
-        // Build relationship items
-        const relationshipItems = this._getRelationships(model).map(rel => ({
-            id: rel.id,
-            kind: 'relationship',
-            label: rel.label || `${rel.source} → ${rel.target}`,
-            type: rel.kind,
-            properties: rel.properties,
-        }));
-
-        // Combine and filter with all criteria
-        const allItems = [...elementItems, ...relationshipItems];
-        const filtered = allItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
-
-        // Sort alphabetically
-        filtered.sort((a, b) => a.label.localeCompare(b.label));
-
-        // Single group containing all
-        if (filtered.length === 0) return [];
-
-        return [{
-            label: '',
-            items: filtered,
-        }];
-    }
-}
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: flat alphabetical list of all elements and relationships.
+ */
+export class FlatTreeMode extends TreeViewMode {
+    static key = 'flat';
+    static label = 'Flat';
+
+    buildGroups(model, filters = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => this._elementItem(el));
+
+        // Build relationship items
+        const relationshipItems = this._getRelationships(model).map(rel => this._relationshipItem(rel));
+
+        // Combine and filter with all criteria
+        const allItems = [...elementItems, ...relationshipItems];
+        const filtered = this._filtered(allItems, filters);
+
+        // Sort alphabetically
+        filtered.sort((a, b) => a.label.localeCompare(b.label));
+
+        // Single group containing all
+        if (filtered.length === 0) return [];
+
+        return [{
+            label: '',
+            items: filtered,
+        }];
+    }
+}

package/src/charting/modelTree/modes/LayerGroupedTreeMode.js

@@ -1,62 +1,47 @@
-import { TreeViewMode } from '../TreeViewMode.js';
-
-/**
- * Tree mode: groups elements by ArchiMate layer, then relationships.
- * Replicates the demo's current behavior.
- */
-export class LayerGroupedTreeMode extends TreeViewMode {
-    static key = 'byLayer';
-    static label = 'By Layer';
-
-    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
-        // Build element items (include specialization and properties for filtering)
-        const elementItems = this._getElements(model).map(el => ({
-            id: el.id,
-            kind: 'element',
-            label: el.name || '(unnamed)',
-            type: el.type,
-            layer: el.layer,
-            icon: el.icon,
-            specialization: el.specialization,
-            properties: el.properties,
-        }));
-
-        // Filter elements with all criteria
-        const filtered = elementItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
-
-        // Group by layer
-        const layerGroups = this._group(
-            filtered,
-            item => item.layer || 'Other',
-            layer => layer
-        );
-
-        // Sort layers in a sensible order (layers are lowercase-kebab)
-        const layerOrder = ['strategy', 'business', 'application', 'technology', 'physical', 'implementation', 'motivation', 'Other'];
-        layerGroups.sort((a, b) => {
-            const aIdx = layerOrder.indexOf(a.label);
-            const bIdx = layerOrder.indexOf(b.label);
-            return (aIdx === -1 ? 999 : aIdx) - (bIdx === -1 ? 999 : bIdx);
-        });
-
-        // Add relationships group
-        const relationshipItems = this._getRelationships(model).map(rel => ({
-            id: rel.id,
-            kind: 'relationship',
-            label: rel.label || `${rel.source} → ${rel.target}`,
-            type: rel.kind,
-            properties: rel.properties,
-        }));
-
-        const filtered_rels = relationshipItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
-
-        if (filtered_rels.length > 0) {
-            layerGroups.push({
-                label: 'Relationships',
-                items: filtered_rels,
-            });
-        }
-
-        return layerGroups;
-    }
-}
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: groups elements by ArchiMate layer, then relationships.
+ * Replicates the demo's current behavior.
+ */
+export class LayerGroupedTreeMode extends TreeViewMode {
+    static key = 'byLayer';
+    static label = 'By Layer';
+
+    buildGroups(model, filters = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => this._elementItem(el));
+
+        // Filter elements with all criteria
+        const filtered = this._filtered(elementItems, filters);
+
+        // Group by layer
+        const layerGroups = this._group(
+            filtered,
+            item => item.layer || 'Other',
+            layer => layer
+        );
+
+        // Sort layers in a sensible order (layers are lowercase-kebab)
+        const layerOrder = ['strategy', 'business', 'application', 'technology', 'physical', 'implementation', 'motivation', 'Other'];
+        layerGroups.sort((a, b) => {
+            const aIdx = layerOrder.indexOf(a.label);
+            const bIdx = layerOrder.indexOf(b.label);
+            return (aIdx === -1 ? 999 : aIdx) - (bIdx === -1 ? 999 : bIdx);
+        });
+
+        // Add relationships group
+        const relationshipItems = this._getRelationships(model).map(rel => this._relationshipItem(rel));
+
+        const filtered_rels = this._filtered(relationshipItems, filters);
+
+        if (filtered_rels.length > 0) {
+            layerGroups.push({
+                label: 'Relationships',
+                items: filtered_rels,
+            });
+        }
+
+        return layerGroups;
+    }
+}

package/src/charting/modelTree/modes/TypeGroupedTreeMode.js

@@ -1,60 +1,46 @@
-import { TreeViewMode } from '../TreeViewMode.js';
-
-/**
- * Tree mode: groups elements by ArchiMate type, then relationships.
- */
-export class TypeGroupedTreeMode extends TreeViewMode {
-    static key = 'byType';
-    static label = 'By Type';
-
-    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
-        // Build element items (include specialization and properties for filtering)
-        const elementItems = this._getElements(model).map(el => ({
-            id: el.id,
-            kind: 'element',
-            label: el.name || '(unnamed)',
-            type: el.type,
-            icon: el.icon,
-            specialization: el.specialization,
-            properties: el.properties,
-        }));
-
-        // Filter elements with all criteria
-        const filtered = elementItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
-
-        // Group by type
-        const typeGroups = this._group(
-            filtered,
-            item => item.type,
-            type => type || 'Other'
-        );
-
-        // Sort alphabetically within each group
-        typeGroups.forEach(group => {
-            group.items.sort((a, b) => a.label.localeCompare(b.label));
-        });
-
-        // Sort groups alphabetically
-        typeGroups.sort((a, b) => a.label.localeCompare(b.label));
-
-        // Add relationships group
-        const relationshipItems = this._getRelationships(model).map(rel => ({
-            id: rel.id,
-            kind: 'relationship',
-            label: rel.label || `${rel.source} → ${rel.target}`,
-            type: rel.kind,
-            properties: rel.properties,
-        }));
-
-        const filtered_rels = relationshipItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
-
-        if (filtered_rels.length > 0) {
-            typeGroups.push({
-                label: 'Relationships',
-                items: filtered_rels.sort((a, b) => a.label.localeCompare(b.label)),
-            });
-        }
-
-        return typeGroups;
-    }
-}
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: groups elements by ArchiMate type, then relationships.
+ */
+export class TypeGroupedTreeMode extends TreeViewMode {
+    static key = 'byType';
+    static label = 'By Type';
+
+    buildGroups(model, filters = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => this._elementItem(el));
+
+        // Filter elements with all criteria
+        const filtered = this._filtered(elementItems, filters);
+
+        // Group by type
+        const typeGroups = this._group(
+            filtered,
+            item => item.type,
+            type => type || 'Other'
+        );
+
+        // Sort alphabetically within each group
+        typeGroups.forEach(group => {
+            group.items.sort((a, b) => a.label.localeCompare(b.label));
+        });
+
+        // Sort groups alphabetically
+        typeGroups.sort((a, b) => a.label.localeCompare(b.label));
+
+        // Add relationships group
+        const relationshipItems = this._getRelationships(model).map(rel => this._relationshipItem(rel));
+
+        const filtered_rels = this._filtered(relationshipItems, filters);
+
+        if (filtered_rels.length > 0) {
+            typeGroups.push({
+                label: 'Relationships',
+                items: filtered_rels.sort((a, b) => a.label.localeCompare(b.label)),
+            });
+        }
+
+        return typeGroups;
+    }
+}