@data-navigator/inspector 1.0.2 → 1.1.0

package/src/tree-graph.js

@@ -22,7 +22,8 @@ export function TreeGraph(
         height = 400,
         dimensions,
         description,
-        hide
+        hide,
+        idPrefix = ''
     } = {}
 ) {
     // Compute values (same pattern as ForceGraph).
@@ -55,15 +56,24 @@ export function TreeGraph(
     if (G && nodeGroups === undefined) nodeGroups = sort(G);
     const color = nodeGroup == null ? null : scaleOrdinal(nodeGroups, colors);
 
-    // Build set of parent-child navigation rule names.
+    // Build set of parent-child and sibling navigation rule names.
     const parentChildRules = new Set(['parent', 'child']);
+    const siblingRulePairs = [['left', 'right']]; // default pair
     if (dimensions) {
         Object.values(dimensions).forEach(dim => {
             (dim.navigationRules?.parent_child || []).forEach(r => parentChildRules.add(r));
+            const ss = dim.navigationRules?.sibling_sibling;
+            if (ss && ss.length === 2) siblingRulePairs.push(ss);
         });
     }
+    // Map each sibling rule name to its pair for splitting merged edges.
+    const ruleToPair = {};
+    siblingRulePairs.forEach(pair => {
+        pair.forEach(r => { ruleToPair[r] = pair.join(','); });
+    });
 
-    // Classify links.
+    // Classify links. Sibling links with merged rules (multiple pairs)
+    // are split into one entry per distinct pair so each gets its own arc.
     const parentChildLinks = [];
     const siblingLinks = [];
     linkData.forEach(l => {
@@ -75,7 +85,15 @@ export function TreeGraph(
         if (isParentChild) {
             parentChildLinks.push(l);
         } else {
-            siblingLinks.push(l);
+            // Split by distinct sibling rule pairs.
+            const seenPairs = new Set();
+            rules.forEach(r => {
+                const pairKey = ruleToPair[r] || r;
+                if (!seenPairs.has(pairKey)) {
+                    seenPairs.add(pairKey);
+                    siblingLinks.push({ source: l.source, target: l.target, navigationRules: [r] });
+                }
+            });
         }
     });
 
@@ -138,10 +156,11 @@ export function TreeGraph(
 
     const hasLevel0 = level0.length > 0;
     const upperRows = (hasLevel0 ? 1 : 0) + 1 + 1; // l0?, l1, l2
-    // Upper hierarchy gets 40% of height, leaves get 60%
-    const upperHeight = usableHeight * 0.4;
+    // Upper hierarchy gets 25% of height, leaves get the rest after a gap
+    const upperHeight = usableHeight * 0.25;
     const upperSpacing = upperRows > 1 ? upperHeight / (upperRows - 1) : upperHeight;
-    const leafYPos = padding.top + usableHeight * 0.85;
+    const leafGap = usableHeight * 0.05; // small gap between hierarchy and leaves
+    const leafYPos = padding.top + upperHeight + leafGap;
 
     let currentRow = 0;
     const yFor = (row) => padding.top + row * upperSpacing;
@@ -234,17 +253,18 @@ export function TreeGraph(
         const cols = div1Ids.length || 1;
         const rows = div2Ids.length || 1;
 
-        // Grid occupies the leaf area but may expand vertically
-        const gridTop = leafY - (leafY - yFor(currentRow - 1)) * 0.15;
+        // Grid occupies the full leaf area
+        const gridTop = leafY;
         const gridBottom = height - padding.bottom;
         const gridHeight = gridBottom - gridTop;
         const colSpacing = usableWidth / (cols + 1);
         const rowSpacingGrid = gridHeight / (rows + 1);
 
+        // Group leaves by their grid cell so we can spread co-located nodes.
+        const cellGroups = {};
         leafNodes.forEach(n => {
             const ld = leafDivisions[n.id];
             if (!ld) {
-                // Unaffiliated leaf — place to the right
                 n.x = width - padding.right;
                 n.y = leafY;
                 return;
@@ -253,8 +273,27 @@ export function TreeGraph(
             const rowDivId = ld[dim2Key];
             const colIdx = div1Ids.indexOf(colDivId);
             const rowIdx = div2Ids.indexOf(rowDivId);
-            n.x = padding.left + colSpacing * ((colIdx >= 0 ? colIdx : 0) + 1);
-            n.y = gridTop + rowSpacingGrid * ((rowIdx >= 0 ? rowIdx : 0) + 1);
+            const cellKey = `${colIdx},${rowIdx}`;
+            if (!cellGroups[cellKey]) cellGroups[cellKey] = { colIdx, rowIdx, nodes: [] };
+            cellGroups[cellKey].nodes.push(n);
+        });
+        // Position each group, spreading nodes within shared cells.
+        const cellPad = Math.min(colSpacing, rowSpacingGrid) * 0.6;
+        Object.values(cellGroups).forEach(({ colIdx, rowIdx, nodes: cellNodes }) => {
+            const cx = padding.left + colSpacing * (colIdx + 1);
+            const cy = gridTop + rowSpacingGrid * (rowIdx + 1);
+            if (cellNodes.length === 1) {
+                cellNodes[0].x = cx;
+                cellNodes[0].y = cy;
+            } else {
+                // Spread vertically within the cell (matches row-based dim2)
+                const spread = cellPad;
+                const step = spread / (cellNodes.length - 1);
+                cellNodes.forEach((n, i) => {
+                    n.x = cx;
+                    n.y = cy - spread / 2 + step * i;
+                });
+            }
         });
     }
 
@@ -276,6 +315,8 @@ export function TreeGraph(
     // Draw sibling links as arced paths (dashed, behind parent-child links).
     // Regular siblings arc above (horizontal) or left (vertical).
     // 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 s = nodeObjById[d.source];
         const t = nodeObjById[d.target];
@@ -287,8 +328,14 @@ export function TreeGraph(
         // 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);
-        // Arc offset scales with distance but stays subtle
-        const arcAmount = Math.min(dist * 0.3, 40);
+        // 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');
+        const edgeIndex = edgePairCounts[pairKey] || 0;
+        edgePairCounts[pairKey] = edgeIndex + 1;
+        // Arc offset scales with distance; increase by 20% for each additional same-direction edge
+        const arcFraction = 0.3 + edgeIndex * 0.2;
+        const arcAmount = Math.min(dist * arcFraction, 40 + edgeIndex * 25);
         const midX = (sx + tx) / 2;
         const midY = (sy + ty) / 2;
         let cx, cy;
@@ -307,6 +354,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')
@@ -320,6 +368,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)

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;
+}