@data-navigator/inspector 1.0.3 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@data-navigator/inspector",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "type": "module",
     "author": "Frank Elavsky",
     "license": "MIT",
@@ -9,6 +9,7 @@
     "module": "./src/index.js",
     "files": [
         "src/**/*",
+        "style.css",
         "README.md",
         "LICENSE"
     ],
@@ -16,7 +17,8 @@
         ".": {
             "import": "./src/index.js",
             "default": "./src/index.js"
-        }
+        },
+        "./style.css": "./style.css"
     },
     "keywords": [
         "visualization",

package/src/console-menu.js

@@ -0,0 +1,79 @@
+/**
+ * Console menu orchestrator.
+ * Creates the menu DOM, wires shared state to SVG highlighting and events.
+ *
+ * Layout (all collapsed by default):
+ *   <details> Inspector Menu (wrapper)
+ *     1. Console (collapsed, at top, with clear button)
+ *     2. Rendered Elements (collapsed)
+ *        - Nodes (grouped by dimension > division, then All Nodes)
+ *        - Edges (grouped by nav rule, then All Edges)
+ *     3. Source Input (collapsed)
+ *        - Data, Props, Dimensions, Divisions
+ */
+
+import { createMenuState } from './menu-state.js';
+import { connectStateToSvg } from './svg-highlight.js';
+import { buildConsoleSection, buildRenderedElementsSection, buildSourceInputSection } from './menu-sections.js';
+
+/**
+ * Create and mount the console menu.
+ *
+ * @param {Object} opts
+ * @param {Object} opts.structure - The data-navigator structure
+ * @param {SVGElement} opts.svgEl - The inspector SVG element
+ * @param {HTMLElement} opts.container - The root container (for event dispatching)
+ * @param {HTMLElement} opts.wrapperEl - The .dn-inspector-wrapper element
+ * @param {Object} opts.showConsoleMenu - The showConsoleMenu prop value
+ * @param {SVGCircleElement} opts.indicatorEl - The focus indicator circle
+ * @param {Object} opts.edgeSvgIdMap - edge key -> array of SVG element IDs
+ * @param {Function} opts.buildLabelFn - The buildLabel function for node labels
+ * @returns {{ state: Object, menuEl: HTMLElement, destroy: Function }}
+ */
+export function createConsoleMenu({
+    structure,
+    svgEl,
+    container,
+    wrapperEl,
+    showConsoleMenu,
+    indicatorEl,
+    edgeSvgIdMap,
+    buildLabelFn
+}) {
+    const state = createMenuState();
+
+    // Outer wrapper: collapsible "Inspector Menu" section
+    const outerDetails = document.createElement('details');
+    outerDetails.className = 'dn-inspector-menu';
+    const outerSummary = document.createElement('summary');
+    outerSummary.className = 'dn-menu-summary dn-menu-summary-top';
+    outerSummary.textContent = 'Inspector Menu';
+    outerDetails.appendChild(outerSummary);
+
+    // 1. Console (collapsed, at top with clear button)
+    const { element: consoleEl, listEl: consoleListEl } = buildConsoleSection();
+    outerDetails.appendChild(consoleEl);
+
+    // 2. Rendered Elements (collapsed — Nodes grouped by dim/div, Edges grouped by nav rule)
+    const renderedEl = buildRenderedElementsSection(structure, state, container, consoleListEl, buildLabelFn);
+    outerDetails.appendChild(renderedEl);
+
+    // 3. Source Input (collapsed — Data, Props, Dimensions, Divisions)
+    const sourceInputEl = buildSourceInputSection(structure, showConsoleMenu);
+    outerDetails.appendChild(sourceInputEl);
+
+    // Mount
+    wrapperEl.appendChild(outerDetails);
+
+    // Wire state to SVG highlighting
+    const unsubSvg = connectStateToSvg(svgEl, state, edgeSvgIdMap, structure, indicatorEl);
+
+    return {
+        state,
+        menuEl: outerDetails,
+        destroy() {
+            unsubSvg();
+            wrapperEl.removeChild(outerDetails);
+        }
+    };
+}

package/src/force-graph.js

@@ -1,7 +1,7 @@
 // Copyright 2021-2024 Observable, Inc.
 // Released under the ISC license.
 // https://observablehq.com/@d3/force-directed-graph
-// Adapted for data-navigator-inspector with modular D3 imports.
+// Adapted for @data-navigator/inspector with modular D3 imports.
 
 import { map, sort } from 'd3-array';
 import { drag } from 'd3-drag';
@@ -38,7 +38,8 @@ export function ForceGraph(
         height = 400,
         invalidation,
         description,
-        hide
+        hide,
+        idPrefix = ''
     } = {}
 ) {
     // Compute values.
@@ -96,7 +97,8 @@ export function ForceGraph(
         .attr('stroke-linecap', linkStrokeLinecap)
         .selectAll('line')
         .data(links)
-        .join('line');
+        .join('line')
+        .attr('id', (_, i) => idPrefix + 'svgedge' + LS[i] + '-' + LT[i]);
 
     const node = svg
         .append('g')

package/src/inspector.js

@@ -1,5 +1,6 @@
 import { ForceGraph } from './force-graph.js';
 import { TreeGraph } from './tree-graph.js';
+import { createConsoleMenu } from './console-menu.js';
 
 /**
  * Converts a structure's nodes or edges object into an array for D3.
@@ -70,6 +71,9 @@ const showTooltip = (node, tooltipEl, graphWidth, graphHeight, colorBy) => {
     const bbox = tooltipEl.getBoundingClientRect();
     const yOffset = bbox.height / 2;
     tooltipEl.style.textAlign = 'left';
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.left = 0;
+    tooltipEl.style.top = 0;
     tooltipEl.style.transform = `translate(${graphWidth}px,${graphHeight / 2 - yOffset}px)`;
 };
 
@@ -86,8 +90,8 @@ const hideTooltip = (tooltipEl, indicatorEl) => {
 /**
  * Moves the SVG focus indicator circle to the target node.
  */
-const highlightNode = (nodeId, svgEl, indicatorEl) => {
-    let target = svgEl.querySelector('#svg' + nodeId);
+const highlightNode = (nodeId, svgEl, indicatorEl, idPrefix) => {
+    let target = svgEl.querySelector('#' + idPrefix + nodeId);
     if (!target || !indicatorEl) return;
     indicatorEl.setAttribute('cx', target.getAttribute('cx'));
     indicatorEl.setAttribute('cy', target.getAttribute('cy'));
@@ -125,8 +129,13 @@ const createFocusIndicator = (svgEl, id) => {
  * @param {string[]} [options.edgeExclusions=[]] - Edge IDs to exclude from the graph
  * @param {string[]} [options.nodeInclusions=[]] - Extra pseudo-node IDs to include
  * @param {'force'|'tree'} [options.mode='force'] - Visualization mode: 'force' for force-directed, 'tree' for hierarchy layout
+ * @param {Object} [options.showConsoleMenu] - Optional console menu configuration
+ * @param {Array} options.showConsoleMenu.data - Required: the raw input dataset
+ * @param {Object} [options.showConsoleMenu.structure] - Optional: structure options for display
+ * @param {Object} [options.showConsoleMenu.input] - Optional: input options for display
+ * @param {Object} [options.showConsoleMenu.rendering] - Optional: rendering options for display
  *
- * @returns {{ svg: SVGElement, highlight: Function, clear: Function, destroy: Function }}
+ * @returns {{ svg: SVGElement, highlight: Function, clear: Function, destroy: Function, menuState?: Object }}
  */
 export function Inspector({
     structure,
@@ -136,7 +145,8 @@ export function Inspector({
     nodeRadius = 5,
     edgeExclusions = [],
     nodeInclusions = [],
-    mode = 'force'
+    mode = 'force',
+    showConsoleMenu
 }) {
     const rootEl = typeof container === 'string' ? document.getElementById(container) : container;
     const rootId = rootEl.id || 'dn-inspector-' + Math.random().toString(36).slice(2, 8);
@@ -147,24 +157,21 @@ export function Inspector({
     const graphHeight = mode === 'tree' ? Math.round(size * 1.5) : size;
     const nodeArray = convertToArray(structure.nodes, nodeInclusions);
     const linkArray = convertToArray(structure.edges, [], edgeExclusions);
+    const idPrefix = rootId + '-';
     const graphOptions = {
         nodeId: d => d.id,
         nodeGroup: d => (colorBy === 'dimensionLevel' ? d.dimensionLevel : d.data?.[colorBy]),
         width: graphWidth,
         height: graphHeight,
         nodeRadius,
-        hide: true
+        hide: true,
+        idPrefix
     };
 
-    const graph = mode === 'tree'
-        ? TreeGraph(
-            { nodes: nodeArray, links: linkArray },
-            { ...graphOptions, dimensions: structure.dimensions }
-          )
-        : ForceGraph(
-            { nodes: nodeArray, links: linkArray },
-            graphOptions
-          );
+    const graph =
+        mode === 'tree'
+            ? TreeGraph({ nodes: nodeArray, links: linkArray }, { ...graphOptions, dimensions: structure.dimensions })
+            : ForceGraph({ nodes: nodeArray, links: linkArray }, graphOptions);
 
     // Create wrapper structure
     const wrapperEl = document.createElement('div');
@@ -186,11 +193,12 @@ export function Inspector({
 
     rootEl.appendChild(wrapperEl);
 
-    // Assign IDs to SVG circles for targeting
+    // Assign IDs to SVG circles for targeting (prefixed to avoid collisions)
     const svgEl = graphContainer.querySelector('svg');
+    const nodeIdPrefix = idPrefix + 'svg';
     graphContainer.querySelectorAll('circle').forEach(c => {
         if (c.__data__?.id) {
-            c.id = 'svg' + c.__data__.id;
+            c.id = nodeIdPrefix + c.__data__.id;
         }
         c.addEventListener('mousemove', e => {
             if (e.target?.__data__?.id) {
@@ -206,11 +214,46 @@ export function Inspector({
     // Create focus indicator
     const indicatorEl = createFocusIndicator(svgEl, rootId);
 
+    // Build console menu if requested
+    let menu = null;
+    if (showConsoleMenu) {
+        // Build edge-to-SVG-ID mapping by iterating all SVG edge elements
+        // and matching their IDs to structure edge keys (avoids fragile CSS selectors)
+        const edgeSvgIdMap = {};
+        const allSvgEdgeEls = svgEl.querySelectorAll('line[id], path[id]');
+        Object.keys(structure.edges).forEach(edgeKey => {
+            const edge = structure.edges[edgeKey];
+            const src = typeof edge.source === 'function' ? null : edge.source;
+            const tgt = typeof edge.target === 'function' ? null : edge.target;
+            if (src && tgt) {
+                const prefix = rootId + '-svgedge' + src + '-' + tgt;
+                const matched = [];
+                allSvgEdgeEls.forEach(el => {
+                    if (el.id === prefix || el.id.startsWith(prefix + '-')) {
+                        matched.push(el.id);
+                    }
+                });
+                edgeSvgIdMap[edgeKey] = matched;
+            }
+        });
+
+        menu = createConsoleMenu({
+            structure,
+            svgEl,
+            container: rootEl,
+            wrapperEl,
+            showConsoleMenu,
+            indicatorEl,
+            edgeSvgIdMap,
+            buildLabelFn: node => buildLabel(node, colorBy)
+        });
+    }
+
     // Public API
     return {
         svg: svgEl,
         highlight(nodeId) {
-            highlightNode(nodeId, svgEl, indicatorEl);
+            highlightNode(nodeId, svgEl, indicatorEl, nodeIdPrefix);
             if (structure.nodes[nodeId]) {
                 showTooltip(structure.nodes[nodeId], tooltipEl, graphWidth, graphHeight, colorBy);
             }
@@ -219,7 +262,9 @@ export function Inspector({
             hideTooltip(tooltipEl, indicatorEl);
         },
         destroy() {
+            if (menu) menu.destroy();
             rootEl.removeChild(wrapperEl);
-        }
+        },
+        menuState: menu ? menu.state : undefined
     };
 }

package/src/menu-events.js

@@ -0,0 +1,28 @@
+/**
+ * CustomEvent name constants and dispatch helper for the inspector console menu.
+ * All events are dispatched on the container element with `bubbles: true`.
+ */
+
+export const EVENTS = {
+    ITEM_HOVER: 'dn-inspector:item-hover',
+    ITEM_UNHOVER: 'dn-inspector:item-unhover',
+    ITEM_CHECK: 'dn-inspector:item-check',
+    ITEM_UNCHECK: 'dn-inspector:item-uncheck',
+    ITEM_LOG: 'dn-inspector:item-log',
+    SELECTION_CHANGE: 'dn-inspector:selection-change'
+};
+
+/**
+ * Dispatch a CustomEvent on the given container element.
+ * @param {HTMLElement} container
+ * @param {string} eventName - One of the EVENTS constants
+ * @param {Object} detail - Event detail payload
+ */
+export function dispatch(container, eventName, detail) {
+    container.dispatchEvent(
+        new CustomEvent(eventName, {
+            bubbles: true,
+            detail
+        })
+    );
+}