Merge pull request #146 from biggraph/darabos-folders

README.md

@@ -41,7 +41,7 @@ uv pip install -e lynxkite-core/[dev] -e lynxkite-app/[dev] -e lynxkite-graph-an
 This also builds the frontend, hopefully very quickly. To run it:
 
 ```bash
-cd examples && LYNXKITE_RELOAD=1 lynxkite
+cd examples && lynxkite
 ```
 
 If you also want to make changes to the frontend with hot reloading:

lynxkite-app/src/lynxkite_app/crdt.py

@@ -301,14 +301,14 @@ def sanitize_path(path):
     return os.path.relpath(os.path.normpath(os.path.join("/", path)), "/")
 
 
-@router.websocket("/ws/crdt/{room_name}")
+@router.websocket("/ws/crdt/{room_name:path}")
 async def crdt_websocket(websocket: fastapi.WebSocket, room_name: str):
     room_name = sanitize_path(room_name)
     server = pycrdt_websocket.ASGIServer(ws_websocket_server)
     await server({"path": room_name}, websocket._receive, websocket._send)
 
 
-@router.websocket("/ws/code/crdt/{room_name}")
+@router.websocket("/ws/code/crdt/{room_name:path}")
 async def code_crdt_websocket(websocket: fastapi.WebSocket, room_name: str):
     room_name = sanitize_path(room_name)
     server = pycrdt_websocket.ASGIServer(code_websocket_server)

lynxkite-app/web/playwright.config.ts

@@ -2,19 +2,18 @@ import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
   testDir: "./tests",
-  timeout: 30000,
+  timeout: process.env.CI ? 20000 : 10000,
   fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  maxFailures: 5,
+  retries: 0,
+  maxFailures: 3,
   workers: 1,
   reporter: process.env.CI ? [["github"], ["html"]] : "html",
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: "http://127.0.0.1:8000",
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
+    trace: "on",
     testIdAttribute: "data-nodeid", // Useful for easily selecting nodes using getByTestId
   },
   projects: [
@@ -24,7 +23,7 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: "cd ../../examples && lynxkite",
+    command: "cd ../../examples && LYNXKITE_SUPPRESS_OP_ERRORS=1 lynxkite",
     port: 8000,
     reuseExistingServer: false,
   },

lynxkite-app/web/src/Code.tsx

@@ -3,7 +3,7 @@
 import Editor, { type Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { useEffect, useRef } from "react";
-import { Link, useParams } from "react-router";
+import { Link } from "react-router";
 import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
 // @ts-ignore
@@ -14,9 +14,10 @@ import Backspace from "~icons/tabler/backspace.jsx";
 import Close from "~icons/tabler/x.jsx";
 import favicon from "./assets/favicon.ico";
 import theme from "./code-theme.ts";
+import { usePath } from "./common.ts";
 
 export default function Code() {
-  const { path } = useParams();
+  const path = usePath().replace(/^[/]code[/]/, "");
   const parentDir = path!.split("/").slice(0, -1).join("/");
   const yDocRef = useRef<any>();
   const wsProviderRef = useRef<any>();

lynxkite-app/web/src/Directory.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 // The directory browser.
-import { Link, useNavigate, useParams } from "react-router";
+import { Link, useNavigate } from "react-router";
 import useSWR from "swr";
 import type { DirectoryEntry } from "./apiTypes.ts";
+import { usePath } from "./common.ts";
 
 // @ts-ignore
 import File from "~icons/tabler/file";
@@ -58,7 +59,7 @@ function EntryCreator(props: {
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function () {
-  const { path } = useParams();
+  const path = usePath().replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
   const encodedPath = encodeURIComponent(path || "");
   const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher, {
     dedupingInterval: 0,
@@ -160,7 +161,7 @@ export default function () {
 
             {path ? (
               <div className="breadcrumbs">
-                <Link to="/dir/">
+                <Link to="/dir/" aria-label="home">
                   <Home />
                 </Link>{" "}
                 <span className="current-folder">{path}</span>

lynxkite-app/web/src/common.ts

@@ -0,0 +1,7 @@
+import { useLocation } from "react-router";
+
+export function usePath() {
+  // Decode special characters. Drop trailing slash. (Some clients add it, e.g. Playwright.)
+  const path = decodeURIComponent(useLocation().pathname).replace(/[/]$/, "");
+  return path;
+}

lynxkite-app/web/src/main.tsx

@@ -13,9 +13,9 @@ createRoot(document.getElementById("root")!).render(
       <Routes>
         <Route path="/" element={<Directory />} />
         <Route path="/dir" element={<Directory />} />
-        <Route path="/dir/:path" element={<Directory />} />
-        <Route path="/edit/:path" element={<Workspace />} />
-        <Route path="/code/:path" element={<Code />} />
+        <Route path="/dir/*" element={<Directory />} />
+        <Route path="/edit/*" element={<Workspace />} />
+        <Route path="/code/*" element={<Code />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>,

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -18,7 +18,7 @@ import {
 } from "@xyflow/react";
 import axios from "axios";
 import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
-import { useParams } from "react-router";
+import { Link } from "react-router";
 import useSWR, { type Fetcher } from "swr";
 import { WebsocketProvider } from "y-websocket";
 // @ts-ignore
@@ -31,6 +31,7 @@ import Restart from "~icons/tabler/rotate-clockwise.jsx";
 import Close from "~icons/tabler/x.jsx";
 import type { Workspace, WorkspaceNode } from "../apiTypes.ts";
 import favicon from "../assets/favicon.ico";
+import { usePath } from "../common.ts";
 // import NodeWithTableView from './NodeWithTableView';
 import EnvironmentSelector from "./EnvironmentSelector";
 import { LynxKiteState } from "./LynxKiteState";
@@ -55,7 +56,7 @@ function LynxKiteFlow() {
   const reactFlow = useReactFlow();
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
-  const { path } = useParams();
+  const path = usePath().replace(/^[/]edit[/]/, "");
   const shortPath = path!
     .split("/")
     .pop()!
@@ -335,9 +336,9 @@ function LynxKiteFlow() {
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
-        <a className="logo" href="">
+        <Link className="logo" to="/">
           <img alt="" src={favicon} />
-        </a>
+        </Link>
         <div className="ws-name">{shortPath}</div>
         <title>{shortPath}</title>
         <EnvironmentSelector
@@ -357,9 +358,9 @@ function LynxKiteFlow() {
           <button className="btn btn-link" onClick={executeWorkspace}>
             <Restart />
           </button>
-          <a className="btn btn-link" href={`/dir/${parentDir}`}>
+          <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
             <Close />
-          </a>
+          </Link>
         </div>
       </div>
       <div style={{ height: "100%", width: "100vw" }} onDragOver={onDragOver} onDrop={onDrop}>

lynxkite-app/web/tests/lynxkite.ts

@@ -155,7 +155,7 @@ export class Workspace {
   }
 
   async close() {
-    await this.page.locator('a[href="/dir/"]').click();
+    await this.page.getByRole("link", { name: "close" }).click();
   }
 }
 
@@ -220,6 +220,6 @@ export class Splash {
   }
 
   async goHome() {
-    await this.page.locator('a[href="/dir/"]').click();
+    await this.page.getByRole("link", { name: "home" }).click();
   }
 }

lynxkite-core/src/lynxkite/core/workspace.py

@@ -102,12 +102,14 @@ class Workspace(BaseConfig):
             return self
         catalog = ops.CATALOGS[self.env]
         _ops = {n.id: catalog[n.data.title] for n in self.nodes if n.data.title in catalog}
-        valid_targets = set(
-            (n.id, h) for n in self.nodes for h in _ops[n.id].inputs if n.id in _ops
-        )
-        valid_sources = set(
-            (n.id, h) for n in self.nodes for h in _ops[n.id].outputs if n.id in _ops
-        )
+        valid_targets = set()
+        valid_sources = set()
+        for n in self.nodes:
+            if n.id in _ops:
+                for h in _ops[n.id].inputs:
+                    valid_targets.add((n.id, h))
+                for h in _ops[n.id].outputs:
+                    valid_sources.add((n.id, h))
         edges = [
             edge
             for edge in self.edges