Set up Biome for JS linting/formatting.

biome.json

@@ -0,0 +1,24 @@
+{
+  "formatter": {
+    "ignore": ["**/node_modules/**", "**/dist/**"],
+    "indentStyle": "space"
+  },
+  "linter": {
+    "ignore": ["**/node_modules/**", "**/dist/**"],
+    "rules": {
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off",
+        "useValidAnchor": "off",
+        "useButtonType": "off",
+        "noNoninteractiveTabindex": "off"
+      }
+    }
+  }
+}

lynxkite-app/web/eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);

lynxkite-app/web/playwright.config.ts

@@ -1,31 +1,30 @@
-import { defineConfig, devices } from '@playwright/test';
-
+import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   timeout: 30000,
   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,
   workers: 1,
-  reporter: process.env.CI ? [['github'], ['html']] : 'html',
+  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',
+    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',
-    testIdAttribute: 'data-nodeid' // Useful for easily selecting nodes using getByTestId
+    trace: "on-first-retry",
+    testIdAttribute: "data-nodeid", // Useful for easily selecting nodes using getByTestId
   },
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
   ],
   webServer: {
-    command: 'cd .. && lynxkite',
-    url: 'http://127.0.0.1:8000',
+    command: "cd .. && lynxkite",
+    url: "http://127.0.0.1:8000",
     reuseExistingServer: false,
   },
 });

lynxkite-app/web/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

lynxkite-app/web/src/Directory.tsx

@@ -21,182 +21,182 @@ import logo from "./assets/logo.png";
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function () {
-	const { path } = useParams();
-	const encodedPath = encodeURIComponent(path || "");
-	const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher);
-	const navigate = useNavigate();
-	const [isCreatingDir, setIsCreatingDir] = useState(false);
-	const [isCreatingWorkspace, setIsCreatingWorkspace] = useState(false);
-
-	function link(item: DirectoryEntry) {
-		if (item.type === "directory") {
-			return `/dir/${item.name}`;
-		}
-		return `/edit/${item.name}`;
-	}
-
-	function shortName(item: DirectoryEntry) {
-		return item.name.split("/").pop();
-	}
-
-	function newName(list: DirectoryEntry[], baseName = "Untitled") {
-		let i = 0;
-		while (true) {
-			const name = `${baseName}${i ? ` ${i}` : ""}`;
-			if (!list.find((item) => item.name === name)) {
-				return name;
-			}
-			i++;
-		}
-	}
-
-	function newWorkspaceIn(
-		path: string,
-		list: DirectoryEntry[],
-		workspaceName?: string,
-	) {
-		const pathSlash = path ? `${path}/` : "";
-		const name = workspaceName || newName(list);
-		navigate(`/edit/${pathSlash}${name}`, { replace: true });
-	}
-
-	async function newFolderIn(
-		path: string,
-		list: DirectoryEntry[],
-		folderName?: string,
-	) {
-		const name = folderName || newName(list, "New Folder");
-		const pathSlash = path ? `${path}/` : "";
-
-		const res = await fetch("/api/dir/mkdir", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ path: pathSlash + name }),
-		});
-		if (res.ok) {
-			navigate(`/dir/${pathSlash}${name}`);
-		} else {
-			alert("Failed to create folder.");
-		}
-	}
-
-	async function deleteItem(item: DirectoryEntry) {
-		if (!window.confirm(`Are you sure you want to delete "${item.name}"?`))
-			return;
-		const pathSlash = path ? `${path}/` : "";
-
-		const apiPath =
-			item.type === "directory" ? "/api/dir/delete" : "/api/delete";
-		await fetch(apiPath, {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ path: pathSlash + item.name }),
-		});
-	}
-
-	return (
-		<div className="directory">
-			<div className="logo">
-				<a href="https://lynxkite.com/">
-					<img src={logo} className="logo-image" alt="LynxKite logo" />
-				</a>
-				<div className="tagline">The Complete Graph Data Science Platform</div>
-			</div>
-			<div className="entry-list">
-				{list.error && <p className="error">{list.error.message}</p>}
-				{list.isLoading && (
-					<output className="loading spinner-border">
-						<span className="visually-hidden">Loading...</span>
-					</output>
-				)}
-
-				{list.data && (
-					<>
-						<div className="actions">
-							<div className="new-workspace">
-								{isCreatingWorkspace && (
-									// @ts-ignore
-									<form
-										onSubmit={(e) => {
-											e.preventDefault();
-											newWorkspaceIn(
-												path || "",
-												list.data,
-												e.target.workspaceName.value.trim(),
-											);
-										}}
-									>
-										<input
-											type="text"
-											name="workspaceName"
-											defaultValue={newName(list.data)}
-											placeholder={newName(list.data)}
-										/>
-									</form>
-								)}
-								<button
-									type="button"
-									onClick={() => setIsCreatingWorkspace(true)}
-								>
-									<FolderPlus /> New workspace
-								</button>
-							</div>
-
-							<div className="new-folder">
-								{isCreatingDir && (
-									// @ts-ignore
-									<form
-										onSubmit={(e) => {
-											e.preventDefault();
-											newFolderIn(
-												path || "",
-												list.data,
-												e.target.folderName.value.trim(),
-											);
-										}}
-									>
-										<input
-											type="text"
-											name="folderName"
-											defaultValue={newName(list.data)}
-											placeholder={newName(list.data)}
-										/>
-									</form>
-								)}
-								<button type="button" onClick={() => setIsCreatingDir(true)}>
-									<FolderPlus /> New folder
-								</button>
-							</div>
-						</div>
-
-						{path && (
-							<div className="breadcrumbs">
-								<a href="/dir/">
-									<Home />
-								</a>{" "}
-								<span className="current-folder">{path}</span>
-							</div>
-						)}
-
-						{list.data.map((item: DirectoryEntry) => (
-							<div key={item.name} className="entry">
-								<a key={link(item)} href={link(item)}>
-									{item.type === "directory" ? <Folder /> : <File />}
-									{shortName(item)}
-								</a>
-								<button
-									type="button"
-									onClick={() => {
-										deleteItem(item);
-									}}
-								>
-									<Trash />
-								</button>
-							</div>
-						))}
-					</>
-				)}
-			</div>{" "}
-		</div>
-	);
+  const { path } = useParams();
+  const encodedPath = encodeURIComponent(path || "");
+  const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher);
+  const navigate = useNavigate();
+  const [isCreatingDir, setIsCreatingDir] = useState(false);
+  const [isCreatingWorkspace, setIsCreatingWorkspace] = useState(false);
+
+  function link(item: DirectoryEntry) {
+    if (item.type === "directory") {
+      return `/dir/${item.name}`;
+    }
+    return `/edit/${item.name}`;
+  }
+
+  function shortName(item: DirectoryEntry) {
+    return item.name.split("/").pop();
+  }
+
+  function newName(list: DirectoryEntry[], baseName = "Untitled") {
+    let i = 0;
+    while (true) {
+      const name = `${baseName}${i ? ` ${i}` : ""}`;
+      if (!list.find((item) => item.name === name)) {
+        return name;
+      }
+      i++;
+    }
+  }
+
+  function newWorkspaceIn(
+    path: string,
+    list: DirectoryEntry[],
+    workspaceName?: string,
+  ) {
+    const pathSlash = path ? `${path}/` : "";
+    const name = workspaceName || newName(list);
+    navigate(`/edit/${pathSlash}${name}`, { replace: true });
+  }
+
+  async function newFolderIn(
+    path: string,
+    list: DirectoryEntry[],
+    folderName?: string,
+  ) {
+    const name = folderName || newName(list, "New Folder");
+    const pathSlash = path ? `${path}/` : "";
+
+    const res = await fetch("/api/dir/mkdir", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: pathSlash + name }),
+    });
+    if (res.ok) {
+      navigate(`/dir/${pathSlash}${name}`);
+    } else {
+      alert("Failed to create folder.");
+    }
+  }
+
+  async function deleteItem(item: DirectoryEntry) {
+    if (!window.confirm(`Are you sure you want to delete "${item.name}"?`))
+      return;
+    const pathSlash = path ? `${path}/` : "";
+
+    const apiPath =
+      item.type === "directory" ? "/api/dir/delete" : "/api/delete";
+    await fetch(apiPath, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: pathSlash + item.name }),
+    });
+  }
+
+  return (
+    <div className="directory">
+      <div className="logo">
+        <a href="https://lynxkite.com/">
+          <img src={logo} className="logo-image" alt="LynxKite logo" />
+        </a>
+        <div className="tagline">The Complete Graph Data Science Platform</div>
+      </div>
+      <div className="entry-list">
+        {list.error && <p className="error">{list.error.message}</p>}
+        {list.isLoading && (
+          <output className="loading spinner-border">
+            <span className="visually-hidden">Loading...</span>
+          </output>
+        )}
+
+        {list.data && (
+          <>
+            <div className="actions">
+              <div className="new-workspace">
+                {isCreatingWorkspace && (
+                  // @ts-ignore
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      newWorkspaceIn(
+                        path || "",
+                        list.data,
+                        e.target.workspaceName.value.trim(),
+                      );
+                    }}
+                  >
+                    <input
+                      type="text"
+                      name="workspaceName"
+                      defaultValue={newName(list.data)}
+                      placeholder={newName(list.data)}
+                    />
+                  </form>
+                )}
+                <button
+                  type="button"
+                  onClick={() => setIsCreatingWorkspace(true)}
+                >
+                  <FolderPlus /> New workspace
+                </button>
+              </div>
+
+              <div className="new-folder">
+                {isCreatingDir && (
+                  // @ts-ignore
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      newFolderIn(
+                        path || "",
+                        list.data,
+                        e.target.folderName.value.trim(),
+                      );
+                    }}
+                  >
+                    <input
+                      type="text"
+                      name="folderName"
+                      defaultValue={newName(list.data)}
+                      placeholder={newName(list.data)}
+                    />
+                  </form>
+                )}
+                <button type="button" onClick={() => setIsCreatingDir(true)}>
+                  <FolderPlus /> New folder
+                </button>
+              </div>
+            </div>
+
+            {path && (
+              <div className="breadcrumbs">
+                <a href="/dir/">
+                  <Home />
+                </a>{" "}
+                <span className="current-folder">{path}</span>
+              </div>
+            )}
+
+            {list.data.map((item: DirectoryEntry) => (
+              <div key={item.name} className="entry">
+                <a key={link(item)} href={link(item)}>
+                  {item.type === "directory" ? <Folder /> : <File />}
+                  {shortName(item)}
+                </a>
+                <button
+                  type="button"
+                  onClick={() => {
+                    deleteItem(item);
+                  }}
+                >
+                  <Trash />
+                </button>
+              </div>
+            ))}
+          </>
+        )}
+      </div>{" "}
+    </div>
+  );
 }

lynxkite-app/web/src/apiTypes.ts

@@ -6,13 +6,13 @@
 */
 
 export interface DirectoryEntry {
-	name: string;
-	type: string;
+  name: string;
+  type: string;
 }
 export interface SaveRequest {
-	path: string;
-	ws: Workspace;
-	[k: string]: unknown;
+  path: string;
+  ws: Workspace;
+  [k: string]: unknown;
 }
 /**
  * A workspace is a representation of a computational graph that consists of nodes and edges.
@@ -22,37 +22,37 @@ export interface SaveRequest {
  * that can be performed in the workspace and the execution method for the operations.
  */
 export interface Workspace {
-	env?: string;
-	nodes?: WorkspaceNode[];
-	edges?: WorkspaceEdge[];
-	[k: string]: unknown;
+  env?: string;
+  nodes?: WorkspaceNode[];
+  edges?: WorkspaceEdge[];
+  [k: string]: unknown;
 }
 export interface WorkspaceNode {
-	id: string;
-	type: string;
-	data: WorkspaceNodeData;
-	position: Position;
-	[k: string]: unknown;
+  id: string;
+  type: string;
+  data: WorkspaceNodeData;
+  position: Position;
+  [k: string]: unknown;
 }
 export interface WorkspaceNodeData {
-	title: string;
-	params: {
-		[k: string]: unknown;
-	};
-	display?: unknown;
-	error?: string | null;
-	[k: string]: unknown;
+  title: string;
+  params: {
+    [k: string]: unknown;
+  };
+  display?: unknown;
+  error?: string | null;
+  [k: string]: unknown;
 }
 export interface Position {
-	x: number;
-	y: number;
-	[k: string]: unknown;
+  x: number;
+  y: number;
+  [k: string]: unknown;
 }
 export interface WorkspaceEdge {
-	id: string;
-	source: string;
-	target: string;
-	sourceHandle: string;
-	targetHandle: string;
-	[k: string]: unknown;
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle: string;
+  targetHandle: string;
+  [k: string]: unknown;
 }

lynxkite-app/web/src/index.css

@@ -154,7 +154,6 @@ body {
       width: fit-content;
       padding: 2px 8px;
       border-radius: 4px 4px 0 0;
-      ;
     }
 
     .collapsed-param {
@@ -317,7 +316,6 @@ body {
   }
 }
 
-
 path.react-flow__edge-path {
   stroke-width: 2;
   stroke: black;

lynxkite-app/web/src/main.tsx

@@ -1,12 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import '@xyflow/react/dist/style.css';
-import './index.css'
-import Directory from './Directory.tsx'
-import Workspace from './workspace/Workspace.tsx'
-import { BrowserRouter, Routes, Route } from "react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@xyflow/react/dist/style.css";
+import "./index.css";
+import { BrowserRouter, Route, Routes } from "react-router";
+import Directory from "./Directory.tsx";
+import Workspace from "./workspace/Workspace.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
@@ -17,4 +17,4 @@ createRoot(document.getElementById('root')!).render(
       </Routes>
     </BrowserRouter>
   </StrictMode>,
-)
+);

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

@@ -1,14 +1,21 @@
-export default function EnvironmentSelector(props: { options: string[], value: string, onChange: (val: string) => void }) {
+export default function EnvironmentSelector(props: {
+  options: string[];
+  value: string;
+  onChange: (val: string) => void;
+}) {
   return (
     <>
-      <select className="select w-full max-w-xs"
+      <select
+        className="select w-full max-w-xs"
         name="workspace-env"
         value={props.value}
         onChange={(evt) => props.onChange(evt.currentTarget.value)}
       >
-        {props.options.map(option =>
-          <option key={option} value={option}>{option}</option>
-        )}
+        {props.options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
       </select>
     </>
   );

lynxkite-app/web/src/workspace/LynxKiteState.ts

@@ -1,4 +1,4 @@
 import { createContext } from "react";
-import { Workspace } from "../apiTypes.ts";
+import type { Workspace } from "../apiTypes.ts";
 
 export const LynxKiteState = createContext({ workspace: {} as Workspace });

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

@@ -1,22 +1,33 @@
-import Fuse from 'fuse.js'
-import { useEffect, useMemo, useRef, useState } from 'react';
+import Fuse from "fuse.js";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 export type OpsOp = {
-  name: string
-  type: string
-  position: { x: number, y: number }
-  params: { name: string, default: any }[]
-}
+  name: string;
+  type: string;
+  position: { x: number; y: number };
+  params: { name: string; default: any }[];
+};
 export type Catalog = { [op: string]: OpsOp };
 export type Catalogs = { [env: string]: Catalog };
 
-export default function (props: { boxes: Catalog, onCancel: any, onAdd: any, pos: { x: number, y: number } }) {
+export default function (props: {
+  boxes: Catalog;
+  onCancel: any;
+  onAdd: any;
+  pos: { x: number; y: number };
+}) {
   const searchBox = useRef(null as unknown as HTMLInputElement);
-  const [searchText, setSearchText] = useState('');
-  const fuse = useMemo(() => new Fuse(Object.values(props.boxes), {
-    keys: ['name']
-  }), [props.boxes]);
-  const hits: { item: OpsOp }[] = searchText ? fuse.search<OpsOp>(searchText) : Object.values(props.boxes).map(box => ({ item: box }));
+  const [searchText, setSearchText] = useState("");
+  const fuse = useMemo(
+    () =>
+      new Fuse(Object.values(props.boxes), {
+        keys: ["name"],
+      }),
+    [props.boxes],
+  );
+  const hits: { item: OpsOp }[] = searchText
+    ? fuse.search<OpsOp>(searchText)
+    : Object.values(props.boxes).map((box) => ({ item: box }));
   const [selectedIndex, setSelectedIndex] = useState(0);
   useEffect(() => searchBox.current.focus());
   function typed(text: string) {
@@ -24,15 +35,15 @@ export default function (props: { boxes: Catalog, onCancel: any, onAdd: any, pos
     setSelectedIndex(Math.max(0, Math.min(selectedIndex, hits.length - 1)));
   }
   function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       setSelectedIndex(Math.min(selectedIndex + 1, hits.length - 1));
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setSelectedIndex(Math.max(selectedIndex - 1, 0));
-    } else if (e.key === 'Enter') {
+    } else if (e.key === "Enter") {
       addSelected();
-    } else if (e.key === 'Escape') {
+    } else if (e.key === "Escape") {
       props.onCancel();
     }
   }
@@ -43,33 +54,37 @@ export default function (props: { boxes: Catalog, onCancel: any, onAdd: any, pos
   }
   async function lostFocus(e: any) {
     // If it's a click on a result, let the click handler handle it.
-    if (e.relatedTarget && e.relatedTarget.closest('.node-search')) return;
+    if (e.relatedTarget?.closest(".node-search")) return;
     props.onCancel();
   }
 
-
   return (
-    <div className="node-search" style={{ top: props.pos.y, left: props.pos.x }}>
+    <div
+      className="node-search"
+      style={{ top: props.pos.y, left: props.pos.x }}
+    >
       <input
         ref={searchBox}
         value={searchText}
-        onChange={event => typed(event.target.value)}
+        onChange={(event) => typed(event.target.value)}
         onKeyDown={onKeyDown}
         onBlur={lostFocus}
-        placeholder="Search for box" />
+        placeholder="Search for box"
+      />
       <div className="matches">
-        {hits.map((box, index) =>
+        {hits.map((box, index) => (
           <div
             key={box.item.name}
             tabIndex={0}
             onFocus={() => setSelectedIndex(index)}
             onMouseEnter={() => setSelectedIndex(index)}
             onClick={addSelected}
-            className={`search-result ${index === selectedIndex ? 'selected' : ''}`}>
+            className={`search-result ${index === selectedIndex ? "selected" : ""}`}
+          >
             {box.item.name}
           </div>
-        )}
+        ))}
       </div>
-    </div >
+    </div>
   );
 }

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

@@ -1,40 +1,50 @@
-// The LynxKite workspace editor.
-import { useParams } from "react-router";
-import useSWR, { Fetcher } from 'swr';
-import { useEffect, useMemo, useCallback, useState, MouseEvent } from "react";
-import favicon from '../assets/favicon.ico';
+import { getYjsDoc, syncedStore } from "@syncedstore/core";
 import {
-  ReactFlow,
+  type Connection,
   Controls,
+  type Edge,
   MarkerType,
+  MiniMap,
+  type Node,
+  ReactFlow,
   ReactFlowProvider,
+  type XYPosition,
   applyEdgeChanges,
   applyNodeChanges,
-  useUpdateNodeInternals,
-  type XYPosition,
-  type Node,
-  type Edge,
-  type Connection,
   useReactFlow,
-  MiniMap,
-} from '@xyflow/react';
+  useUpdateNodeInternals,
+} from "@xyflow/react";
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+// The LynxKite workspace editor.
+import { useParams } from "react-router";
+import useSWR, { type Fetcher } from "swr";
+import { WebsocketProvider } from "y-websocket";
 // @ts-ignore
-import ArrowBack from '~icons/tabler/arrow-back.jsx';
+import ArrowBack from "~icons/tabler/arrow-back.jsx";
 // @ts-ignore
-import Backspace from '~icons/tabler/backspace.jsx';
+import Atom from "~icons/tabler/atom.jsx";
 // @ts-ignore
-import Atom from '~icons/tabler/atom.jsx';
-import { syncedStore, getYjsDoc } from "@syncedstore/core";
-import { WebsocketProvider } from "y-websocket";
-import NodeWithParams from './nodes/NodeWithParams';
+import Backspace from "~icons/tabler/backspace.jsx";
+import type { Workspace, WorkspaceNode } from "../apiTypes.ts";
+import favicon from "../assets/favicon.ico";
 // import NodeWithTableView from './NodeWithTableView';
-import EnvironmentSelector from './EnvironmentSelector';
-import { LynxKiteState } from './LynxKiteState';
-import { Workspace, WorkspaceNode } from "../apiTypes.ts";
-import NodeSearch, { OpsOp, Catalog, Catalogs } from "./NodeSearch.tsx";
-import NodeWithVisualization from "./nodes/NodeWithVisualization.tsx";
+import EnvironmentSelector from "./EnvironmentSelector";
+import { LynxKiteState } from "./LynxKiteState";
+import NodeSearch, {
+  type OpsOp,
+  type Catalog,
+  type Catalogs,
+} from "./NodeSearch.tsx";
 import NodeWithImage from "./nodes/NodeWithImage.tsx";
+import NodeWithParams from "./nodes/NodeWithParams";
 import NodeWithTableView from "./nodes/NodeWithTableView.tsx";
+import NodeWithVisualization from "./nodes/NodeWithVisualization.tsx";
 
 export default function (props: any) {
   return (
@@ -44,9 +54,8 @@ export default function (props: any) {
   );
 }
 
-
 function LynxKiteFlow() {
-  const updateNodeInternals = useUpdateNodeInternals()
+  const updateNodeInternals = useUpdateNodeInternals();
   const reactFlow = useReactFlow();
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
@@ -56,7 +65,11 @@ function LynxKiteFlow() {
     const state = syncedStore({ workspace: {} as Workspace });
     setState(state);
     const doc = getYjsDoc(state);
-    const wsProvider = new WebsocketProvider(`ws://${location.host}/ws/crdt`, path!, doc);
+    const wsProvider = new WebsocketProvider(
+      `ws://${location.host}/ws/crdt`,
+      path!,
+      doc,
+    );
     const onChange = (_update: any, origin: any, _doc: any, _tr: any) => {
       if (origin === wsProvider) {
         // An update from the CRDT. Apply it to the local state.
@@ -72,154 +85,196 @@ function LynxKiteFlow() {
         }
       }
     };
-    doc.on('update', onChange);
+    doc.on("update", onChange);
     return () => {
       doc.destroy();
       wsProvider.destroy();
-    }
-  }, [path]);
+    };
+  }, [path, updateNodeInternals]);
 
-  const onNodesChange = useCallback((changes: any[]) => {
-    // An update from the UI. Apply it to the local state...
-    setNodes((nds) => applyNodeChanges(changes, nds));
-    // ...and to the CRDT state. (Which could be the same, except for ReactFlow's internal copies.)
-    const wnodes = state.workspace?.nodes;
-    if (!wnodes) return;
-    for (const ch of changes) {
-      const nodeIndex = wnodes.findIndex((n) => n.id === ch.id);
-      if (nodeIndex === -1) continue;
-      const node = wnodes[nodeIndex];
-      if (!node) continue;
-      // Position events sometimes come with NaN values. Ignore them.
-      if (ch.type === 'position' && !isNaN(ch.position.x) && !isNaN(ch.position.y)) {
-        getYjsDoc(state).transact(() => {
-          Object.assign(node.position, ch.position);
-        });
-      } else if (ch.type === 'select') {
-      } else if (ch.type === 'dimensions') {
-        getYjsDoc(state).transact(() => Object.assign(node, ch.dimensions));
-      } else if (ch.type === 'remove') {
-        wnodes.splice(nodeIndex, 1);
-      } else if (ch.type === 'replace') {
-        // Ideally we would only update the parameter that changed. But ReactFlow does not give us that detail.
-        const u = {
-          collapsed: ch.item.data.collapsed,
-          // The "..." expansion on a Y.map returns an empty object. Copying with fromEntries/entries instead.
-          params: { ...Object.fromEntries(Object.entries(ch.item.data.params)) },
-          __execution_delay: ch.item.data.__execution_delay,
-        };
-        getYjsDoc(state).transact(() => Object.assign(node.data, u));
-      } else {
-        console.log('Unknown node change', ch);
+  const onNodesChange = useCallback(
+    (changes: any[]) => {
+      // An update from the UI. Apply it to the local state...
+      setNodes((nds) => applyNodeChanges(changes, nds));
+      // ...and to the CRDT state. (Which could be the same, except for ReactFlow's internal copies.)
+      const wnodes = state.workspace?.nodes;
+      if (!wnodes) return;
+      for (const ch of changes) {
+        const nodeIndex = wnodes.findIndex((n) => n.id === ch.id);
+        if (nodeIndex === -1) continue;
+        const node = wnodes[nodeIndex];
+        if (!node) continue;
+        // Position events sometimes come with NaN values. Ignore them.
+        if (
+          ch.type === "position" &&
+          !Number.isNaN(ch.position.x) &&
+          !Number.isNaN(ch.position.y)
+        ) {
+          getYjsDoc(state).transact(() => {
+            Object.assign(node.position, ch.position);
+          });
+        } else if (ch.type === "select") {
+        } else if (ch.type === "dimensions") {
+          getYjsDoc(state).transact(() => Object.assign(node, ch.dimensions));
+        } else if (ch.type === "remove") {
+          wnodes.splice(nodeIndex, 1);
+        } else if (ch.type === "replace") {
+          // Ideally we would only update the parameter that changed. But ReactFlow does not give us that detail.
+          const u = {
+            collapsed: ch.item.data.collapsed,
+            // The "..." expansion on a Y.map returns an empty object. Copying with fromEntries/entries instead.
+            params: {
+              ...Object.fromEntries(Object.entries(ch.item.data.params)),
+            },
+            __execution_delay: ch.item.data.__execution_delay,
+          };
+          getYjsDoc(state).transact(() => Object.assign(node.data, u));
+        } else {
+          console.log("Unknown node change", ch);
+        }
       }
-    }
-  }, [state]);
-  const onEdgesChange = useCallback((changes: any[]) => {
-    setEdges((eds) => applyEdgeChanges(changes, eds));
-    const wedges = state.workspace?.edges;
-    if (!wedges) return;
-    for (const ch of changes) {
-      const edgeIndex = wedges.findIndex((e) => e.id === ch.id);
-      if (ch.type === 'remove') {
-        wedges.splice(edgeIndex, 1);
-      } else if (ch.type === 'select') {
-      } else {
-        console.log('Unknown edge change', ch);
+    },
+    [state],
+  );
+  const onEdgesChange = useCallback(
+    (changes: any[]) => {
+      setEdges((eds) => applyEdgeChanges(changes, eds));
+      const wedges = state.workspace?.edges;
+      if (!wedges) return;
+      for (const ch of changes) {
+        const edgeIndex = wedges.findIndex((e) => e.id === ch.id);
+        if (ch.type === "remove") {
+          wedges.splice(edgeIndex, 1);
+        } else if (ch.type === "select") {
+        } else {
+          console.log("Unknown edge change", ch);
+        }
       }
-    }
-  }, [state]);
+    },
+    [state],
+  );
 
-  const fetcher: Fetcher<Catalogs> = (resource: string, init?: RequestInit) => fetch(resource, init).then(res => res.json());
-  const catalog = useSWR('/api/catalog', fetcher);
+  const fetcher: Fetcher<Catalogs> = (resource: string, init?: RequestInit) =>
+    fetch(resource, init).then((res) => res.json());
+  const catalog = useSWR("/api/catalog", fetcher);
   const [suppressSearchUntil, setSuppressSearchUntil] = useState(0);
-  const [nodeSearchSettings, setNodeSearchSettings] = useState(undefined as {
-    pos: XYPosition,
-    boxes: Catalog,
-  } | undefined);
-  const nodeTypes = useMemo(() => ({
-    basic: NodeWithParams,
-    visualization: NodeWithVisualization,
-    image: NodeWithImage,
-    table_view: NodeWithTableView,
-  }), []);
+  const [nodeSearchSettings, setNodeSearchSettings] = useState(
+    undefined as
+      | {
+          pos: XYPosition;
+          boxes: Catalog;
+        }
+      | undefined,
+  );
+  const nodeTypes = useMemo(
+    () => ({
+      basic: NodeWithParams,
+      visualization: NodeWithVisualization,
+      image: NodeWithImage,
+      table_view: NodeWithTableView,
+    }),
+    [],
+  );
   const closeNodeSearch = useCallback(() => {
     setNodeSearchSettings(undefined);
     setSuppressSearchUntil(Date.now() + 200);
-  }, [setNodeSearchSettings, setSuppressSearchUntil]);
-  const toggleNodeSearch = useCallback((event: MouseEvent) => {
-    if (suppressSearchUntil > Date.now()) return;
-    if (nodeSearchSettings) {
-      closeNodeSearch();
-      return;
-    }
-    event.preventDefault();
-    setNodeSearchSettings({
-      pos: { x: event.clientX, y: event.clientY },
-      boxes: catalog.data![state.workspace.env!],
-    });
-  }, [catalog, state, setNodeSearchSettings, suppressSearchUntil]);
-  const addNode = useCallback((meta: OpsOp) => {
-    const node: Partial<WorkspaceNode> = {
-      type: meta.type,
-      data: {
-        meta: meta,
-        title: meta.name,
-        params: Object.fromEntries(
-          Object.values(meta.params).map((p) => [p.name, p.default])),
-      },
-    };
-    const nss = nodeSearchSettings!;
-    node.position = reactFlow.screenToFlowPosition({ x: nss.pos.x, y: nss.pos.y });
-    const title = meta.name;
-    let i = 1;
-    node.id = `${title} ${i}`;
-    const wnodes = state.workspace.nodes!;
-    while (wnodes.find((x) => x.id === node.id)) {
-      i += 1;
+  }, []);
+  const toggleNodeSearch = useCallback(
+    (event: MouseEvent) => {
+      if (suppressSearchUntil > Date.now()) return;
+      if (nodeSearchSettings) {
+        closeNodeSearch();
+        return;
+      }
+      event.preventDefault();
+      setNodeSearchSettings({
+        pos: { x: event.clientX, y: event.clientY },
+        boxes: catalog.data![state.workspace.env!],
+      });
+    },
+    [catalog, state, nodeSearchSettings, suppressSearchUntil, closeNodeSearch],
+  );
+  const addNode = useCallback(
+    (meta: OpsOp) => {
+      const node: Partial<WorkspaceNode> = {
+        type: meta.type,
+        data: {
+          meta: meta,
+          title: meta.name,
+          params: Object.fromEntries(
+            Object.values(meta.params).map((p) => [p.name, p.default]),
+          ),
+        },
+      };
+      const nss = nodeSearchSettings!;
+      node.position = reactFlow.screenToFlowPosition({
+        x: nss.pos.x,
+        y: nss.pos.y,
+      });
+      const title = meta.name;
+      let i = 1;
       node.id = `${title} ${i}`;
-    }
-    wnodes.push(node as WorkspaceNode);
-    setNodes([...nodes, node as WorkspaceNode]);
-    closeNodeSearch();
-  }, [nodeSearchSettings, state, reactFlow, setNodes]);
+      const wnodes = state.workspace.nodes!;
+      while (wnodes.find((x) => x.id === node.id)) {
+        i += 1;
+        node.id = `${title} ${i}`;
+      }
+      wnodes.push(node as WorkspaceNode);
+      setNodes([...nodes, node as WorkspaceNode]);
+      closeNodeSearch();
+    },
+    [nodeSearchSettings, state, reactFlow, nodes, closeNodeSearch],
+  );
 
-  const onConnect = useCallback((connection: Connection) => {
-    setSuppressSearchUntil(Date.now() + 200);
-    const edge = {
-      id: `${connection.source} ${connection.target}`,
-      source: connection.source,
-      sourceHandle: connection.sourceHandle!,
-      target: connection.target,
-      targetHandle: connection.targetHandle!,
-    };
-    state.workspace.edges!.push(edge);
-    setEdges((oldEdges) => [...oldEdges, edge]);
-  }, [state, setEdges]);
-  const parentDir = path!.split('/').slice(0, -1).join('/');
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setSuppressSearchUntil(Date.now() + 200);
+      const edge = {
+        id: `${connection.source} ${connection.target}`,
+        source: connection.source,
+        sourceHandle: connection.sourceHandle!,
+        target: connection.target,
+        targetHandle: connection.targetHandle!,
+      };
+      state.workspace.edges!.push(edge);
+      setEdges((oldEdges) => [...oldEdges, edge]);
+    },
+    [state],
+  );
+  const parentDir = path!.split("/").slice(0, -1).join("/");
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
-        <a className="logo" href=""><img src={favicon} /></a>
-        <div className="ws-name">
-          {path}
-        </div>
+        <a className="logo" href="">
+          <img alt="" src={favicon} />
+        </a>
+        <div className="ws-name">{path}</div>
         <EnvironmentSelector
           options={Object.keys(catalog.data || {})}
           value={state.workspace.env!}
-          onChange={(env) => { state.workspace.env = env; }}
+          onChange={(env) => {
+            state.workspace.env = env;
+          }}
         />
         <div className="tools text-secondary">
-          <a href=""><Atom /></a>
-          <a href=""><Backspace /></a>
-          <a href={'/dir/' + parentDir}><ArrowBack /></a>
+          <a href="">
+            <Atom />
+          </a>
+          <a href="">
+            <Backspace />
+          </a>
+          <a href={`/dir/${parentDir}`}>
+            <ArrowBack />
+          </a>
         </div>
       </div>
-      <div style={{ height: "100%", width: '100vw' }}>
+      <div style={{ height: "100%", width: "100vw" }}>
         <LynxKiteState.Provider value={state}>
           <ReactFlow
             nodes={nodes}
             edges={edges}
-            nodeTypes={nodeTypes} fitView
+            nodeTypes={nodeTypes}
+            fitView
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onPaneClick={toggleNodeSearch}
@@ -231,13 +286,17 @@ function LynxKiteFlow() {
           >
             <Controls />
             <MiniMap />
-            {nodeSearchSettings &&
-              <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} onCancel={closeNodeSearch} onAdd={addNode} />
-            }
+            {nodeSearchSettings && (
+              <NodeSearch
+                pos={nodeSearchSettings.pos}
+                boxes={nodeSearchSettings.boxes}
+                onCancel={closeNodeSearch}
+                onAdd={addNode}
+              />
+            )}
           </ReactFlow>
         </LynxKiteState.Provider>
       </div>
     </div>
-
   );
 }

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -1,6 +1,11 @@
-import { useReactFlow, Handle, NodeResizeControl, Position } from '@xyflow/react';
+import {
+  Handle,
+  NodeResizeControl,
+  type Position,
+  useReactFlow,
+} from "@xyflow/react";
 // @ts-ignore
-import ChevronDownRight from '~icons/tabler/chevron-down-right.jsx';
+import ChevronDownRight from "~icons/tabler/chevron-down-right.jsx";
 
 interface LynxKiteNodeProps {
   id: string;
@@ -13,18 +18,18 @@ interface LynxKiteNodeProps {
 
 function getHandles(inputs: object, outputs: object) {
   const handles: {
-    position: 'top' | 'bottom' | 'left' | 'right',
-    name: string,
-    index: number,
-    offsetPercentage: number,
-    showLabel: boolean,
-    type: 'source' | 'target',
+    position: "top" | "bottom" | "left" | "right";
+    name: string;
+    index: number;
+    offsetPercentage: number;
+    showLabel: boolean;
+    type: "source" | "target";
   }[] = [];
   for (const e of Object.values(inputs)) {
-    handles.push({ ...e, type: 'target' });
+    handles.push({ ...e, type: "target" });
   }
   for (const e of Object.values(outputs)) {
-    handles.push({ ...e, type: 'source' });
+    handles.push({ ...e, type: "source" });
   }
   const counts = { top: 0, bottom: 0, left: 0, right: 0 };
   for (const e of handles) {
@@ -32,9 +37,11 @@ function getHandles(inputs: object, outputs: object) {
     counts[e.position]++;
   }
   for (const e of handles) {
-    e.offsetPercentage = 100 * (e.index + 1) / (counts[e.position] + 1);
-    const simpleHorizontal = counts.top === 0 && counts.bottom === 0 && handles.length <= 2;
-    const simpleVertical = counts.left === 0 && counts.right === 0 && handles.length <= 2;
+    e.offsetPercentage = (100 * (e.index + 1)) / (counts[e.position] + 1);
+    const simpleHorizontal =
+      counts.top === 0 && counts.bottom === 0 && handles.length <= 2;
+    const simpleVertical =
+      counts.left === 0 && counts.right === 0 && handles.length <= 2;
     e.showLabel = !simpleHorizontal && !simpleVertical;
   }
   return handles;
@@ -48,37 +55,57 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
   function titleClicked() {
     reactFlow.updateNodeData(props.id, { collapsed: expanded });
   }
-  const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
+  const handleOffsetDirection = {
+    top: "left",
+    bottom: "left",
+    left: "top",
+    right: "top",
+  };
 
   return (
-    <div className={'node-container ' + (expanded ? 'expanded' : 'collapsed')}
-      style={{ width: props.width || 200, height: expanded ? props.height || 200 : undefined }}>
+    <div
+      className={`node-container·${expanded ? "expanded" : "collapsed"} `}
+      style={{
+        width: props.width || 200,
+        height: expanded ? props.height || 200 : undefined,
+      }}
+    >
       <div className="lynxkite-node" style={props.nodeStyle}>
         <div className="title bg-primary" onClick={titleClicked}>
           {data.title}
           {data.error && <span className="title-icon">⚠️</span>}
           {expanded || <span className="title-icon">⋯</span>}
         </div>
-        {expanded && <>
-          {data.error &&
-            <div className="error">{data.error}</div>
-          }
-          {props.children}
-          <NodeResizeControl
-            minWidth={100}
-            minHeight={50}
-            style={{ 'background': 'transparent', 'border': 'none' }}
-          >
-            <ChevronDownRight className="node-resizer" />
-          </NodeResizeControl>
-        </>}
-        {handles.map(handle => (
+        {expanded && (
+          <>
+            {data.error && <div className="error">{data.error}</div>}
+            {props.children}
+            <NodeResizeControl
+              minWidth={100}
+              minHeight={50}
+              style={{ background: "transparent", border: "none" }}
+            >
+              <ChevronDownRight className="node-resizer" />
+            </NodeResizeControl>
+          </>
+        )}
+        {handles.map((handle) => (
           <Handle
             key={handle.name}
-            id={handle.name} type={handle.type} position={handle.position as Position}
-            style={{ [handleOffsetDirection[handle.position]]: handle.offsetPercentage + '%' }}>
-            {handle.showLabel && <span className="handle-name">{handle.name.replace(/_/g, " ")}</span>}
-          </Handle >
+            id={handle.name}
+            type={handle.type}
+            position={handle.position as Position}
+            style={{
+              [handleOffsetDirection[handle.position]]:
+                `${handle.offsetPercentage}% `,
+            }}
+          >
+            {handle.showLabel && (
+              <span className="handle-name">
+                {handle.name.replace(/_/g, " ")}
+              </span>
+            )}
+          </Handle>
         ))}
       </div>
     </div>

lynxkite-app/web/src/workspace/nodes/NodeParameter.tsx

@@ -1,7 +1,9 @@
 const BOOLEAN = "<class 'bool'>";
 
 function ParamName({ name }: { name: string }) {
-  return <span className="param-name bg-base-200">{name.replace(/_/g, ' ')}</span>;
+  return (
+    <span className="param-name bg-base-200">{name.replace(/_/g, " ")}</span>
+  );
 }
 
 interface NodeParameterProps {
@@ -11,50 +13,69 @@ interface NodeParameterProps {
   onChange: (value: any, options?: { delay: number }) => void;
 }
 
-export default function NodeParameter({ name, value, meta, onChange }: NodeParameterProps) {
+export default function NodeParameter({
+  name,
+  value,
+  meta,
+  onChange,
+}: NodeParameterProps) {
   return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: Most of the time there is a control.
     <label className="param">
-      {meta?.type?.format === 'collapsed' ? <>
-        <ParamName name={name} />
-        <button className="collapsed-param">
-          ⋯
-        </button>
-      </> : meta?.type?.format === 'textarea' ? <>
-        <ParamName name={name} />
-        <textarea className="textarea textarea-bordered w-full max-w-xs"
-          rows={6}
-          value={value}
-          onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
-          onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
-        />
-      </> : meta?.type?.enum ? <>
-        <ParamName name={name} />
-        <select className="select select-bordered w-full max-w-xs"
-          value={value || meta.type.enum[0]}
-          onChange={(evt) => onChange(evt.currentTarget.value)}
-        >
-          {meta.type.enum.map((option: string) =>
-            <option key={option} value={option}>{option}</option>
-          )}
-        </select>
-      </> : meta?.type?.type === BOOLEAN ? <div className="form-control">
-        <label className="label cursor-pointer">
-          <input className="checkbox"
-            type="checkbox"
-            checked={value}
-            onChange={(evt) => onChange(evt.currentTarget.checked)}
+      {meta?.type?.format === "collapsed" ? (
+        <>
+          <ParamName name={name} />
+          <button className="collapsed-param">⋯</button>
+        </>
+      ) : meta?.type?.format === "textarea" ? (
+        <>
+          <ParamName name={name} />
+          <textarea
+            className="textarea textarea-bordered w-full max-w-xs"
+            rows={6}
+            value={value}
+            onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
+            onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
+          />
+        </>
+      ) : meta?.type?.enum ? (
+        <>
+          <ParamName name={name} />
+          <select
+            className="select select-bordered w-full max-w-xs"
+            value={value || meta.type.enum[0]}
+            onChange={(evt) => onChange(evt.currentTarget.value)}
+          >
+            {meta.type.enum.map((option: string) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </>
+      ) : meta?.type?.type === BOOLEAN ? (
+        <div className="form-control">
+          <label className="label cursor-pointer">
+            <input
+              className="checkbox"
+              type="checkbox"
+              checked={value}
+              onChange={(evt) => onChange(evt.currentTarget.checked)}
+            />
+            {name.replace(/_/g, " ")}
+          </label>
+        </div>
+      ) : (
+        <>
+          <ParamName name={name} />
+          <input
+            className="input input-bordered w-full max-w-xs"
+            value={value || ""}
+            onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
+            onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
           />
-          {name.replace(/_/g, ' ')}
-        </label>
-      </div> : <>
-        <ParamName name={name} />
-        <input className="input input-bordered w-full max-w-xs"
-          value={value || ""}
-          onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
-          onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
-        />
-      </>
-      }
-    </label >
+        </>
+      )}
+    </label>
   );
 }

lynxkite-app/web/src/workspace/nodes/NodeWithImage.tsx

@@ -1,9 +1,11 @@
-import NodeWithParams from './NodeWithParams';
+import NodeWithParams from "./NodeWithParams";
 
 const NodeWithImage = (props: any) => {
   return (
     <NodeWithParams {...props}>
-      {props.data.display && <img src={props.data.display} alt="Node Display" />}
+      {props.data.display && (
+        <img src={props.data.display} alt="Node Display" />
+      )}
     </NodeWithParams>
   );
 };

lynxkite-app/web/src/workspace/nodes/NodeWithParams.tsx

@@ -1,6 +1,6 @@
-import LynxKiteNode from './LynxKiteNode';
-import { useReactFlow } from '@xyflow/react';
-import NodeParameter from './NodeParameter';
+import { useReactFlow } from "@xyflow/react";
+import LynxKiteNode from "./LynxKiteNode";
+import NodeParameter from "./NodeParameter";
 
 export type UpdateOptions = { delay?: number };
 
@@ -8,23 +8,28 @@ function NodeWithParams(props: any) {
   const reactFlow = useReactFlow();
   const metaParams = props.data.meta?.params;
   function setParam(name: string, newValue: any, opts: UpdateOptions) {
-    reactFlow.updateNodeData(props.id, { params: { ...props.data.params, [name]: newValue }, __execution_delay: opts.delay || 0 });
+    reactFlow.updateNodeData(props.id, {
+      params: { ...props.data.params, [name]: newValue },
+      __execution_delay: opts.delay || 0,
+    });
   }
   const params = props.data?.params ? Object.entries(props.data.params) : [];
 
   return (
     <LynxKiteNode {...props}>
-      {params.map(([name, value]) =>
+      {params.map(([name, value]) => (
         <NodeParameter
           name={name}
           key={name}
           value={value}
           meta={metaParams?.[name]}
-          onChange={(value: any, opts?: UpdateOptions) => setParam(name, value, opts || {})}
+          onChange={(value: any, opts?: UpdateOptions) =>
+            setParam(name, value, opts || {})
+          }
         />
-      )}
+      ))}
       {props.children}
-    </LynxKiteNode >
+    </LynxKiteNode>
   );
 }
 

lynxkite-app/web/src/workspace/nodes/NodeWithTableView.tsx

@@ -1,15 +1,15 @@
-import { useState } from 'react';
-import Markdown from 'react-markdown'
-import LynxKiteNode from './LynxKiteNode';
-import Table from './Table';
-import React from 'react';
+import { useState } from "react";
+import React from "react";
+import Markdown from "react-markdown";
+import LynxKiteNode from "./LynxKiteNode";
+import Table from "./Table";
 
 function toMD(v: any): string {
-  if (typeof v === 'string') {
+  if (typeof v === "string") {
     return v;
   }
   if (Array.isArray(v)) {
-    return v.map(toMD).join('\n\n');
+    return v.map(toMD).join("\n\n");
   }
   return JSON.stringify(v);
 }
@@ -17,33 +17,60 @@ function toMD(v: any): string {
 export default function NodeWithTableView(props: any) {
   const [open, setOpen] = useState({} as { [name: string]: boolean });
   const display = props.data.display?.value;
-  const single = display?.dataframes && Object.keys(display?.dataframes).length === 1;
+  const single =
+    display?.dataframes && Object.keys(display?.dataframes).length === 1;
   return (
     <LynxKiteNode {...props}>
       {display && [
-        Object.entries(display.dataframes || {}).map(([name, df]: [string, any]) => <React.Fragment key={name}>
-          {!single && <div key={name + '-header'} className="df-head" onClick={() => setOpen({ ...open, [name]: !open[name] })}>{name}</div>}
-          {(single || open[name]) &&
-            (df.data.length > 1 ?
-              <Table key={name + '-table'} columns={df.columns} data={df.data} />
-              :
-              df.data.length ?
-                <dl key={name + '-dl'}>
-                  {df.columns.map((c: string, i: number) =>
-                    <React.Fragment key={name + '-' + c}>
-                      <dt>{c}</dt>
-                      <dd><Markdown>{toMD(df.data[0][i])}</Markdown></dd>
-                    </React.Fragment>)
-                  }
-                </dl>
-                :
-                JSON.stringify(df.data))}
-        </React.Fragment>),
-        Object.entries(display.others || {}).map(([name, o]) => <>
-          <div className="df-head" onClick={() => setOpen({ ...open, [name]: !open[name] })}>{name}</div>
-          {open[name] && <pre>{(o as any).toString()}</pre>}
-        </>
-        )]}
-    </LynxKiteNode >
+        Object.entries(display.dataframes || {}).map(
+          ([name, df]: [string, any]) => (
+            <React.Fragment key={name}>
+              {!single && (
+                <div
+                  key={`${name}-header`}
+                  className="df-head"
+                  onClick={() => setOpen({ ...open, [name]: !open[name] })}
+                >
+                  {name}
+                </div>
+              )}
+              {(single || open[name]) &&
+                (df.data.length > 1 ? (
+                  <Table
+                    key={`${name}-table`}
+                    columns={df.columns}
+                    data={df.data}
+                  />
+                ) : df.data.length ? (
+                  <dl key={`${name}-dl`}>
+                    {df.columns.map((c: string, i: number) => (
+                      <React.Fragment key={`${name}-${c}`}>
+                        <dt>{c}</dt>
+                        <dd>
+                          <Markdown>{toMD(df.data[0][i])}</Markdown>
+                        </dd>
+                      </React.Fragment>
+                    ))}
+                  </dl>
+                ) : (
+                  JSON.stringify(df.data)
+                ))}
+            </React.Fragment>
+          ),
+        ),
+        Object.entries(display.others || {}).map(([name, o]) => (
+          <>
+            <div
+              key={`${name}-header`}
+              className="df-head"
+              onClick={() => setOpen({ ...open, [name]: !open[name] })}
+            >
+              {name}
+            </div>
+            {open[name] && <pre>{(o as any).toString()}</pre>}
+          </>
+        )),
+      ]}
+    </LynxKiteNode>
   );
 }

lynxkite-app/web/src/workspace/nodes/NodeWithVisualization.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
-import NodeWithParams from './NodeWithParams';
-const echarts = await import('echarts');
+import React, { useEffect } from "react";
+import NodeWithParams from "./NodeWithParams";
+const echarts = await import("echarts");
 
 const NodeWithVisualization = (props: any) => {
   const chartsRef = React.useRef<HTMLDivElement>(null);
@@ -8,12 +8,16 @@ const NodeWithVisualization = (props: any) => {
   useEffect(() => {
     const opts = props.data?.display?.value;
     if (!opts || !chartsRef.current) return;
-    chartsInstanceRef.current = echarts.init(chartsRef.current, null, { renderer: 'canvas', width: 250, height: 250 });
+    chartsInstanceRef.current = echarts.init(chartsRef.current, null, {
+      renderer: "canvas",
+      width: 250,
+      height: 250,
+    });
     chartsInstanceRef.current.setOption(opts);
     const onResize = () => chartsInstanceRef.current?.resize();
-    window.addEventListener('resize', onResize);
+    window.addEventListener("resize", onResize);
     return () => {
-      window.removeEventListener('resize', onResize);
+      window.removeEventListener("resize", onResize);
       chartsInstanceRef.current?.dispose();
     };
   }, [props.data?.display?.value]);

lynxkite-app/web/src/workspace/nodes/Table.tsx

@@ -1,17 +1,22 @@
 export default function Table(props: any) {
-  return (<table>
-    <thead>
-      <tr>
-        {props.columns.map((column: string) =>
-          <th key={column}>{column}</th>)}
-      </tr>
-    </thead>
-    <tbody>
-      {props.data.map((row: { [column: string]: any }, i: number) =>
-        <tr key={`row-${i}`}>
-          {props.columns.map((_column: string, j: number) =>
-            <td key={`cell ${i}, ${j}`}>{JSON.stringify(row[j])}</td>)}
-        </tr>)}
-    </tbody>
-  </table>);
+  return (
+    <table>
+      <thead>
+        <tr>
+          {props.columns.map((column: string) => (
+            <th key={column}>{column}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {props.data.map((row: { [column: string]: any }, i: number) => (
+          <tr key={`row-${i}`}>
+            {props.columns.map((_column: string, j: number) => (
+              <td key={`cell ${i}, ${j}`}>{JSON.stringify(row[j])}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 }

lynxkite-app/web/tailwind.config.js

@@ -1,21 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'selector',
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: "selector",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui')],
+  plugins: [require("daisyui")],
   daisyui: {
     logs: false,
     themes: [
       {
         lynxkite: {
-          primary: 'oklch(75% 0.2 55)',
-          secondary: 'oklch(75% 0.13 230)',
-          accent: 'oklch(55% 0.25 320)',
-          neutral: 'oklch(35% 0.1 240)',
-          'base-100': '#ffffff',
+          primary: "oklch(75% 0.2 55)",
+          secondary: "oklch(75% 0.13 230)",
+          accent: "oklch(55% 0.25 320)",
+          neutral: "oklch(35% 0.1 240)",
+          "base-100": "#ffffff",
         },
       },
     ],

lynxkite-app/web/tests/basic.spec.ts

@@ -1,25 +1,25 @@
 // Tests some basic operations like box creation, deletion, and dragging.
-import { test, expect } from '@playwright/test';
-import { Splash, Workspace } from './lynxkite';
-
+import { expect, test } from "@playwright/test";
+import { Splash, Workspace } from "./lynxkite";
 
 let workspace: Workspace;
 
-
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage(), 'basic_spec_test');
+  workspace = await Workspace.empty(await browser.newPage(), "basic_spec_test");
 });
 
 test.afterEach(async () => {
   await workspace.close();
   const splash = await new Splash(workspace.page);
-  splash.page.on('dialog', async dialog => { await dialog.accept(); });
-  await splash.deleteEntry('basic_spec_test');
+  splash.page.on("dialog", async (dialog) => {
+    await dialog.accept();
+  });
+  await splash.deleteEntry("basic_spec_test");
 });
 
-test('Box creation & deletion per env', async () => {
+test("Box creation & deletion per env", async () => {
   const envs = await workspace.getEnvs();
-  for(const env of envs) {
+  for (const env of envs) {
     await workspace.setEnv(env);
     const catalog = await workspace.getCatalog();
     expect(catalog).not.toHaveLength(0);
@@ -31,23 +31,18 @@ test('Box creation & deletion per env', async () => {
   }
 });
 
-
-test('Delete multi-handle boxes', async () => {
-  await workspace.addBox('Compute PageRank');
-  await workspace.deleteBoxes(['Compute PageRank 1']);
-  await expect(workspace.getBox('Compute PageRank 1')).not.toBeVisible();
+test("Delete multi-handle boxes", async () => {
+  await workspace.addBox("Compute PageRank");
+  await workspace.deleteBoxes(["Compute PageRank 1"]);
+  await expect(workspace.getBox("Compute PageRank 1")).not.toBeVisible();
 });
 
-
-test ('Drag box', async () => {
-  await workspace.addBox('Import Parquet');
-  const originalPos = await workspace.getBox('Import Parquet 1').boundingBox();
-  await workspace.moveBox('Import Parquet 1', {offsetX: 100, offsetY: 100});
-  const newPos = await workspace.getBox('Import Parquet 1').boundingBox();
+test("Drag box", async () => {
+  await workspace.addBox("Import Parquet");
+  const originalPos = await workspace.getBox("Import Parquet 1").boundingBox();
+  await workspace.moveBox("Import Parquet 1", { offsetX: 100, offsetY: 100 });
+  const newPos = await workspace.getBox("Import Parquet 1").boundingBox();
   // Exact position is not guaranteed, but it should have moved
   expect(newPos.x).toBeGreaterThan(originalPos.x);
   expect(newPos.y).toBeGreaterThan(originalPos.y);
 });
-
-
-

lynxkite-app/web/tests/directory.spec.ts

@@ -1,39 +1,38 @@
 // Tests some basic operations like box creation, deletion, and dragging.
-import { test, expect } from '@playwright/test';
-import { Workspace, Splash } from './lynxkite';
-
+import { expect, test } from "@playwright/test";
+import { Splash, Workspace } from "./lynxkite";
 
 test.describe("Directory operations", () => {
-
   let splash: Splash;
 
   test.beforeAll(async ({ browser }) => {
-    const page = await browser.newPage()
+    const page = await browser.newPage();
     // To make deletion confirmation dialog to be automatically accepted
-    page.on('dialog', async dialog => { await dialog.accept(); });
+    page.on("dialog", async (dialog) => {
+      await dialog.accept();
+    });
     splash = await Splash.open(page);
   });
 
-
-  test('Create workspace with default name', async () => {
+  test("Create workspace with default name", async () => {
     const workspace = await Workspace.empty(splash.page);
     // Not checking for exact match, since there may be pre-existing "Untitled" workspaces
-    expect(workspace.name).toContain('Untitled');
+    expect(workspace.name).toContain("Untitled");
     await workspace.close();
   });
 
-  test('Create & delete workspace', async () => {
+  test("Create & delete workspace", async () => {
     const workspaceName = `TestWorkspace-${Date.now()}`;
     const workspace = await Workspace.empty(splash.page, workspaceName);
     await workspace.expectCurrentWorkspaceIs(workspaceName);
     // Add a box so the workspace is saved
-    await workspace.addBox('Import Parquet');
+    await workspace.addBox("Import Parquet");
     await workspace.close();
     await splash.deleteEntry(workspaceName);
     await expect(splash.getEntry(workspaceName)).not.toBeVisible();
   });
 
-  test('Create & delete folder', async () => {
+  test("Create & delete folder", async () => {
     const folderName = `TestFolder-${Date.now()}`;
     await splash.createFolder(folderName);
     await expect(splash.currentFolder()).toHaveText(folderName);
@@ -42,56 +41,57 @@ test.describe("Directory operations", () => {
     await expect(splash.getEntry(folderName)).not.toBeVisible();
   });
 
-  test('Create folder with default name', async () => {
+  test("Create folder with default name", async () => {
     await splash.createFolder();
-    await expect(splash.currentFolder()).toContainText('Untitled');
+    await expect(splash.currentFolder()).toContainText("Untitled");
   });
 });
 
-
-test.describe.serial('Nested folders & workspaces operations', () => {
-
-  let splash;
-
-  test.beforeEach(() => {
-    // Nested navigation doesn't work yet
-    test.skip();
-  });
-
-  test.beforeAll(async ({ browser }) => {
-    const page = await browser.newPage()
-    // To make deletion confirmation dialog to be automatically accepted
-    page.on('dialog', async dialog => { await dialog.accept(); });
-    splash = await Splash.open(page);
-    await splash.createFolder('TestFolder');
-  });
-
-  test.afterAll(async () => {
-    //cleanup
-    test.skip();
-    await splash.goHome();
-    await splash.deleteEntry('TestFolder');
-  });
-
-  test('Create nested folder', async () => {
-    await splash.createFolder('TestFolder2');
-    await expect(splash.currentFolder()).toHaveText('TestFolder2');
-    await splash.toParent();
-  });
-
-  test('Delete nested folder', async () => {
-    await splash.deleteEntry('TestFolder2');
-    await expect(splash.getEntry('TestFolder2')).not.toBeVisible();
+test.describe
+  .serial("Nested folders & workspaces operations", () => {
+    let splash: Splash;
+
+    test.beforeEach(() => {
+      // Nested navigation doesn't work yet
+      test.skip();
+    });
+
+    test.beforeAll(async ({ browser }) => {
+      const page = await browser.newPage();
+      // To make deletion confirmation dialog to be automatically accepted
+      page.on("dialog", async (dialog) => {
+        await dialog.accept();
+      });
+      splash = await Splash.open(page);
+      await splash.createFolder("TestFolder");
+    });
+
+    test.afterAll(async () => {
+      //cleanup
+      test.skip();
+      await splash.goHome();
+      await splash.deleteEntry("TestFolder");
+    });
+
+    test("Create nested folder", async () => {
+      await splash.createFolder("TestFolder2");
+      await expect(splash.currentFolder()).toHaveText("TestFolder2");
+      await splash.toParent();
+    });
+
+    test("Delete nested folder", async () => {
+      await splash.deleteEntry("TestFolder2");
+      await expect(splash.getEntry("TestFolder2")).not.toBeVisible();
+    });
+
+    test("Create nested workspace", async () => {
+      const workspace = splash.createWorkspace("TestWorkspace");
+      await workspace.expectCurrentWorkspaceIs("TestWorkspace");
+      await workspace.close();
+    });
+
+    test("Delete nested workspace", async () => {
+      await splash.deleteEntry("TestWorkspace");
+      await expect(splash.getEntry("TestWorkspace")).not.toBeVisible();
+    });
   });
-
-  test('Create nested workspace', async () => {
-    const workspace = splash.createWorkspace('TestWorkspace');
-    await workspace.expectCurrentWorkspaceIs('TestWorkspace');
-    await workspace.close();
-  });
-
-  test('Delete nested workspace', async () => {
-    await splash.deleteEntry('TestWorkspace');
-    await expect(splash.getEntry('TestWorkspace')).not.toBeVisible();
-  });
-});

lynxkite-app/web/tests/errors.spec.ts

@@ -1,43 +1,43 @@
 // Tests error reporting.
-import { test, expect } from '@playwright/test';
-import { Splash, Workspace } from './lynxkite';
-
+import { expect, test } from "@playwright/test";
+import { Splash, Workspace } from "./lynxkite";
 
 let workspace: Workspace;
 
-
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage(), 'error_spec_test');
+  workspace = await Workspace.empty(await browser.newPage(), "error_spec_test");
 });
 
-test.afterEach(async ({ }) => {
+test.afterEach(async () => {
   await workspace.close();
   const splash = await new Splash(workspace.page);
-  splash.page.on('dialog', async dialog => { await dialog.accept(); });
-  await splash.deleteEntry('error_spec_test');
+  splash.page.on("dialog", async (dialog) => {
+    await dialog.accept();
+  });
+  await splash.deleteEntry("error_spec_test");
 });
 
-
-test('missing parameter', async () => {
+test("missing parameter", async () => {
   // Test the correct error message is displayed when a required parameter is missing,
   // and that the error message is removed when the parameter is filled.
-  await workspace.addBox('Create scale-free graph');
-  const graphBox = workspace.getBox('Create scale-free graph 1');
-  await graphBox.locator('input').fill('');
-  expect(await graphBox.locator('.error').innerText()).toBe("invalid literal for int() with base 10: ''");
-  await graphBox.locator('input').fill('10');
-  await expect(graphBox.locator('.error')).not.toBeVisible();
+  await workspace.addBox("Create scale-free graph");
+  const graphBox = workspace.getBox("Create scale-free graph 1");
+  await graphBox.locator("input").fill("");
+  expect(await graphBox.locator(".error").innerText()).toBe(
+    "invalid literal for int() with base 10: ''",
+  );
+  await graphBox.locator("input").fill("10");
+  await expect(graphBox.locator(".error")).not.toBeVisible();
 });
 
-
-test('unknown operation', async () => {
+test("unknown operation", async () => {
   // Test that the correct error is displayed when the operation does not belong to
   // the current environment.
-  await workspace.addBox('Create scale-free graph');
-  await workspace.setEnv('LynxScribe');
-  const csvBox =  workspace.getBox('Create scale-free graph 1');
-  const errorText = await csvBox.locator('.error').innerText();
+  await workspace.addBox("Create scale-free graph");
+  await workspace.setEnv("LynxScribe");
+  const csvBox = workspace.getBox("Create scale-free graph 1");
+  const errorText = await csvBox.locator(".error").innerText();
   expect(errorText).toBe('Operation "Create scale-free graph" not found.');
-  await workspace.setEnv('LynxKite Graph Analytics');
-  await expect(csvBox.locator('.error')).not.toBeVisible();
+  await workspace.setEnv("LynxKite Graph Analytics");
+  await expect(csvBox.locator(".error")).not.toBeVisible();
 });

lynxkite-app/web/tests/examples.spec.ts

@@ -1,57 +1,49 @@
 // Test the execution of the example workspaces
-import { test, expect } from '@playwright/test';
-import { Workspace } from './lynxkite';
+import { expect, test } from "@playwright/test";
+import { Workspace } from "./lynxkite";
 
-
-test('LynxKite Graph Analytics example', async ({ page }) => {
-    const ws = await Workspace.open(page, "NetworkX demo");
-    expect(await ws.isErrorFree(process.env.CI? 2000: 1000)).toBeTruthy();
+test("LynxKite Graph Analytics example", async ({ page }) => {
+  const ws = await Workspace.open(page, "NetworkX demo");
+  expect(await ws.isErrorFree(process.env.CI ? 2000 : 1000)).toBeTruthy();
 });
 
-
-test('Pytorch example', async ({ page }) => {
-    const ws = await Workspace.open(page, "PyTorch demo");
-    expect(await ws.isErrorFree()).toBeTruthy();
+test("Pytorch example", async ({ page }) => {
+  const ws = await Workspace.open(page, "PyTorch demo");
+  expect(await ws.isErrorFree()).toBeTruthy();
 });
 
-
-test.fail('AIMO example', async ({ page }) => {
-    // Fails because of missing OPENAI_API_KEY
-    const ws = await Workspace.open(page, "AIMO");
-    expect(await ws.isErrorFree()).toBeTruthy();
+test.fail("AIMO example", async ({ page }) => {
+  // Fails because of missing OPENAI_API_KEY
+  const ws = await Workspace.open(page, "AIMO");
+  expect(await ws.isErrorFree()).toBeTruthy();
 });
 
-test.fail('LynxScribe example', async ({ page }) => {
-    // Fails because of missing OPENAI_API_KEY
-    const ws = await Workspace.open(page, "LynxScribe demo");
-    expect(await ws.isErrorFree()).toBeTruthy();
+test.fail("LynxScribe example", async ({ page }) => {
+  // Fails because of missing OPENAI_API_KEY
+  const ws = await Workspace.open(page, "LynxScribe demo");
+  expect(await ws.isErrorFree()).toBeTruthy();
 });
 
-
-test.fail('Graph RAG', async ({ page }) => {
-    // Fails due to some issue with ChromaDB
-    const ws = await Workspace.open(page, "Graph RAG");
-    expect(await ws.isErrorFree(process.env.CI? 2000: 500)).toBeTruthy();
+test.fail("Graph RAG", async ({ page }) => {
+  // Fails due to some issue with ChromaDB
+  const ws = await Workspace.open(page, "Graph RAG");
+  expect(await ws.isErrorFree(process.env.CI ? 2000 : 500)).toBeTruthy();
 });
 
-
-test.fail('RAG chatbot app', async ({ page }) => {
-    // Fail due to all operation being unknown
-    const ws = await Workspace.open(page, "RAG chatbot app");
-    expect(await ws.isErrorFree()).toBeTruthy();
+test.fail("RAG chatbot app", async ({ page }) => {
+  // Fail due to all operation being unknown
+  const ws = await Workspace.open(page, "RAG chatbot app");
+  expect(await ws.isErrorFree()).toBeTruthy();
 });
 
-
-test.fail('night demo', async ({ page }) => {
-    // airlines.graphml file not found
-    // requires cugraph
-    const ws = await Workspace.open(page, "night demo");
-    expect(await ws.isErrorFree(process.env.CI? 10000: 500)).toBeTruthy();
+test.fail("night demo", async ({ page }) => {
+  // airlines.graphml file not found
+  // requires cugraph
+  const ws = await Workspace.open(page, "night demo");
+  expect(await ws.isErrorFree(process.env.CI ? 10000 : 500)).toBeTruthy();
 });
 
-
-test('Pillow example', async ({ page }) => {
-    const ws = await Workspace.open(page, "Image processing");
-    expect(await ws.isErrorFree()).toBeTruthy();
+test("Pillow example", async ({ page }) => {
+  const ws = await Workspace.open(page, "Image processing");
+  expect(await ws.isErrorFree()).toBeTruthy();
 });
-

lynxkite-app/web/tests/lynxkite.ts

@@ -1,15 +1,12 @@
 // Shared testing utilities.
-import { expect, Locator, Page } from '@playwright/test';
-
+import { type Locator, type Page, expect } from "@playwright/test";
 
 // Mirrors the "id" filter.
 export function toId(x) {
-  return x.toLowerCase().replace(/[ !?,./]/g, '-');
+  return x.toLowerCase().replace(/[ !?,./]/g, "-");
 }
 
-
-export const ROOT = 'automated-tests';
-
+export const ROOT = "automated-tests";
 
 export class Workspace {
   readonly page: Page;
@@ -31,12 +28,12 @@ export class Workspace {
     const ws = await splash.openWorkspace(workspaceName);
     await ws.waitForNodesToLoad();
     await ws.expectCurrentWorkspaceIs(workspaceName);
-    return ws
+    return ws;
   }
 
   async getEnvs() {
     // Return all available workspace environments
-    const envs =  this.page.locator('select[name="workspace-env"] option');
+    const envs = this.page.locator('select[name="workspace-env"] option');
     await expect(envs).not.toHaveCount(0);
     return await envs.allInnerTexts();
   }
@@ -46,13 +43,13 @@ export class Workspace {
   }
 
   async expectCurrentWorkspaceIs(name) {
-    await expect(this.page.locator('.ws-name')).toHaveText(name);
+    await expect(this.page.locator(".ws-name")).toHaveText(name);
   }
 
   async waitForNodesToLoad() {
     // This method should be used only on non empty workspaces
-    await this.page.locator('.react-flow__nodes').waitFor();
-    await this.page.locator('.react-flow__node').first().waitFor();
+    await this.page.locator(".react-flow__nodes").waitFor();
+    await this.page.locator(".react-flow__node").first().waitFor();
   }
 
   async addBox(boxName) {
@@ -63,28 +60,32 @@ export class Workspace {
       const numNodes = allBoxes.length;
       await this.page.mouse.wheel(0, numNodes * 500);
     }
-    
+
     // Some x,y offset, otherwise the box handle may fall outside the viewport.
-    await this.page.locator('.react-flow__pane').click({ position: { x: 20, y: 20 }});
-    await this.page.locator('.node-search').getByText(boxName).click();
-    await this.page.keyboard.press('Escape');
+    await this.page
+      .locator(".react-flow__pane")
+      .click({ position: { x: 20, y: 20 } });
+    await this.page.locator(".node-search").getByText(boxName).click();
+    await this.page.keyboard.press("Escape");
     // Workaround to wait for the deselection animation after choosing a box. Otherwise, the next box will not be added.
-    await new Promise(resolve => setTimeout(resolve, 200));
+    await new Promise((resolve) => setTimeout(resolve, 200));
   }
 
   async getCatalog() {
-    await this.page.locator('.react-flow__pane').click();
-    const catalog =  await this.page.locator('.node-search .matches .search-result').allInnerTexts();
+    await this.page.locator(".react-flow__pane").click();
+    const catalog = await this.page
+      .locator(".node-search .matches .search-result")
+      .allInnerTexts();
     // Dismiss the catalog menu
-    await this.page.keyboard.press('Escape');
-    await new Promise(resolve => setTimeout(resolve, 200));
-    return catalog
+    await this.page.keyboard.press("Escape");
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    return catalog;
   }
- 
+
   async deleteBoxes(boxIds: string[]) {
     for (const boxId of boxIds) {
-        await this.getBoxHandle(boxId).first().click();
-        await this.page.keyboard.press('Backspace');
+      await this.getBoxHandle(boxId).first().click();
+      await this.page.keyboard.press("Backspace");
     }
   }
 
@@ -93,36 +94,44 @@ export class Workspace {
   }
 
   getBoxes() {
-    return this.page.locator('.react-flow__node').all();
+    return this.page.locator(".react-flow__node").all();
   }
 
   getBoxHandle(boxId: string) {
     return this.page.getByTestId(boxId);
   }
 
-  async moveBox(boxId: string, offset? : {offsetX: number, offsetY:number}, targetPosition?: {x: number, y: number}) {
+  async moveBox(
+    boxId: string,
+    offset?: { offsetX: number; offsetY: number },
+    targetPosition?: { x: number; y: number },
+  ) {
     // Move a box around, it is a best effort operation, the exact target position may not be reached
     const box = await this.getBox(boxId).boundingBox();
-    if (!box) { 
-      return
+    if (!box) {
+      return;
     }
     const boxCenterX = box.x + box.width / 2;
     const boxCenterY = box.y + box.height / 2;
-    await this.page.mouse.move(boxCenterX,boxCenterY);
+    await this.page.mouse.move(boxCenterX, boxCenterY);
     await this.page.mouse.down();
     if (targetPosition) {
       await this.page.mouse.move(targetPosition.x, targetPosition.y);
     } else if (offset) {
       // Without steps the movement is too fast and the box is not dragged. The more steps,
       // the better the movement is captured
-      await this.page.mouse.move(boxCenterX + offset.offsetX, boxCenterY + offset.offsetY, {steps: 5});
+      await this.page.mouse.move(
+        boxCenterX + offset.offsetX,
+        boxCenterY + offset.offsetY,
+        { steps: 5 },
+      );
     }
     await this.page.mouse.up();
   }
 
   async connectBoxes(sourceId: string, targetId: string) {
-    const sourceHandle = this.getBoxHandle(sourceId)
-    const targetHandle = this.getBoxHandle(targetId)
+    const sourceHandle = this.getBoxHandle(sourceId);
+    const targetHandle = this.getBoxHandle(targetId);
     await sourceHandle.hover();
     await this.page.mouse.down();
     await targetHandle.hover();
@@ -132,34 +141,35 @@ export class Workspace {
   async isErrorFree(executionWaitTime?): Promise<boolean> {
     // TODO: Workaround, to account for workspace execution. Once
     // we have a load indicator we can use that instead.
-    await new Promise(resolve => setTimeout(resolve, executionWaitTime? executionWaitTime : 500));
+    await new Promise((resolve) =>
+      setTimeout(resolve, executionWaitTime ? executionWaitTime : 500),
+    );
     const boxes = await this.getBoxes();
     for (const box of boxes) {
-      if (await box.locator('.error').isVisible()) {
+      if (await box.locator(".error").isVisible()) {
         return false;
       }
     }
     return true;
   }
 
-  async close() { 
+  async close() {
     await this.page.locator('a[href="/dir/"]').click();
   }
 }
 
-
 export class Splash {
   page: Page;
   root: Locator;
-  
+
   constructor(page) {
     this.page = page;
-    this.root = page.locator('#splash');
+    this.root = page.locator("#splash");
   }
 
   // Opens the LynxKite directory browser in the root.
   static async open(page: Page): Promise<Splash> {
-    await page.goto('/');
+    await page.goto("/");
     await page.evaluate(() => {
       window.sessionStorage.clear();
       window.localStorage.clear();
@@ -170,26 +180,28 @@ export class Splash {
   }
 
   workspace(name: string) {
-    return this.page.getByRole('link', { name: name });
+    return this.page.getByRole("link", { name: name });
   }
 
   getEntry(name: string) {
-    return this.page.locator('.entry').filter({ hasText: name }).first();
+    return this.page.locator(".entry").filter({ hasText: name }).first();
   }
 
   async createWorkspace(name?: string) {
-    await this.page.getByRole('button', { name: 'New workspace' }).click();
+    await this.page.getByRole("button", { name: "New workspace" }).click();
     await this.page.locator('input[name="workspaceName"]').click();
     let workspaceName: string;
     if (name) {
       workspaceName = name;
       await this.page.locator('input[name="workspaceName"]').fill(name);
     } else {
-      workspaceName = await this.page.locator('input[name="workspaceName"]').inputValue();
+      workspaceName = await this.page
+        .locator('input[name="workspaceName"]')
+        .inputValue();
     }
-    await this.page.locator('input[name="workspaceName"]').press('Enter');
+    await this.page.locator('input[name="workspaceName"]').press("Enter");
     const ws = new Workspace(this.page, workspaceName);
-    await ws.setEnv('LynxKite Graph Analytics');
+    await ws.setEnv("LynxKite Graph Analytics");
     return ws;
   }
 
@@ -199,25 +211,24 @@ export class Splash {
   }
 
   async createFolder(folderName?: string) {
-    await this.page.getByRole('button', { name: 'New folder' }).click();
+    await this.page.getByRole("button", { name: "New folder" }).click();
     await this.page.locator('input[name="folderName"]').click();
     if (folderName) {
       await this.page.locator('input[name="folderName"]').fill(folderName);
     }
-    await this.page.locator('input[name="folderName"]').press('Enter');
+    await this.page.locator('input[name="folderName"]').press("Enter");
   }
 
   async deleteEntry(entryName: string) {
-    await this.getEntry(entryName).locator('button').click();
+    await this.getEntry(entryName).locator("button").click();
     await this.page.reload();
   }
 
   currentFolder() {
-    return this.page.locator('.current-folder');
+    return this.page.locator(".current-folder");
   }
 
   async goHome() {
     await this.page.locator('a[href="/dir/"]').click();
   }
-
 }

lynxkite-app/web/tests/upload.spec.ts

@@ -1,41 +1,43 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 // Test uploading a file in an import box.
-import { test, expect } from '@playwright/test';
-import { Splash, Workspace } from './lynxkite';
-import { join, dirname  } from 'path';
-import { fileURLToPath } from 'url';
-
+import { expect, test } from "@playwright/test";
+import { Splash, Workspace } from "./lynxkite";
 
 let workspace: Workspace;
 
-
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage(), 'upload_spec_test');
+  workspace = await Workspace.empty(
+    await browser.newPage(),
+    "upload_spec_test",
+  );
 });
 
-test.afterEach(async ({ }) => {
+test.afterEach(async () => {
   await workspace.close();
   const splash = await new Splash(workspace.page);
-  splash.page.on('dialog', async dialog => { await dialog.accept(); });
-  await splash.deleteEntry('upload_spec_test');
+  splash.page.on("dialog", async (dialog) => {
+    await dialog.accept();
+  });
+  await splash.deleteEntry("upload_spec_test");
 });
 
+test("can upload and import a simple CSV", async () => {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const csvPath = join(__dirname, "data", "upload_test.csv");
 
-test('can upload and import a simple CSV', async () => {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = dirname(__filename);
-    const csvPath = join(__dirname, 'data', 'upload_test.csv');
+  await workspace.addBox("Import CSV");
+  const csvBox = workspace.getBox("Import CSV 1");
+  const filenameInput = csvBox.locator("input.input-bordered").nth(0);
+  await filenameInput.click();
+  await filenameInput.fill(csvPath);
+  await filenameInput.press("Enter");
 
-    await workspace.addBox('Import CSV');
-    const csvBox =  workspace.getBox('Import CSV 1');
-    const filenameInput = csvBox.locator('input.input-bordered').nth(0);
-    await filenameInput.click();
-    await filenameInput.fill(csvPath);
-    await filenameInput.press('Enter');
-    
-    await workspace.addBox('View tables');
-    const tableBox = workspace.getBox('View tables 1');
-    await workspace.connectBoxes('Import CSV 1', 'View tables 1');
+  await workspace.addBox("View tables");
+  const tableBox = workspace.getBox("View tables 1");
+  await workspace.connectBoxes("Import CSV 1", "View tables 1");
 
-    const tableRows = tableBox.locator('table tbody tr');
-    await expect(tableRows).toHaveCount(4);
+  const tableRows = tableBox.locator("table tbody tr");
+  await expect(tableRows).toHaveCount(4);
 });

lynxkite-app/web/tsconfig.app.json

@@ -6,16 +6,12 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

lynxkite-app/web/tsconfig.node.json

@@ -5,15 +5,11 @@
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

lynxkite-app/web/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import Icons from 'unplugin-icons/vite'
+import react from "@vitejs/plugin-react-swc";
+import Icons from "unplugin-icons/vite";
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -10,21 +10,18 @@ export default defineConfig({
   esbuild: {
     supported: {
       // For dynamic imports.
-      'top-level-await': true,
+      "top-level-await": true,
     },
   },
-  plugins: [
-    react(),
-    Icons({ compiler: 'jsx', jsx: 'react' }),
-  ],
+  plugins: [react(), Icons({ compiler: "jsx", jsx: "react" })],
   server: {
     proxy: {
-      '/api': 'http://127.0.0.1:8000',
-      '/ws': {
-        target: 'ws://127.0.0.1:8000',
+      "/api": "http://127.0.0.1:8000",
+      "/ws": {
+        target: "ws://127.0.0.1:8000",
         ws: true,
         changeOrigin: true,
       },
     },
   },
-})
+});