Switch to Svelte Query. It works!

server/basic_ops.py

@@ -16,7 +16,7 @@ def create_scale_free_graph(*, nodes: int = 10):
 
 @ops.op("Compute PageRank")
 @ops.nx_node_attribute_func('pagerank')
-def compute_pagerank(graph: nx.Graph, *, damping=0.85, iterations=3):
+def compute_pagerank(graph: nx.Graph, *, damping=0.85, iterations=100):
   return nx.pagerank(graph, alpha=damping, max_iter=iterations)
 
 
@@ -35,9 +35,9 @@ def visualize_graph(graph: ops.Bundle, *, color_nodes_by: 'node_attribute' = Non
   nodes = nodes.to_records()
   edges = graph.dfs['edges'].drop_duplicates(['source', 'target'])
   edges = edges.to_records()
-  pos = nx.spring_layout(graph.to_nx())
+  pos = nx.spring_layout(graph.to_nx(), iterations=max(1, int(10000/len(nodes))))
   v = {
-    'animationDuration': 1500,
+    'animationDuration': 500,
     'animationEasingUpdate': 'quinticInOut',
     'series': [
       {
@@ -56,7 +56,7 @@ def visualize_graph(graph: ops.Bundle, *, color_nodes_by: 'node_attribute' = Non
         'data': [
           {
             'id': str(n.id),
-            'x': pos[n.id][0], 'y': pos[n.id][1],
+            'x': float(pos[n.id][0]), 'y': float(pos[n.id][1]),
             # Adjust node size to cover the same area no matter how many nodes there are.
             'symbolSize': 50 / len(nodes) ** 0.5,
             'itemStyle': {'color': n.color} if color_nodes_by else {},

server/workspace.py

@@ -83,7 +83,7 @@ def save(ws: Workspace, path: str):
     j = ws.model_dump_json(indent=2)
     dirname, basename = os.path.split(path)
     # Create temp file in the same directory to make sure it's on the same filesystem.
-    with tempfile.NamedTemporaryFile('w', prefix=basename, dir=dirname, delete_on_close=False) as f:
+    with tempfile.NamedTemporaryFile('w', prefix=f'.{basename}.', dir=dirname, delete_on_close=False) as f:
         f.write(j)
         f.close()
         os.replace(f.name, path)

web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@iconify-json/tabler": "^1.1.110",
         "@popperjs/core": "^2.11.8",
+        "@sveltestack/svelte-query": "^1.6.0",
         "@xyflow/svelte": "^0.1.3",
         "bootstrap": "^5.3.3",
         "echarts": "^5.5.0",
@@ -369,6 +370,19 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/@sveltestack/svelte-query": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sveltestack/svelte-query/-/svelte-query-1.6.0.tgz",
+      "integrity": "sha512-C0wWuh6av1zu3Pzwrg6EQmX3BhDZQ4gMAdYu6Tfv4bjbEZTB00uEDz52z92IZdONh+iUKuyo0xRZ2e16k2Xifg==",
+      "peerDependencies": {
+        "broadcast-channel": "^4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "broadcast-channel": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tsconfig/svelte": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
@@ -2585,6 +2599,12 @@
         "debug": "^4.3.4"
       }
     },
+    "@sveltestack/svelte-query": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sveltestack/svelte-query/-/svelte-query-1.6.0.tgz",
+      "integrity": "sha512-C0wWuh6av1zu3Pzwrg6EQmX3BhDZQ4gMAdYu6Tfv4bjbEZTB00uEDz52z92IZdONh+iUKuyo0xRZ2e16k2Xifg==",
+      "requires": {}
+    },
     "@tsconfig/svelte": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",

web/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@iconify-json/tabler": "^1.1.110",
     "@popperjs/core": "^2.11.8",
+    "@sveltestack/svelte-query": "^1.6.0",
     "@xyflow/svelte": "^0.1.3",
     "bootstrap": "^5.3.3",
     "echarts": "^5.5.0",

web/src/LynxKiteFlow.svelte

@@ -14,6 +14,7 @@
     type Connection,
     type NodeTypes,
   } from '@xyflow/svelte';
+  import { useQuery, useMutation, useQueryClient } from '@sveltestack/svelte-query';
   import NodeWithParams from './NodeWithParams.svelte';
   import NodeWithParamsVertical from './NodeWithParamsVertical.svelte';
   import NodeWithVisualization from './NodeWithVisualization.svelte';
@@ -23,7 +24,26 @@
   import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
+  export let path = '';
+
   const { screenToFlowPosition } = useSvelteFlow();
+  const queryClient = useQueryClient();
+  const backendWorkspace = useQuery(['workspace', path], async () => {
+    const res = await fetch(`/api/load?path=${path}`);
+    return res.json();
+  }, {staleTime: 10000});
+  const mutation = useMutation(async(update) => {
+    const res = await fetch('/api/save', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(update),
+    });
+    return await res.json();
+  }, {
+    onSuccess: data => queryClient.setQueryData(['workspace', path], data),
+  })
 
   const nodeTypes: NodeTypes = {
     basic: NodeWithParams,
@@ -34,20 +54,15 @@
     area: NodeWithArea,
   };
 
-  export let path = '';
   const nodes = writable<Node[]>([]);
   const edges = writable<Edge[]>([]);
-  let workspaceLoaded = false;
-  async function fetchWorkspace(path) {
-    if (!path) return;
-    const res = await fetch(`/api/load?path=${path}`);
-    const j = await res.json();
-    nodes.set(j.nodes);
-    edges.set(j.edges);
-    backendWorkspace = orderedJSON(j);
-    workspaceLoaded = true;
+  let doNotSave = true;
+  $: if ($backendWorkspace.isSuccess) {
+    doNotSave = true; // Change is coming from the backend.
+    nodes.set(JSON.parse(JSON.stringify($backendWorkspace.data?.nodes || [])));
+    edges.set(JSON.parse(JSON.stringify($backendWorkspace.data?.edges || [])));
+    doNotSave = false;
   }
-  $: fetchWorkspace(path);
 
   function closeNodeSearch() {
     nodeSearchSettings = undefined;
@@ -102,7 +117,6 @@
   };
 
   const graph = derived([nodes, edges], ([nodes, edges]) => ({ nodes, edges }));
-  let backendWorkspace: string;
   // Like JSON.stringify, but with keys sorted.
   function orderedJSON(obj: any) {
     const allKeys = new Set();
@@ -110,29 +124,18 @@
     return JSON.stringify(obj, Array.from(allKeys).sort());
   }
   graph.subscribe(async (g) => {
-    if (!workspaceLoaded) {
-      return;
-    }
+    if (doNotSave) return;
     const dragging = g.nodes.find((n) => n.dragging);
     if (dragging) return;
     g = JSON.parse(JSON.stringify(g));
     for (const node of g.nodes) {
       delete node.computed;
+      delete node.selected;
     }
     const ws = orderedJSON(g);
-    if (ws === backendWorkspace) return;
-    // console.log('save', '\n' + ws, '\n' + backendWorkspace);
-    backendWorkspace = ws;
-    const res = await fetch('/api/save', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ path, ws: g }),
-    });
-    const j = await res.json();
-    backendWorkspace = orderedJSON(j);
-    nodes.set(j.nodes);
+    const bd = orderedJSON($backendWorkspace.data);
+    if (ws === bd) return;
+    $mutation.mutate({ path, ws: g });
   });
   function onconnect(connection: Connection) {
     edges.update((edges) => {
@@ -169,7 +172,7 @@
     on:paneclick={toggleNodeSearch}
     on:nodeclick={nodeClick}
     proOptions={{ hideAttribution: true }}
-    maxZoom={1.5}
+    maxZoom={3}
     minZoom={0.3}
     onconnect={onconnect}
     defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}

web/src/NodeWithVisualization.svelte

@@ -8,7 +8,9 @@
 </script>
 
 <NodeWithParams {...$$props}>
-  <Chart {init} options={data.view} style="width: 250px; height: 250px" />
+  {#if data.view}
+    <Chart {init} options={data.view} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
+  {/if}
 </NodeWithParams>
 <style>
 </style>

web/src/Workspace.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   // This is the whole LynxKite workspace editor page.
+  import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query'
   import { SvelteFlowProvider } from '@xyflow/svelte';
   import ArrowBack from 'virtual:icons/tabler/arrow-back'
   import Backspace from 'virtual:icons/tabler/backspace'
@@ -7,24 +8,27 @@
   import LynxKiteFlow from './LynxKiteFlow.svelte';
   export let path = '';
   $: parent = path.split('/').slice(0, -1).join('/');
+  const queryClient = new QueryClient()
 </script>
 
-<div class="page">
-  <div class="top-bar">
-    <div class="ws-name">
-      <a href><img src="/favicon.ico"></a>
-      {path}
-    </div>
-    <div class="tools">
-      <a href><Atom /></a>
-      <a href><Backspace /></a>
-      <a href="#dir?path={parent}"><ArrowBack /></a>
+<QueryClientProvider client={queryClient}>
+  <div class="page">
+    <div class="top-bar">
+      <div class="ws-name">
+        <a href><img src="/favicon.ico"></a>
+        {path}
+      </div>
+      <div class="tools">
+        <a href><Atom /></a>
+        <a href><Backspace /></a>
+        <a href="#dir?path={parent}"><ArrowBack /></a>
+      </div>
     </div>
+    <SvelteFlowProvider>
+      <LynxKiteFlow path={path} />
+    </SvelteFlowProvider>
   </div>
-  <SvelteFlowProvider>
-    <LynxKiteFlow path={path} />
-  </SvelteFlowProvider>
-</div>
+</QueryClientProvider>
 
 <style>
   .top-bar {