@fusion.dev/helix-graph 0.128.1 → 0.129.0

package/dist/connect-graph/connect-graph.d.ts

@@ -15,8 +15,9 @@ export type { DrawnLink, DrawnNode, GraphChanges } from './diff.js';
  */
 export interface GraphDriver {
     /**
-     * Draws the graph, replacing whatever was drawn, where each note is placed.
-     * Keep the view where it is: a note added to a graph is no reason to move.
+     * Draws the graph whole, replacing whatever was drawn, where each note is
+     * placed, and frames it: the first drawing, a graph the page replaced with
+     * one that shares no note, or every change for a driver without `update`.
      */
     draw(graph: {
         links: DrawnLink[];

package/dist/connect-graph/connect-graph.js

@@ -66,6 +66,7 @@ export const connectGraph = (frame, driver, options = {}) => {
                 ?.trim()
                 .replace(/^["']|["']$/g, ''),
             groups: nodes.flatMap((node) => (node.group === undefined ? [] : [node.group])),
+            links: links.length,
             near,
             noteOf: (id) => notes.get(id),
             selected,
@@ -103,6 +104,12 @@ export const connectGraph = (frame, driver, options = {}) => {
         cancelAnimationFrame(pending);
         const nodes = graph.nodes ?? [];
         const ids = new Set(nodes.map((node) => node.id));
+        if (!first &&
+            drawnNodes.size > 0 &&
+            ids.size > 0 &&
+            ![...ids].some((id) => drawnNodes.has(id))) {
+            whole = true;
+        }
         const nextLinks = new Map();
         for (const { label, source, target } of graph.links ?? []) {
             if (source !== target && ids.has(source) && ids.has(target)) {

package/dist/connect-graph/looks.d.ts

@@ -131,6 +131,8 @@ export declare const looksOf: (options: {
     colors: GraphColors;
     font?: string | undefined;
     groups: readonly string[];
+    /** How many links the graph draws, which sets how far a link at rest steps back. */
+    links?: number | undefined;
     near: ReadonlySet<string>;
     noteOf: (id: string) => NoteFacts | undefined;
     selected: string | undefined;

package/dist/connect-graph/looks.js

@@ -79,6 +79,9 @@ export const looksOf = (options) => {
     };
     const focused = selected !== undefined;
     const hidden = (id) => shown !== undefined && !shown.has(id);
+    const count = options.links ?? 2000;
+    const along = Math.min(Math.max(Math.log(count / 50) / Math.log(2000 / 50), 0), 1);
+    const rest = 0.35 + (0.72 - 0.35) * along;
     return {
         colorOf: own,
         font: options.font || 'sans-serif',
@@ -91,7 +94,7 @@ export const looksOf = (options) => {
                     ? own(selected)
                     : focused
                         ? mixRgb(colors.line, colors.ground, 0.6)
-                        : mixRgb(own(source), colors.ground, 0.72),
+                        : mixRgb(own(source), colors.ground, rest),
                 hidden: hidden(source) || hidden(target),
                 raised: touches,
             };

package/dist/sigma/sigma-driver.js

@@ -176,6 +176,7 @@ export const sigmaDriver = (sigma, options = {}) => {
         },
         draw: ({ links, nodes }) => {
             graph.clear();
+            camera.setState({ ratio: 1, x: 0.5, y: 0.5 });
             for (const node of nodes) {
                 graph.addNode(node.id, {
                     label: node.label,
@@ -238,7 +239,7 @@ export const sigmaDriver = (sigma, options = {}) => {
             sigma.setSetting('minEdgeThickness', 0.8);
             sigma.setSetting('labelFont', looks.font);
             sigma.setSetting('labelRenderedSizeThreshold', 0);
-            sigma.setSetting('labelGridCellSize', 130);
+            sigma.setSetting('labelGridCellSize', naming === 'all' ? 24 : 130);
             sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim, (at, width, box) => nameStart(at, width, box, taken, container.clientWidth)));
             sigma.setSetting('defaultDrawNodeHover', hoverOf(looks));
             sigma.setSetting('nodeReducer', (node, data) => {
@@ -389,7 +390,7 @@ export const sigmaDriver = (sigma, options = {}) => {
                     const layout = make(graph);
                     layout.start();
                     const limit = options.layoutLimit ?? 10000;
-                    const started = performance.now();
+                    let started = performance.now();
                     let last = positionsOf(graph);
                     let done = false;
                     let moving = false;
@@ -407,7 +408,20 @@ export const sigmaDriver = (sigma, options = {}) => {
                         });
                         placed(positionsOf(graph));
                     };
+                    let paused = false;
                     const timer = setInterval(() => {
+                        if (!container.isConnected) {
+                            if (!paused) {
+                                paused = true;
+                                layout.stop();
+                            }
+                            started += SAMPLE;
+                            return;
+                        }
+                        if (paused) {
+                            paused = false;
+                            layout.start();
+                        }
                         const now = positionsOf(graph);
                         let moved = 0;
                         let low = Number.POSITIVE_INFINITY;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.128.1",
+  "version": "0.129.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,12 +51,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.128.1"
+    "@fusion.dev/helix-core": "0.129.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.128.1",
-    "@fusion.dev/helix-testing": "0.128.1",
+    "@fusion.dev/helix-headless": "0.129.0",
+    "@fusion.dev/helix-testing": "0.129.0",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",