@peter.prib/renderengine 0.2.5 → 0.2.7

package/src/charting/CheckboxTreeSelector.js

@@ -1,304 +1,373 @@
-/**
- * CheckboxTreeSelector — generic tree with checkboxes and tri-state cascading logic.
- *
- * Reusable across any domain: build a tree of { id, label, children? } nodes and get back a
- * DOM container + methods to track checked/unchecked ids. Tri-state: checking a branch checks
- * all descendants; parent shows indeterminate when some (but not all) children are checked.
- *
- * Usage:
- *   const selector = new CheckboxTreeSelector({ doc: document, nodes: [...], checkedIds: new Set(['id1']) });
- *   const container = selector.build();
- *   parent.appendChild(container);
- *   selector.onChange(ids => { ... });  // fires on any checkbox click
- *
- * Node shape:
- *   { id: string, label: string, children?: Node[] }
- */
-
-export class CheckboxTreeSelector {
-    constructor({ doc, nodes = [], checkedIds = null } = {}) {
-        this.doc = doc;
-        this.nodes = nodes;
-        this._checkedIds = checkedIds || new Set(); // null (default) = everything checked
-        this._listeners = [];
-        this._checkboxesByNodeId = new Map(); // nodeId -> input[type=checkbox]
-    }
-
-    build() {
-        const container = this.doc.createElement('div');
-        container.style.cssText = 'font-family: sans-serif; font-size: 13px; padding: 4px 0;';
-
-        for (const node of this.nodes) {
-            this._buildNode(node, container, 0);
-        }
-
-        return container;
-    }
-
-    /**
-     * Recursively build DOM for a node and its children.
-     * @private
-     */
-    _buildNode(node, parent, depth = 0) {
-        if (!node.children || node.children.length === 0) {
-            // Leaf: checkbox + label
-            this._buildLeaf(node, parent, depth);
-        } else {
-            // Branch: <details>/<summary> + checkbox
-            this._buildBranch(node, parent, depth);
-        }
-    }
-
-    /**
-     * Build a leaf node (no children).
-     * @private
-     */
-    _buildLeaf(node, parent, depth) {
-        const row = this.doc.createElement('div');
-        row.style.cssText = `display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding-left: ${depth * 16}px;`;
-
-        const checkbox = this.doc.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.id = `checkbox-${node.id}`;
-        checkbox.checked = this._checkedIds.size === 0 || this._checkedIds.has(node.id);
-        checkbox.style.cssText = 'flex-shrink: 0; cursor: pointer;';
-
-        checkbox.addEventListener('change', () => {
-            this._updateChecked(node.id, checkbox.checked, true);
-        });
-
-        this._checkboxesByNodeId.set(node.id, checkbox);
-
-        const label = this.doc.createElement('label');
-        label.htmlFor = checkbox.id;
-        label.textContent = node.label;
-        label.style.cssText = 'flex: 1; cursor: pointer; user-select: none;';
-
-        row.appendChild(checkbox);
-        row.appendChild(label);
-        parent.appendChild(row);
-    }
-
-    /**
-     * Build a branch node (has children, collapsible).
-     * @private
-     */
-    _buildBranch(node, parent, depth) {
-        const details = this.doc.createElement('details');
-        details.style.cssText = `margin-bottom: 4px; padding-left: ${depth * 16}px;`;
-        details.open = true;
-
-        const summary = this.doc.createElement('summary');
-        summary.style.cssText = 'display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 2px 0;';
-
-        const checkbox = this.doc.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.id = `checkbox-${node.id}`;
-        const isChecked = this._checkedIds.size === 0 || this._checkedIds.has(node.id);
-        const allChildrenChecked = this._allChildrenChecked(node);
-        const someChildrenChecked = this._someChildrenChecked(node);
-
-        checkbox.checked = isChecked && allChildrenChecked;
-        checkbox.indeterminate = isChecked && someChildrenChecked && !allChildrenChecked;
-        checkbox.style.cssText = 'flex-shrink: 0; cursor: pointer;';
-
-        checkbox.addEventListener('change', () => {
-            this._updateBranch(node, checkbox.checked);
-        });
-
-        this._checkboxesByNodeId.set(node.id, checkbox);
-
-        const label = this.doc.createElement('span');
-        label.textContent = node.label;
-        label.style.cssText = 'flex: 1; cursor: pointer; font-weight: 500;';
-
-        summary.appendChild(checkbox);
-        summary.appendChild(label);
-        details.appendChild(summary);
-
-        const childrenContainer = this.doc.createElement('div');
-        for (const child of node.children) {
-            this._buildNode(child, childrenContainer, depth + 1);
-        }
-        details.appendChild(childrenContainer);
-
-        parent.appendChild(details);
-    }
-
-    /**
-     * Check/uncheck a single leaf node and notify.
-     * @private
-     */
-    _updateChecked(nodeId, checked, notify = true) {
-        if (checked) {
-            this._checkedIds.add(nodeId);
-        } else {
-            this._checkedIds.delete(nodeId);
-        }
-
-        // Update parent indeterminate state (walk up tree — not used for flat leaves, but cleaner)
-        this._updateBranchStates();
-
-        if (notify) {
-            this._notifyListeners();
-        }
-    }
-
-    /**
-     * Check/uncheck a branch and all its descendants.
-     * @private
-     */
-    _updateBranch(node, checked) {
-        const allIds = this._getAllNodeIds(node);
-        if (checked) {
-            allIds.forEach(id => this._checkedIds.add(id));
-        } else {
-            allIds.forEach(id => this._checkedIds.delete(id));
-        }
-
-        // Update DOM state for all affected checkboxes
-        this._updateAllCheckboxes();
-        this._updateBranchStates();
-        this._notifyListeners();
-    }
-
-    /**
-     * Collect all descendant node ids (including the node itself).
-     * @private
-     */
-    _getAllNodeIds(node) {
-        const ids = [node.id];
-        if (node.children) {
-            for (const child of node.children) {
-                ids.push(...this._getAllNodeIds(child));
-            }
-        }
-        return ids;
-    }
-
-    /**
-     * Check if all children (direct and nested) are checked.
-     * @private
-     */
-    _allChildrenChecked(node) {
-        if (!node.children || node.children.length === 0) return true;
-        return node.children.every(child => {
-            const childId = child.id;
-            const hasDescendants = child.children && child.children.length > 0;
-            if (hasDescendants) {
-                return this._allChildrenChecked(child);
-            } else {
-                return this._checkedIds.size === 0 || this._checkedIds.has(childId);
-            }
-        });
-    }
-
-    /**
-     * Check if at least one child (direct or nested) is checked.
-     * @private
-     */
-    _someChildrenChecked(node) {
-        if (!node.children || node.children.length === 0) return false;
-        return node.children.some(child => {
-            const childId = child.id;
-            const hasDescendants = child.children && child.children.length > 0;
-            if (hasDescendants) {
-                return this._someChildrenChecked(child) || (this._checkedIds.size === 0 || this._checkedIds.has(childId));
-            } else {
-                return this._checkedIds.size === 0 || this._checkedIds.has(childId);
-            }
-        });
-    }
-
-    /**
-     * Update checkbox states (indeterminate flags) for all branches.
-     * @private
-     */
-    _updateBranchStates() {
-        for (const [nodeId, checkbox] of this._checkboxesByNodeId) {
-            const node = this._findNode(nodeId);
-            if (node && node.children && node.children.length > 0) {
-                const allChecked = this._allChildrenChecked(node);
-                const someChecked = this._someChildrenChecked(node);
-                checkbox.checked = allChecked;
-                checkbox.indeterminate = someChecked && !allChecked;
-            }
-        }
-    }
-
-    /**
-     * Find a node by id in the tree.
-     * @private
-     */
-    _findNode(id, nodes = this.nodes) {
-        for (const node of nodes) {
-            if (node.id === id) return node;
-            if (node.children) {
-                const found = this._findNode(id, node.children);
-                if (found) return found;
-            }
-        }
-        return null;
-    }
-
-    /**
-     * Get the set of currently-checked node ids.
-     */
-    getCheckedIds() {
-        return new Set(this._checkedIds);
-    }
-
-    /**
-     * Set which nodes are checked (Set<string> | null = everything checked).
-     */
-    setCheckedIds(ids) {
-        this._checkedIds = ids ? new Set(ids) : new Set();
-        // Update all checkbox states (checked + indeterminate) to reflect new state
-        this._updateAllCheckboxes();
-        this._updateBranchStates();
-    }
-
-    /**
-     * Update all checkboxes to match current _checkedIds state.
-     * @private
-     */
-    _updateAllCheckboxes() {
-        for (const [nodeId, checkbox] of this._checkboxesByNodeId) {
-            const node = this._findNode(nodeId);
-            if (!node) continue;
-            if (node.children && node.children.length > 0) {
-                // Branch: set checked if all children checked, indeterminate if some checked
-                const allChecked = this._allChildrenChecked(node);
-                const someChecked = this._someChildrenChecked(node);
-                checkbox.checked = allChecked;
-                checkbox.indeterminate = someChecked && !allChecked;
-            } else {
-                // Leaf: set checked if in _checkedIds
-                checkbox.checked = this._checkedIds.size === 0 || this._checkedIds.has(nodeId);
-                checkbox.indeterminate = false;
-            }
-        }
-    }
-
-    /**
-     * Register a change listener. Called with Set<string> of checked ids.
-     */
-    onChange(callback) {
-        this._listeners.push(callback);
-    }
-
-    /**
-     * Notify all listeners of the current checked state.
-     * @private
-     */
-    _notifyListeners() {
-        const ids = this.getCheckedIds();
-        for (const cb of this._listeners) {
-            try {
-                cb(ids);
-            } catch (err) {
-                console.warn('CheckboxTreeSelector listener error:', err);
-            }
-        }
-    }
-}
+/**
+ * CheckboxTreeSelector — generic tree with checkboxes and tri-state cascading logic.
+ *
+ * Reusable across any domain: build a tree of { id, label, children? } nodes and get back a
+ * DOM container + methods to track checked/unchecked ids. Tri-state: checking a branch checks
+ * all descendants; parent shows indeterminate when some (but not all) children are checked.
+ *
+ * Usage:
+ *   const selector = new CheckboxTreeSelector({ doc: document, nodes: [...], checkedIds: new Set(['id1']) });
+ *   const container = selector.build();
+ *   parent.appendChild(container);
+ *   selector.onChange(ids => { ... });  // fires on any checkbox click
+ *
+ * Node shape:
+ *   { id: string, label: string, children?: Node[] }
+ *
+ * Nothing ticked means everything is (no filter): `_isChecked`. OptInCheckboxTreeSelector
+ * is the other way about. A branch with more children than `searchAbove` starts folded, with
+ * a box that narrows its children to those containing the text typed; ticking the branch then
+ * ticks only those shown.
+ */
+
+export class CheckboxTreeSelector {
+    /**
+     * @param {Object} options
+     * @param {Document} options.doc
+     * @param {Array<Object>} [options.nodes]
+     * @param {Set<string>|null} [options.checkedIds]
+     * @param {number} [options.searchAbove] - A branch with more children than this is folded and searchable
+     */
+    constructor({ doc, nodes = [], checkedIds = null, searchAbove = Infinity } = {}) {
+        this.doc = doc;
+        this.nodes = nodes;
+        this.searchAbove = searchAbove;
+        /** The search text of each searchable branch, and its children's rows, by its id. */
+        this._searches = new Map();
+        this._searchRows = new Map();
+        this._checkedIds = checkedIds || new Set(); // null (default) = everything checked
+        this._listeners = [];
+        this._checkboxesByNodeId = new Map(); // nodeId -> input[type=checkbox]
+    }
+
+    build() {
+        const container = this.doc.createElement('div');
+        container.style.cssText = 'font-family: sans-serif; font-size: 13px; padding: 4px 0;';
+
+        for (const node of this.nodes) {
+            this._buildNode(node, container, 0);
+        }
+
+        return container;
+    }
+
+    /**
+     * Recursively build DOM for a node and its children.
+     * @private
+     */
+    _buildNode(node, parent, depth = 0) {
+        if (!node.children || node.children.length === 0) {
+            // Leaf: checkbox + label
+            this._buildLeaf(node, parent, depth);
+        } else {
+            // Branch: <details>/<summary> + checkbox
+            this._buildBranch(node, parent, depth);
+        }
+    }
+
+    /**
+     * Build a leaf node (no children).
+     * @private
+     */
+    _buildLeaf(node, parent, depth) {
+        const row = this.doc.createElement('div');
+        row.style.cssText = `display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding-left: ${depth * 16}px;`;
+
+        const checkbox = this.doc.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `checkbox-${node.id}`;
+        checkbox.checked = this._isChecked(node.id);
+        checkbox.style.cssText = 'flex-shrink: 0; cursor: pointer;';
+        row.dataset.label = String(node.label ?? '').toLowerCase();
+
+        checkbox.addEventListener('change', () => {
+            this._updateChecked(node.id, checkbox.checked, true);
+        });
+
+        this._checkboxesByNodeId.set(node.id, checkbox);
+
+        const label = this.doc.createElement('label');
+        label.htmlFor = checkbox.id;
+        label.textContent = node.label;
+        label.style.cssText = 'flex: 1; cursor: pointer; user-select: none;';
+
+        row.appendChild(checkbox);
+        row.appendChild(label);
+        parent.appendChild(row);
+    }
+
+    /**
+     * Build a branch node (has children, collapsible).
+     * @private
+     */
+    _buildBranch(node, parent, depth) {
+        const details = this.doc.createElement('details');
+        details.style.cssText = `margin-bottom: 4px; padding-left: ${depth * 16}px;`;
+        const searchable = this.isSearchable(node);
+        details.open = !searchable;   // a long list starts folded, like a submenu
+
+        const summary = this.doc.createElement('summary');
+        summary.style.cssText = 'display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 2px 0;';
+
+        const checkbox = this.doc.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `checkbox-${node.id}`;
+        const isChecked = this._isChecked(node.id);
+        const allChildrenChecked = this._allChildrenChecked(node);
+        const someChildrenChecked = this._someChildrenChecked(node);
+
+        checkbox.checked = isChecked && allChildrenChecked;
+        checkbox.indeterminate = isChecked && someChildrenChecked && !allChildrenChecked;
+        checkbox.style.cssText = 'flex-shrink: 0; cursor: pointer;';
+
+        checkbox.addEventListener('change', () => {
+            this._updateBranch(node, checkbox.checked);
+        });
+
+        this._checkboxesByNodeId.set(node.id, checkbox);
+
+        const label = this.doc.createElement('span');
+        label.textContent = node.label;
+        label.style.cssText = 'flex: 1; cursor: pointer; font-weight: 500;';
+
+        summary.appendChild(checkbox);
+        summary.appendChild(label);
+        details.appendChild(summary);
+
+        const childrenContainer = this.doc.createElement('div');
+        if (searchable) details.appendChild(this._searchBox(node, depth + 1));
+        for (const child of node.children) {
+            this._buildNode(child, childrenContainer, depth + 1);
+        }
+        // Each child is one element of the container: its row, shown or hidden by the search.
+        if (searchable) this._searchRows.set(node.id, new Map(node.children.map((c, i) => [c.id, childrenContainer.children[i]])));
+        details.appendChild(childrenContainer);
+
+        parent.appendChild(details);
+    }
+
+    /**
+     * Check/uncheck a single leaf node and notify.
+     * @private
+     */
+    _updateChecked(nodeId, checked, notify = true) {
+        if (checked) {
+            this._checkedIds.add(nodeId);
+        } else {
+            this._checkedIds.delete(nodeId);
+        }
+
+        // Update parent indeterminate state (walk up tree — not used for flat leaves, but cleaner)
+        this._updateBranchStates();
+
+        if (notify) {
+            this._notifyListeners();
+        }
+    }
+
+    /**
+     * Check/uncheck a branch and all its descendants.
+     * @private
+     */
+    _updateBranch(node, checked) {
+        // A searched branch ticks only the children its search shows.
+        const allIds = this._searches.get(node.id)
+            ? [node.id, ...this.matchingChildren(node).flatMap(c => this._getAllNodeIds(c))]
+            : this._getAllNodeIds(node);
+        if (checked) {
+            allIds.forEach(id => this._checkedIds.add(id));
+        } else {
+            allIds.forEach(id => this._checkedIds.delete(id));
+        }
+
+        // Update DOM state for all affected checkboxes
+        this._updateAllCheckboxes();
+        this._updateBranchStates();
+        this._notifyListeners();
+    }
+
+    /**
+     * Collect all descendant node ids (including the node itself).
+     * @private
+     */
+    _getAllNodeIds(node) {
+        const ids = [node.id];
+        if (node.children) {
+            for (const child of node.children) {
+                ids.push(...this._getAllNodeIds(child));
+            }
+        }
+        return ids;
+    }
+
+    /**
+     * Check if all children (direct and nested) are checked.
+     * @private
+     */
+    _allChildrenChecked(node) {
+        if (!node.children || node.children.length === 0) return true;
+        return node.children.every(child => {
+            const childId = child.id;
+            const hasDescendants = child.children && child.children.length > 0;
+            if (hasDescendants) {
+                return this._allChildrenChecked(child);
+            } else {
+                return this._isChecked(childId);
+            }
+        });
+    }
+
+    /**
+     * Check if at least one child (direct or nested) is checked.
+     * @private
+     */
+    _someChildrenChecked(node) {
+        if (!node.children || node.children.length === 0) return false;
+        return node.children.some(child => {
+            const childId = child.id;
+            const hasDescendants = child.children && child.children.length > 0;
+            if (hasDescendants) {
+                return this._someChildrenChecked(child) || this._isChecked(childId);
+            } else {
+                return this._isChecked(childId);
+            }
+        });
+    }
+
+    /**
+     * Update checkbox states (indeterminate flags) for all branches.
+     * @private
+     */
+    _updateBranchStates() {
+        for (const [nodeId, checkbox] of this._checkboxesByNodeId) {
+            const node = this._findNode(nodeId);
+            if (node && node.children && node.children.length > 0) {
+                const allChecked = this._allChildrenChecked(node);
+                const someChecked = this._someChildrenChecked(node);
+                checkbox.checked = allChecked;
+                checkbox.indeterminate = someChecked && !allChecked;
+            }
+        }
+    }
+
+    /**
+     * Find a node by id in the tree.
+     * @private
+     */
+    _findNode(id, nodes = this.nodes) {
+        for (const node of nodes) {
+            if (node.id === id) return node;
+            if (node.children) {
+                const found = this._findNode(id, node.children);
+                if (found) return found;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Get the set of currently-checked node ids.
+     */
+    getCheckedIds() {
+        return new Set(this._checkedIds);
+    }
+
+    /**
+     * Set which nodes are checked (Set<string> | null = everything checked).
+     */
+    setCheckedIds(ids) {
+        this._checkedIds = ids ? new Set(ids) : new Set();
+        // Update all checkbox states (checked + indeterminate) to reflect new state
+        this._updateAllCheckboxes();
+        this._updateBranchStates();
+    }
+
+    /**
+     * Update all checkboxes to match current _checkedIds state.
+     * @private
+     */
+    _updateAllCheckboxes() {
+        for (const [nodeId, checkbox] of this._checkboxesByNodeId) {
+            const node = this._findNode(nodeId);
+            if (!node) continue;
+            if (node.children && node.children.length > 0) {
+                // Branch: set checked if all children checked, indeterminate if some checked
+                const allChecked = this._allChildrenChecked(node);
+                const someChecked = this._someChildrenChecked(node);
+                checkbox.checked = allChecked;
+                checkbox.indeterminate = someChecked && !allChecked;
+            } else {
+                // Leaf: set checked if in _checkedIds
+                checkbox.checked = this._isChecked(nodeId);
+                checkbox.indeterminate = false;
+            }
+        }
+    }
+
+    /** Whether a node shows ticked: nothing ticked means everything is (no filter). @protected */
+    _isChecked(id) {
+        return this._checkedIds.size === 0 || this._checkedIds.has(id);
+    }
+
+    /** Whether a branch is folded and searchable: more children than `searchAbove`. */
+    isSearchable(node) {
+        return (node.children?.length ?? 0) > this.searchAbove;
+    }
+
+    /** A branch's children its search shows: those whose label contains the text (all with none). */
+    matchingChildren(node) {
+        const text = (this._searches.get(node.id) ?? '').toLowerCase();
+        return text ? node.children.filter(c => String(c.label ?? '').toLowerCase().includes(text)) : node.children;
+    }
+
+    /** Narrow a branch to the children containing `text` ('' shows them all). */
+    search(nodeId, text) {
+        this._searches.set(nodeId, text);
+        const node = this._findNode(nodeId);
+        const rows = this._searchRows.get(nodeId);
+        if (!node || !rows) return;
+        const shown = new Set(this.matchingChildren(node).map(c => c.id));
+        for (const [id, row] of rows) row.style.display = shown.has(id) ? '' : 'none';
+    }
+
+    /** The box that narrows a long branch's children. @private */
+    _searchBox(node, depth) {
+        const input = this.doc.createElement('input');
+        Object.assign(input, { type: 'search', placeholder: `Find among ${node.children.length}…` });
+        input.style.cssText = `margin: 2px 0 4px ${depth * 16}px; width: calc(100% - ${depth * 16}px); box-sizing: border-box; font-size: 12px; padding: 2px 4px;`;
+        input.addEventListener('input', () => this.search(node.id, input.value.trim()));
+        return input;
+    }
+
+    /**
+     * Register a change listener. Called with Set<string> of checked ids.
+     */
+    onChange(callback) {
+        this._listeners.push(callback);
+    }
+
+    /**
+     * Notify all listeners of the current checked state.
+     * @private
+     */
+    _notifyListeners() {
+        const ids = this.getCheckedIds();
+        for (const cb of this._listeners) {
+            try {
+                cb(ids);
+            } catch (err) {
+                console.warn('CheckboxTreeSelector listener error:', err);
+            }
+        }
+    }
+}
+
+/**
+ * OptInCheckboxTreeSelector — nothing ticked means nothing chosen (no filter):
+ * each value is ticked to choose it, as a property filter wants.
+ */
+export class OptInCheckboxTreeSelector extends CheckboxTreeSelector {
+    _isChecked(id) {
+        return this._checkedIds.has(id);
+    }
+}