tweak: delayed graph rendering

src/scripts/app.js

@@ -32,8 +32,8 @@ export default () => ({
 
     search: new class extends State {
         constructor() {
-          super();
+            super();
-          this.engine = Engine.Default();
+            this.engine = Engine.Default();
         }
 
         toString() {
@@ -152,12 +152,27 @@ export default () => ({
         }
     },
 
-    async init() {
+    init() {
         this.content.transition(async () => {
             this.index = await Index.fromPack();
-
             this.content.value = ''; // clear init state
-            this.load.apply(this);
+
+            this.graph.transition(async () => {
+                const { Engine } = await import('./graph');
+
+                let engine = Engine.fromIndex(this.index);
+                let node = await engine.createInstance();
+    
+                return node;
+            });
+    
+            this.navigation.transition(() => {
+                let [tree, searchable] = this.index.createTree();
+                let search = this.search.engine.getInstance();
+    
+                search.addAllAsync(searchable);
+                return tree.render(false);
+            });
 
             this.router.start(this.index.metadata.routes);
         });
@@ -174,22 +189,5 @@ export default () => ({
         });
 
         marked.use(zettelkasten());
-    },
-    async load() {
-        this.graph.transition(async () => {
-            const { Engine } = await import('./graph');
-            let engine = Engine.fromIndex(this.index);
-            let node = engine.createInstance();
-
-            return node;
-        });
-
-        this.navigation.transition(() => {
-            let [tree, searchable] = this.index.createTree();
-            let search = this.search.engine.getInstance();
-
-            search.addAllAsync(searchable);
-            return tree.render(false);
-        });
     }
 })

src/scripts/graph.js

@@ -22,7 +22,7 @@ export class Engine {
             let source = index.object[src];
 
             let label = source?.name ?? src;
-            let path = source?.path ?? src;
+            let path  = source?.path ?? src;
 
             if (! graph.hasNode(src)) {
                 graph.addNode(src, { label, path });
@@ -32,7 +32,7 @@ export class Engine {
                 let target = index.object[dest];
 
                 let label = target?.name ?? dest;
-                let path = target?.path ?? dest;
+                let path  = target?.path ?? dest;
 
                 if (! graph.hasNode(dest)) {
                     graph.addNode(dest, { label, path });
@@ -48,19 +48,23 @@ export class Engine {
         return new Engine(graph);
     }
 
-    createInstance() {
+    async createInstance() {
         let settings = { allowInvalidContainer: true };
         let container = document.createElement('div');
 
         container.style.width = '100%';
         container.style.height = '100%';
 
+        let nodes = this.graph.nodes().length;
+        let delay = nodes * 20;
+
         this.instance = new Sigma(this.graph, container, settings);
         this.setupInteraction();
-        this.setupGraphStyle();
+        this.setupGraphStyle(delay);
 
-        let path = router.recall('retrieve')?.params?.path;
+        await new Promise((resolve) => {
-        setTimeout(() => router.emit('retrieve', { path }), 500);
+            setTimeout(() => resolve(), delay);
+        });
 
         return container;
     }
@@ -135,7 +139,7 @@ export class Engine {
         });
     }
 
-    setupGraphStyle() {
+    setupGraphStyle(delay) {
         let localNodes = [];
         let localEdges = [];
         let showGlobal = false;
@@ -145,7 +149,7 @@ export class Engine {
             if (value) localEdges = this.graph.edges();
         });
 
-        router.on('retrieve', ({ path }) => {
+        let event = router.on('retrieve', ({ path }) => {
             let cache = this.instance.nodeDataCache;
 
             if (!(path in cache)) {
@@ -164,6 +168,8 @@ export class Engine {
             localEdges = localNodes.reduce((r, n) => r.concat(this.graph.edges(n)), []);
         });
 
+        setTimeout(() => event.recall(), delay);
+
         let activeNodes = [];
         let activeEdges = [];
 
@@ -200,12 +206,6 @@ export class Engine {
         });
     }
 
-    panover(path) {
-        let camera = this.instance.getCamera();
-        router.emit('graphview update', { path });
-        camera.animate({ ratio: 0.5 }, { easing: "linear", duration: 200 });
-    }
-
     dispose() {
         this.layout.kill();
         this.instance.kill();