@data-navigator/inspector 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@data-navigator/inspector",
-    "version": "1.0.2",
+    "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] });
+                }
+            });
         }
     });
 
@@ -138,10 +155,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 +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 - (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 +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;
+                });
+            }
         });
     }
 
@@ -276,6 +314,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 +327,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;