@data-navigator/inspector 1.0.3 → 1.1.1

package/src/tree-graph.js

@@ -8,10 +8,7 @@ import { schemeTableau10 } from 'd3-scale-chromatic';
 import { create } from 'd3-selection';
 
 export function TreeGraph(
-    {
-        nodes,
-        links
-    },
+    { nodes, links },
     {
         nodeId = d => d.id,
         nodeGroup,
@@ -22,7 +19,8 @@ export function TreeGraph(
         height = 400,
         dimensions,
         description,
-        hide
+        hide,
+        idPrefix = ''
     } = {}
 ) {
     // Compute values (same pattern as ForceGraph).
@@ -31,15 +29,19 @@ export function TreeGraph(
 
     // Build a lookup from node id to original node data.
     const nodeById = {};
-    nodes.forEach((n, i) => { nodeById[N[i]] = n; });
+    nodes.forEach((n, i) => {
+        nodeById[N[i]] = n;
+    });
 
     // Replace input nodes with positioned objects.
     nodes = map(nodes, (_, i) => ({ id: N[i], x: 0, y: 0 }));
     const nodeObjById = {};
-    nodes.forEach(n => { nodeObjById[n.id] = n; });
+    nodes.forEach(n => {
+        nodeObjById[n.id] = n;
+    });
 
     // Map links to source/target ids.
-    const linkData = map(links, (l) => ({
+    const linkData = map(links, l => ({
         source: intern(l.source),
         target: intern(l.target),
         navigationRules: l.navigationRules || []
@@ -68,7 +70,9 @@ export function TreeGraph(
     // Map each sibling rule name to its pair for splitting merged edges.
     const ruleToPair = {};
     siblingRulePairs.forEach(pair => {
-        pair.forEach(r => { ruleToPair[r] = pair.join(','); });
+        pair.forEach(r => {
+            ruleToPair[r] = pair.join(',');
+        });
     });
 
     // Classify links. Sibling links with merged rules (multiple pairs)
@@ -105,7 +109,10 @@ export function TreeGraph(
 
     nodes.forEach(n => {
         const orig = nodeById[n.id];
-        if (!orig) { otherNodes.push(n); return; }
+        if (!orig) {
+            otherNodes.push(n);
+            return;
+        }
         const dl = orig.dimensionLevel;
         const dn = orig.derivedNode;
         if (dl === 0) level0.push(n);
@@ -139,7 +146,9 @@ export function TreeGraph(
 
     // Organize level2 nodes by their parent dimension.
     const divisionsByDim = {};
-    dimOrder.forEach(key => { divisionsByDim[key] = []; });
+    dimOrder.forEach(key => {
+        divisionsByDim[key] = [];
+    });
     level2.forEach(n => {
         const orig = nodeById[n.id];
         if (orig && orig.derivedNode && divisionsByDim[orig.derivedNode]) {
@@ -160,9 +169,10 @@ export function TreeGraph(
     const upperSpacing = upperRows > 1 ? upperHeight / (upperRows - 1) : upperHeight;
     const leafGap = usableHeight * 0.05; // small gap between hierarchy and leaves
     const leafYPos = padding.top + upperHeight + leafGap;
+    const leafAreaCenter = (leafYPos + height - padding.bottom) / 2;
 
     let currentRow = 0;
-    const yFor = (row) => padding.top + row * upperSpacing;
+    const yFor = row => padding.top + row * upperSpacing;
 
     // Level 0
     if (hasLevel0) {
@@ -215,13 +225,13 @@ export function TreeGraph(
     // Leaf nodes
     const leafY = leafYPos;
     if (dimOrder.length === 0 || !dimensions) {
-        // No dimensions — flat row
+        // No dimensions — flat row, centered in leaf area
         leafNodes.forEach((n, i) => {
             n.x = padding.left + (usableWidth / (leafNodes.length + 1)) * (i + 1);
-            n.y = leafY;
+            n.y = leafAreaCenter;
         });
     } else if (dimOrder.length === 1) {
-        // Single dimension — spread leaves under their division parent
+        // Single dimension — spread leaves under their division parent, centered in leaf area
         const key = dimOrder[0];
         const dim = dimensions[key];
         const divIds = Object.keys(dim.divisions || {});
@@ -235,22 +245,30 @@ export function TreeGraph(
                 const n = nodeObjById[leafId];
                 if (n) {
                     n.x = parentX - spreadWidth / 2 + leafSpacing * (i + 1);
-                    n.y = leafY;
+                    n.y = leafAreaCenter;
                 }
             });
         });
     } else {
         // 2+ dimensions — grid layout
-        // First dimension controls columns, second controls rows
-        const dim1Key = dimOrder[0];
-        const dim2Key = dimOrder[1];
-        const dim1 = dimensions[dim1Key];
-        const dim2 = dimensions[dim2Key];
-        const div1Ids = Object.keys(dim1.divisions || {});
-        const div2Ids = Object.keys(dim2.divisions || {});
-
-        const cols = div1Ids.length || 1;
-        const rows = div2Ids.length || 1;
+        // Prefer horizontal spread: ensure cols >= rows by swapping dims if needed.
+        // This prevents single-column layouts (e.g. when dim1 is compressed to 1 division).
+        let dim1Key = dimOrder[0];
+        let dim2Key = dimOrder[1];
+        let dim1 = dimensions[dim1Key];
+        let dim2 = dimensions[dim2Key];
+        let div1Ids = Object.keys(dim1.divisions || {});
+        let div2Ids = Object.keys(dim2.divisions || {});
+
+        let cols = div1Ids.length || 1;
+        let rows = div2Ids.length || 1;
+
+        if (cols < rows) {
+            [dim1Key, dim2Key] = [dim2Key, dim1Key];
+            [dim1, dim2] = [dim2, dim1];
+            [div1Ids, div2Ids] = [div2Ids, div1Ids];
+            [cols, rows] = [rows, cols];
+        }
 
         // Grid occupies the full leaf area
         const gridTop = leafY;
@@ -298,7 +316,7 @@ export function TreeGraph(
 
     // Other nodes (exit, etc.) — placed bottom-right
     otherNodes.forEach((n, i) => {
-        n.x = width - padding.right - (i * nodeRadius * 3);
+        n.x = width - padding.right - i * nodeRadius * 3;
         n.y = height - padding.bottom;
     });
 
@@ -316,17 +334,21 @@ export function TreeGraph(
     // Wrap-around (circular) siblings arc below/right with a larger curve.
     // When multiple edges share the same node pair, each gets a larger arc.
     const edgePairCounts = {};
-    const siblingArc = (d) => {
+    const siblingArc = d => {
         const s = nodeObjById[d.source];
         const t = nodeObjById[d.target];
         if (!s || !t) return '';
-        const sx = s.x, sy = s.y, tx = t.x, ty = t.y;
-        const dx = tx - sx, dy = ty - sy;
+        const sx = s.x,
+            sy = s.y,
+            tx = t.x,
+            ty = t.y;
+        const dx = tx - sx,
+            dy = ty - sy;
         const dist = Math.sqrt(dx * dx + dy * dy);
         const isHorizontal = Math.abs(dx) > Math.abs(dy);
         // Detect wrap-around: source is to the right of target (horizontal)
         // or below target (vertical) — these are circular edges.
-        const isWrap = isHorizontal ? (sx > tx) : (sy > ty);
+        const isWrap = isHorizontal ? sx > tx : sy > ty;
         // Track regular and wrap arcs separately — they curve in opposite
         // directions so only same-direction arcs need stacking.
         const pairKey = [d.source, d.target].sort().join('::') + (isWrap ? '::wrap' : '::reg');
@@ -353,6 +375,7 @@ export function TreeGraph(
         .selectAll('path')
         .data(siblingLinks)
         .join('path')
+        .attr('id', d => idPrefix + 'svgedge' + d.source + '-' + d.target + '-' + (d.navigationRules?.[0] || ''))
         .attr('d', siblingArc)
         .attr('fill', 'none')
         .attr('stroke', '#888')
@@ -366,6 +389,7 @@ export function TreeGraph(
         .selectAll('line')
         .data(parentChildLinks)
         .join('line')
+        .attr('id', d => idPrefix + 'svgedge' + d.source + '-' + d.target)
         .attr('x1', d => nodeObjById[d.source]?.x || 0)
         .attr('y1', d => nodeObjById[d.source]?.y || 0)
         .attr('x2', d => nodeObjById[d.target]?.x || 0)
@@ -389,10 +413,11 @@ export function TreeGraph(
         .attr('r', nodeRadius)
         .attr('role', 'presentation');
 
-    if (G) node.attr('fill', ({ id }) => {
-        const idx = N.indexOf(id);
-        return idx >= 0 ? color(G[idx]) : '#999';
-    });
+    if (G)
+        node.attr('fill', ({ id }) => {
+            const idx = N.indexOf(id);
+            return idx >= 0 ? color(G[idx]) : '#999';
+        });
 
     function intern(value) {
         return value !== null && typeof value === 'object' ? value.valueOf() : value;

package/style.css

@@ -0,0 +1,295 @@
+/* Inspector default styles */
+
+.dn-inspector-wrapper {
+    position: relative;
+}
+
+.dn-inspector-hidden {
+    display: none;
+}
+
+.dn-inspector-tooltip {
+    position: absolute;
+    padding: 10px;
+    background-color: white;
+    border: 1px solid black;
+    width: 200px;
+    top: 0;
+    left: 0;
+    font-size: 0.85em;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.dn-inspector-focus-indicator {
+    pointer-events: none;
+}
+
+.dn-inspector-node {
+    position: absolute;
+    padding: 0px;
+    margin: 0px;
+    overflow: visible;
+    pointer-events: none;
+    background: transparent;
+    border: none;
+}
+
+.dn-inspector-node:focus {
+    outline: 2px solid #1e3369;
+}
+
+/* Dynamic edges drawn on-demand for virtual/excluded edges */
+.dn-inspector-dynamic-edge {
+    pointer-events: none;
+}
+
+/* ==== Console Menu ====
+ *
+ * All selectors below use `.dn-inspector-menu` as a prefix for two reasons:
+ *   1. Scoping — these styles only affect the inspector menu
+ *   2. Specificity — overrides global UI framework styles (e.g. VitePress sets
+ *      `summary { min-height: 44px }` and `button { min-width: 44px }`)
+ */
+
+.dn-inspector-menu {
+    min-width: 500px;
+    max-height: 450px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+    font-size: 12px;
+    font-family: monospace;
+    line-height: 1.3;
+    padding: 2px;
+    margin-top: 4px;
+    background: #fff;
+}
+
+/* Hidden utility */
+.dn-inspector-menu .dn-menu-hidden {
+    display: none !important;
+}
+
+/* ---- Caret summaries ---- */
+
+.dn-inspector-menu summary {
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 2px;
+    border: none;
+    border-radius: 0;
+}
+
+.dn-inspector-menu summary::-webkit-details-marker {
+    display: none;
+}
+
+.dn-inspector-menu summary:focus {
+    outline: 2px solid #1e3369;
+    outline-offset: 0;
+}
+
+/* Group checkbox inside summary */
+.dn-inspector-menu .dn-menu-group-checkbox {
+    margin: 0 2px 0 0;
+    flex-shrink: 0;
+    width: 13px;
+    height: 13px;
+    min-width: 13px;
+    min-height: 13px;
+    padding: 0;
+}
+
+/* Caret indicator */
+.dn-inspector-menu summary::before {
+    content: '\25B8'; /* right-pointing triangle */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 10px;
+    flex-shrink: 0;
+}
+
+.dn-inspector-menu details[open] > summary::before {
+    content: '\25BE'; /* down-pointing triangle */
+}
+
+/* Top-level section summaries */
+.dn-inspector-menu .dn-menu-summary-top {
+    font-weight: bold;
+    font-size: 12px;
+}
+
+/* Nested indentation: each details level indents its contents */
+.dn-inspector-menu details details {
+    padding-left: 12px;
+}
+
+.dn-inspector-menu details details details {
+    padding-left: 12px;
+}
+
+/* ---- Menu items (checkbox + label + log btn) ---- */
+
+.dn-inspector-menu .dn-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding: 0 2px 0 6px;
+    min-height: 20px;
+    cursor: default;
+    margin-left: 32px;
+}
+
+.dn-inspector-menu .dn-menu-item:hover {
+    background: #f0f0f0;
+}
+
+.dn-inspector-menu .dn-menu-item input[type='checkbox'] {
+    margin: 0;
+    flex-shrink: 0;
+    width: 13px;
+    height: 13px;
+    min-width: 13px;
+    min-height: 13px;
+    padding: 0;
+}
+
+.dn-inspector-menu .dn-menu-item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+}
+
+.dn-inspector-menu .dn-menu-log-btn {
+    font-size: 10px;
+    font-family: monospace;
+    padding: 0 4px;
+    line-height: 16px;
+    min-width: auto;
+    min-height: auto;
+    cursor: pointer;
+    border: 1px solid #bbb;
+    background: #f5f5f5;
+    border-radius: 2px;
+    flex-shrink: 0;
+    color: #555;
+}
+
+.dn-inspector-menu .dn-menu-log-btn:hover {
+    background: #e0e0e0;
+    color: #222;
+}
+
+.dn-inspector-menu .dn-menu-log-btn:focus {
+    outline: 2px solid #1e3369;
+    outline-offset: 0;
+}
+
+/* Console clear button */
+.dn-inspector-menu .dn-menu-clear-btn {
+    margin-left: auto;
+}
+
+/* ---- Informational items (no checkbox) ---- */
+
+.dn-inspector-menu .dn-menu-info {
+    padding: 0 2px 0 30px;
+    font-size: 11px;
+    min-height: 18px;
+    display: flex;
+    align-items: center;
+}
+
+.dn-inspector-menu .dn-menu-empty {
+    color: #999;
+    font-style: italic;
+}
+
+/* ---- Data / Props pre blocks ---- */
+
+.dn-inspector-menu .dn-menu-pre {
+    max-height: 150px;
+    overflow: auto;
+    font-size: 10px;
+    margin: 2px 0 2px 30px;
+    padding: 3px;
+    background: #fafafa;
+    border: 1px solid #eee;
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.25;
+}
+
+/* ---- Console section ---- */
+
+.dn-inspector-menu .dn-menu-console-list {
+    max-height: 180px;
+    overflow-y: auto;
+}
+
+.dn-inspector-menu .dn-menu-console-list:empty::after {
+    content: '(empty)';
+    color: #999;
+    padding: 2px 30px;
+    display: block;
+    font-style: italic;
+    font-size: 11px;
+}
+
+.dn-inspector-menu .dn-menu-console-entry {
+    border-bottom: 1px solid #f0f0f0;
+}
+
+/* ---- Inline expandable arrays ---- */
+
+.dn-inspector-menu .dn-menu-inline-array {
+    font-size: 11px;
+    padding: 0 2px;
+    min-height: 18px;
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+}
+
+.dn-inspector-menu .dn-menu-array-toggle {
+    color: #666;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.dn-inspector-menu .dn-menu-array-collapsed {
+    color: #08c;
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+
+.dn-inspector-menu .dn-menu-array-collapsed:hover {
+    color: #005fa3;
+}
+
+.dn-inspector-menu .dn-menu-array-expanded {
+    color: #333;
+}
+
+.dn-inspector-menu .dn-menu-array-chip {
+    color: #08c;
+    cursor: default;
+    padding: 0 1px;
+    border-radius: 2px;
+}
+
+.dn-inspector-menu .dn-menu-array-chip:hover {
+    background: #e8f4fd;
+    color: #005fa3;
+}