Save workspaces.

server/main.py

@@ -1,6 +1,7 @@
 from typing import Optional
 import dataclasses
 import fastapi
+import json
 import pathlib
 import pydantic
 import traceback
@@ -78,11 +79,33 @@ def execute(ws):
                     data.view = output
 
 
+class SaveRequest(BaseConfig):
+    path: str
+    ws: Workspace
+
+def save(req: SaveRequest):
+    path = DATA_PATH / req.path
+    assert path.is_relative_to(DATA_PATH)
+    j = req.ws.model_dump_json(indent=2)
+    with open(path, 'w') as f:
+        f.write(j)
+
 @app.post("/api/save")
-def save(ws: Workspace):
-    print(ws)
-    execute(ws)
-    print('exec done', ws)
+def save_and_execute(req: SaveRequest):
+    save(req)
+    execute(req.ws)
+    save(req)
+    return req.ws
+
+@app.get("/api/load")
+def load(path: str):
+    path = DATA_PATH / path
+    assert path.is_relative_to(DATA_PATH)
+    if not path.exists():
+        return Workspace(nodes=[], edges=[])
+    with open(path) as f:
+        j = f.read()
+    ws = Workspace.model_validate_json(j)
     return ws
 
 DATA_PATH = pathlib.Path.cwd() / 'data'
@@ -99,3 +122,11 @@ def list_dir(path: str):
     return sorted([
         DirectoryEntry(p.relative_to(DATA_PATH), 'directory' if p.is_dir() else 'workspace')
         for p in path.iterdir()])
+
+@app.post("/api/dir/mkdir")
+def make_dir(req: dict):
+    path = DATA_PATH / req['path']
+    assert path.is_relative_to(DATA_PATH)
+    assert not path.exists()
+    path.mkdir()
+    return list_dir(path.parent)

server/ops.py

@@ -52,9 +52,7 @@ class Bundle:
   @classmethod
   def from_nx(cls, graph: nx.Graph):
     edges = nx.to_pandas_edgelist(graph)
-    print(edges)
     nodes = pd.DataFrame({'id': list(graph.nodes)})
-    print(nodes)
     return cls(
       dfs={'edges': edges, 'nodes': nodes},
       edges=[

web/package-lock.json

@@ -8,7 +8,7 @@
       "name": "vite-svelte-flow-template",
       "version": "0.0.0",
       "dependencies": {
-        "@xyflow/svelte": "^0.0.39",
+        "@xyflow/svelte": "^0.0.41",
         "fuse.js": "^7.0.0",
         "graphology": "^0.25.4",
         "graphology-library": "^0.8.0",
@@ -612,12 +612,12 @@
       }
     },
     "node_modules/@xyflow/svelte": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.39.tgz",
-      "integrity": "sha512-Kam9VMXIrKjIpBvalJLNrxqbI/ASHaYHj6ZRkdGsnAx3aYgB+de0McAqiJToKdlOeZyHoQtxzSRX9D+ZTSEVZw==",
+      "version": "0.0.41",
+      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.41.tgz",
+      "integrity": "sha512-6YE8XJVebBRJnio7y6zgfN/L+J65Tw8F21TGj95c4kxMRVcU1cNRbGT/CJJ4xk3g4bSaxStlblgS/Z2I7mlUHA==",
       "dependencies": {
         "@svelte-put/shortcut": "^3.1.0",
-        "@xyflow/system": "0.0.20",
+        "@xyflow/system": "0.0.21",
         "classcat": "^5.0.4",
         "svelte-preprocess": "^5.1.3"
       },
@@ -626,9 +626,9 @@
       }
     },
     "node_modules/@xyflow/system": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.20.tgz",
-      "integrity": "sha512-OQ9irX0HtZqAzOKtnNi7WpDT6SEp7VpR16VRatd7oImw5vahyjmggUSY7as9XvJnAz0D9H0g1qjRX99moabvQA==",
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.21.tgz",
+      "integrity": "sha512-IvvJkC495u8mIA4Xm35dnQp0a5JUwzRm8eDBWKNyI3lAw93dOr85cKSrCNSuQ5M5SWNy2teFCFvnQEgVjwK3dg==",
       "dependencies": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",
@@ -3107,20 +3107,20 @@
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
     },
     "@xyflow/svelte": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.39.tgz",
-      "integrity": "sha512-Kam9VMXIrKjIpBvalJLNrxqbI/ASHaYHj6ZRkdGsnAx3aYgB+de0McAqiJToKdlOeZyHoQtxzSRX9D+ZTSEVZw==",
+      "version": "0.0.41",
+      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.41.tgz",
+      "integrity": "sha512-6YE8XJVebBRJnio7y6zgfN/L+J65Tw8F21TGj95c4kxMRVcU1cNRbGT/CJJ4xk3g4bSaxStlblgS/Z2I7mlUHA==",
       "requires": {
         "@svelte-put/shortcut": "^3.1.0",
-        "@xyflow/system": "0.0.20",
+        "@xyflow/system": "0.0.21",
         "classcat": "^5.0.4",
         "svelte-preprocess": "^5.1.3"
       }
     },
     "@xyflow/system": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.20.tgz",
-      "integrity": "sha512-OQ9irX0HtZqAzOKtnNi7WpDT6SEp7VpR16VRatd7oImw5vahyjmggUSY7as9XvJnAz0D9H0g1qjRX99moabvQA==",
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.21.tgz",
+      "integrity": "sha512-IvvJkC495u8mIA4Xm35dnQp0a5JUwzRm8eDBWKNyI3lAw93dOr85cKSrCNSuQ5M5SWNy2teFCFvnQEgVjwK3dg==",
       "requires": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",

web/package.json

@@ -21,7 +21,7 @@
     "vite": "^5.2.8"
   },
   "dependencies": {
-    "@xyflow/svelte": "^0.0.39",
+    "@xyflow/svelte": "^0.0.41",
     "fuse.js": "^7.0.0",
     "graphology": "^0.25.4",
     "graphology-library": "^0.8.0",

web/src/App.svelte

@@ -10,8 +10,7 @@
     if (parts.length > 1) {
       parameters = Object.fromEntries(new URLSearchParams(parts[1]));
     }
-    console.log(parameters);
-	}
+  }
   onHashChange();
 </script>
 

web/src/Directory.svelte

@@ -3,7 +3,9 @@
   import logo from './assets/logo.png';
   import Home from 'virtual:icons/tabler/home'
   import Folder from 'virtual:icons/tabler/folder'
+  import FolderPlus from 'virtual:icons/tabler/folder-plus'
   import File from 'virtual:icons/tabler/file'
+  import FilePlus from 'virtual:icons/tabler/file-plus'
 
   export let path = '';
   async function fetchList(path) {
@@ -23,6 +25,30 @@
   function shortName(item) {
     return item.name.split('/').pop();
   }
+  function newName(list) {
+    let i = 0;
+    while (true) {
+      const name = `Untitled${i ? ` ${i}` : ''}`;
+      if (!list.find(item => item.name === name)) {
+        return name;
+      }
+      i++;
+    }
+  }
+  function newWorkspaceIn(path, list) {
+    const pathSlash = path ? `${path}/` : '';
+    return `#edit?path=${pathSlash}${newName(list)}`;
+  }
+  async function newFolderIn(path, list) {
+    const pathSlash = path ? `${path}/` : '';
+    const name = newName(list);
+    const res = await fetch(`/api/dir/mkdir`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: pathSlash + name }),
+    });
+    list = await res.json();
+  }
 </script>
 
 <div class="directory-page">
@@ -31,10 +57,14 @@
     <div class="tagline">The Complete Graph Data Science Platform</div>
   </div>
   <div class="entry-list">
-    {#if path} <div class="breadcrumbs"><a href="#dir"><Home /></a> {path} </div> {/if}
     {#await list}
       <div>Loading...</div>
     {:then list}
+      <div class="actions">
+        <a href="{newWorkspaceIn(path, list)}"><FilePlus /> New workspace</a>
+        <a href on:click="{newFolderIn(path, list)}"><FolderPlus /> New folder</a>
+      </div>
+      {#if path} <div class="breadcrumbs"><a href="#dir"><Home /></a> {path} </div> {/if}
       {#each list as item}
         <a class="entry" href={link(item)}>
           {#if item.type === 'directory'}
@@ -58,7 +88,7 @@
     background-color: white;
     border-radius: 10px;
     box-shadow: 0px 2px 4px;
-    padding: 10px 0;
+    padding: 0 0 10px 0;
   }
   @media (min-width: 768px) {
     .entry-list {
@@ -90,9 +120,27 @@
     }
   }
 
+  .actions {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 5px;
+  }
+  .actions a {
+    padding: 2px 10px;
+    border-radius: 5px;
+  }
+  .actions a:hover {
+    background: #39bcf3;
+    color: white;
+  }
+
   .breadcrumbs {
     padding-left: 10px;
     font-size: 20px;
+    background: #002a4c20;
+  }
+  .breadcrumbs a:hover {
+    color: #39bcf3;
   }
   .entry-list .entry {
     display: block;
@@ -118,5 +166,6 @@
   }
   a {
     color: black;
+    text-decoration: none;
   }
 </style>

web/src/LynxKiteFlow.svelte

@@ -26,22 +26,20 @@
     table_view: NodeWithTableView,
   };
 
+  export let path = '';
   const nodes = writable<Node[]>([]);
-
-  const edges = writable<Edge[]>([
-    {
-      id: '3-1',
-      source: '3',
-      target: '1',
-      // markerEnd: { type: MarkerType.ArrowClosed },
-    },
-    {
-      id: '3-4',
-      source: '1',
-      target: '4',
-      // markerEnd: { type: MarkerType.ArrowClosed },
-    },
-  ]);
+  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;
+  }
+  $: fetchWorkspace(path);
 
   function closeNodeSearch() {
     nodeSearchPos = undefined;
@@ -52,17 +50,9 @@
       return;
     }
     event.preventDefault();
-    const width = 500;
-    const height = 200;
     nodeSearchPos = {
-      top: event.clientY < height - 200 ? event.clientY : undefined,
-      left: event.clientX < width - 200 ? event.clientX : undefined,
-      right: event.clientX >= width - 200 ? width - event.clientX : undefined,
-      bottom: event.clientY >= height - 200 ? height - event.clientY : undefined
-    };
-    nodeSearchPos = {
-      top: event.clientY,
-      left: event.clientX - 150,
+      top: event.offsetY,
+      left: event.offsetX - 155,
     };
   }
   function addNode(e) {
@@ -99,6 +89,9 @@
     return JSON.stringify(obj, Array.from(allKeys).sort());
   }
   graph.subscribe(async (g) => {
+    if (!workspaceLoaded) {
+      return;
+    }
     const dragging = g.nodes.find((n) => n.dragging);
     if (dragging) return;
     g = JSON.parse(JSON.stringify(g));
@@ -107,13 +100,14 @@
     }
     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: ws,
+      body: JSON.stringify({ path, ws: g }),
     });
     const j = await res.json();
     backendWorkspace = orderedJSON(j);
@@ -121,7 +115,7 @@
   });
 </script>
 
-<div style:height="100vh">
+<div style:height="100%">
   <SvelteFlow {nodes} {edges} {nodeTypes} fitView
     on:paneclick={toggleNodeSearch}
     proOptions={{ hideAttribution: true }}

web/src/NodeSearch.svelte

@@ -23,13 +23,21 @@
       e.preventDefault();
       selectedIndex = Math.max(selectedIndex - 1, 0);
     } else if (e.key === 'Enter') {
-      const node = {...hits[selectedIndex].item};
-      node.position = {x: pos.left, y: pos.top};
-      dispatch('add', node);
+      addSelected();
     } else if (e.key === 'Escape') {
       dispatch('cancel');
     }
   }
+  function addSelected() {
+    const node = {...hits[selectedIndex].item};
+    node.position = {x: pos.left, y: pos.top};
+    dispatch('add', node);
+  }
+  async function lostFocus(e) {
+    // If it's a click on a result, let the click handler handle it.
+    if (e.relatedTarget && e.relatedTarget.closest('.node-search')) return;
+    dispatch('cancel');
+  }
 
 </script>
 
@@ -40,10 +48,18 @@ style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.
     bind:this={searchBox}
     on:input={onInput}
     on:keydown={onKeyDown}
-    on:focusout={() => dispatch('cancel')}
+    on:focusout={lostFocus}
     placeholder="Search for box">
   {#each hits as box, index}
-    <div class="search-result" class:selected={index == selectedIndex}>{index} {box.item.data.title}</div>
+    <div
+      tabindex="0"
+      on:focus={() => selectedIndex = index}
+      on:mouseenter={() => selectedIndex = index}
+      on:click={addSelected}
+      class="search-result"
+      class:selected={index == selectedIndex}>
+      {box.item.data.title}
+    </div>
   {/each}
 </div>
 
@@ -58,6 +74,7 @@ style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.
   }
   .search-result {
     padding: 4px;
+    cursor: pointer;
   }
   .search-result.selected {
     background-color: #f80;

web/src/Workspace.svelte

@@ -1,9 +1,58 @@
 <script lang="ts">
   // This is the whole LynxKite workspace editor page.
   import { SvelteFlowProvider } from '@xyflow/svelte';
+  import ArrowBack from 'virtual:icons/tabler/arrow-back'
+  import Backspace from 'virtual:icons/tabler/backspace'
+  import Atom from 'virtual:icons/tabler/Atom'
   import LynxKiteFlow from './LynxKiteFlow.svelte';
+  export let path = '';
+  $: parent = path.split('/').slice(0, -1).join('/');
 </script>
 
-<SvelteFlowProvider>
-  <LynxKiteFlow />
-</SvelteFlowProvider>
+<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>
+
+<style>
+  .top-bar {
+    display: flex;
+    justify-content: space-between;
+    background: #002a4c;
+    color: white;
+  }
+  .ws-name {
+    font-size: 1.5em;
+  }
+  .ws-name img {
+    height: 1.5em;
+    vertical-align: middle;
+    margin: 4px;
+  }
+  .page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .tools {
+    display: flex;
+    align-items: center;
+  }
+  .tools a {
+    color: white;
+    font-size: 1.5em;
+  }
+</style>