Display graph from backend. Almost there.

main.py

@@ -44,4 +44,25 @@ def read_item(item_id: int, q: Union[str, None] = None):
 def save(ws: Workspace):
     print(ws)
     G = nx.scale_free_graph(4)
+    return {'graph':{
+    'attributes': {
+      'name': 'My Graph'
+    },
+    'options': {
+      'allowSelfLoops': True,
+      'multi': False,
+      'type': 'mixed'
+    },
+    'nodes': [
+      {'key': 'Thomas'},
+      {'key': 'Eric'}
+    ],
+    'edges': [
+      {
+        'key': 'T->E',
+        'source': 'Thomas',
+        'target': 'Eric',
+      }
+    ]
+  }}
     return {"graph": list(nx.to_edgelist(G))}

web/package-lock.json

@@ -12,7 +12,6 @@
         "fuse.js": "^7.0.0",
         "graphology": "^0.25.4",
         "graphology-library": "^0.8.0",
-        "lodash": "^4.17.21",
         "sigma": "^3.0.0-beta.17"
       },
       "devDependencies": {
@@ -1499,15 +1498,14 @@
       }
     },
     "node_modules/graphology-canvas": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/graphology-canvas/-/graphology-canvas-0.4.1.tgz",
-      "integrity": "sha512-YWnE9UwEM5YHBta9q+YFBp2dTcP8dTFVNfR/0ZgDqZvdn9Qs05GdlXOdaTxS6ehOEPkSiMZSZwwp0obeMf3PEg==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/graphology-canvas/-/graphology-canvas-0.4.2.tgz",
+      "integrity": "sha512-7YJCw/8mMXvFiLP1ujEgpFOM5lmj5/AQG+9H1S/ErFvAQ1eyoLsTK/OzyLJjXzhHsBEl0fF4rN//TDsvuvkfPg==",
       "dependencies": {
         "graphology-layout": "0.6.0",
         "graphology-utils": "^2.0.0"
       },
       "peerDependencies": {
-        "canvas": "^2.6.1",
         "graphology-types": ">=0.20.0"
       },
       "peerDependenciesMeta": {
@@ -1867,11 +1865,6 @@
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "node_modules/magic-string": {
       "version": "0.30.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
@@ -3521,9 +3514,9 @@
       }
     },
     "graphology-canvas": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/graphology-canvas/-/graphology-canvas-0.4.1.tgz",
-      "integrity": "sha512-YWnE9UwEM5YHBta9q+YFBp2dTcP8dTFVNfR/0ZgDqZvdn9Qs05GdlXOdaTxS6ehOEPkSiMZSZwwp0obeMf3PEg==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/graphology-canvas/-/graphology-canvas-0.4.2.tgz",
+      "integrity": "sha512-7YJCw/8mMXvFiLP1ujEgpFOM5lmj5/AQG+9H1S/ErFvAQ1eyoLsTK/OzyLJjXzhHsBEl0fF4rN//TDsvuvkfPg==",
       "requires": {
         "graphology-layout": "0.6.0",
         "graphology-utils": "^2.0.0"
@@ -3811,11 +3804,6 @@
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
     },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "magic-string": {
       "version": "0.30.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",

web/package.json

@@ -23,7 +23,6 @@
     "fuse.js": "^7.0.0",
     "graphology": "^0.25.4",
     "graphology-library": "^0.8.0",
-    "lodash": "^4.17.21",
     "sigma": "^3.0.0-beta.17"
   }
 }

web/src/NodeWithGraphVisualization.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { type NodeProps } from '@xyflow/svelte';
   import Sigma from 'sigma';
   import * as graphology from 'graphology';
@@ -11,39 +10,19 @@
   let sigmaCanvas: HTMLElement;
   let sigmaInstance: Sigma;
 
-  const graph = graphology.Graph.from({
-    attributes: {
-      name: 'My Graph'
-    },
-    options: {
-      allowSelfLoops: true,
-      multi: false,
-      type: 'mixed'
-    },
-    nodes: [
-      {key: 'Thomas'},
-      {key: 'Eric'}
-    ],
-    edges: [
-      {
-        key: 'T->E',
-        source: 'Thomas',
-        target: 'Eric',
-      }
-    ]
-  });
-  graphologyLibrary.layout.random.assign(graph);
-  const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
-  graphologyLibrary.layoutForceAtlas2.assign(graph, { iterations: 10, settings });
-  graphologyLibrary.layoutNoverlap.assign(graph, { settings: { ratio: 3 } });
-
-  onMount(async () => {
-    sigmaInstance = new Sigma(graph, sigmaCanvas);
-  });
-
+  $: if (sigmaCanvas) sigmaInstance = new Sigma(new graphology.Graph(), sigmaCanvas);
+  $: if (sigmaInstance && data.graph) {
+    const graph = graphology.Graph.from(data.graph);
+    graphologyLibrary.layout.random.assign(graph);
+    const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
+    graphologyLibrary.layoutForceAtlas2.assign(graph, { iterations: 10, settings });
+    graphologyLibrary.layoutNoverlap.assign(graph, { settings: { ratio: 3 } });
+    sigmaInstance.graph = graph;
+    sigmaInstance.refresh();
+  }
 </script>
 
-<LynxKiteNode id={id} data={data} {...$$restProps}>
+<LynxKiteNode {...$$props}>
   <div bind:this={sigmaCanvas} style="height: 200px; width: 200px;" >
   </div>
 </LynxKiteNode>

web/src/NodeWithParams.svelte

@@ -7,7 +7,7 @@
   const { updateNodeData } = useSvelteFlow();
 </script>
 
-<LynxKiteNode id={id} data={data} {...$$restProps}>
+<LynxKiteNode {...$$props}>
   {#each Object.entries(data.params) as [name, value]}
     <div class="param">
       <label>