@data-navigator/inspector 1.0.3 → 1.1.1

package/src/menu-sections.js

@@ -0,0 +1,938 @@
+/**
+ * Builders for each section of the console menu.
+ * Each function returns an HTMLElement to be appended to the menu.
+ *
+ * Rendered Elements uses lazy rendering: child menu items are only created
+ * when their parent <details> is opened, and destroyed when it closes.
+ * Checked state persists in menu-state.js (independent of DOM).
+ */
+
+import { EVENTS, dispatch } from './menu-events.js';
+
+// ---------------------------------------------------------------------------
+// Utility: lazy cleanup
+// ---------------------------------------------------------------------------
+
+/**
+ * Recursively call _unsub on an element and all its descendants.
+ */
+function cleanupElement(el) {
+    if (el._unsub) {
+        el._unsub();
+        delete el._unsub;
+    }
+    if (el.children) {
+        Array.from(el.children).forEach(cleanupElement);
+    }
+}
+
+/**
+ * Remove all children of a <details> except its <summary>,
+ * recursively calling _unsub on each removed subtree.
+ */
+function cleanupChildren(detailsEl) {
+    const children = Array.from(detailsEl.children);
+    children.forEach(child => {
+        if (child.tagName === 'SUMMARY') return;
+        cleanupElement(child);
+        detailsEl.removeChild(child);
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Utility: collapsible section with caret indicator
+// ---------------------------------------------------------------------------
+
+/**
+ * Create a <details> with a compact caret-styled <summary>.
+ */
+function makeDetails(summaryText, opts = {}) {
+    const details = document.createElement('details');
+    if (opts.className) details.className = opts.className;
+    if (opts.open) details.open = true;
+
+    const summary = document.createElement('summary');
+    summary.className = 'dn-menu-summary' + (opts.summaryClass ? ' ' + opts.summaryClass : '');
+    summary.textContent = summaryText;
+    details.appendChild(summary);
+
+    return details;
+}
+
+/**
+ * Create a <details> that lazily populates children on open and
+ * destroys them on close. For sections without a group checkbox.
+ *
+ * @param {string} summaryText
+ * @param {Function} populateFn - Called with (detailsEl) when opened
+ * @param {Object} state - Menu state (for hover cleanup on close)
+ * @param {Object} [opts] - className, open, summaryClass
+ */
+function makeLazyDetails(summaryText, populateFn, state, opts = {}) {
+    const details = document.createElement('details');
+    if (opts.className) details.className = opts.className;
+
+    const summary = document.createElement('summary');
+    summary.className = 'dn-menu-summary' + (opts.summaryClass ? ' ' + opts.summaryClass : '');
+    summary.textContent = summaryText;
+    details.appendChild(summary);
+
+    details.addEventListener('toggle', () => {
+        if (details.open) {
+            populateFn(details);
+        } else {
+            if (state.hoveredItem) state.clearHover();
+            cleanupChildren(details);
+        }
+    });
+
+    if (opts.open) {
+        details.open = true;
+        populateFn(details);
+    }
+
+    return details;
+}
+
+/**
+ * Create a <details> with a group checkbox in the <summary>.
+ * Lazily renders children on open, destroys on close.
+ *
+ * @param {string} summaryText - Label text for the summary
+ * @param {Array<{type: string, id: string}>} childItems - Items this group controls
+ * @param {Object} state - The menu state object
+ * @param {HTMLElement} container - Container for event dispatching
+ * @param {Function} populateFn - Called with (detailsEl) when opened
+ * @param {Object} [opts] - Options passed to details (className, open, summaryClass)
+ * @returns {HTMLDetailsElement}
+ */
+function makeGroupDetails(summaryText, childItems, state, container, populateFn, opts = {}) {
+    const details = document.createElement('details');
+    if (opts.className) details.className = opts.className;
+
+    const summary = document.createElement('summary');
+    summary.className = 'dn-menu-summary' + (opts.summaryClass ? ' ' + opts.summaryClass : '');
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'dn-menu-group-checkbox';
+    checkbox.addEventListener('click', e => {
+        e.stopPropagation(); // Don't toggle <details> when clicking checkbox
+    });
+    checkbox.addEventListener('change', () => {
+        const shouldCheck = checkbox.checked;
+        childItems.forEach(item => {
+            if (shouldCheck) {
+                state.check(item.type, item.id);
+            } else {
+                state.uncheck(item.type, item.id);
+            }
+        });
+        const allChecked = state.getChecked();
+        dispatch(container, EVENTS.SELECTION_CHANGE, { checked: allChecked });
+    });
+    summary.appendChild(checkbox);
+
+    const labelSpan = document.createElement('span');
+    labelSpan.textContent = summaryText;
+    summary.appendChild(labelSpan);
+
+    details.appendChild(summary);
+
+    // Sync checkbox state — works without child DOM (reads from state)
+    function syncGroupCheckbox() {
+        const checkedCount = childItems.filter(item => state.isChecked(item.type, item.id)).length;
+        checkbox.checked = checkedCount === childItems.length && childItems.length > 0;
+        checkbox.indeterminate = checkedCount > 0 && checkedCount < childItems.length;
+    }
+    syncGroupCheckbox();
+
+    const unsub = state.subscribe(changeType => {
+        if (changeType === 'check' || changeType === 'uncheck') {
+            syncGroupCheckbox();
+        }
+    });
+    details._unsub = unsub;
+
+    // Lazy toggle handler
+    details.addEventListener('toggle', () => {
+        if (details.open) {
+            populateFn(details);
+        } else {
+            if (state.hoveredItem) state.clearHover();
+            cleanupChildren(details);
+        }
+    });
+
+    if (opts.open) {
+        details.open = true;
+        populateFn(details);
+    }
+
+    return details;
+}
+
+// ---------------------------------------------------------------------------
+// Utility: inline expandable array  "label: [...](N)"
+// ---------------------------------------------------------------------------
+
+/**
+ * Create an inline expandable array display.
+ * Collapsed: "label: [...](N)"
+ * Expanded: "label: [item1, item2, item3]"   (inline, no new lines)
+ * Each item is interactive (hoverable via state).
+ */
+function buildInlineArray({ label, items, state, container, structure }) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dn-menu-inline-array';
+
+    const toggle = document.createElement('span');
+    toggle.className = 'dn-menu-array-toggle';
+    toggle.textContent = label + ': ';
+    wrapper.appendChild(toggle);
+
+    const collapsed = document.createElement('span');
+    collapsed.className = 'dn-menu-array-collapsed';
+    collapsed.textContent = '[...](' + items.length + ')';
+    wrapper.appendChild(collapsed);
+
+    const expanded = document.createElement('span');
+    expanded.className = 'dn-menu-array-expanded dn-menu-hidden';
+    expanded.textContent = '[';
+
+    items.forEach((item, i) => {
+        const chip = document.createElement('span');
+        chip.className = 'dn-menu-array-chip';
+        chip.textContent = item.label;
+        chip.dataset.type = item.type;
+        chip.dataset.id = item.id;
+
+        chip.addEventListener('mouseenter', () => {
+            state.setHover(item.type, item.id);
+            dispatch(container, EVENTS.ITEM_HOVER, {
+                type: item.type,
+                id: item.id,
+                sourceData: getSourceData(item.type, item.id, structure)
+            });
+        });
+        chip.addEventListener('mouseleave', () => {
+            state.clearHover();
+            dispatch(container, EVENTS.ITEM_UNHOVER, { type: item.type, id: item.id });
+        });
+
+        expanded.appendChild(chip);
+        if (i < items.length - 1) {
+            expanded.appendChild(document.createTextNode(', '));
+        }
+    });
+
+    expanded.appendChild(document.createTextNode(']'));
+    wrapper.appendChild(expanded);
+
+    const toggleFn = () => {
+        const isCollapsed = !collapsed.classList.contains('dn-menu-hidden');
+        collapsed.classList.toggle('dn-menu-hidden', isCollapsed);
+        expanded.classList.toggle('dn-menu-hidden', !isCollapsed);
+    };
+    collapsed.addEventListener('click', toggleFn);
+    toggle.addEventListener('click', toggleFn);
+    toggle.style.cursor = 'pointer';
+    collapsed.style.cursor = 'pointer';
+
+    return wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Shared helper: buildMenuItem
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates a menu item row with checkbox, label, and optional "log" button.
+ */
+export function buildMenuItem({ type, id, label, state, container, showLog, logFn, consoleListEl, structure }) {
+    const row = document.createElement('div');
+    row.className = 'dn-menu-item';
+    row.dataset.type = type;
+    row.dataset.id = id;
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = state.isChecked(type, id);
+    checkbox.addEventListener('change', () => {
+        state.toggle(type, id);
+        const allChecked = state.getChecked();
+        if (state.isChecked(type, id)) {
+            dispatch(container, EVENTS.ITEM_CHECK, { type, id, allChecked });
+        } else {
+            dispatch(container, EVENTS.ITEM_UNCHECK, { type, id, allChecked });
+        }
+        dispatch(container, EVENTS.SELECTION_CHANGE, { checked: allChecked });
+    });
+    row.appendChild(checkbox);
+
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'dn-menu-item-label';
+    labelSpan.textContent = label;
+    row.appendChild(labelSpan);
+
+    if (showLog && logFn) {
+        const logBtn = document.createElement('button');
+        logBtn.className = 'dn-menu-log-btn';
+        logBtn.textContent = 'log';
+        logBtn.addEventListener('click', e => {
+            e.stopPropagation();
+            const result = logFn();
+            if (result && consoleListEl) {
+                // Open the Console section and all ancestor <details> so it's visible
+                let el = consoleListEl;
+                while (el) {
+                    if (el.tagName === 'DETAILS') el.open = true;
+                    el = el.parentElement;
+                }
+                appendConsoleLogGroup(result, state, container, consoleListEl, structure);
+                dispatch(container, EVENTS.ITEM_LOG, {
+                    type: result.mainEntry.type,
+                    id: result.mainEntry.id,
+                    loggedData: result.mainEntry.data
+                });
+            }
+        });
+        row.appendChild(logBtn);
+    }
+
+    row.addEventListener('mouseenter', () => {
+        state.setHover(type, id);
+        dispatch(container, EVENTS.ITEM_HOVER, {
+            type,
+            id,
+            sourceData: getSourceData(type, id, structure)
+        });
+    });
+    row.addEventListener('mouseleave', () => {
+        state.clearHover();
+        dispatch(container, EVENTS.ITEM_UNHOVER, { type, id });
+    });
+
+    const unsub = state.subscribe((changeType, payload) => {
+        if ((changeType === 'check' || changeType === 'uncheck') && payload.type === type && payload.id === id) {
+            checkbox.checked = state.isChecked(type, id);
+        }
+    });
+    row._unsub = unsub;
+
+    return row;
+}
+
+function getSourceData(type, id, structure) {
+    if (!structure) return null;
+    if (type === 'node') return structure.nodes[id] || null;
+    if (type === 'edge') return structure.edges[id] || null;
+    if (type === 'rule') return structure.navigationRules?.[id] || null;
+    return null;
+}
+
+// ---------------------------------------------------------------------------
+// Console log rendering (with inline expandable arrays)
+// ---------------------------------------------------------------------------
+
+function appendConsoleLogGroup(result, state, container, consoleListEl, structure) {
+    const { mainEntry, relatedArrays } = result;
+
+    const mainRow = buildMenuItem({
+        type: mainEntry.type,
+        id: mainEntry.id,
+        label: mainEntry.label,
+        state,
+        container,
+        showLog: false,
+        structure
+    });
+    mainRow.classList.add('dn-menu-console-entry');
+    consoleListEl.appendChild(mainRow);
+
+    state.addLogEntry(mainEntry);
+
+    if (relatedArrays) {
+        relatedArrays.forEach(arr => {
+            const inlineEl = buildInlineArray({
+                label: arr.label,
+                items: arr.items,
+                state,
+                container,
+                structure
+            });
+            inlineEl.classList.add('dn-menu-console-entry');
+            inlineEl.style.paddingLeft = '24px';
+            consoleListEl.appendChild(inlineEl);
+        });
+    }
+
+    consoleListEl.scrollTop = consoleListEl.scrollHeight;
+}
+
+// ---------------------------------------------------------------------------
+// Log functions: return { mainEntry, relatedArrays }
+// ---------------------------------------------------------------------------
+
+function buildNodeLogResult(nodeId, structure) {
+    const node = structure.nodes[nodeId];
+    if (!node) return null;
+
+    const edgeItems = (node.edges || [])
+        .map(eId => {
+            const edge = structure.edges[eId];
+            if (!edge) return null;
+            const src = typeof edge.source === 'function' ? '?' : edge.source;
+            const tgt = typeof edge.target === 'function' ? '?' : edge.target;
+            return { type: 'edge', id: eId, label: src + '\u2192' + tgt };
+        })
+        .filter(Boolean);
+
+    return {
+        mainEntry: {
+            type: 'node',
+            id: nodeId,
+            label: 'node: ' + nodeId,
+            data: node,
+            timestamp: Date.now()
+        },
+        relatedArrays:
+            edgeItems.length > 0
+                ? [
+                      {
+                          label: 'edges',
+                          items: edgeItems
+                      }
+                  ]
+                : []
+    };
+}
+
+function buildEdgeLogResult(edgeKey, structure) {
+    const edge = structure.edges[edgeKey];
+    if (!edge) return null;
+
+    const src = typeof edge.source === 'function' ? null : edge.source;
+    const tgt = typeof edge.target === 'function' ? null : edge.target;
+
+    const relatedArrays = [];
+    if (src && structure.nodes[src]) {
+        relatedArrays.push({ label: 'source', items: [{ type: 'node', id: src, label: src }] });
+    }
+    if (tgt && structure.nodes[tgt]) {
+        relatedArrays.push({ label: 'target', items: [{ type: 'node', id: tgt, label: tgt }] });
+    }
+
+    return {
+        mainEntry: {
+            type: 'edge',
+            id: edgeKey,
+            label: 'edge: ' + (src || '?') + ' \u2192 ' + (tgt || '?'),
+            data: edge,
+            timestamp: Date.now()
+        },
+        relatedArrays
+    };
+}
+
+function buildNavRuleLogResult(ruleId, structure) {
+    const rule = structure.navigationRules?.[ruleId];
+
+    const matchingEdgeItems = [];
+    const matchingNodeIds = new Set();
+
+    Object.keys(structure.edges).forEach(edgeKey => {
+        const edge = structure.edges[edgeKey];
+        if (edge.navigationRules && edge.navigationRules.includes(ruleId)) {
+            const src = typeof edge.source === 'function' ? '?' : edge.source;
+            const tgt = typeof edge.target === 'function' ? '?' : edge.target;
+            matchingEdgeItems.push({ type: 'edge', id: edgeKey, label: src + '\u2192' + tgt });
+            if (typeof edge.source === 'string') matchingNodeIds.add(edge.source);
+            if (typeof edge.target === 'string') matchingNodeIds.add(edge.target);
+        }
+    });
+
+    const matchingNodeItems = [...matchingNodeIds]
+        .filter(nid => structure.nodes[nid])
+        .map(nid => ({ type: 'node', id: nid, label: nid }));
+
+    const relatedArrays = [];
+    if (matchingEdgeItems.length > 0) {
+        relatedArrays.push({ label: 'edges', items: matchingEdgeItems });
+    }
+    if (matchingNodeItems.length > 0) {
+        relatedArrays.push({ label: 'nodes', items: matchingNodeItems });
+    }
+
+    return {
+        mainEntry: {
+            type: 'rule',
+            id: ruleId,
+            label: 'rule: ' + ruleId,
+            data: rule || ruleId,
+            timestamp: Date.now()
+        },
+        relatedArrays
+    };
+}
+
+// ---------------------------------------------------------------------------
+// Helper: build an edge menu item
+// ---------------------------------------------------------------------------
+
+function buildEdgeMenuItem(edgeKey, structure, state, container, consoleListEl) {
+    const edge = structure.edges[edgeKey];
+    const src = typeof edge.source === 'function' ? '(fn)' : edge.source;
+    const tgt = typeof edge.target === 'function' ? '(fn)' : edge.target;
+    const rules = (edge.navigationRules || []).join(',');
+    const label = src + ' \u2192 ' + tgt + (rules ? ' [' + rules + ']' : '');
+    return buildMenuItem({
+        type: 'edge',
+        id: edgeKey,
+        label,
+        state,
+        container,
+        showLog: true,
+        logFn: () => buildEdgeLogResult(edgeKey, structure),
+        consoleListEl,
+        structure
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Section builders
+// ---------------------------------------------------------------------------
+
+/**
+ * Console section (collapsed by default, sits at top of menu).
+ * Includes a "clear" button on the summary row.
+ */
+export function buildConsoleSection() {
+    const details = document.createElement('details');
+    details.className = 'dn-menu-console';
+
+    const summary = document.createElement('summary');
+    summary.className = 'dn-menu-summary dn-menu-summary-top';
+    summary.textContent = 'Console';
+    details.appendChild(summary);
+
+    // Clear button (appended after the summary text, inside summary)
+    const clearBtn = document.createElement('button');
+    clearBtn.className = 'dn-menu-log-btn dn-menu-clear-btn';
+    clearBtn.textContent = 'clear';
+    clearBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        e.preventDefault();
+        listEl.innerHTML = '';
+    });
+    summary.appendChild(clearBtn);
+
+    const listEl = document.createElement('div');
+    listEl.className = 'dn-menu-console-list';
+    details.appendChild(listEl);
+
+    return { element: details, listEl };
+}
+
+/**
+ * Rendered Elements section with grouped Nodes and grouped Edges.
+ * Uses lazy rendering: children are created on <details> open and
+ * destroyed on close. State persists in the menu-state Map.
+ *
+ * Nodes are grouped by dimension > division, then "All Nodes" flat list.
+ * Edges are grouped by navigation rule, then "All Edges" flat list.
+ */
+export function buildRenderedElementsSection(structure, state, container, consoleListEl, buildLabelFn) {
+    const allNodeKeys = Object.keys(structure.nodes || {});
+    const allEdgeKeys = Object.keys(structure.edges || {});
+
+    // Pre-compute edge grouping by navigation rule (cheap — just strings)
+    const ruleToEdges = new Map();
+    allEdgeKeys.forEach(edgeKey => {
+        const edge = structure.edges[edgeKey];
+        const rules = edge.navigationRules || [];
+        rules.forEach(rule => {
+            if (!ruleToEdges.has(rule)) ruleToEdges.set(rule, []);
+            ruleToEdges.get(rule).push(edgeKey);
+        });
+    });
+    const sortedRules = [...ruleToEdges.keys()].sort();
+
+    // Top-level: Rendered Elements
+    const details = makeLazyDetails(
+        'Rendered Elements',
+        parent => {
+            // --- Nodes ---
+            const nodesDetails = makeLazyDetails(
+                'Nodes (' + allNodeKeys.length + ')',
+                nodesParent => {
+                    // Group nodes by dimension > division
+                    if (structure.dimensions) {
+                        const dimKeys = Object.keys(structure.dimensions);
+                        dimKeys.forEach(dimKey => {
+                            const dim = structure.dimensions[dimKey];
+                            const dimNode = structure.nodes[dim.nodeId];
+                            const divIds = Object.keys(dim.divisions || {});
+
+                            // Collect all node IDs in this dimension for the group checkbox
+                            const dimChildItems = [];
+                            if (dimNode) dimChildItems.push({ type: 'node', id: dim.nodeId });
+                            divIds.forEach(divId => {
+                                const div = dim.divisions[divId];
+                                const divNodeId = findDivisionNodeId(structure, dimKey, divId);
+                                if (divNodeId) dimChildItems.push({ type: 'node', id: divNodeId });
+                                Object.keys(div.values || {}).forEach(leafId => {
+                                    if (structure.nodes[leafId]) dimChildItems.push({ type: 'node', id: leafId });
+                                });
+                            });
+
+                            // Dimension-level details with group checkbox
+                            const dimDetails = makeGroupDetails(
+                                dimKey +
+                                    ' (' +
+                                    dim.type +
+                                    ', ' +
+                                    divIds.length +
+                                    ' div' +
+                                    (divIds.length !== 1 ? 's' : '') +
+                                    ')',
+                                dimChildItems,
+                                state,
+                                container,
+                                dimParent => {
+                                    // The dimension node itself
+                                    if (dimNode) {
+                                        dimParent.appendChild(
+                                            buildMenuItem({
+                                                type: 'node',
+                                                id: dim.nodeId,
+                                                label: dim.nodeId + ' (dimension)',
+                                                state,
+                                                container,
+                                                showLog: true,
+                                                logFn: () => buildNodeLogResult(dim.nodeId, structure),
+                                                consoleListEl,
+                                                structure
+                                            })
+                                        );
+                                    }
+
+                                    // Each division
+                                    divIds.forEach(divId => {
+                                        const div = dim.divisions[divId];
+                                        const leafIds = Object.keys(div.values || {});
+
+                                        // Collect node IDs in this division for the group checkbox
+                                        const divChildItems = [];
+                                        const divNodeId = findDivisionNodeId(structure, dimKey, divId);
+                                        if (divNodeId) divChildItems.push({ type: 'node', id: divNodeId });
+                                        leafIds.forEach(leafId => {
+                                            if (structure.nodes[leafId])
+                                                divChildItems.push({ type: 'node', id: leafId });
+                                        });
+
+                                        const divDetails = makeGroupDetails(
+                                            divId +
+                                                ' (' +
+                                                leafIds.length +
+                                                ' item' +
+                                                (leafIds.length !== 1 ? 's' : '') +
+                                                ')',
+                                            divChildItems,
+                                            state,
+                                            container,
+                                            divParent => {
+                                                // Division node itself
+                                                if (divNodeId) {
+                                                    divParent.appendChild(
+                                                        buildMenuItem({
+                                                            type: 'node',
+                                                            id: divNodeId,
+                                                            label: divNodeId + ' (division)',
+                                                            state,
+                                                            container,
+                                                            showLog: true,
+                                                            logFn: () => buildNodeLogResult(divNodeId, structure),
+                                                            consoleListEl,
+                                                            structure
+                                                        })
+                                                    );
+                                                }
+
+                                                // Leaf nodes in this division
+                                                leafIds.forEach(leafId => {
+                                                    const node = structure.nodes[leafId];
+                                                    if (!node) return;
+                                                    const desc = buildLabelFn ? buildLabelFn(node) : leafId;
+                                                    const label =
+                                                        leafId +
+                                                        (desc !== leafId ? ' \u2014 ' + truncate(desc, 30) : '');
+                                                    divParent.appendChild(
+                                                        buildMenuItem({
+                                                            type: 'node',
+                                                            id: leafId,
+                                                            label,
+                                                            state,
+                                                            container,
+                                                            showLog: true,
+                                                            logFn: () => buildNodeLogResult(leafId, structure),
+                                                            consoleListEl,
+                                                            structure
+                                                        })
+                                                    );
+                                                });
+                                            }
+                                        );
+
+                                        dimParent.appendChild(divDetails);
+                                    });
+                                }
+                            );
+
+                            nodesParent.appendChild(dimDetails);
+                        });
+                    }
+
+                    // All Nodes flat list
+                    const allNodesDetails = makeLazyDetails(
+                        'All Nodes (' + allNodeKeys.length + ')',
+                        allParent => {
+                            allNodeKeys.forEach(nodeId => {
+                                const node = structure.nodes[nodeId];
+                                const desc = buildLabelFn ? buildLabelFn(node) : nodeId;
+                                const label = nodeId + (desc !== nodeId ? ' \u2014 ' + truncate(desc, 30) : '');
+                                allParent.appendChild(
+                                    buildMenuItem({
+                                        type: 'node',
+                                        id: nodeId,
+                                        label,
+                                        state,
+                                        container,
+                                        showLog: true,
+                                        logFn: () => buildNodeLogResult(nodeId, structure),
+                                        consoleListEl,
+                                        structure
+                                    })
+                                );
+                            });
+                        },
+                        state
+                    );
+                    nodesParent.appendChild(allNodesDetails);
+                },
+                state
+            );
+            parent.appendChild(nodesDetails);
+
+            // --- Edges ---
+            const edgesDetails = makeLazyDetails(
+                'Edges (' + allEdgeKeys.length + ')',
+                edgesParent => {
+                    // Group edges by navigation rule
+                    sortedRules.forEach(rule => {
+                        const edgeKeysForRule = ruleToEdges.get(rule);
+                        const ruleChildItems = edgeKeysForRule.map(edgeKey => ({ type: 'edge', id: edgeKey }));
+                        const ruleDetails = makeGroupDetails(
+                            rule + ' (' + edgeKeysForRule.length + ')',
+                            ruleChildItems,
+                            state,
+                            container,
+                            ruleParent => {
+                                edgeKeysForRule.forEach(edgeKey => {
+                                    ruleParent.appendChild(
+                                        buildEdgeMenuItem(edgeKey, structure, state, container, consoleListEl)
+                                    );
+                                });
+                            }
+                        );
+
+                        edgesParent.appendChild(ruleDetails);
+                    });
+
+                    // All Edges flat list
+                    const allEdgesDetails = makeLazyDetails(
+                        'All Edges (' + allEdgeKeys.length + ')',
+                        allParent => {
+                            allEdgeKeys.forEach(edgeKey => {
+                                allParent.appendChild(
+                                    buildEdgeMenuItem(edgeKey, structure, state, container, consoleListEl)
+                                );
+                            });
+                        },
+                        state
+                    );
+                    edgesParent.appendChild(allEdgesDetails);
+                },
+                state
+            );
+            parent.appendChild(edgesDetails);
+        },
+        state,
+        { summaryClass: 'dn-menu-summary-top' }
+    );
+
+    return details;
+}
+
+/**
+ * Find the node ID for a division node given dimension key and division ID.
+ */
+function findDivisionNodeId(structure, dimKey, divId) {
+    // Division nodes have derivedNode === dimKey and data[dimKey] matching
+    const nodeKeys = Object.keys(structure.nodes);
+    for (let i = 0; i < nodeKeys.length; i++) {
+        const node = structure.nodes[nodeKeys[i]];
+        if (node.derivedNode === dimKey && node.dimensionLevel === 2) {
+            // Check if this node's data value matches divId
+            if (node.data && node.data[dimKey] !== undefined && String(node.data[dimKey]) === String(divId)) {
+                return nodeKeys[i];
+            }
+            // Also check by ID pattern — sometimes the node ID is the divId itself
+            if (nodeKeys[i] === divId) {
+                return divId;
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * Source Input section: wraps Data, Props, Dimensions, Divisions.
+ * (Console is now separate at top; nav rules are grouped under Edges)
+ */
+export function buildSourceInputSection(structure, showConsoleMenu) {
+    const details = makeDetails('Source Input', { summaryClass: 'dn-menu-summary-top' });
+
+    // Data
+    if (showConsoleMenu.data) {
+        details.appendChild(buildDataSection(showConsoleMenu.data));
+    }
+
+    // Props
+    const propsEl = buildPropsSection({
+        structure: showConsoleMenu.structure,
+        input: showConsoleMenu.input,
+        rendering: showConsoleMenu.rendering
+    });
+    if (propsEl) details.appendChild(propsEl);
+
+    // Dimensions
+    details.appendChild(buildDimensionsSection(structure.dimensions));
+
+    // Divisions
+    details.appendChild(buildDivisionsSection(structure.dimensions));
+
+    return details;
+}
+
+// ---------------------------------------------------------------------------
+// Simple section builders (Data, Props, Dimensions, Divisions)
+// ---------------------------------------------------------------------------
+
+function buildDataSection(data) {
+    const count = Array.isArray(data) ? data.length + ' items' : 'object';
+    const details = makeDetails('Data (' + count + ')');
+
+    const pre = document.createElement('pre');
+    pre.className = 'dn-menu-pre';
+    const code = document.createElement('code');
+    code.textContent = JSON.stringify(data, null, 2);
+    pre.appendChild(code);
+    details.appendChild(pre);
+
+    return details;
+}
+
+function buildPropsSection(propsConfig) {
+    const { structure: s, input: i, rendering: r } = propsConfig;
+    if (!s && !i && !r) return null;
+
+    const details = makeDetails('Props');
+
+    if (s) {
+        const sub = makeDetails('structure');
+        const pre = document.createElement('pre');
+        pre.className = 'dn-menu-pre';
+        pre.textContent = JSON.stringify(s, null, 2);
+        sub.appendChild(pre);
+        details.appendChild(sub);
+    }
+    if (i) {
+        const sub = makeDetails('input');
+        const pre = document.createElement('pre');
+        pre.className = 'dn-menu-pre';
+        pre.textContent = JSON.stringify(i, null, 2);
+        sub.appendChild(pre);
+        details.appendChild(sub);
+    }
+    if (r) {
+        const sub = makeDetails('rendering');
+        const pre = document.createElement('pre');
+        pre.className = 'dn-menu-pre';
+        pre.textContent = JSON.stringify(r, null, 2);
+        sub.appendChild(pre);
+        details.appendChild(sub);
+    }
+
+    return details;
+}
+
+function buildDimensionsSection(dimensions) {
+    const dimKeys = dimensions ? Object.keys(dimensions) : [];
+    const details = makeDetails('Dimensions (' + dimKeys.length + ')');
+
+    dimKeys.forEach(key => {
+        const dim = dimensions[key];
+        const divCount = Object.keys(dim.divisions || {}).length;
+        const item = document.createElement('div');
+        item.className = 'dn-menu-info';
+        item.textContent = key + ' (' + dim.type + ', ' + divCount + ' div' + (divCount !== 1 ? 's' : '') + ')';
+        details.appendChild(item);
+    });
+
+    if (dimKeys.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'dn-menu-info dn-menu-empty';
+        empty.textContent = '(none)';
+        details.appendChild(empty);
+    }
+
+    return details;
+}
+
+function buildDivisionsSection(dimensions) {
+    const allDivisions = [];
+    if (dimensions) {
+        Object.keys(dimensions).forEach(dimKey => {
+            const dim = dimensions[dimKey];
+            Object.keys(dim.divisions || {}).forEach(divId => {
+                const div = dim.divisions[divId];
+                const count = Object.keys(div.values || {}).length;
+                allDivisions.push({ dimKey, divId, count });
+            });
+        });
+    }
+
+    const details = makeDetails('Divisions (' + allDivisions.length + ')');
+
+    allDivisions.forEach(({ dimKey, divId, count }) => {
+        const item = document.createElement('div');
+        item.className = 'dn-menu-info';
+        item.textContent = dimKey + ': ' + divId + ' (' + count + ')';
+        details.appendChild(item);
+    });
+
+    if (allDivisions.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'dn-menu-info dn-menu-empty';
+        empty.textContent = '(none)';
+        details.appendChild(empty);
+    }
+
+    return details;
+}
+
+function truncate(str, max) {
+    if (str.length <= max) return str;
+    return str.slice(0, max - 1) + '\u2026';
+}