@data-navigator/inspector 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@data-navigator/inspector",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "type": "module",
     "author": "Frank Elavsky",
     "license": "MIT",

package/src/tree-graph.js

@@ -55,15 +55,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 +84,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] });
+                }
+            });
         }
     });
 
@@ -131,17 +148,21 @@ export function TreeGraph(
     });
 
     // Compute layout positions.
+    // Upper levels (dimensions, divisions) are compressed; leaves get more room.
     const padding = { top: 30, bottom: 20, left: 30, right: 30 };
     const usableWidth = width - padding.left - padding.right;
     const usableHeight = height - padding.top - padding.bottom;
 
-    // Determine rows: level0 (optional), level1, level2, leaves
     const hasLevel0 = level0.length > 0;
-    const rowCount = (hasLevel0 ? 1 : 0) + 1 + 1 + 1; // l0?, l1, l2, leaves
-    const rowSpacing = usableHeight / (rowCount - 1 || 1);
+    const upperRows = (hasLevel0 ? 1 : 0) + 1 + 1; // l0?, l1, l2
+    // 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 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 * rowSpacing;
+    const yFor = (row) => padding.top + row * upperSpacing;
 
     // Level 0
     if (hasLevel0) {
@@ -192,7 +213,7 @@ export function TreeGraph(
     currentRow++;
 
     // Leaf nodes
-    const leafY = yFor(currentRow);
+    const leafY = leafYPos;
     if (dimOrder.length === 0 || !dimensions) {
         // No dimensions — flat row
         leafNodes.forEach((n, i) => {
@@ -231,17 +252,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 - rowSpacing * 0.3;
+        // 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;
@@ -250,8 +272,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;
+                });
+            }
         });
     }
 
@@ -270,20 +311,54 @@ export function TreeGraph(
         .attr('aria-label', hide ? null : description)
         .attr('style', 'max-width: 100%; height: auto; height: intrinsic;');
 
-    // Draw sibling links (dashed, behind parent-child links).
+    // 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];
+        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 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);
+        // 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;
+        if (isHorizontal) {
+            cx = midX;
+            cy = isWrap ? midY + arcAmount : midY - arcAmount;
+        } else {
+            cx = isWrap ? midX + arcAmount : midX - arcAmount;
+            cy = midY;
+        }
+        return `M ${sx} ${sy} Q ${cx} ${cy} ${tx} ${ty}`;
+    };
+
     svg.append('g')
         .attr('class', 'tree-sibling-links')
-        .selectAll('line')
+        .selectAll('path')
         .data(siblingLinks)
-        .join('line')
-        .attr('x1', d => nodeObjById[d.source]?.x || 0)
-        .attr('y1', d => nodeObjById[d.source]?.y || 0)
-        .attr('x2', d => nodeObjById[d.target]?.x || 0)
-        .attr('y2', d => nodeObjById[d.target]?.y || 0)
-        .attr('stroke', '#bbb')
-        .attr('stroke-opacity', 0.25)
+        .join('path')
+        .attr('d', siblingArc)
+        .attr('fill', 'none')
+        .attr('stroke', '#888')
+        .attr('stroke-opacity', 0.6)
         .attr('stroke-width', 1)
-        .attr('stroke-dasharray', '3,2');
+        .attr('stroke-dasharray', '4,3');
 
     // Draw parent-child links (solid).
     svg.append('g')