Pass graph from backend to visualization.

main.py

@@ -1,6 +1,7 @@
 from typing import Union
 import fastapi
 import pydantic
+import networkx as nx
 
 class Position(pydantic.BaseModel):
     x: float
@@ -45,4 +46,5 @@ def read_item(item_id: int, q: Union[str, None] = None):
 @app.post("/api/save")
 def save(ws: Workspace):
     print(ws)
-    return {"status": "ok"}
+    G = nx.scale_free_graph(100)
+    return {"graph": list(nx.to_edgelist(G))}

web/src/App.vue

@@ -49,7 +49,7 @@ function makeParam(param: string): NodeInterface {
 
 function makeOutput(output: string): NodeInterface {
   if (output === 'graph-viz') {
-    return new NodeInterface(output, 0).setComponent(markRaw(GraphViz)).setPort(false);
+    return new NodeInterface(output, "asd").setComponent(markRaw(GraphViz)).setPort(false);
   } else if (output === 'graph') {
     return new BaklavaJS.NodeInterface(output, 0).use(setType, graphType);
   } else if (output === 'table') {

web/src/components/GraphViz.vue

@@ -3,20 +3,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import Sigma from 'sigma'
-import * as graphology from 'graphology'
-const container = ref(null)
+import { ref, onMounted } from 'vue';
+import Sigma from 'sigma';
+import * as graphology from 'graphology';
+const container = ref(null);
 onMounted(() => {
   const sigmaInstance = new Sigma(graph, container.value);
-})
-defineProps(['modelValue'])
-// Create a graphology graph
+  console.log(props.modelValue);
+});
+const props = defineProps(['modelValue']);
 const graph = new graphology.Graph();
 graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
 graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
 graph.addEdge("1", "2", { size: 5, color: "purple" });
-
-// Instantiate sigma.js and render the graph
-
 </script>