backpack-viewer 0.2.16 → 0.2.17

package/dist/canvas.js

@@ -6,6 +6,18 @@ function cssVar(name) {
 }
 const NODE_RADIUS = 20;
 const ALPHA_MIN = 0.001;
+// Level-of-detail thresholds based on camera scale
+const LOD_HIDE_BADGES = 0.4; // hide type badges above nodes
+const LOD_HIDE_LABELS = 0.25; // hide node labels below nodes
+const LOD_HIDE_EDGE_LABELS = 0.35; // hide edge labels even if enabled
+const LOD_SMALL_NODES = 0.2; // shrink nodes to half size
+const LOD_HIDE_ARROWS = 0.15; // hide arrowheads, draw 1px edges
+/** Check if a point is within the visible viewport (with padding). */
+function isInViewport(x, y, camera, canvasW, canvasH, pad = 100) {
+    const sx = (x - camera.x) * camera.scale;
+    const sy = (y - camera.y) * camera.scale;
+    return sx >= -pad && sx <= canvasW + pad && sy >= -pad && sy <= canvasH + pad;
+}
 export function initCanvas(container, onNodeClick, onFocusChange) {
     const canvas = container.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -16,6 +28,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
     let animFrame = 0;
     let selectedNodeIds = new Set();
     let filteredNodeIds = null; // null = no filter (show all)
+    let showEdges = true;
     let showEdgeLabels = true;
     let showTypeHulls = true;
     let showMinimap = true;
@@ -89,7 +102,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
         ctx.translate(-camera.x * camera.scale, -camera.y * camera.scale);
         ctx.scale(camera.scale, camera.scale);
         // Draw type hulls (shaded regions behind same-type nodes)
-        if (showTypeHulls) {
+        if (showTypeHulls && camera.scale >= LOD_SMALL_NODES) {
             const typeGroups = new Map();
             for (const node of state.nodes) {
                 if (filteredNodeIds !== null && !filteredNodeIds.has(node.id))
@@ -134,56 +147,66 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
         }
         // Draw edges
-        for (const edge of state.edges) {
-            const source = state.nodeMap.get(edge.sourceId);
-            const target = state.nodeMap.get(edge.targetId);
-            if (!source || !target)
-                continue;
-            const sourceMatch = filteredNodeIds === null || filteredNodeIds.has(edge.sourceId);
-            const targetMatch = filteredNodeIds === null || filteredNodeIds.has(edge.targetId);
-            const bothMatch = sourceMatch && targetMatch;
-            // Hide edges where neither endpoint matches the filter
-            if (filteredNodeIds !== null && !sourceMatch && !targetMatch)
-                continue;
-            const isConnected = selectedNodeIds.size > 0 &&
-                (selectedNodeIds.has(edge.sourceId) || selectedNodeIds.has(edge.targetId));
-            const highlighted = isConnected || (filteredNodeIds !== null && bothMatch);
-            const edgeDimmed = filteredNodeIds !== null && !bothMatch;
-            // Self-loop
-            if (edge.sourceId === edge.targetId) {
-                drawSelfLoop(source, edge.type, highlighted, edgeColor, edgeHighlight, edgeLabel, edgeLabelHighlight);
-                continue;
-            }
-            // Line
-            ctx.beginPath();
-            ctx.moveTo(source.x, source.y);
-            ctx.lineTo(target.x, target.y);
-            ctx.strokeStyle = highlighted
-                ? edgeHighlight
-                : edgeDimmed
-                    ? edgeDimColor
-                    : edgeColor;
-            ctx.lineWidth = highlighted ? 2.5 : 1.5;
-            ctx.stroke();
-            // Arrowhead
-            drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
-            // Edge label at midpoint
-            if (showEdgeLabels) {
-                const mx = (source.x + target.x) / 2;
-                const my = (source.y + target.y) / 2;
-                ctx.fillStyle = highlighted
-                    ? edgeLabelHighlight
+        if (showEdges)
+            for (const edge of state.edges) {
+                const source = state.nodeMap.get(edge.sourceId);
+                const target = state.nodeMap.get(edge.targetId);
+                if (!source || !target)
+                    continue;
+                // Viewport culling — skip if both endpoints are off-screen
+                if (!isInViewport(source.x, source.y, camera, canvas.clientWidth, canvas.clientHeight, 200) &&
+                    !isInViewport(target.x, target.y, camera, canvas.clientWidth, canvas.clientHeight, 200))
+                    continue;
+                const sourceMatch = filteredNodeIds === null || filteredNodeIds.has(edge.sourceId);
+                const targetMatch = filteredNodeIds === null || filteredNodeIds.has(edge.targetId);
+                const bothMatch = sourceMatch && targetMatch;
+                // Hide edges where neither endpoint matches the filter
+                if (filteredNodeIds !== null && !sourceMatch && !targetMatch)
+                    continue;
+                const isConnected = selectedNodeIds.size > 0 &&
+                    (selectedNodeIds.has(edge.sourceId) || selectedNodeIds.has(edge.targetId));
+                const highlighted = isConnected || (filteredNodeIds !== null && bothMatch);
+                const edgeDimmed = filteredNodeIds !== null && !bothMatch;
+                // Self-loop
+                if (edge.sourceId === edge.targetId) {
+                    drawSelfLoop(source, edge.type, highlighted, edgeColor, edgeHighlight, edgeLabel, edgeLabelHighlight);
+                    continue;
+                }
+                // Line
+                ctx.beginPath();
+                ctx.moveTo(source.x, source.y);
+                ctx.lineTo(target.x, target.y);
+                ctx.strokeStyle = highlighted
+                    ? edgeHighlight
                     : edgeDimmed
-                        ? edgeLabelDim
-                        : edgeLabel;
-                ctx.font = "9px system-ui, sans-serif";
-                ctx.textAlign = "center";
-                ctx.textBaseline = "bottom";
-                ctx.fillText(edge.type, mx, my - 4);
+                        ? edgeDimColor
+                        : edgeColor;
+                ctx.lineWidth = camera.scale < LOD_HIDE_ARROWS ? 1 : highlighted ? 2.5 : 1.5;
+                ctx.stroke();
+                // Arrowhead
+                if (camera.scale >= LOD_HIDE_ARROWS) {
+                    drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
+                }
+                // Edge label at midpoint
+                if (showEdgeLabels && camera.scale >= LOD_HIDE_EDGE_LABELS) {
+                    const mx = (source.x + target.x) / 2;
+                    const my = (source.y + target.y) / 2;
+                    ctx.fillStyle = highlighted
+                        ? edgeLabelHighlight
+                        : edgeDimmed
+                            ? edgeLabelDim
+                            : edgeLabel;
+                    ctx.font = "9px system-ui, sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.textBaseline = "bottom";
+                    ctx.fillText(edge.type, mx, my - 4);
+                }
             }
-        }
         // Draw nodes
         for (const node of state.nodes) {
+            // Viewport culling
+            if (!isInViewport(node.x, node.y, camera, canvas.clientWidth, canvas.clientHeight))
+                continue;
             const color = getColor(node.type);
             const isSelected = selectedNodeIds.has(node.id);
             const isNeighbor = selectedNodeIds.size > 0 &&
@@ -192,13 +215,14 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             const filteredOut = filteredNodeIds !== null && !filteredNodeIds.has(node.id);
             const dimmed = filteredOut ||
                 (selectedNodeIds.size > 0 && !isSelected && !isNeighbor);
+            const r = camera.scale < LOD_SMALL_NODES ? NODE_RADIUS * 0.5 : NODE_RADIUS;
             // Glow for selected node
             if (isSelected) {
                 ctx.save();
                 ctx.shadowColor = color;
                 ctx.shadowBlur = 20;
                 ctx.beginPath();
-                ctx.arc(node.x, node.y, NODE_RADIUS + 3, 0, Math.PI * 2);
+                ctx.arc(node.x, node.y, r + 3, 0, Math.PI * 2);
                 ctx.fillStyle = color;
                 ctx.globalAlpha = 0.3;
                 ctx.fill();
@@ -206,7 +230,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
             // Circle
             ctx.beginPath();
-            ctx.arc(node.x, node.y, NODE_RADIUS, 0, Math.PI * 2);
+            ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
             ctx.fillStyle = color;
             ctx.globalAlpha = filteredOut ? 0.1 : dimmed ? 0.3 : 1;
             ctx.fill();
@@ -214,17 +238,21 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             ctx.lineWidth = isSelected ? 3 : 1.5;
             ctx.stroke();
             // Label below
-            const label = node.label.length > 24 ? node.label.slice(0, 22) + "..." : node.label;
-            ctx.fillStyle = dimmed ? nodeLabelDim : nodeLabel;
-            ctx.font = "11px system-ui, sans-serif";
-            ctx.textAlign = "center";
-            ctx.textBaseline = "top";
-            ctx.fillText(label, node.x, node.y + NODE_RADIUS + 4);
+            if (camera.scale >= LOD_HIDE_LABELS) {
+                const label = node.label.length > 24 ? node.label.slice(0, 22) + "..." : node.label;
+                ctx.fillStyle = dimmed ? nodeLabelDim : nodeLabel;
+                ctx.font = "11px system-ui, sans-serif";
+                ctx.textAlign = "center";
+                ctx.textBaseline = "top";
+                ctx.fillText(label, node.x, node.y + r + 4);
+            }
             // Type badge above
-            ctx.fillStyle = dimmed ? typeBadgeDim : typeBadge;
-            ctx.font = "9px system-ui, sans-serif";
-            ctx.textBaseline = "bottom";
-            ctx.fillText(node.type, node.x, node.y - NODE_RADIUS - 3);
+            if (camera.scale >= LOD_HIDE_BADGES) {
+                ctx.fillStyle = dimmed ? typeBadgeDim : typeBadge;
+                ctx.font = "9px system-ui, sans-serif";
+                ctx.textBaseline = "bottom";
+                ctx.fillText(node.type, node.x, node.y - r - 3);
+            }
             ctx.globalAlpha = 1;
         }
         ctx.restore();
@@ -676,6 +704,10 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
             animatePan();
         },
+        setEdges(visible) {
+            showEdges = visible;
+            render();
+        },
         setEdgeLabels(visible) {
             showEdgeLabels = visible;
             render();
@@ -688,6 +720,41 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             showMinimap = visible;
             render();
         },
+        centerView() {
+            if (!state)
+                return;
+            camera = { x: 0, y: 0, scale: 1 };
+            if (state.nodes.length > 0) {
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of state.nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                camera.x = (minX + maxX) / 2 - canvas.clientWidth / 2;
+                camera.y = (minY + maxY) / 2 - canvas.clientHeight / 2;
+            }
+            render();
+        },
+        panBy(dx, dy) {
+            camera.x += dx / camera.scale;
+            camera.y += dy / camera.scale;
+            render();
+        },
+        zoomBy(factor) {
+            const cx = canvas.clientWidth / 2;
+            const cy = canvas.clientHeight / 2;
+            const [wx, wy] = screenToWorld(cx, cy);
+            camera.scale = Math.max(0.05, Math.min(10, camera.scale * factor));
+            camera.x = wx - cx / camera.scale;
+            camera.y = wy - cy / camera.scale;
+            render();
+        },
         reheat() {
             alpha = 0.5;
             cancelAnimationFrame(animFrame);
@@ -790,6 +857,18 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
                 totalNodes: state.nodes.length,
             };
         },
+        /** Get all node IDs in the current layout (subgraph if focused, full graph otherwise). Seed nodes first. */
+        getNodeIds() {
+            if (!state)
+                return [];
+            if (focusSeedIds) {
+                const seedSet = new Set(focusSeedIds);
+                const seeds = state.nodes.filter((n) => seedSet.has(n.id)).map((n) => n.id);
+                const rest = state.nodes.filter((n) => !seedSet.has(n.id)).map((n) => n.id);
+                return [...seeds, ...rest];
+            }
+            return state.nodes.map((n) => n.id);
+        },
         destroy() {
             cancelAnimationFrame(animFrame);
             observer.disconnect();

package/dist/config.d.ts

@@ -0,0 +1,4 @@
+import defaultConfig from "./default-config.json";
+export type ViewerConfig = typeof defaultConfig;
+export type KeybindingMap = typeof defaultConfig.keybindings;
+export declare function loadViewerConfig(): ViewerConfig;

package/dist/config.js

@@ -0,0 +1,31 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as os from "node:os";
+import defaultConfig from "./default-config.json" with { type: "json" };
+function viewerConfigDir() {
+    if (process.env.BACKPACK_DIR) {
+        return path.join(process.env.BACKPACK_DIR, "config");
+    }
+    const xdgConfig = process.env.XDG_CONFIG_HOME ?? path.join(os.homedir(), ".config");
+    return path.join(xdgConfig, "backpack");
+}
+function viewerConfigFile() {
+    return path.join(viewerConfigDir(), "viewer.json");
+}
+export function loadViewerConfig() {
+    const filePath = viewerConfigFile();
+    try {
+        const raw = fs.readFileSync(filePath, "utf-8");
+        const userConfig = JSON.parse(raw);
+        return {
+            ...defaultConfig,
+            keybindings: {
+                ...defaultConfig.keybindings,
+                ...(userConfig.keybindings ?? {}),
+            },
+        };
+    }
+    catch {
+        return defaultConfig;
+    }
+}

package/dist/default-config.json

@@ -0,0 +1,33 @@
+{
+    "keybindings": {
+        "search": "/",
+        "searchAlt": "ctrl+k",
+        "undo": "ctrl+z",
+        "redo": "ctrl+shift+z",
+        "help": "?",
+        "escape": "Escape",
+        "focus": "f",
+        "toggleEdges": "e",
+        "center": "c",
+        "nextNode": ".",
+        "prevNode": ",",
+        "nextConnection": ">",
+        "prevConnection": "<",
+        "historyBack": "(",
+        "historyForward": ")",
+        "hopsIncrease": "=",
+        "hopsDecrease": "-",
+        "panLeft": "h",
+        "panDown": "j",
+        "panUp": "k",
+        "panRight": "l",
+        "panFastLeft": "H",
+        "zoomOut": "J",
+        "zoomIn": "K",
+        "panFastRight": "L",
+        "spacingDecrease": "[",
+        "spacingIncrease": "]",
+        "clusteringDecrease": "{",
+        "clusteringIncrease": "}"
+    }
+}

package/dist/info-panel.d.ts

@@ -9,5 +9,9 @@ export interface EditCallbacks {
 export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void, onFocus?: (nodeIds: string[]) => void): {
     show(nodeIds: string[], data: LearningGraphData): void;
     hide: () => void;
+    goBack: () => void;
+    goForward: () => void;
+    cycleConnection(direction: 1 | -1): string | null;
+    setFocusDisabled(disabled: boolean): void;
     readonly visible: boolean;
 };

package/dist/info-panel.js

@@ -20,6 +20,9 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
     let navigatingHistory = false;
     let lastData = null;
     let currentNodeIds = [];
+    let focusDisabled = false;
+    let connectionNodeIds = []; // other-end node IDs for each connection
+    let activeConnectionIndex = -1;
     function hide() {
         panel.classList.add("hidden");
         panel.classList.remove("info-panel-maximized");
@@ -43,19 +46,23 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         navigatingHistory = false;
     }
     function goBack() {
-        if (historyIndex <= 0 || !lastData || !onNavigateToNode)
+        if (historyIndex <= 0 || !lastData)
             return;
         historyIndex--;
         navigatingHistory = true;
-        onNavigateToNode(history[historyIndex]);
+        const nodeId = history[historyIndex];
+        onNavigateToNode?.(nodeId);
+        showSingle(nodeId, lastData);
         navigatingHistory = false;
     }
     function goForward() {
-        if (historyIndex >= history.length - 1 || !lastData || !onNavigateToNode)
+        if (historyIndex >= history.length - 1 || !lastData)
             return;
         historyIndex++;
         navigatingHistory = true;
-        onNavigateToNode(history[historyIndex]);
+        const nodeId = history[historyIndex];
+        onNavigateToNode?.(nodeId);
+        showSingle(nodeId, lastData);
         navigatingHistory = false;
     }
     function createToolbar() {
@@ -83,8 +90,12 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             focusBtn.className = "info-toolbar-btn info-focus-btn";
             focusBtn.textContent = "\u25CE"; // bullseye
             focusBtn.title = "Focus on neighborhood (F)";
+            focusBtn.disabled = focusDisabled;
+            if (focusDisabled)
+                focusBtn.style.opacity = "0.3";
             focusBtn.addEventListener("click", () => {
-                onFocus(currentNodeIds);
+                if (!focusDisabled)
+                    onFocus(currentNodeIds);
             });
             toolbar.appendChild(focusBtn);
         }
@@ -114,6 +125,9 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         if (!node)
             return;
         const connectedEdges = data.edges.filter((e) => e.sourceId === nodeId || e.targetId === nodeId);
+        // Store connection targets for keyboard cycling
+        connectionNodeIds = connectedEdges.map((e) => e.sourceId === nodeId ? e.targetId : e.sourceId);
+        activeConnectionIndex = -1;
         panel.innerHTML = "";
         panel.classList.remove("hidden");
         if (maximized)
@@ -521,6 +535,39 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             }
         },
         hide,
+        goBack,
+        goForward,
+        cycleConnection(direction) {
+            if (connectionNodeIds.length === 0)
+                return null;
+            if (activeConnectionIndex === -1) {
+                activeConnectionIndex = direction === 1 ? 0 : connectionNodeIds.length - 1;
+            }
+            else {
+                activeConnectionIndex += direction;
+                if (activeConnectionIndex >= connectionNodeIds.length)
+                    activeConnectionIndex = 0;
+                if (activeConnectionIndex < 0)
+                    activeConnectionIndex = connectionNodeIds.length - 1;
+            }
+            // Highlight active row in the panel
+            const items = panel.querySelectorAll(".info-connection");
+            items.forEach((el, i) => {
+                el.classList.toggle("info-connection-active", i === activeConnectionIndex);
+            });
+            if (activeConnectionIndex >= 0 && items[activeConnectionIndex]) {
+                items[activeConnectionIndex].scrollIntoView({ block: "nearest" });
+            }
+            return connectionNodeIds[activeConnectionIndex] ?? null;
+        },
+        setFocusDisabled(disabled) {
+            focusDisabled = disabled;
+            const btn = panel.querySelector(".info-focus-btn");
+            if (btn) {
+                btn.disabled = disabled;
+                btn.style.opacity = disabled ? "0.3" : "";
+            }
+        },
         get visible() {
             return !panel.classList.contains("hidden");
         },

package/dist/keybindings.d.ts

@@ -0,0 +1,6 @@
+export type KeybindingAction = "search" | "searchAlt" | "undo" | "redo" | "help" | "escape" | "focus" | "toggleEdges" | "center" | "nextNode" | "prevNode" | "nextConnection" | "prevConnection" | "historyBack" | "historyForward" | "hopsIncrease" | "hopsDecrease" | "panLeft" | "panDown" | "panUp" | "panRight" | "panFastLeft" | "zoomOut" | "zoomIn" | "panFastRight" | "spacingDecrease" | "spacingIncrease" | "clusteringDecrease" | "clusteringIncrease";
+export type KeybindingMap = Record<KeybindingAction, string>;
+/** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
+export declare function matchKey(e: KeyboardEvent, binding: string): boolean;
+/** Build a reverse map: for each action, store its binding string. Used by the help modal. */
+export declare function actionDescriptions(): Record<KeybindingAction, string>;

package/dist/keybindings.js

@@ -0,0 +1,58 @@
+/** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
+export function matchKey(e, binding) {
+    const parts = binding.toLowerCase().split("+");
+    const key = parts.pop();
+    const needCtrl = parts.includes("ctrl") || parts.includes("cmd") || parts.includes("meta");
+    const needShift = parts.includes("shift");
+    const needAlt = parts.includes("alt");
+    // Modifier checks
+    if (needCtrl !== (e.ctrlKey || e.metaKey))
+        return false;
+    if (needShift !== e.shiftKey)
+        return false;
+    if (needAlt !== e.altKey)
+        return false;
+    // For plain keys (no modifiers required), reject if ctrl/meta is held
+    if (!needCtrl && (e.ctrlKey || e.metaKey))
+        return false;
+    // Key match — case-sensitive for single chars, case-insensitive for named keys
+    if (key === "escape")
+        return e.key === "Escape";
+    if (key.length === 1)
+        return e.key === binding.split("+").pop(); // preserve original case
+    return e.key.toLowerCase() === key;
+}
+/** Build a reverse map: for each action, store its binding string. Used by the help modal. */
+export function actionDescriptions() {
+    return {
+        search: "Focus search",
+        searchAlt: "Focus search (alt)",
+        undo: "Undo",
+        redo: "Redo",
+        help: "Toggle help",
+        escape: "Exit focus / close panel",
+        focus: "Focus on selected / exit focus",
+        toggleEdges: "Toggle edges on/off",
+        center: "Center view on graph",
+        nextNode: "Next node in view",
+        prevNode: "Previous node in view",
+        nextConnection: "Next connection",
+        prevConnection: "Previous connection",
+        historyBack: "Node history back",
+        historyForward: "Node history forward",
+        hopsIncrease: "Increase hops",
+        hopsDecrease: "Decrease hops",
+        panLeft: "Pan left",
+        panDown: "Pan down",
+        panUp: "Pan up",
+        panRight: "Pan right",
+        panFastLeft: "Pan fast left",
+        zoomOut: "Zoom out",
+        zoomIn: "Zoom in",
+        panFastRight: "Pan fast right",
+        spacingDecrease: "Decrease spacing",
+        spacingIncrease: "Increase spacing",
+        clusteringDecrease: "Decrease clustering",
+        clusteringIncrease: "Increase clustering",
+    };
+}

package/dist/layout.d.ts

@@ -25,6 +25,8 @@ export interface LayoutParams {
 export declare const DEFAULT_LAYOUT_PARAMS: LayoutParams;
 export declare function setLayoutParams(p: Partial<LayoutParams>): void;
 export declare function getLayoutParams(): LayoutParams;
+/** Compute sensible default layout params based on graph size. */
+export declare function autoLayoutParams(nodeCount: number): LayoutParams;
 /** Extract the N-hop neighborhood of seed nodes as a new subgraph. */
 export declare function extractSubgraph(data: LearningGraphData, seedIds: string[], hops: number): LearningGraphData;
 /** Create a layout state from ontology data. Nodes start grouped by type. */

package/dist/layout.js

@@ -1,12 +1,12 @@
 export const DEFAULT_LAYOUT_PARAMS = {
-    clusterStrength: 0.05,
-    spacing: 1,
+    clusterStrength: 0.08,
+    spacing: 1.5,
 };
-const REPULSION = 5000;
-const CROSS_TYPE_REPULSION_BASE = 8000;
-const ATTRACTION = 0.005;
-const REST_LENGTH_SAME_BASE = 100;
-const REST_LENGTH_CROSS_BASE = 250;
+const REPULSION = 6000;
+const CROSS_TYPE_REPULSION_BASE = 12000;
+const ATTRACTION = 0.004;
+const REST_LENGTH_SAME_BASE = 140;
+const REST_LENGTH_CROSS_BASE = 350;
 const DAMPING = 0.9;
 const CENTER_GRAVITY = 0.01;
 const MIN_DISTANCE = 30;
@@ -22,6 +22,16 @@ export function setLayoutParams(p) {
 export function getLayoutParams() {
     return { ...params };
 }
+/** Compute sensible default layout params based on graph size. */
+export function autoLayoutParams(nodeCount) {
+    if (nodeCount <= 30)
+        return { ...DEFAULT_LAYOUT_PARAMS };
+    const scale = Math.log2(nodeCount / 30);
+    return {
+        clusterStrength: Math.min(0.5, 0.08 + 0.06 * scale),
+        spacing: Math.min(15, 1.5 + 1.2 * scale),
+    };
+}
 /** Extract a display label from a node — first string property value, fallback to id. */
 function nodeLabel(properties, id) {
     for (const value of Object.values(properties)) {
@@ -61,7 +71,7 @@ export function createLayout(data) {
     const nodeMap = new Map();
     // Group nodes by type for initial placement
     const types = [...new Set(data.nodes.map((n) => n.type))];
-    const typeRadius = Math.sqrt(types.length) * REST_LENGTH_CROSS_BASE * 0.6;
+    const typeRadius = Math.sqrt(types.length) * REST_LENGTH_CROSS_BASE * 0.6 * Math.max(1, params.spacing);
     const typeCounters = new Map();
     const typeSizes = new Map();
     for (const n of data.nodes) {