Delete open-source packages, just depend on them. Move bio stuff into lynxkite-bio.

.pre-commit-config.yaml

@@ -11,10 +11,6 @@ repos:
     - id: ruff
       args: [ --fix ]
     - id: ruff-format
-- repo: https://github.com/biomejs/pre-commit
-  rev: v1.9.4
-  hooks:
-    - id: biome-check
 # https://github.com/astral-sh/ty/issues/269
 - repo: local
   hooks:
@@ -29,14 +25,8 @@ repos:
   rev: "0.23.0"
   hooks:
     - id: deptry
-      name: deptry for lynxkite-app
-      entry: bash -c 'cd lynxkite-app && deptry .'
-    - id: deptry
-      name: deptry for lynxkite-core
-      entry: bash -c 'cd lynxkite-core && deptry .'
-    - id: deptry
-      name: deptry for lynxkite-graph-analytics
-      entry: bash -c 'cd lynxkite-graph-analytics && deptry .'
+      name: deptry for lynxkite-bio
+      entry: bash -c 'cd lynxkite-bio && deptry .'
     - id: deptry
-      name: deptry for lynxkite-pillow-example
-      entry: bash -c 'cd lynxkite-pillow-example && deptry .'
+      name: deptry for lynxkite-lynxscribe
+      entry: bash -c 'cd lynxkite-lynxscribe && deptry .'

lynxkite-app/.gitignore

@@ -1,5 +0,0 @@
-/src/lynxkite_app/web_assets
-!/src/lynxkite_app/web_assets/__init__.py
-!/src/lynxkite_app/web_assets/assets/__init__.py
-data/
-!/web/tests/data

lynxkite-app/MANIFEST.in

@@ -1,2 +0,0 @@
-graft web
-prune web/node_modules

lynxkite-app/README.md

@@ -1,31 +0,0 @@
-# LynxKite MM
-
-This is an experimental rewrite of [LynxKite](https://github.com/lynxkite/lynxkite). It is not compatible with the
-original LynxKite. The primary goals of this rewrite are:
-
-- Target GPU clusters instead of Hadoop clusters. We use Python instead of Scala, RAPIDS instead of Apache Spark.
-- More extensible backend. Make it easy to add new LynxKite boxes. Make it easy to use our frontend for other purposes,
-  configuring and executing other pipelines.
-
-## Development
-
-To run the backend:
-
-```bash
-uv pip install -e .
-cd ../examples && LYNXKITE_RELOAD=1 lynxkite
-```
-
-To run the frontend:
-
-```bash
-cd web
-npm i
-npm run dev
-```
-
-To update the frontend types with the backend types:
-
-```bash
-$ uv run pydantic2ts --module lynxkite_app.main --output ./web/src/apiTypes.ts --json2ts-cmd "npx json-schema-to-typescript"
-```

lynxkite-app/pyproject.toml

@@ -1,60 +0,0 @@
-[project]
-name = "lynxkite"
-version = "0.1.0"
-description = "The LynxKite application, with web server and UI"
-readme = "README.md"
-requires-python = ">=3.11"
-dependencies = [
-    "fastapi[standard]>=0.115.6",
-    "griffe>=1.7.3",
-    "joblib>=1.5.1",
-    "lynxkite-core",
-    "pycrdt-websocket>=0.16",
-    "pycrdt>=0.12.26",
-    "pydantic>=2.11.7",
-    "sse-starlette>=2.2.1",
-    "uvicorn>=0.35.0",
-]
-classifiers = ["Private :: Do Not Upload"]
-
-[project.urls]
-Homepage = "https://github.com/lynxkite/lynxkite-2000/"
-
-[dependency-groups]
-dev = [
-    "pydantic-to-typescript>=2.0.0",
-    "setuptools>=80.9.0",
-]
-
-[tool.uv.sources]
-lynxkite-core = { workspace = true }
-
-[build-system]
-requires = ["setuptools", "wheel", "setuptools-scm"]
-build-backend = "setuptools.build_meta"
-
-[tool.setuptools.packages.find]
-namespaces = true
-where = ["src"]
-
-[tool.setuptools.package-data]
-"lynxkite_app.web_assets" = ["*"]
-"lynxkite_app.web_assets.assets" = ["*"]
-
-[tool.setuptools]
-py-modules = ["build_frontend"]
-include-package-data = true
-
-[tool.setuptools.cmdclass]
-build_py = "build_frontend.build_py"
-
-[project.scripts]
-lynxkite = "lynxkite_app.__main__:main"
-
-[tool.deptry.package_module_name_map]
-lynxkite-core = "lynxkite"
-sse-starlette = "starlette"
-
-[tool.deptry.per_rule_ignores]
-DEP002 = ["pycrdt-websocket", "griffe"]
-DEP004 = ["setuptools"]

lynxkite-app/src/build_frontend.py

@@ -1,26 +0,0 @@
-"""Customized build process for setuptools."""
-
-import subprocess
-from setuptools.command.build_py import build_py as _build_py
-from pathlib import Path
-import shutil
-
-
-class build_py(_build_py):
-    def run(self):
-        print("\n\nBuilding frontend...", __file__)
-        here = Path(__file__).parent.parent
-        frontend_dir = here / "web"
-        package_dir = here / "src" / "lynxkite_app" / "web_assets"
-        subprocess.check_call(["npm", "install"], cwd=frontend_dir)
-        subprocess.check_call(["npm", "run", "build"], cwd=frontend_dir)
-        print("files in", frontend_dir / "dist")
-        for file in (frontend_dir / "dist").iterdir():
-            print(file)
-        # shutil.rmtree(package_dir)
-        shutil.copytree(frontend_dir / "dist", package_dir, dirs_exist_ok=True)
-        # (frontend_dir / "dist").rename(package_dir)
-        print("files in", package_dir)
-        for file in package_dir.iterdir():
-            print(file)
-        super().run()

lynxkite-app/src/lynxkite_app/__main__.py

@@ -1,20 +0,0 @@
-import uvicorn
-from .main import app  # noqa: F401
-import os
-
-
-def main():
-    port = int(os.environ.get("PORT", "8000"))
-    reload = bool(os.environ.get("LYNXKITE_RELOAD", ""))
-    uvicorn.run(
-        "lynxkite_app.main:app",
-        host="0.0.0.0",
-        port=port,
-        reload=reload,
-        loop="asyncio",
-        proxy_headers=True,
-    )
-
-
-if __name__ == "__main__":
-    main()

lynxkite-app/src/lynxkite_app/crdt.py

@@ -1,342 +0,0 @@
-"""CRDT is used to synchronize workspace state for backend and frontend(s)."""
-
-import asyncio
-import contextlib
-import enum
-import pathlib
-import fastapi
-import os.path
-import pycrdt.websocket
-import pycrdt.store.file
-import uvicorn.protocols.utils
-import builtins
-from lynxkite.core import workspace, ops
-
-router = fastapi.APIRouter()
-
-
-def ws_exception_handler(exception, log):
-    if isinstance(exception, builtins.ExceptionGroup):
-        for ex in exception.exceptions:
-            if not isinstance(ex, uvicorn.protocols.utils.ClientDisconnected):
-                log.exception(ex)
-    else:
-        log.exception(exception)
-    return True
-
-
-class WorkspaceWebsocketServer(pycrdt.websocket.WebsocketServer):
-    async def init_room(self, name: str) -> pycrdt.websocket.YRoom:
-        """Initialize a room for the workspace with the given name.
-
-        The workspace is loaded from ".crdt" if it exists there, or from a JSON file, or a new workspace is created.
-        """
-        crdt_path = pathlib.Path(".crdt")
-        path = crdt_path / f"{name}.crdt"
-        assert path.is_relative_to(crdt_path), f"Path '{path}' is invalid"
-        ystore = pycrdt.store.file.FileYStore(path)
-        ydoc = pycrdt.Doc()
-        ydoc["workspace"] = ws = pycrdt.Map()
-        # Replay updates from the store.
-        try:
-            for update, timestamp in [(item[0], item[-1]) async for item in ystore.read()]:
-                ydoc.apply_update(update)
-        except pycrdt.store.YDocNotFound:
-            pass
-        if "nodes" not in ws:
-            ws["nodes"] = pycrdt.Array()
-        if "edges" not in ws:
-            ws["edges"] = pycrdt.Array()
-        if "env" not in ws:
-            ws["env"] = next(iter(ops.CATALOGS), "unset")
-            # We have two possible sources of truth for the workspaces, the YStore and the JSON files.
-            # In case we didn't find the workspace in the YStore, we try to load it from the JSON files.
-            try_to_load_workspace(ws, name)
-        ws_simple = workspace.Workspace.model_validate(ws.to_py())
-        clean_input(ws_simple)
-        # Set the last known version to the current state, so we don't trigger a change event.
-        last_known_versions[name] = ws_simple
-        room = pycrdt.websocket.YRoom(
-            ystore=ystore, ydoc=ydoc, exception_handler=ws_exception_handler
-        )
-        # We hang the YDoc pointer on the room, so it only gets garbage collected when the room does.
-        room.ws = ws  # ty: ignore[unresolved-attribute]
-
-        def on_change(changes):
-            task = asyncio.create_task(workspace_changed(name, changes, ws))
-            # We have no way to await workspace_changed(). The best we can do is to
-            # dereference its result after it's done, so exceptions are logged normally.
-            task.add_done_callback(lambda t: t.result())
-
-        ws.observe_deep(on_change)
-        return room
-
-    async def get_room(self, name: str) -> pycrdt.websocket.YRoom:
-        """Get a room by name.
-
-        This method overrides the parent get_room method. The original creates an empty room,
-        with no associated Ydoc. Instead, we want to initialize the the room with a Workspace
-        object.
-        """
-        if name not in self.rooms:
-            self.rooms[name] = await self.init_room(name)
-        room = self.rooms[name]
-        await self.start_room(room)
-        return room
-
-
-class CodeWebsocketServer(WorkspaceWebsocketServer):
-    async def init_room(self, name: str) -> pycrdt.websocket.YRoom:
-        """Initialize a room for a text document with the given name."""
-        crdt_path = pathlib.Path(".crdt")
-        path = crdt_path / f"{name}.crdt"
-        assert path.is_relative_to(crdt_path), f"Path '{path}' is invalid"
-        ystore = pycrdt.store.file.FileYStore(path)
-        ydoc = pycrdt.Doc()
-        ydoc["text"] = text = pycrdt.Text()
-        # Replay updates from the store.
-        try:
-            for update, timestamp in [(item[0], item[-1]) async for item in ystore.read()]:
-                ydoc.apply_update(update)
-        except pycrdt.store.YDocNotFound:
-            pass
-        if len(text) == 0:
-            if os.path.exists(name):
-                with open(name, encoding="utf-8") as f:
-                    text += f.read().replace("\r\n", "\n")
-        room = pycrdt.websocket.YRoom(
-            ystore=ystore, ydoc=ydoc, exception_handler=ws_exception_handler
-        )
-        # We hang the YDoc pointer on the room, so it only gets garbage collected when the room does.
-        room.text = text  # ty: ignore[unresolved-attribute]
-
-        def on_change(changes):
-            asyncio.create_task(code_changed(name, changes, text))
-
-        text.observe(on_change)
-        return room
-
-
-last_ws_input = None
-
-
-def clean_input(ws_pyd):
-    """Delete everything that we want to ignore for the purposes of change detection."""
-    for node in ws_pyd.nodes:
-        node.data.display = None
-        node.data.input_metadata = None
-        node.data.error = None
-        node.data.status = workspace.NodeStatus.done
-        for p in list(node.data.params):
-            if p.startswith("_"):
-                del node.data.params[p]
-        if node.data.op_id == "Comment":
-            node.data.params = {}
-        node.position.x = 0
-        node.position.y = 0
-        node.width = 0
-        node.height = 0
-        if node.model_extra:
-            for key in list(node.model_extra.keys()):
-                delattr(node, key)
-
-
-def crdt_update(
-    crdt_obj: pycrdt.Map | pycrdt.Array,
-    python_obj: dict | list,
-    non_collaborative_fields: set[str] = set(),
-):
-    """Update a CRDT object to match a Python object.
-
-    The types between the CRDT object and the Python object must match. If the Python object
-    is a dict, the CRDT object must be a Map. If the Python object is a list, the CRDT object
-    must be an Array.
-
-    Args:
-        crdt_obj: The CRDT object, that will be updated to match the Python object.
-        python_obj: The Python object to update with.
-        non_collaborative_fields: List of fields to treat as a black box. Black boxes are
-        updated as a whole, instead of having a fine-grained data structure to edit
-        collaboratively. Useful for complex fields that contain auto-generated data or
-        metadata.
-        The default is an empty set.
-
-    Raises:
-        ValueError: If the Python object provided is not a dict or list.
-    """
-    if isinstance(python_obj, dict):
-        assert isinstance(crdt_obj, pycrdt.Map), "CRDT object must be a Map for a dict input"
-        for key, value in python_obj.items():
-            if key in non_collaborative_fields:
-                crdt_obj[key] = value
-            elif isinstance(value, dict):
-                if crdt_obj.get(key) is None:
-                    crdt_obj[key] = pycrdt.Map()
-                crdt_update(crdt_obj[key], value, non_collaborative_fields)
-            elif isinstance(value, list):
-                if crdt_obj.get(key) is None:
-                    crdt_obj[key] = pycrdt.Array()
-                crdt_update(crdt_obj[key], value, non_collaborative_fields)
-            elif isinstance(value, enum.Enum):
-                crdt_obj[key] = str(value.value)
-            else:
-                crdt_obj[key] = value
-    elif isinstance(python_obj, list):
-        assert isinstance(crdt_obj, pycrdt.Array), "CRDT object must be an Array for a list input"
-        for i, value in enumerate(python_obj):
-            if isinstance(value, dict):
-                if i >= len(crdt_obj):
-                    crdt_obj.append(pycrdt.Map())
-                crdt_update(crdt_obj[i], value, non_collaborative_fields)
-            elif isinstance(value, list):
-                if i >= len(crdt_obj):
-                    crdt_obj.append(pycrdt.Array())
-                crdt_update(crdt_obj[i], value, non_collaborative_fields)
-            else:
-                if isinstance(value, enum.Enum):
-                    value = str(value.value)
-                if i >= len(crdt_obj):
-                    crdt_obj.append(value)
-                else:
-                    crdt_obj[i] = value
-    else:
-        raise ValueError("Invalid type:", python_obj)
-
-
-def try_to_load_workspace(ws: pycrdt.Map, name: str):
-    """Load the workspace `name`, if it exists, and update the `ws` CRDT object to match its contents.
-
-    Args:
-        ws: CRDT object to udpate with the workspace contents.
-        name: Name of the workspace to load.
-    """
-    if os.path.exists(name):
-        ws_pyd = workspace.Workspace.load(name)
-        crdt_update(
-            ws,
-            ws_pyd.model_dump(),
-            # We treat some fields as black boxes. They are not edited on the frontend.
-            non_collaborative_fields={"display", "input_metadata", "meta"},
-        )
-
-
-last_known_versions = {}
-delayed_executions = {}
-
-
-async def workspace_changed(name: str, changes: list[pycrdt.MapEvent], ws_crdt: pycrdt.Map):
-    """Callback to react to changes in the workspace.
-
-    Args:
-        name: Name of the workspace.
-        changes: Changes performed to the workspace.
-        ws_crdt: CRDT object representing the workspace.
-    """
-    ws_pyd = workspace.Workspace.model_validate(ws_crdt.to_py())
-    # Do not trigger execution for superficial changes.
-    # This is a quick solution until we build proper caching.
-    ws_simple = ws_pyd.model_copy(deep=True)
-    clean_input(ws_simple)
-    if ws_simple == last_known_versions.get(name):
-        return
-    last_known_versions[name] = ws_simple
-    # Frontend changes that result from typing are delayed to avoid
-    # rerunning the workspace for every keystroke.
-    if name in delayed_executions:
-        delayed_executions[name].cancel()
-    delay = min(
-        getattr(change, "keys", {}).get("__execution_delay", {}).get("newValue", 0)
-        for change in changes
-    )
-    # Check if workspace is paused - if so, skip automatic execution
-    if getattr(ws_pyd, "paused", False):
-        print(f"Skipping automatic execution for {name} in {ws_pyd.env} - workspace is paused")
-        return
-    if delay:
-        task = asyncio.create_task(execute(name, ws_crdt, ws_pyd, delay))
-        delayed_executions[name] = task
-    else:
-        await execute(name, ws_crdt, ws_pyd)
-
-
-async def execute(name: str, ws_crdt: pycrdt.Map, ws_pyd: workspace.Workspace, delay: int = 0):
-    """Execute the workspace and update the CRDT object with the results.
-
-    Args:
-        name: Name of the workspace.
-        ws_crdt: CRDT object representing the workspace.
-        ws_pyd: Workspace object to execute.
-        delay: Wait time before executing the workspace. The default is 0.
-    """
-    if delay:
-        try:
-            await asyncio.sleep(delay)
-        except asyncio.CancelledError:
-            return
-    print(f"Running {name} in {ws_pyd.env}...")
-    cwd = pathlib.Path()
-    path = cwd / name
-    assert path.is_relative_to(cwd), f"Path '{path}' is invalid"
-    # Save user changes before executing, in case the execution fails.
-    ws_pyd.save(path)
-    ops.load_user_scripts(name)
-    ws_pyd.connect_crdt(ws_crdt)
-    ws_pyd.update_metadata()
-    if not ws_pyd.has_executor():
-        return
-    with ws_crdt.doc.transaction():
-        for nc in ws_crdt["nodes"]:
-            nc["data"]["status"] = "planned"
-    ws_pyd.normalize()
-    await ws_pyd.execute()
-    ws_pyd.save(path)
-    print(f"Finished running {name} in {ws_pyd.env}.")
-
-
-async def code_changed(name: str, changes: pycrdt.TextEvent, text: pycrdt.Text):
-    contents = str(text).strip() + "\n"
-    with open(name, "w", encoding="utf-8") as f:
-        f.write(contents)
-
-
-ws_websocket_server: WorkspaceWebsocketServer
-code_websocket_server: CodeWebsocketServer
-
-
-def get_room(name):
-    return ws_websocket_server.get_room(name)
-
-
-@contextlib.asynccontextmanager
-async def lifespan(app):
-    global ws_websocket_server
-    global code_websocket_server
-    ws_websocket_server = WorkspaceWebsocketServer(auto_clean_rooms=False)
-    code_websocket_server = CodeWebsocketServer(auto_clean_rooms=False)
-    async with ws_websocket_server:
-        async with code_websocket_server:
-            yield
-    print("closing websocket server")
-
-
-def delete_room(name: str):
-    if name in ws_websocket_server.rooms:
-        del ws_websocket_server.rooms[name]
-
-
-def sanitize_path(path):
-    return os.path.relpath(os.path.normpath(os.path.join("/", path)), "/")
-
-
-@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, "type": "websocket"}, websocket._receive, websocket._send)
-
-
-@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)
-    await server({"path": room_name, "type": "websocket"}, websocket._receive, websocket._send)

lynxkite-app/src/lynxkite_app/main.py

@@ -1,165 +0,0 @@
-"""The FastAPI server for serving the LynxKite application."""
-
-import shutil
-import pydantic
-import fastapi
-import importlib
-import joblib
-import pathlib
-import pkgutil
-from fastapi.staticfiles import StaticFiles
-from fastapi.middleware.gzip import GZipMiddleware
-import starlette.exceptions
-from lynxkite.core import ops
-from lynxkite.core import workspace
-from . import crdt
-
-mem = joblib.Memory(".joblib-cache")
-ops.CACHE_WRAPPER = mem.cache
-
-
-def detect_plugins():
-    plugins = {}
-    for _, name, _ in pkgutil.iter_modules():
-        if name.startswith("lynxkite_") and name != "lynxkite_app":
-            print(f"Importing {name}")
-            plugins[name] = importlib.import_module(name)
-    if not plugins:
-        print("No LynxKite plugins found. Be sure to install some!")
-    return plugins
-
-
-lynxkite_plugins = detect_plugins()
-ops.save_catalogs("plugins loaded")
-
-app = fastapi.FastAPI(lifespan=crdt.lifespan)
-app.include_router(crdt.router)
-app.add_middleware(GZipMiddleware)
-
-
-def _get_ops(env: str):
-    catalog = ops.CATALOGS[env]
-    res = {op.name: op.model_dump() for op in catalog.values()}
-    res.setdefault("Comment", ops.COMMENT_OP.model_dump())
-    return res
-
-
-@app.get("/api/catalog")
-def get_catalog(workspace: str):
-    ops.load_user_scripts(workspace)
-    return {env: _get_ops(env) for env in ops.CATALOGS}
-
-
-data_path = pathlib.Path()
-
-
-@app.post("/api/delete")
-async def delete_workspace(req: dict):
-    json_path: pathlib.Path = data_path / req["path"]
-    crdt_path: pathlib.Path = data_path / ".crdt" / f"{req['path']}.crdt"
-    assert json_path.is_relative_to(data_path), f"Path '{json_path}' is invalid"
-    json_path.unlink()
-    crdt_path.unlink()
-    crdt.delete_room(req["path"])
-
-
-class DirectoryEntry(pydantic.BaseModel):
-    name: str
-    type: str
-
-
-def _get_path_type(path: pathlib.Path) -> str:
-    if path.is_dir():
-        return "directory"
-    elif path.suffixes[-2:] == [".lynxkite", ".json"]:
-        return "workspace"
-    else:
-        return "file"
-
-
-@app.get("/api/dir/list")
-def list_dir(path: str):
-    path = data_path / path
-    assert path.is_relative_to(data_path), f"Path '{path}' is invalid"
-    return sorted(
-        [
-            DirectoryEntry(
-                name=str(p.relative_to(data_path)),
-                type=_get_path_type(p),
-            )
-            for p in path.iterdir()
-            if not p.name.startswith(".")
-        ],
-        key=lambda x: (x.type != "directory", x.name.lower()),
-    )
-
-
-@app.post("/api/dir/mkdir")
-def make_dir(req: dict):
-    path = data_path / req["path"]
-    assert path.is_relative_to(data_path), f"Path '{path}' is invalid"
-    assert not path.exists(), f"{path} already exists"
-    path.mkdir()
-
-
-@app.post("/api/dir/delete")
-def delete_dir(req: dict):
-    path: pathlib.Path = data_path / req["path"]
-    assert all([path.is_relative_to(data_path), path.exists(), path.is_dir()]), (
-        f"Path '{path}' is invalid"
-    )
-    shutil.rmtree(path)
-
-
-@app.get("/api/service/{module_path:path}")
-async def service_get(req: fastapi.Request, module_path: str):
-    """Executors can provide extra HTTP APIs through the /api/service endpoint."""
-    module = lynxkite_plugins[module_path.split("/")[0]]
-    return await module.api_service_get(req)
-
-
-@app.post("/api/service/{module_path:path}")
-async def service_post(req: fastapi.Request, module_path: str):
-    """Executors can provide extra HTTP APIs through the /api/service endpoint."""
-    module = lynxkite_plugins[module_path.split("/")[0]]
-    return await module.api_service_post(req)
-
-
-@app.post("/api/upload")
-async def upload(req: fastapi.Request):
-    """Receives file uploads and stores them in DATA_PATH."""
-    form = await req.form()
-    for file in form.values():
-        file_path = data_path / "uploads" / file.filename
-        assert file_path.is_relative_to(data_path), f"Path '{file_path}' is invalid"
-        with file_path.open("wb") as buffer:
-            shutil.copyfileobj(file.file, buffer)
-    return {"status": "ok"}
-
-
-@app.post("/api/execute_workspace")
-async def execute_workspace(name: str):
-    """Trigger and await the execution of a workspace."""
-    room = await crdt.get_room(name)
-    ws_pyd = workspace.Workspace.model_validate(room.ws.to_py())
-    await crdt.execute(name, room.ws, ws_pyd)
-
-
-class SPAStaticFiles(StaticFiles):
-    """Route everything to index.html. https://stackoverflow.com/a/73552966/3318517"""
-
-    async def get_response(self, path: str, scope):
-        try:
-            return await super().get_response(path, scope)
-        except (
-            fastapi.HTTPException,
-            starlette.exceptions.HTTPException,
-        ) as ex:
-            if ex.status_code == 404:
-                return await super().get_response(".", scope)
-            else:
-                raise ex
-
-
-static_dir = SPAStaticFiles(packages=[("lynxkite_app", "web_assets")], html=True)
-app.mount("/", static_dir, name="web_assets")

lynxkite-app/src/lynxkite_app/web_assets/__init__.py

@@ -1 +0,0 @@
-"""The build process (uv build) puts the frontend build artifacts here."""

lynxkite-app/src/lynxkite_app/web_assets/assets/__init__.py

@@ -1 +0,0 @@
-"""More frontend build artifacts."""

lynxkite-app/tests/test_crdt.py

@@ -1,72 +0,0 @@
-from enum import Enum
-import pycrdt
-import pytest
-from lynxkite_app.crdt import crdt_update
-
-
-@pytest.fixture
-def empty_dict_workspace():
-    ydoc = pycrdt.Doc()
-    ydoc["workspace"] = ws = pycrdt.Map()
-    yield ws
-
-
-@pytest.fixture
-def empty_list_workspace():
-    ydoc = pycrdt.Doc()
-    ydoc["workspace"] = ws = pycrdt.Array()
-    yield ws
-
-
-class MyEnum(int, Enum):
-    VALUE = 1
-
-
-@pytest.mark.parametrize(
-    "python_obj,expected",
-    [
-        (
-            {
-                "key1": "value1",
-                "key2": {
-                    "nested_key1": "nested_value1",
-                    "nested_key2": ["nested_value2"],
-                    "nested_key3": MyEnum.VALUE,
-                },
-            },
-            {
-                "key1": "value1",
-                "key2": {
-                    "nested_key1": "nested_value1",
-                    "nested_key2": ["nested_value2"],
-                    "nested_key3": "1",
-                },
-            },
-        )
-    ],
-)
-def test_crdt_update_with_dict(empty_dict_workspace, python_obj, expected):
-    crdt_update(empty_dict_workspace, python_obj)
-    assert empty_dict_workspace.to_py() == expected
-
-
-@pytest.mark.parametrize(
-    "python_obj,expected",
-    [
-        (
-            [
-                "value1",
-                {"nested_key1": "nested_value1", "nested_key2": ["nested_value2"]},
-                MyEnum.VALUE,
-            ],
-            [
-                "value1",
-                {"nested_key1": "nested_value1", "nested_key2": ["nested_value2"]},
-                "1",
-            ],
-        ),
-    ],
-)
-def test_crdt_update_with_list(empty_list_workspace, python_obj, expected):
-    crdt_update(empty_list_workspace, python_obj)
-    assert empty_list_workspace.to_py() == expected

lynxkite-app/tests/test_main.py

@@ -1,57 +0,0 @@
-import pathlib
-import uuid
-from fastapi.testclient import TestClient
-from lynxkite_app.main import app, detect_plugins
-from lynxkite.core import ops
-import os
-
-
-ops.user_script_root = None
-client = TestClient(app)
-
-
-def test_detect_plugins_with_plugins():
-    # This test assumes that these plugins are installed as part of the testing process.
-    plugins = detect_plugins()
-    assert all(
-        plugin in plugins.keys()
-        for plugin in [
-            "lynxkite_graph_analytics",
-            "lynxkite_lynxscribe",
-            "lynxkite_pillow_example",
-        ]
-    )
-
-
-def test_get_catalog():
-    response = client.get("/api/catalog?workspace=test")
-    assert response.status_code == 200
-
-
-def test_list_dir():
-    test_dir = pathlib.Path() / str(uuid.uuid4())
-    test_dir.mkdir(parents=True, exist_ok=True)
-    dir = test_dir / "test_dir"
-    dir.mkdir(exist_ok=True)
-    file = test_dir / "test_file.txt"
-    file.touch()
-    ws = test_dir / "test_workspace.lynxkite.json"
-    ws.touch()
-    response = client.get(f"/api/dir/list?path={str(test_dir)}")
-    assert response.status_code == 200
-    assert response.json() == [
-        {"name": f"{test_dir}/test_dir", "type": "directory"},
-        {"name": f"{test_dir}/test_file.txt", "type": "file"},
-        {"name": f"{test_dir}/test_workspace.lynxkite.json", "type": "workspace"},
-    ]
-    file.unlink()
-    ws.unlink()
-    dir.rmdir()
-
-
-def test_make_dir():
-    dir_name = str(uuid.uuid4())
-    response = client.post("/api/dir/mkdir", json={"path": dir_name})
-    assert response.status_code == 200
-    assert os.path.exists(dir_name)
-    os.rmdir(dir_name)

lynxkite-app/web/.gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

lynxkite-app/web/README.md

@@ -1,7 +0,0 @@
-To set up:
-
-    npm i
-
-To start dev server:
-
-    npm run dev

lynxkite-app/web/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

lynxkite-app/web/package.json

@@ -1,61 +0,0 @@
-{
-  "name": "lynxkite",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "test": "playwright test",
-    "dev": "npx vite",
-    "build": "npx tsc -b && npx vite build",
-    "preview": "npx vite preview"
-  },
-  "dependencies": {
-    "@esbuild/linux-x64": "^0.25.0",
-    "@iconify-json/tabler": "^1.2.10",
-    "@monaco-editor/react": "^4.7.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-jsx": "^8.1.0",
-    "@swc/core": "^1.10.1",
-    "@syncedstore/core": "^0.6.0",
-    "@syncedstore/react": "^0.6.0",
-    "@types/node": "^22.10.1",
-    "@xyflow/react": "^12.6.0",
-    "3dmol": "^2.4.2",
-    "axios": "^1.8.2",
-    "daisyui": "^4.12.20",
-    "echarts": "^5.5.1",
-    "fuse.js": "^7.0.0",
-    "jmespath": "^0.16.0",
-    "json-schema-to-typescript": "^15.0.3",
-    "monaco-editor": "^0.52.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^5.0.0",
-    "react-markdown": "^9.0.1",
-    "react-router-dom": "^7.5.2",
-    "react-tooltip": "^5.28.1",
-    "swr": "^2.2.5",
-    "unplugin-icons": "^0.21.0",
-    "y-monaco": "^0.1.6",
-    "y-websocket": "^2.0.4",
-    "yjs": "^13.6.20"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.50.1",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/jmespath": "^0.15.2",
-    "@types/node": "^22.13.1",
-    "@types/react": "^18.3.14",
-    "@types/react-dom": "^18.3.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
-    "globals": "^15.12.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.16",
-    "typescript": "~5.6.2",
-    "vite": "^6.3.4"
-  },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.28.1"
-  }
-}

lynxkite-app/web/playwright.config.ts

@@ -1,30 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-export default defineConfig({
-  testDir: "./tests",
-  timeout: process.env.CI ? 30000 : 10000,
-  fullyParallel: false,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  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",
-    trace: "on",
-    testIdAttribute: "data-nodeid", // Useful for easily selecting nodes using getByTestId
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-  ],
-  webServer: {
-    command: "cd ../../examples && LYNXKITE_SUPPRESS_OP_ERRORS=1 lynxkite",
-    port: 8000,
-    reuseExistingServer: false,
-  },
-});

lynxkite-app/web/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

lynxkite-app/web/src/Code.tsx

@@ -1,119 +0,0 @@
-// Full-page editor for code files.
-
-import Editor, { type Monaco } from "@monaco-editor/react";
-import type { editor } from "monaco-editor";
-import { useEffect, useRef } from "react";
-import { Link } from "react-router";
-import { WebsocketProvider } from "y-websocket";
-import * as Y from "yjs";
-// @ts-ignore
-import Atom from "~icons/tabler/atom.jsx";
-// @ts-ignore
-import Backspace from "~icons/tabler/backspace.jsx";
-// @ts-ignore
-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 = usePath().replace(/^[/]code[/]/, "");
-  const parentDir = path!.split("/").slice(0, -1).join("/");
-  const yDocRef = useRef<any>();
-  const wsProviderRef = useRef<any>();
-  const monacoBindingRef = useRef<any>();
-  const yMonacoRef = useRef<any>();
-  const yMonacoLoadingRef = useRef(false);
-  const editorRef = useRef<any>();
-  useEffect(() => {
-    const loadMonaco = async () => {
-      if (yMonacoLoadingRef.current) return;
-      yMonacoLoadingRef.current = true;
-      // y-monaco is gigantic. The other Monaco packages are small.
-      yMonacoRef.current = await import("y-monaco");
-      initCRDT();
-    };
-    loadMonaco();
-  }, []);
-  function beforeMount(monaco: Monaco) {
-    monaco.editor.defineTheme("lynxkite", theme);
-  }
-  function onMount(_editor: editor.IStandaloneCodeEditor, monaco: Monaco) {
-    // Do nothing on Ctrl+S. We save after every keypress anyway.
-    _editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {});
-    editorRef.current = _editor;
-    initCRDT();
-  }
-  function initCRDT() {
-    if (!yMonacoRef.current || !editorRef.current) return;
-    if (yDocRef.current) return;
-    yDocRef.current = new Y.Doc();
-    const text = yDocRef.current.getText("text");
-    const proto = location.protocol === "https:" ? "wss:" : "ws:";
-    const encodedPath = path!
-      .split("/")
-      .map((segment) => encodeURIComponent(segment))
-      .join("/");
-    wsProviderRef.current = new WebsocketProvider(
-      `${proto}//${location.host}/ws/code/crdt`,
-      encodedPath!,
-      yDocRef.current,
-    );
-    editorRef.current.getModel()!.setEOL(0); // https://github.com/yjs/y-monaco/issues/6
-    monacoBindingRef.current = new yMonacoRef.current.MonacoBinding(
-      text,
-      editorRef.current.getModel()!,
-      new Set([editorRef.current]),
-      wsProviderRef.current.awareness,
-    );
-  }
-  useEffect(() => {
-    return () => {
-      yDocRef.current?.destroy();
-      wsProviderRef.current?.destroy();
-      monacoBindingRef.current?.destroy();
-    };
-  });
-  return (
-    <div className="workspace">
-      <div className="top-bar bg-neutral">
-        <Link className="logo" to="/">
-          <img alt="" src={favicon} />
-        </Link>
-        <div className="ws-name">{path}</div>
-        <title>{path}</title>
-        <div className="tools text-secondary">
-          <button className="btn btn-link">
-            <Atom />
-          </button>
-          <button className="btn btn-link">
-            <Backspace />
-          </button>
-          <Link
-            to={`/dir/${parentDir
-              .split("/")
-              .map((segment) => encodeURIComponent(segment))
-              .join("/")}`}
-            className="btn btn-link"
-          >
-            <Close />
-          </Link>
-        </div>
-      </div>
-      <Editor
-        defaultLanguage="python"
-        theme="lynxkite"
-        path={path}
-        beforeMount={beforeMount}
-        onMount={onMount}
-        loading={null}
-        options={{
-          cursorStyle: "block",
-          cursorBlinking: "solid",
-          minimap: { enabled: false },
-          renderLineHighlight: "none",
-        }}
-      />
-    </div>
-  );
-}

lynxkite-app/web/src/Directory.tsx

@@ -1,243 +0,0 @@
-import { useState } from "react";
-// The directory browser.
-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";
-// @ts-ignore
-import FilePlus from "~icons/tabler/file-plus";
-// @ts-ignore
-import Folder from "~icons/tabler/folder";
-// @ts-ignore
-import FolderPlus from "~icons/tabler/folder-plus";
-// @ts-ignore
-import Home from "~icons/tabler/home";
-// @ts-ignore
-import LayoutGrid from "~icons/tabler/layout-grid";
-// @ts-ignore
-import LayoutGridAdd from "~icons/tabler/layout-grid-add";
-// @ts-ignore
-import Trash from "~icons/tabler/trash";
-import logo from "./assets/logo.png";
-
-function EntryCreator(props: {
-  label: string;
-  icon: JSX.Element;
-  onCreate: (name: string) => void;
-}) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [nameValidationError, setNameValidationError] = useState("");
-
-  function validateName(name: string): boolean {
-    if (name.includes("/")) {
-      setNameValidationError("Name cannot contain '/' characters");
-      return false;
-    }
-    if (name.trim() === "") {
-      setNameValidationError("Name cannot be empty");
-      return false;
-    }
-    setNameValidationError("");
-    return true;
-  }
-
-  return (
-    <>
-      {isCreating ? (
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const name = (e.target as HTMLFormElement).entryName.value.trim();
-            if (validateName(name)) {
-              props.onCreate(name);
-              setIsCreating(false);
-            }
-          }}
-        >
-          <input
-            className={`input input-ghost w-full ${nameValidationError ? "input-error" : ""}`}
-            autoFocus
-            type="text"
-            name="entryName"
-            onBlur={() => setIsCreating(false)}
-            onChange={(e) => validateName(e.target.value)}
-            placeholder={`${props.label} name`}
-          />
-          {nameValidationError && (
-            <div
-              className="error-message"
-              role="alert"
-              style={{ position: "absolute", zIndex: 10 }}
-            >
-              <span className="error-icon" aria-hidden="true">
-                ⚠️
-              </span>
-              <span className="error-text">{nameValidationError}</span>
-            </div>
-          )}
-        </form>
-      ) : (
-        <button type="button" onClick={() => setIsCreating(true)}>
-          {props.icon} {props.label}
-        </button>
-      )}
-    </>
-  );
-}
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
-
-export default function Directory() {
-  const path = usePath().replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
-  const encodedPath = encodeURIComponent(path || "");
-  const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher, {
-    dedupingInterval: 0,
-  });
-  const navigate = useNavigate();
-
-  function link(item: DirectoryEntry) {
-    const encodedName = encodePathSegments(item.name);
-    if (item.type === "directory") {
-      return `/dir/${encodedName}`;
-    }
-    if (item.type === "workspace") {
-      return `/edit/${encodedName}`;
-    }
-    return `/code/${encodedName}`;
-  }
-
-  function shortName(item: DirectoryEntry) {
-    return item.name
-      .split("/")
-      .pop()
-      ?.replace(/[.]lynxkite[.]json$/, "");
-  }
-
-  function encodePathSegments(path: string): string {
-    const segments = path.split("/");
-    return segments.map((segment) => encodeURIComponent(segment)).join("/");
-  }
-
-  function newWorkspaceIn(path: string, workspaceName: string) {
-    const pathSlash = path ? `${encodePathSegments(path)}/` : "";
-    navigate(`/edit/${pathSlash}${encodeURIComponent(workspaceName)}.lynxkite.json`, {
-      replace: true,
-    });
-  }
-  function newCodeFile(path: string, name: string) {
-    const pathSlash = path ? `${encodePathSegments(path)}/` : "";
-    navigate(`/code/${pathSlash}${encodeURIComponent(name)}`, { replace: true });
-  }
-  async function newFolderIn(path: string, folderName: string) {
-    const pathSlash = path ? `${path}/` : "";
-    const res = await fetch("/api/dir/mkdir", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ path: pathSlash + folderName }),
-    });
-    if (res.ok) {
-      const pathSlash = path ? `${encodePathSegments(path)}/` : "";
-      navigate(`/dir/${pathSlash}${encodeURIComponent(folderName)}`);
-    } 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 apiPath = item.type === "directory" ? "/api/dir/delete" : "/api/delete";
-    await fetch(apiPath, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ path: 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">
-              <EntryCreator
-                onCreate={(name) => {
-                  newWorkspaceIn(path || "", name);
-                }}
-                icon={<LayoutGridAdd />}
-                label="New workspace"
-              />
-              <EntryCreator
-                onCreate={(name) => {
-                  newCodeFile(path || "", name);
-                }}
-                icon={<FilePlus />}
-                label="New code file"
-              />
-              <EntryCreator
-                onCreate={(name: string) => {
-                  newFolderIn(path || "", name);
-                }}
-                icon={<FolderPlus />}
-                label="New folder"
-              />
-            </div>
-
-            {path ? (
-              <div className="breadcrumbs">
-                <Link to="/dir/" aria-label="home">
-                  <Home />
-                </Link>{" "}
-                <span className="current-folder">{path}</span>
-                <title>{path}</title>
-              </div>
-            ) : (
-              <title>LynxKite 2000:MM</title>
-            )}
-
-            {list.data.map(
-              (item: DirectoryEntry) =>
-                !shortName(item)?.startsWith("__") && (
-                  <div key={item.name} className="entry">
-                    <Link key={link(item)} to={link(item)}>
-                      {item.type === "directory" ? (
-                        <Folder />
-                      ) : item.type === "workspace" ? (
-                        <LayoutGrid />
-                      ) : (
-                        <File />
-                      )}
-                      <span className="entry-name">{shortName(item)}</span>
-                    </Link>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        deleteItem(item);
-                      }}
-                    >
-                      <Trash />
-                    </button>
-                  </div>
-                ),
-            )}
-          </>
-        )}
-      </div>{" "}
-    </div>
-  );
-}

lynxkite-app/web/src/Tooltip.tsx

@@ -1,21 +0,0 @@
-import { useId } from "react";
-import Markdown from "react-markdown";
-import { Tooltip as ReactTooltip } from "react-tooltip";
-
-export default function Tooltip(props: any) {
-  const id = useId();
-  if (!props.doc) return null;
-  return (
-    <>
-      <span data-tooltip-id={id} tabIndex={0}>
-        {props.children}
-      </span>
-      <ReactTooltip id={id} className="tooltip prose" place="top-end">
-        {props.doc.map?.(
-          (section: any, i: number) =>
-            section.kind === "text" && <Markdown key={i}>{section.value}</Markdown>,
-        ) ?? <Markdown>{props.doc}</Markdown>}
-      </ReactTooltip>
-    </>
-  );
-}

lynxkite-app/web/src/apiTypes.ts

@@ -1,65 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
-/* This file was automatically generated from pydantic models by running pydantic2ts.
-/* Do not modify it by hand - just update the pydantic models and then re-run the script
-*/
-
-export type NodeStatus = "planned" | "active" | "done";
-
-export interface DirectoryEntry {
-  name: string;
-  type: string;
-}
-export interface SaveRequest {
-  path: string;
-  ws: Workspace;
-  [k: string]: unknown;
-}
-/**
- * A workspace is a representation of a computational graph that consists of nodes and edges.
- *
- * Each node represents an operation or task, and the edges represent the flow of data between
- * the nodes. Each workspace is associated with an environment, which determines the operations
- * that can be performed in the workspace and the execution method for the operations.
- */
-export interface Workspace {
-  env?: string;
-  paused?: boolean;
-  nodes?: WorkspaceNode[];
-  edges?: WorkspaceEdge[];
-  [k: string]: unknown;
-}
-export interface WorkspaceNode {
-  id: string;
-  type: string;
-  data: WorkspaceNodeData;
-  position: Position;
-  width: number;
-  height: number;
-  [k: string]: unknown;
-}
-export interface WorkspaceNodeData {
-  title: string;
-  params: {
-    [k: string]: unknown;
-  };
-  display?: unknown;
-  input_metadata?: unknown;
-  error?: string | null;
-  status?: NodeStatus;
-  [k: string]: unknown;
-}
-export interface Position {
-  x: number;
-  y: number;
-  [k: string]: unknown;
-}
-export interface WorkspaceEdge {
-  id: string;
-  source: string;
-  target: string;
-  sourceHandle: string;
-  targetHandle: string;
-  [k: string]: unknown;
-}

lynxkite-app/web/src/code-theme.ts

@@ -1,38 +0,0 @@
-// A simple theme using the LynxKite colors.
-
-import type { editor } from "monaco-editor/esm/vs/editor/editor.api";
-
-const theme: editor.IStandaloneThemeData = {
-  base: "vs-dark",
-  inherit: true,
-  rules: [
-    {
-      foreground: "ff8800",
-      token: "keyword",
-    },
-    {
-      foreground: "0088ff",
-      fontStyle: "italic",
-      token: "comment",
-    },
-    {
-      foreground: "39bcf3",
-      token: "string",
-    },
-    {
-      foreground: "ffc600",
-      token: "",
-    },
-  ],
-  colors: {
-    "editor.foreground": "#FFFFFF",
-    "editor.background": "#002a4c",
-    "editor.selectionBackground": "#0050a4",
-    "editor.lineHighlightBackground": "#1f4662",
-    "editorCursor.foreground": "#ffc600",
-    "editorWhitespace.foreground": "#7f7f7fb2",
-    "editorIndentGuide.background": "#3b5364",
-    "editorIndentGuide.activeBackground": "#ffc600",
-  },
-};
-export default theme;

lynxkite-app/web/src/common.ts

@@ -1,16 +0,0 @@
-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;
-}
-
-export const COLORS: { [key: string]: string } = {
-  gray: "oklch(95% 0 0)",
-  pink: "oklch(75% 0.2 0)",
-  orange: "oklch(75% 0.2 55)",
-  green: "oklch(75% 0.2 150)",
-  blue: "oklch(75% 0.2 230)",
-  purple: "oklch(75% 0.2 290)",
-};

lynxkite-app/web/src/index.css

@@ -1,727 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  background: #002a4c;
-}
-
-img,
-svg {
-  display: inline-block;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.workspace {
-  background: white;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-
-  .top-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #002a4c;
-
-    .ws-name {
-      font-size: 1.5em;
-      flex: 1;
-      color: white;
-    }
-
-    .logo img {
-      height: 2em;
-      vertical-align: middle;
-      margin: 4px;
-    }
-
-    .tools {
-      display: flex;
-      align-items: center;
-
-      .btn {
-        color: oklch(75% 0.13 230);
-        font-size: 1.5em;
-        padding: 0 10px;
-      }
-    }
-  }
-
-  .error {
-    background: #ffdddd;
-    padding: 8px;
-    font-size: 12px;
-  }
-
-  .node-container {
-    padding: 8px;
-    position: relative;
-  }
-
-  .lynxkite-node {
-    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    overflow: hidden;
-    background: white;
-    display: flex;
-    flex-direction: column;
-
-    > :not(.title, .react-flow__handle) {
-      user-select: text;
-      cursor: default;
-    }
-
-    .node-content {
-      flex: 1;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .in-group .lynxkite-node {
-    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-    opacity: 0.3;
-    transition: opacity 0.3s;
-  }
-
-  .in-group .lynxkite-node:hover {
-    opacity: 1;
-  }
-
-  .node-group {
-    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.3);
-    border-radius: 20px;
-    border: none;
-    background-color: white;
-    opacity: 0.9;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-    padding: 10px 20px;
-  }
-
-  .node-group.in-group {
-    opacity: 0.5;
-  }
-
-  .node-group-color-picker-icon {
-    font-size: 30px;
-    opacity: 0.1;
-    transition: opacity 0.3s;
-  }
-
-  .node-group:hover .node-group-color-picker-icon {
-    opacity: 1;
-  }
-
-  .color-picker-button {
-    font-size: 30px;
-  }
-
-  .tooltip {
-    padding: 8px;
-    border-radius: 4px;
-    opacity: 1;
-    text-align: left;
-    background: #fffa;
-    color: black;
-    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    font-size: 16px;
-    font-weight: initial;
-    max-width: 300px;
-  }
-
-  .prose p {
-    margin-bottom: 0;
-  }
-
-  .expanded .lynxkite-node {
-    height: 100%;
-  }
-
-  .lynxkite-node .title {
-    font-weight: bold;
-    padding: 8px;
-    background-image: linear-gradient(
-      to right,
-      var(--status-color-1),
-      var(--status-color-2) 40%,
-      var(--status-color-2) 60%,
-      var(--status-color-3)
-    );
-    background-blend-mode: luminosity;
-    background-size: 180% 180%;
-    --status-color-1: #0000;
-    --status-color-2: #0000;
-    --status-color-3: #0000;
-    transition: --status-color-1 0.3s, --status-color-2 0.3s, --status-color-3 0.3s;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-
-    .title-title {
-      flex: 1;
-    }
-  }
-
-  .lynxkite-node .title.active {
-    --status-color-1: #0000;
-    --status-color-2: #fff4;
-    --status-color-3: #888f;
-    animation: active-node-gradient-animation 1.2s alternate ease-in-out infinite;
-  }
-
-  .lynxkite-node .title.planned {
-    --status-color-1: #888f;
-    --status-color-2: #888f;
-    --status-color-3: #888f;
-  }
-
-  .handle-name {
-    font-size: 10px;
-    color: black;
-    letter-spacing: 0.05em;
-    text-align: right;
-    white-space: nowrap;
-    position: absolute;
-    top: -5px;
-    backdrop-filter: blur(10px);
-    padding: 2px 8px;
-    border-radius: 4px;
-    visibility: hidden;
-  }
-
-  .react-flow__handle-left {
-    left: -5px;
-
-    .handle-name {
-      right: 30px;
-    }
-  }
-
-  .react-flow__handle-right {
-    right: -5px;
-
-    .handle-name {
-      left: 30px;
-    }
-  }
-
-  .react-flow__handle-top {
-    top: -5px;
-
-    .handle-name {
-      top: -3px;
-      left: 13px;
-      backdrop-filter: none;
-    }
-  }
-
-  .react-flow__handle-bottom {
-    bottom: -5px;
-
-    .handle-name {
-      top: 0px;
-      left: 13px;
-      backdrop-filter: none;
-    }
-  }
-
-  .node-container:hover .handle-name {
-    visibility: visible;
-  }
-
-  .node-resizer {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    cursor: nwse-resize;
-  }
-
-  .lynxkite-node {
-    .param {
-      padding: 4px 8px 4px 8px;
-      display: block;
-    }
-
-    .param-name-row {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: end;
-    }
-
-    .param-name {
-      display: block;
-      font-size: 10px;
-      letter-spacing: 0.05em;
-      margin-left: 10px;
-      width: fit-content;
-      padding: 2px 8px;
-      border-radius: 4px 4px 0 0;
-    }
-  }
-
-  .node-search {
-    position: fixed;
-    width: 300px;
-    z-index: 5;
-    padding: 4px;
-    border-radius: 4px;
-    border: 1px solid #888;
-    background-color: white;
-    max-height: -webkit-fill-available;
-    max-height: -moz-available;
-    display: flex;
-    flex-direction: column;
-
-    input {
-      width: calc(100% - 26px);
-      font-size: 20px;
-      padding: 8px;
-      border-radius: 4px;
-      border: 1px solid #eee;
-      margin: 4px;
-    }
-
-    .search-result {
-      padding: 4px;
-      cursor: pointer;
-    }
-
-    .search-result.selected {
-      background-color: oklch(75% 0.2 55);
-      border-radius: 4px;
-    }
-
-    .matches {
-      overflow-y: auto;
-    }
-  }
-
-  .react-flow__node-table_view {
-    .df-head {
-      font-weight: bold;
-      padding: 8px;
-      background: #f0f0f0;
-      cursor: pointer;
-    }
-
-    dl {
-      margin: 10px;
-    }
-  }
-
-  .react-flow__node-comment {
-    width: auto !important;
-    height: auto !important;
-    max-width: 400px;
-
-    .comment-view {
-      border-radius: 4px;
-      padding: 5px 10px;
-    }
-
-    .comment-editor {
-      width: 400px;
-      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3);
-      border-radius: 4px;
-      padding: 5px 10px;
-      border: 1px solid #ccc;
-      overflow-y: hidden;
-    }
-  }
-
-  .env-select {
-    background: transparent;
-    color: #39bcf3;
-  }
-
-  .workspace-message {
-    position: absolute;
-    left: 50%;
-    bottom: 20px;
-    transform: translateX(-50%);
-    box-shadow: 0 5px 50px 0px #8008;
-    padding: 10px 40px 10px 20px;
-    border-radius: 5px;
-
-    .close {
-      position: absolute;
-      right: 10px;
-      cursor: pointer;
-    }
-  }
-
-  .model-mapping-param {
-    border: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.2));
-    border-collapse: separate;
-    border-radius: 5px;
-    padding: 5px 10px;
-    width: 100%;
-  }
-
-  .table-viewer {
-    td {
-      padding: 5px 10px;
-      vertical-align: top;
-    }
-
-    .image-in-table {
-      max-height: 100px;
-    }
-
-    .sort-indicator {
-      display: inline-block;
-      width: 0;
-      font-size: 10px;
-      color: #0006;
-      transform: translate(5px, -2px);
-    }
-  }
-}
-
-.params-expander {
-  font-size: 15px;
-  padding: 4px;
-  color: #000a;
-}
-
-.flippy {
-  transition: transform 0.5s;
-}
-
-.flippy.flippy-90 {
-  transform: rotate(-90deg);
-}
-
-.directory {
-  .entry-list {
-    width: 100%;
-    margin: 10px auto;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0px 2px 4px;
-    padding: 0 0 10px 0;
-  }
-
-  @media (min-width: 768px) {
-    .entry-list {
-      width: 768px;
-    }
-  }
-
-  @media (min-width: 960px) {
-    .entry-list {
-      width: 80%;
-    }
-  }
-
-  .logo {
-    margin: 0;
-    padding-top: 50px;
-    text-align: center;
-  }
-
-  .logo-image {
-    max-width: 50%;
-  }
-
-  .tagline {
-    color: #39bcf3;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  @media (min-width: 1400px) {
-    .tagline {
-      font-size: 18px;
-    }
-  }
-
-  .actions {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    height: 50px;
-    padding: 5px;
-
-    form,
-    button {
-      flex: 1;
-    }
-  }
-
-  .actions a {
-    padding: 2px 10px;
-    border-radius: 5px;
-  }
-
-  .actions a:hover {
-    background: #39bcf3;
-    color: white;
-  }
-
-  .breadcrumbs {
-    padding-left: 10px;
-    font-size: 20px;
-    background: #002a4c20;
-  }
-
-  .breadcrumbs a:hover {
-    color: #39bcf3;
-  }
-
-  .entry-list .entry {
-    display: flex;
-    border-bottom: 1px solid whitesmoke;
-    color: #004165;
-    cursor: pointer;
-    user-select: none;
-
-    a {
-      text-decoration: none;
-      flex: 1;
-      padding-left: 10px;
-    }
-
-    .entry-name {
-      padding-left: 10px;
-    }
-
-    button {
-      padding-right: 10px;
-    }
-  }
-
-  .entry-list .open .entry,
-  .entry-list .entry:hover,
-  .entry-list .entry:focus {
-    background: #39bcf3;
-    color: white;
-  }
-
-  .entry-list .entry:last-child {
-    border-bottom: none;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  .loading {
-    color: #39bcf3;
-    margin: 10px;
-  }
-}
-
-@keyframes active-node-gradient-animation {
-  to {
-    background-position-x: 100%;
-  }
-}
-
-@property --status-color-1 {
-  syntax: "<color>";
-  initial-value: red;
-  inherits: false;
-}
-
-@property --status-color-2 {
-  syntax: "<color>";
-  initial-value: red;
-  inherits: false;
-}
-
-@property --status-color-3 {
-  syntax: "<color>";
-  initial-value: red;
-  inherits: false;
-}
-
-.react-flow__edge.selected path.react-flow__edge-path {
-  outline: var(--xy-selection-border, var(--xy-selection-border-default));
-  outline-offset: 10px;
-  border-radius: 1px;
-}
-
-.react-flow__handle {
-  border-color: black;
-  background: white;
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
-}
-
-.react-flow__arrowhead * {
-  stroke: none;
-  fill: black;
-}
-
-.react-flow__node-area {
-  z-index: -10 !important;
-}
-
-.selected .node-group,
-.selected .comment-view,
-.selected .lynxkite-node {
-  outline: var(--xy-selection-border, var(--xy-selection-border-default));
-  outline-offset: 7.5px;
-}
-
-.selected .node-group {
-  outline-offset: 20px;
-}
-
-.graph-creation-view {
-  display: flex;
-  width: 100%;
-  margin-top: 10px;
-}
-
-.graph-tables,
-.graph-relations {
-  flex: 1;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.graph-table-header {
-  display: flex;
-  justify-content: space-between;
-  font-weight: bold;
-  text-align: left;
-  background-color: #333;
-  color: white;
-  padding: 10px;
-  border-bottom: 2px solid #222;
-  font-size: 16px;
-}
-
-.graph-creation-view .df-head {
-  font-weight: bold;
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  /* Adds a separator between rows */
-  border-bottom: 1px solid #ccc;
-}
-
-/* Alternating background colors for table-like effect */
-.graph-creation-view .df-head:nth-child(odd) {
-  background-color: #f9f9f9;
-}
-
-.graph-creation-view .df-head:nth-child(even) {
-  background-color: #e0e0e0;
-}
-
-.graph-relation-attributes {
-  display: flex;
-  flex-direction: column;
-  /* Adds space between each label-input pair */
-  gap: 10px;
-  width: 100%;
-}
-
-.graph-relation-attributes label {
-  font-size: 12px;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 2px;
-  /* Lighter text for labels */
-  color: #666;
-}
-
-.graph-relation-attributes input {
-  width: 100%;
-  padding: 8px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  outline: none;
-}
-
-.graph-relation-attributes input:focus {
-  /* Highlight input on focus */
-  border-color: #007bff;
-}
-
-.add-relationship-button {
-  background-color: #28a745;
-  color: white;
-  border: none;
-  font-size: 16px;
-  cursor: pointer;
-  padding: 4px 10px;
-  border-radius: 4px;
-}
-
-.add-relationship-button:hover {
-  background-color: #218838;
-}
-
-.yRemoteSelection {
-  background-color: rgb(250, 129, 0, 0.5);
-}
-
-.yRemoteSelectionHead {
-  position: absolute;
-  border-left: #ff8800 solid 2px;
-  border-top: #ff8800 solid 2px;
-  border-bottom: #ff8800 solid 2px;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.yRemoteSelectionHead::after {
-  position: absolute;
-  content: " ";
-  border: 3px solid #ff8800;
-  border-radius: 4px;
-  left: -4px;
-  top: -5px;
-}
-
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  padding: 0.5rem;
-  background-color: #fee2e2;
-  border: 1px solid #fecaca;
-  border-radius: 0.375rem;
-  color: #dc2626;
-  font-size: 0.875rem;
-}
-
-.error-icon {
-  flex-shrink: 0;
-}
-
-.error-text {
-  line-height: 1.4;
-}
-
-.input-error {
-  border-color: #dc2626;
-  box-shadow: 0 0 0 1px #dc2626;
-}

lynxkite-app/web/src/main.tsx

@@ -1,53 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "@xyflow/react/dist/style.css";
-import "./index.css";
-import {
-  Link,
-  Route,
-  RouterProvider,
-  createBrowserRouter,
-  createRoutesFromElements,
-  useRouteError,
-} from "react-router";
-import Code from "./Code.tsx";
-import Directory from "./Directory.tsx";
-import Workspace from "./workspace/Workspace.tsx";
-
-function WorkspaceError() {
-  const error = useRouteError();
-  const stack = error instanceof Error ? error.stack : null;
-  return (
-    <div className="hero min-h-screen">
-      <div className="card bg-base-100 shadow-sm">
-        <div className="card-body">
-          <h2 className="card-title">Something went wrong...</h2>
-          <pre>{stack || "Unknown error."}</pre>
-          <div className="card-actions justify-end">
-            <Link to="/" className="btn btn-primary">
-              Close workspace
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <>
-      <Route path="/" element={<Directory />} />
-      <Route path="/dir" element={<Directory />} />
-      <Route path="/dir/*" element={<Directory />} />
-      <Route path="/edit/*" element={<Workspace />} errorElement={<WorkspaceError />} />
-      <Route path="/code/*" element={<Code />} />
-    </>,
-  ),
-);
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <RouterProvider router={router} />
-  </StrictMode>,
-);

lynxkite-app/web/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

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

@@ -1,22 +0,0 @@
-export default function EnvironmentSelector(props: {
-  options: string[];
-  value: string;
-  onChange: (val: string) => void;
-}) {
-  return (
-    <>
-      <select
-        className="env-select 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>
-        ))}
-      </select>
-    </>
-  );
-}

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

@@ -1,32 +0,0 @@
-import { BaseEdge, Position } from "@xyflow/react";
-
-function addOffset(x: number, y: number, p: Position, offset: number) {
-  if (p === Position.Top) return `${x},${y - offset}`;
-  if (p === Position.Bottom) return `${x},${y + offset}`;
-  if (p === Position.Left) return `${x - offset},${y}`;
-  return `${x + offset},${y}`;
-}
-
-export default function LynxKiteEdge(props: any) {
-  const offset = 0.3 * Math.hypot(props.targetX - props.sourceX, props.targetY - props.sourceY);
-  const s = addOffset(props.sourceX, props.sourceY, props.sourcePosition, 0);
-  const sc = addOffset(props.sourceX, props.sourceY, props.sourcePosition, offset);
-  const tc = addOffset(props.targetX, props.targetY, props.targetPosition, offset);
-  const t = addOffset(props.targetX, props.targetY, props.targetPosition, 0);
-  const path = `M${s} C${sc} ${tc} ${t}`;
-  return (
-    <>
-      <BaseEdge
-        path={path}
-        labelX={props.labelX}
-        labelY={props.labelY}
-        markerStart={props.markerStart}
-        markerEnd={props.markerEnd}
-        style={{
-          strokeWidth: 2,
-          stroke: "black",
-        }}
-      />
-    </>
-  );
-}

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

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

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

@@ -1,93 +0,0 @@
-import Fuse from "fuse.js";
-import { useEffect, useMemo, useRef, useState } from "react";
-
-export type OpsOp = {
-  name: string;
-  id: string;
-  categories: 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 NodeSearch(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 allOps = useMemo(() => {
-    const boxes = Object.values(props.boxes).map((box) => ({ item: box }));
-    boxes.sort((a, b) => a.item.name.localeCompare(b.item.name));
-    return boxes;
-  }, [props.boxes]);
-  const hits: { item: OpsOp }[] = searchText ? fuse.search<OpsOp>(searchText) : allOps;
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  useEffect(() => searchBox.current.focus());
-  function typed(text: string) {
-    setSearchText(text);
-    setSelectedIndex(Math.max(0, Math.min(selectedIndex, hits.length - 1)));
-  }
-  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setSelectedIndex(Math.min(selectedIndex + 1, hits.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setSelectedIndex(Math.max(selectedIndex - 1, 0));
-    } else if (e.key === "Enter") {
-      addSelected();
-    } else if (e.key === "Escape") {
-      props.onCancel();
-    }
-  }
-  function addSelected() {
-    const node = { ...hits[selectedIndex].item };
-    node.position = props.pos;
-    props.onAdd(node);
-  }
-  async function lostFocus(e: any) {
-    // If it's a click on a result, let the click handler handle it.
-    if (e.relatedTarget?.closest(".node-search")) return;
-    props.onCancel();
-  }
-
-  return (
-    <div className="node-search" style={{ top: props.pos.y, left: props.pos.x }}>
-      <input
-        ref={searchBox}
-        value={searchText}
-        onChange={(event) => typed(event.target.value)}
-        onKeyDown={onKeyDown}
-        onBlur={lostFocus}
-        placeholder="Search for box"
-      />
-      <div className="matches">
-        {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" : ""}`}
-          >
-            {box.item.categories.map((category) => `${category}\u00A0›\u00A0`)}
-            {box.item.name}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,655 +0,0 @@
-// The LynxKite workspace editor.
-
-import { getYjsDoc, syncedStore } from "@syncedstore/core";
-import {
-  type Connection,
-  Controls,
-  type Edge,
-  MarkerType,
-  type Node,
-  ReactFlow,
-  ReactFlowProvider,
-  type XYPosition,
-  applyEdgeChanges,
-  applyNodeChanges,
-  useReactFlow,
-  useUpdateNodeInternals,
-} from "@xyflow/react";
-import axios from "axios";
-import { type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link } from "react-router";
-import useSWR, { type Fetcher } from "swr";
-import { WebsocketProvider } from "y-websocket";
-// @ts-ignore
-import Atom from "~icons/tabler/atom.jsx";
-// @ts-ignore
-import Backspace from "~icons/tabler/backspace.jsx";
-// @ts-ignore
-import UngroupIcon from "~icons/tabler/library-minus.jsx";
-// @ts-ignore
-import GroupIcon from "~icons/tabler/library-plus.jsx";
-// @ts-ignore
-import Pause from "~icons/tabler/player-pause.jsx";
-// @ts-ignore
-import Play from "~icons/tabler/player-play.jsx";
-// @ts-ignore
-import Restart from "~icons/tabler/rotate-clockwise.jsx";
-// @ts-ignore
-import Close from "~icons/tabler/x.jsx";
-import Tooltip from "../Tooltip.tsx";
-import type { WorkspaceNode, Workspace as WorkspaceType } from "../apiTypes.ts";
-import favicon from "../assets/favicon.ico";
-import { usePath } from "../common.ts";
-// import NodeWithTableView from './NodeWithTableView';
-import EnvironmentSelector from "./EnvironmentSelector";
-import LynxKiteEdge from "./LynxKiteEdge.tsx";
-import { LynxKiteState } from "./LynxKiteState";
-import NodeSearch, { type OpsOp, type Catalog, type Catalogs } from "./NodeSearch.tsx";
-import NodeWithGraphCreationView from "./nodes/GraphCreationNode.tsx";
-import Group from "./nodes/Group.tsx";
-import NodeWithComment from "./nodes/NodeWithComment.tsx";
-import NodeWithImage from "./nodes/NodeWithImage.tsx";
-import NodeWithMolecule from "./nodes/NodeWithMolecule.tsx";
-import NodeWithParams from "./nodes/NodeWithParams";
-import NodeWithTableView from "./nodes/NodeWithTableView.tsx";
-import NodeWithVisualization from "./nodes/NodeWithVisualization.tsx";
-
-export default function Workspace(props: any) {
-  return (
-    <ReactFlowProvider>
-      <LynxKiteFlow {...props} />
-    </ReactFlowProvider>
-  );
-}
-
-function LynxKiteFlow() {
-  const updateNodeInternals = useUpdateNodeInternals();
-  const reactFlow = useReactFlow();
-  const reactFlowContainer = useRef<HTMLDivElement>(null);
-  const [nodes, setNodes] = useState([] as Node[]);
-  const [edges, setEdges] = useState([] as Edge[]);
-  const path = usePath().replace(/^[/]edit[/]/, "");
-  const shortPath = path!
-    .split("/")
-    .pop()!
-    .replace(/[.]lynxkite[.]json$/, "");
-  const [state, setState] = useState({ workspace: {} as WorkspaceType });
-  const [message, setMessage] = useState(null as string | null);
-  const [pausedUIState, setPausedUIState] = useState(false);
-  useEffect(() => {
-    const state = syncedStore({ workspace: {} as WorkspaceType });
-    setState(state);
-    const doc = getYjsDoc(state);
-    const proto = location.protocol === "https:" ? "wss:" : "ws:";
-    const encodedPath = path!
-      .split("/")
-      .map((segment) => encodeURIComponent(segment))
-      .join("/");
-    const wsProvider = new WebsocketProvider(
-      `${proto}//${location.host}/ws/crdt`,
-      encodedPath,
-      doc,
-    );
-    if (state.workspace && typeof state.workspace.paused === "undefined") {
-      state.workspace.paused = false;
-    }
-    const onChange = (_update: any, origin: any, _doc: any, _tr: any) => {
-      if (origin === wsProvider) {
-        // An update from the CRDT. Apply it to the local state.
-        // This is only necessary because ReactFlow keeps secret internal copies of our stuff.
-        if (!state.workspace) return;
-        if (!state.workspace.nodes) return;
-        if (!state.workspace.edges) return;
-        for (const n of state.workspace.nodes) {
-          if (n.type !== "node_group" && n.dragHandle !== ".drag-handle") {
-            n.dragHandle = ".drag-handle";
-          }
-        }
-        const nodes = reactFlow.getNodes();
-        const selection = nodes.filter((n) => n.selected).map((n) => n.id);
-        const newNodes = state.workspace.nodes.map((n) =>
-          selection.includes(n.id) ? { ...n, selected: true } : n,
-        );
-        setNodes([...newNodes] as Node[]);
-        setEdges([...state.workspace.edges] as Edge[]);
-        for (const node of state.workspace.nodes) {
-          // Make sure the internal copies are updated.
-          updateNodeInternals(node.id);
-        }
-        setPausedUIState(state.workspace.paused || false);
-      }
-    };
-    doc.on("update", onChange);
-    return () => {
-      doc.destroy();
-      wsProvider.destroy();
-    };
-  }, [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" &&
-          !Number.isNaN(ch.position.x) &&
-          !Number.isNaN(ch.position.y)
-        ) {
-          getYjsDoc(state).transact(() => {
-            node.position.x = ch.position.x;
-            node.position.y = ch.position.y;
-          });
-          // Update edge positions.
-          updateNodeInternals(ch.id);
-        } else if (ch.type === "select") {
-        } else if (ch.type === "dimensions") {
-          getYjsDoc(state).transact(() => {
-            node.width = ch.dimensions.width;
-            node.height = ch.dimensions.height;
-          });
-          // Update edge positions when node size changes.
-          updateNodeInternals(ch.id);
-        } 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.
-          getYjsDoc(state).transact(() => {
-            if (node.data.collapsed !== ch.item.data.collapsed) {
-              node.data.collapsed = ch.item.data.collapsed;
-              // Update edge positions when node collapses/expands.
-              setTimeout(() => updateNodeInternals(ch.id), 0);
-            }
-            if (node.data.__execution_delay !== ch.item.data.__execution_delay) {
-              node.data.__execution_delay = ch.item.data.__execution_delay;
-            }
-            for (const [key, value] of Object.entries(ch.item.data.params)) {
-              if (node.data.params[key] !== value) {
-                node.data.params[key] = value;
-              }
-            }
-          });
-        } else {
-          console.log("Unknown node change", ch);
-        }
-      }
-    },
-    [state, updateNodeInternals],
-  );
-  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 fetcher: Fetcher<Catalogs> = (resource: string, init?: RequestInit) =>
-    fetch(resource, init).then((res) => res.json());
-  const encodedPathForAPI = path!
-    .split("/")
-    .map((segment) => encodeURIComponent(segment))
-    .join("/");
-  const catalog = useSWR(`/api/catalog?workspace=${encodedPathForAPI}`, 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,
-      graph_creation_view: NodeWithGraphCreationView,
-      molecule: NodeWithMolecule,
-      comment: NodeWithComment,
-      node_group: Group,
-    }),
-    [],
-  );
-  const edgeTypes = useMemo(
-    () => ({
-      default: LynxKiteEdge,
-    }),
-    [],
-  );
-
-  // Global keyboard shortcuts.
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Show the node search dialog on "/".
-      if (nodeSearchSettings || isTypingInFormElement()) return;
-      if (event.key === "/") {
-        event.preventDefault();
-        setNodeSearchSettings({
-          pos: getBestPosition(),
-          boxes: catalog.data![state.workspace.env!],
-        });
-      } else if (event.key === "r") {
-        event.preventDefault();
-        executeWorkspace();
-      }
-    };
-    // TODO: Switch to keydown once https://github.com/xyflow/xyflow/pull/5055 is merged.
-    document.addEventListener("keyup", handleKeyDown);
-    return () => {
-      document.removeEventListener("keyup", handleKeyDown);
-    };
-  }, [catalog.data, nodeSearchSettings, state.workspace.env]);
-
-  function getBestPosition() {
-    const W = reactFlowContainer.current!.clientWidth;
-    const H = reactFlowContainer.current!.clientHeight;
-    const w = 200;
-    const h = 200;
-    const SPEED = 20;
-    const GAP = 50;
-    const pos = { x: 100, y: 100 };
-    while (pos.y < H) {
-      // Find a position that is not occupied by a node.
-      const fpos = reactFlow.screenToFlowPosition(pos);
-      const occupied = state.workspace.nodes!.some((n) => {
-        const np = n.position;
-        return (
-          np.x < fpos.x + w + GAP &&
-          np.x + n.width + GAP > fpos.x &&
-          np.y < fpos.y + h + GAP &&
-          np.y + n.height + GAP > fpos.y
-        );
-      });
-      if (!occupied) {
-        return pos;
-      }
-      // Move the position to the right and down until we find a free spot.
-      pos.x += SPEED;
-      if (pos.x + w > W) {
-        pos.x = 100;
-        pos.y += SPEED;
-      }
-    }
-    return { x: 100, y: 100 };
-  }
-
-  function isTypingInFormElement() {
-    const activeElement = document.activeElement;
-    return (
-      activeElement &&
-      (activeElement.tagName === "INPUT" ||
-        activeElement.tagName === "TEXTAREA" ||
-        (activeElement as HTMLElement).isContentEditable)
-    );
-  }
-
-  const closeNodeSearch = useCallback(() => {
-    setNodeSearchSettings(undefined);
-    setSuppressSearchUntil(Date.now() + 200);
-  }, []);
-  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],
-  );
-  function findFreeId(prefix: string) {
-    let i = 1;
-    let id = `${prefix} ${i}`;
-    const used = new Set(state.workspace.nodes!.map((n) => n.id));
-    while (used.has(id)) {
-      i += 1;
-      id = `${prefix} ${i}`;
-    }
-    return id;
-  }
-  function addNode(node: Partial<WorkspaceNode>) {
-    state.workspace.nodes!.push(node as WorkspaceNode);
-    setNodes([...nodes, node as WorkspaceNode]);
-  }
-  function nodeFromMeta(meta: OpsOp): Partial<WorkspaceNode> {
-    const node: Partial<WorkspaceNode> = {
-      type: meta.type,
-      data: {
-        meta: { value: meta },
-        title: meta.name,
-        op_id: meta.id,
-        params: Object.fromEntries(meta.params.map((p) => [p.name, p.default])),
-      },
-    };
-    return node;
-  }
-  const addNodeFromSearch = useCallback(
-    (meta: OpsOp) => {
-      const node = nodeFromMeta(meta);
-      const nss = nodeSearchSettings!;
-      node.position = reactFlow.screenToFlowPosition({
-        x: nss.pos.x,
-        y: nss.pos.y,
-      });
-      node.id = findFreeId(node.data!.title);
-      addNode(node);
-      closeNodeSearch();
-    },
-    [nodeSearchSettings, state, reactFlow, nodes, closeNodeSearch],
-  );
-
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      setSuppressSearchUntil(Date.now() + 200);
-      const edge = {
-        id: `${connection.source} ${connection.sourceHandle} ${connection.target} ${connection.targetHandle}`,
-        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("/");
-  function onDragOver(e: React.DragEvent<HTMLDivElement>) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
-  async function onDrop(e: React.DragEvent<HTMLDivElement>) {
-    e.stopPropagation();
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-    const formData = new FormData();
-    formData.append("file", file);
-    try {
-      await axios.post("/api/upload", formData, {
-        onUploadProgress: (progressEvent) => {
-          const percentCompleted = Math.round((100 * progressEvent.loaded) / progressEvent.total!);
-          if (percentCompleted === 100) setMessage("Processing file...");
-          else setMessage(`Uploading ${percentCompleted}%`);
-        },
-      });
-      setMessage(null);
-      const cat = catalog.data![state.workspace.env!];
-      const node = nodeFromMeta(cat["Import file"]);
-      node.id = findFreeId(node.data!.title);
-      node.position = reactFlow.screenToFlowPosition({
-        x: e.clientX,
-        y: e.clientY,
-      });
-      node.data!.params.file_path = `uploads/${file.name}`;
-      if (file.name.includes(".csv")) {
-        node.data!.params.file_format = "csv";
-      } else if (file.name.includes(".parquet")) {
-        node.data!.params.file_format = "parquet";
-      } else if (file.name.includes(".json")) {
-        node.data!.params.file_format = "json";
-      } else if (file.name.includes(".xls")) {
-        node.data!.params.file_format = "excel";
-      }
-      addNode(node);
-    } catch (error) {
-      setMessage("File upload failed.");
-    }
-  }
-  async function executeWorkspace() {
-    const response = await axios.post(`/api/execute_workspace?name=${encodeURIComponent(path)}`);
-    if (response.status !== 200) {
-      setMessage("Workspace execution failed.");
-    }
-  }
-  function togglePause() {
-    state.workspace.paused = !state.workspace.paused;
-    setPausedUIState(state.workspace.paused);
-  }
-  function deleteSelection() {
-    const selectedNodes = nodes.filter((n) => n.selected);
-    const selectedEdges = edges.filter((e) => e.selected);
-    reactFlow.deleteElements({ nodes: selectedNodes, edges: selectedEdges });
-  }
-  function groupSelection() {
-    const selectedNodes = nodes.filter((n) => n.selected && !n.parentId);
-    const groupNode = {
-      id: findFreeId("Group"),
-      type: "node_group",
-      position: { x: 0, y: 0 },
-      width: 0,
-      height: 0,
-      data: { title: "Group", params: {} },
-    };
-    let top = Number.POSITIVE_INFINITY;
-    let left = Number.POSITIVE_INFINITY;
-    let bottom = Number.NEGATIVE_INFINITY;
-    let right = Number.NEGATIVE_INFINITY;
-    const PAD = 10;
-    for (const node of selectedNodes) {
-      if (node.position.y - PAD < top) top = node.position.y - PAD;
-      if (node.position.x - PAD < left) left = node.position.x - PAD;
-      if (node.position.y + PAD + node.height! > bottom)
-        bottom = node.position.y + PAD + node.height!;
-      if (node.position.x + PAD + node.width! > right) right = node.position.x + PAD + node.width!;
-    }
-    groupNode.position = {
-      x: left,
-      y: top,
-    };
-    groupNode.width = right - left;
-    groupNode.height = bottom - top;
-    setNodes([
-      { ...(groupNode as WorkspaceNode), selected: true },
-      ...nodes.map((n) =>
-        n.selected
-          ? {
-              ...n,
-              position: { x: n.position.x - left, y: n.position.y - top },
-              parentId: groupNode.id,
-              extent: "parent" as const,
-              selected: false,
-            }
-          : n,
-      ),
-    ]);
-    getYjsDoc(state).transact(() => {
-      state.workspace.nodes!.unshift(groupNode as WorkspaceNode);
-      const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
-      for (const node of state.workspace.nodes!) {
-        if (selectedNodeIds.has(node.id)) {
-          node.position.x -= left;
-          node.position.y -= top;
-          node.parentId = groupNode.id;
-          node.extent = "parent";
-          node.selected = false;
-        }
-      }
-    });
-  }
-  function ungroupSelection() {
-    const groups = Object.fromEntries(
-      nodes
-        .filter((n) => n.selected && n.type === "node_group" && !n.parentId)
-        .map((n) => [n.id, n]),
-    );
-    setNodes(
-      nodes
-        .filter((n) => !groups[n.id])
-        .map((n) => {
-          const g = groups[n.parentId!];
-          if (!g) return n;
-          return {
-            ...n,
-            position: { x: n.position.x + g.position.x, y: n.position.y + g.position.y },
-            parentId: undefined,
-            extent: undefined,
-            selected: true,
-          };
-        }),
-    );
-    getYjsDoc(state).transact(() => {
-      const wnodes = state.workspace.nodes!;
-      for (const node of state.workspace.nodes!) {
-        const g = groups[node.parentId as string];
-        if (!g) continue;
-        node.position.x += g.position.x;
-        node.position.y += g.position.y;
-        node.parentId = undefined;
-        node.extent = undefined;
-      }
-      for (const groupId in groups) {
-        const groupIdx = wnodes.findIndex((n) => n.id === groupId);
-        wnodes.splice(groupIdx, 1);
-      }
-    });
-  }
-  const areMultipleNodesSelected = nodes.filter((n) => n.selected).length > 1;
-  const isAnyGroupSelected = nodes.some((n) => n.selected && n.type === "node_group");
-  return (
-    <div className="workspace">
-      <div className="top-bar bg-neutral">
-        <Link className="logo" to="/">
-          <img alt="" src={favicon} />
-        </Link>
-        <div className="ws-name">{shortPath}</div>
-        <title>{shortPath}</title>
-        <EnvironmentSelector
-          options={Object.keys(catalog.data || {})}
-          value={state.workspace.env!}
-          onChange={(env) => {
-            state.workspace.env = env;
-          }}
-        />
-        <div className="tools text-secondary">
-          {areMultipleNodesSelected && (
-            <Tooltip doc="Group selected nodes">
-              <button className="btn btn-link" onClick={groupSelection}>
-                <GroupIcon />
-              </button>
-            </Tooltip>
-          )}
-          {isAnyGroupSelected && (
-            <Tooltip doc="Ungroup selected nodes">
-              <button className="btn btn-link" onClick={ungroupSelection}>
-                <UngroupIcon />
-              </button>
-            </Tooltip>
-          )}
-          <Tooltip doc="Delete selected nodes and edges">
-            <button className="btn btn-link" onClick={deleteSelection}>
-              <Backspace />
-            </button>
-          </Tooltip>
-          <Tooltip doc={pausedUIState ? "Resume automatic execution" : "Pause automatic execution"}>
-            <button className="btn btn-link" onClick={togglePause}>
-              {pausedUIState ? <Play /> : <Pause />}
-            </button>
-          </Tooltip>
-          <Tooltip doc="Re-run the workspace">
-            <button className="btn btn-link" onClick={executeWorkspace}>
-              <Restart />
-            </button>
-          </Tooltip>
-          <Tooltip doc="Close workspace">
-            <Link
-              className="btn btn-link"
-              to={`/dir/${parentDir
-                .split("/")
-                .map((segment) => encodeURIComponent(segment))
-                .join("/")}`}
-              aria-label="close"
-            >
-              <Close />
-            </Link>
-          </Tooltip>
-        </div>
-      </div>
-      <div
-        style={{ height: "100%", width: "100vw" }}
-        onDragOver={onDragOver}
-        onDrop={onDrop}
-        ref={reactFlowContainer}
-      >
-        <LynxKiteState.Provider value={state}>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            fitView
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onPaneClick={toggleNodeSearch}
-            onConnect={onConnect}
-            proOptions={{ hideAttribution: true }}
-            maxZoom={10}
-            minZoom={0.2}
-            zoomOnScroll={false}
-            panOnScroll={true}
-            panOnDrag={false}
-            selectionOnDrag={true}
-            panOnScrollSpeed={1}
-            preventScrolling={false}
-            defaultEdgeOptions={{
-              markerEnd: {
-                type: MarkerType.ArrowClosed,
-                color: "black",
-                width: 15,
-                height: 15,
-              },
-              style: {
-                strokeWidth: 2,
-                stroke: "black",
-              },
-            }}
-            fitViewOptions={{ maxZoom: 1 }}
-          >
-            <Controls />
-            {nodeSearchSettings && (
-              <NodeSearch
-                pos={nodeSearchSettings.pos}
-                boxes={nodeSearchSettings.boxes}
-                onCancel={closeNodeSearch}
-                onAdd={addNodeFromSearch}
-              />
-            )}
-          </ReactFlow>
-        </LynxKiteState.Provider>
-        {message && (
-          <div className="workspace-message">
-            <span className="close" onClick={() => setMessage(null)}>
-              <Close />
-            </span>
-            {message}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,296 +0,0 @@
-import { useReactFlow } from "@xyflow/react";
-import { useState } from "react";
-import React from "react";
-import Markdown from "react-markdown";
-// @ts-ignore
-import Trash from "~icons/tabler/trash";
-import LynxKiteNode from "./LynxKiteNode";
-import Table from "./Table";
-
-function toMD(v: any): string {
-  if (typeof v === "string") {
-    return v;
-  }
-  if (Array.isArray(v)) {
-    return v.map(toMD).join("\n\n");
-  }
-  return JSON.stringify(v);
-}
-
-function displayTable(name: string, df: any) {
-  if (df.data.length > 1) {
-    return (
-      <Table key={`${name}-table`} name={`${name}-table`} columns={df.columns} data={df.data} />
-    );
-  }
-  if (df.data.length) {
-    return (
-      <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>
-    );
-  }
-  return JSON.stringify(df.data);
-}
-
-function relationsToDict(relations: any[]) {
-  if (!relations) {
-    return {};
-  }
-  return Object.assign({}, ...relations.map((r: any) => ({ [r.name]: r })));
-}
-
-export type UpdateOptions = { delay?: number };
-
-function NodeWithGraphCreationView(props: any) {
-  const reactFlow = useReactFlow();
-  const [open, setOpen] = useState({} as { [name: string]: boolean });
-  const display = props.data.display?.value;
-  const tables = display?.dataframes || {};
-  const singleTable = tables && Object.keys(tables).length === 1;
-  const [relations, setRelations] = useState(relationsToDict(display?.relations) || {});
-  const singleRelation = relations && Object.keys(relations).length === 1;
-  function setParam(name: string, newValue: any, opts: UpdateOptions) {
-    reactFlow.updateNodeData(props.id, {
-      params: { ...props.data.params, [name]: newValue },
-      __execution_delay: opts.delay || 0,
-    });
-  }
-
-  function updateRelation(event: any, relation: any) {
-    event.preventDefault();
-
-    const updatedRelation = {
-      ...relation,
-      ...Object.fromEntries(new FormData(event.target).entries()),
-    };
-
-    // Avoid mutating React state directly
-    const newRelations = { ...relations };
-    if (relation.name !== updatedRelation.name) {
-      delete newRelations[relation.name];
-    }
-    newRelations[updatedRelation.name] = updatedRelation;
-    setRelations(newRelations);
-    // There is some issue with how Yjs handles complex objects (maps, arrays)
-    // so we need to serialize the relations object to a string
-    setParam("relations", JSON.stringify(newRelations), {});
-  }
-
-  const addRelation = () => {
-    const new_relation = {
-      name: "new_relation",
-      df: "",
-      source_column: "",
-      target_column: "",
-      source_table: "",
-      target_table: "",
-      source_key: "",
-      target_key: "",
-    };
-    setRelations({
-      ...relations,
-      [new_relation.name]: new_relation,
-    });
-    setOpen({ ...open, [new_relation.name]: true });
-  };
-
-  const deleteRelation = (relation: any) => {
-    const newOpen = { ...open };
-    delete newOpen[relation.name];
-    setOpen(newOpen);
-    const newRelations = { ...relations };
-    delete newRelations[relation.name];
-    setRelations(newRelations);
-    // There is some issue with how Yjs handles complex objects (maps, arrays)
-    // so we need to serialize the relations object to a string
-    setParam("relations", JSON.stringify(newRelations), {});
-  };
-
-  function displayRelation(relation: any) {
-    // TODO: Dynamic autocomplete
-    return (
-      <form
-        className="graph-relation-attributes"
-        onSubmit={(e) => {
-          updateRelation(e, relation);
-        }}
-      >
-        <label htmlFor="name">Name:</label>
-        <input type="text" id="name" name="name" defaultValue={relation.name} />
-
-        <label htmlFor="df">DataFrame:</label>
-        <input
-          type="text"
-          id="df"
-          name="df"
-          defaultValue={relation.df}
-          list="df-options"
-          required
-        />
-
-        <label htmlFor="source_column">Source Column:</label>
-        <input
-          type="text"
-          id="source_column"
-          name="source_column"
-          defaultValue={relation.source_column}
-          list="edges-column-options"
-          required
-        />
-
-        <label htmlFor="target_column">Target Column:</label>
-        <input
-          type="text"
-          id="target_column"
-          name="target_column"
-          defaultValue={relation.target_column}
-          list="edges-column-options"
-          required
-        />
-
-        <label htmlFor="source_table">Source Table:</label>
-        <input
-          type="text"
-          id="source_table"
-          name="source_table"
-          defaultValue={relation.source_table}
-          list="df-options"
-          required
-        />
-
-        <label htmlFor="target_table">Target Table:</label>
-        <input
-          type="text"
-          id="target_table"
-          name="target_table"
-          defaultValue={relation.target_table}
-          list="df-options"
-          required
-        />
-
-        <label htmlFor="source_key">Source Key:</label>
-        <input
-          type="text"
-          id="source_key"
-          name="source_key"
-          defaultValue={relation.source_key}
-          list="source-node-column-options"
-          required
-        />
-
-        <label htmlFor="target_key">Target Key:</label>
-        <input
-          type="text"
-          id="target_key"
-          name="target_key"
-          defaultValue={relation.target_key}
-          list="target-node-column-options"
-          required
-        />
-
-        <datalist id="df-options">
-          {Object.keys(tables).map((name) => (
-            <option key={name} value={name} />
-          ))}
-        </datalist>
-
-        <datalist id="edges-column-options">
-          {tables[relation.source_table] &&
-            tables[relation.df].columns.map((name: string) => <option key={name} value={name} />)}
-        </datalist>
-
-        <datalist id="source-node-column-options">
-          {tables[relation.source_table] &&
-            tables[relation.source_table].columns.map((name: string) => (
-              <option key={name} value={name} />
-            ))}
-        </datalist>
-
-        <datalist id="target-node-column-options">
-          {tables[relation.source_table] &&
-            tables[relation.target_table].columns.map((name: string) => (
-              <option key={name} value={name} />
-            ))}
-        </datalist>
-
-        <button className="submit-relationship-button" type="submit">
-          Create
-        </button>
-      </form>
-    );
-  }
-
-  return (
-    <div className="graph-creation-view">
-      <div className="graph-tables">
-        <div className="graph-table-header">Node Tables</div>
-        {display && [
-          Object.entries(tables).map(([name, df]: [string, any]) => (
-            <React.Fragment key={name}>
-              {!singleTable && (
-                <div
-                  key={`${name}-header`}
-                  className="df-head"
-                  onClick={() => setOpen({ ...open, [name]: !open[name] })}
-                >
-                  {name}
-                </div>
-              )}
-              {(singleTable || open[name]) && displayTable(name, df)}
-            </React.Fragment>
-          )),
-          Object.entries(display.others || {}).map(([name, o]) => (
-            <>
-              <div
-                key={name}
-                className="df-head"
-                onClick={() => setOpen({ ...open, [name]: !open[name] })}
-              >
-                {name}
-              </div>
-              {open[name] && <pre>{(o as any).toString()}</pre>}
-            </>
-          )),
-        ]}
-      </div>
-      <div className="graph-relations">
-        <div className="graph-table-header">
-          Relationships
-          <button className="add-relationship-button" onClick={(_) => addRelation()}>
-            +
-          </button>
-        </div>
-        {relations &&
-          Object.entries(relations).map(([name, relation]: [string, any]) => (
-            <React.Fragment key={name}>
-              <div
-                key={`${name}-header`}
-                className="df-head"
-                onClick={() => setOpen({ ...open, [name]: !open[name] })}
-              >
-                {name}
-                <button
-                  onClick={() => {
-                    deleteRelation(relation);
-                  }}
-                >
-                  <Trash />
-                </button>
-              </div>
-              {(singleRelation || open[name]) && displayRelation(relation)}
-            </React.Fragment>
-          ))}
-      </div>
-    </div>
-  );
-}
-
-export default LynxKiteNode(NodeWithGraphCreationView);

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

@@ -1,64 +0,0 @@
-import { useReactFlow } from "@xyflow/react";
-import { useState } from "react";
-// @ts-ignore
-import Palette from "~icons/tabler/palette-filled.jsx";
-// @ts-ignore
-import Square from "~icons/tabler/square-filled.jsx";
-import Tooltip from "../../Tooltip.tsx";
-import { COLORS } from "../../common.ts";
-
-export default function Group(props: any) {
-  const reactFlow = useReactFlow();
-  const [displayingColorPicker, setDisplayingColorPicker] = useState(false);
-  function setColor(newValue: string) {
-    reactFlow.updateNodeData(props.id, (prevData: any) => ({
-      ...prevData,
-      params: { color: newValue },
-    }));
-    setDisplayingColorPicker(false);
-  }
-  function toggleColorPicker(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-    e.stopPropagation();
-    setDisplayingColorPicker(!displayingColorPicker);
-  }
-  const currentColor = props.data?.params?.color || "gray";
-  return (
-    <div
-      className={`node-group ${props.parentId ? "in-group" : ""}`}
-      style={{
-        width: props.width,
-        height: props.height,
-        backgroundColor: COLORS[currentColor],
-      }}
-    >
-      <button
-        className="node-group-color-picker-icon"
-        onClick={toggleColorPicker}
-        aria-label="Change group color"
-      >
-        <Tooltip doc="Change color">
-          <Palette />
-        </Tooltip>
-      </button>
-      {displayingColorPicker && <ColorPicker currentColor={currentColor} onPick={setColor} />}
-    </div>
-  );
-}
-
-function ColorPicker(props: { currentColor: string; onPick: (color: string) => void }) {
-  const colors = Object.keys(COLORS).filter((color) => color !== props.currentColor);
-  return (
-    <div className="color-picker">
-      {colors.map((color) => (
-        <button
-          key={color}
-          className="color-picker-button"
-          style={{ color: COLORS[color] }}
-          onClick={() => props.onPick(color)}
-        >
-          <Square />
-        </button>
-      ))}
-    </div>
-  );
-}

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

@@ -1,209 +0,0 @@
-import { Handle, NodeResizeControl, type Position, useReactFlow } from "@xyflow/react";
-import React from "react";
-import { ErrorBoundary } from "react-error-boundary";
-// @ts-ignore
-import AlertTriangle from "~icons/tabler/alert-triangle-filled.jsx";
-// @ts-ignore
-import ChevronDownRight from "~icons/tabler/chevron-down-right.jsx";
-// @ts-ignore
-import Dots from "~icons/tabler/dots.jsx";
-// @ts-ignore
-import Help from "~icons/tabler/question-mark.jsx";
-// @ts-ignore
-import Skull from "~icons/tabler/skull.jsx";
-import Tooltip from "../../Tooltip";
-import { COLORS } from "../../common.ts";
-
-interface LynxKiteNodeProps {
-  id: string;
-  width: number;
-  height: number;
-  nodeStyle: any;
-  data: any;
-  children: any;
-  parentId?: string;
-}
-
-function getHandles(inputs: any[], outputs: any[]) {
-  const handles: {
-    position: "top" | "bottom" | "left" | "right";
-    name: string;
-    index: number;
-    offsetPercentage: number;
-    showLabel: boolean;
-    type: "source" | "target";
-  }[] = [];
-  for (const e of inputs) {
-    handles.push({ ...e, type: "target" });
-  }
-  for (const e of outputs) {
-    handles.push({ ...e, type: "source" });
-  }
-  const counts = { top: 0, bottom: 0, left: 0, right: 0 };
-  for (const e of handles) {
-    e.index = counts[e.position];
-    counts[e.position]++;
-  }
-  const simpleHorizontal =
-    counts.top === 0 && counts.bottom === 0 && counts.left <= 1 && counts.right <= 1;
-  const simpleVertical =
-    counts.left === 0 && counts.right === 0 && counts.top <= 1 && counts.bottom <= 1;
-  for (const e of handles) {
-    e.offsetPercentage = (100 * (e.index + 1)) / (counts[e.position] + 1);
-    e.showLabel = !simpleHorizontal && !simpleVertical;
-  }
-  return handles;
-}
-
-function canScrollX(element: HTMLElement) {
-  const style = getComputedStyle(element);
-  return style.overflowX === "auto" || style.overflow === "auto";
-}
-function canScrollY(element: HTMLElement) {
-  const style = getComputedStyle(element);
-  return style.overflowY === "auto" || style.overflow === "auto";
-}
-function canScrollUp(e: HTMLElement) {
-  return canScrollY(e) && e.scrollTop > 0;
-}
-function canScrollDown(e: HTMLElement) {
-  return canScrollY(e) && e.scrollTop < e.scrollHeight - e.clientHeight - 1;
-}
-function canScrollLeft(e: HTMLElement) {
-  return canScrollX(e) && e.scrollLeft > 0;
-}
-function canScrollRight(e: HTMLElement) {
-  return canScrollX(e) && e.scrollLeft < e.scrollWidth - e.clientWidth - 1;
-}
-
-function onWheel(e: WheelEvent) {
-  if (e.ctrlKey) return; // Zoom, not scroll.
-  let t = e.target as HTMLElement;
-  // If we find an element inside the node container that can apply this scroll event, we stop propagation.
-  // Otherwise ReactFlow can have it and pan the workspace.
-  while (t && !t.classList.contains("node-container")) {
-    if (
-      (e.deltaX < 0 && canScrollLeft(t)) ||
-      (e.deltaX > 0 && canScrollRight(t)) ||
-      (e.deltaY < 0 && canScrollUp(t)) ||
-      (e.deltaY > 0 && canScrollDown(t))
-    ) {
-      e.stopPropagation();
-      return;
-    }
-    t = t.parentElement as HTMLElement;
-  }
-}
-
-function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
-  const reactFlow = useReactFlow();
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const data = props.data;
-  const expanded = !data.collapsed;
-  const handles = getHandles(data.meta?.value?.inputs || [], data.meta?.value?.outputs || []);
-  React.useEffect(() => {
-    // ReactFlow handles wheel events to zoom/pan and this would prevent scrolling inside the node.
-    // To stop the event from reaching ReactFlow, we stop propagation on the wheel event.
-    // This must be done with a "passive: false" listener, which we can only register like this.
-    containerRef.current?.addEventListener("wheel", onWheel, {
-      passive: false,
-    });
-    return () => {
-      containerRef.current?.removeEventListener("wheel", onWheel);
-    };
-  }, [containerRef]);
-  function titleClicked() {
-    reactFlow.updateNodeData(props.id, { collapsed: expanded });
-  }
-  const handleOffsetDirection = {
-    top: "left",
-    bottom: "left",
-    left: "top",
-    right: "top",
-  };
-  const titleStyle: { backgroundColor?: string } = {};
-  if (data.meta?.value?.color) {
-    titleStyle.backgroundColor = COLORS[data.meta.value.color] || data.meta.value.color;
-  }
-  return (
-    <div
-      className={`node-container ${expanded ? "expanded" : "collapsed"} ${props.parentId ? "in-group" : ""}`}
-      style={{
-        width: props.width || 200,
-        height: expanded ? props.height || 200 : undefined,
-      }}
-      ref={containerRef}
-    >
-      <div className="lynxkite-node" style={props.nodeStyle}>
-        <div
-          className={`title bg-primary drag-handle ${data.status}`}
-          style={titleStyle}
-          onClick={titleClicked}
-        >
-          <span className="title-title">{data.title}</span>
-          {data.error && (
-            <Tooltip doc={`Error: ${data.error}`}>
-              <AlertTriangle />
-            </Tooltip>
-          )}
-          {expanded || (
-            <Tooltip doc="Click to expand node">
-              <Dots />
-            </Tooltip>
-          )}
-          <Tooltip doc={data.meta?.value?.doc}>
-            <Help />
-          </Tooltip>
-        </div>
-        {expanded && (
-          <>
-            {data.error && <div className="error">{data.error}</div>}
-            <ErrorBoundary
-              resetKeys={[props]}
-              fallback={
-                <p className="error" style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <Skull style={{ fontSize: 20 }} />
-                  Failed to display this node.
-                </p>
-              }
-            >
-              <div className="node-content">{props.children}</div>
-            </ErrorBoundary>
-            <NodeResizeControl
-              minWidth={100}
-              minHeight={50}
-              style={{ background: "transparent", border: "none" }}
-            >
-              <ChevronDownRight className="node-resizer" />
-            </NodeResizeControl>
-          </>
-        )}
-        {handles.map((handle) => (
-          <Handle
-            key={`${handle.name} on ${handle.position}`}
-            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>
-  );
-}
-
-export default function LynxKiteNode(Component: React.ComponentType<any>) {
-  return (props: any) => {
-    return (
-      <LynxKiteNodeComponent {...props}>
-        <Component {...props} />
-      </LynxKiteNodeComponent>
-    );
-  };
-}

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

@@ -1,169 +0,0 @@
-import { useRef } from "react";
-// @ts-ignore
-import ArrowsHorizontal from "~icons/tabler/arrows-horizontal.jsx";
-// @ts-ignore
-import Help from "~icons/tabler/question-mark.jsx";
-import ParameterInput from "./ParameterInput";
-
-type Bindings = {
-  [key: string]: {
-    df: string;
-    column: string;
-  };
-};
-
-type NamedId = {
-  name: string;
-  id: string;
-};
-
-function getModelBindings(
-  data: any,
-  variant: "training input" | "inference input" | "output",
-): NamedId[] {
-  function bindingsOfModel(m: any): string[] {
-    switch (variant) {
-      case "training input":
-        return [
-          ...m.model_inputs,
-          ...m.loss_inputs.filter((i: string) => !m.model_outputs.includes(i)),
-        ];
-      case "inference input":
-        return m.model_inputs;
-      case "output":
-        return m.model_outputs;
-    }
-  }
-  const bindings = new Set<NamedId>();
-  const inputs = data?.input_metadata?.value ?? data?.input_metadata ?? [];
-  for (const input of inputs) {
-    const other = input.other ?? {};
-    for (const e of Object.values(other) as any[]) {
-      if (e.type === "model") {
-        for (const id of bindingsOfModel(e.model)) {
-          bindings.add({ id, name: e.model.input_output_names[id] ?? id });
-        }
-      }
-    }
-  }
-  const list = [...bindings];
-  list.sort((a, b) => {
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  });
-  return list;
-}
-
-function parseJsonOrEmpty(json: string): object {
-  try {
-    const j = JSON.parse(json);
-    if (j !== null && typeof j === "object") {
-      return j;
-    }
-  } catch (e) {}
-  return {};
-}
-
-export default function ModelMapping({ value, onChange, data, variant }: any) {
-  const dfsRef = useRef({} as { [binding: string]: HTMLSelectElement | null });
-  const columnsRef = useRef(
-    {} as { [binding: string]: HTMLSelectElement | HTMLInputElement | null },
-  );
-  const v: any = parseJsonOrEmpty(value);
-  v.map ??= {};
-  const dfs: { [df: string]: string[] } = {};
-  const inputs = data?.input_metadata?.value ?? data?.input_metadata ?? [];
-  for (const input of inputs) {
-    if (!input.dataframes) continue;
-    const dataframes = input.dataframes as {
-      [df: string]: { columns: string[] };
-    };
-    for (const [df, { columns }] of Object.entries(dataframes)) {
-      dfs[df] = columns;
-    }
-  }
-  const bindings = getModelBindings(data, variant);
-  function getMap() {
-    const map: Bindings = {};
-    for (const binding of bindings) {
-      const df = dfsRef.current[binding.id]?.value ?? "";
-      const column = columnsRef.current[binding.id]?.value ?? "";
-      if (df.length || column.length) {
-        map[binding.id] = { df, column };
-      }
-    }
-    return map;
-  }
-  return (
-    <table className="model-mapping-param">
-      <tbody>
-        {bindings.length > 0 ? (
-          bindings.map((binding: NamedId) => (
-            <tr key={binding.id}>
-              <td>{binding.name}</td>
-              <td>
-                <ArrowsHorizontal />
-              </td>
-              <td>
-                <select
-                  className="select select-ghost"
-                  value={v.map?.[binding.id]?.df}
-                  ref={(el) => {
-                    dfsRef.current[binding.id] = el;
-                  }}
-                  onChange={() => onChange(JSON.stringify({ map: getMap() }))}
-                >
-                  <option key="" value="" />
-                  {Object.keys(dfs).map((df: string) => (
-                    <option key={df} value={df}>
-                      {df}
-                    </option>
-                  ))}
-                </select>
-              </td>
-              <td>
-                {variant === "output" ? (
-                  <ParameterInput
-                    inputRef={(el) => {
-                      columnsRef.current[binding.id] = el;
-                    }}
-                    value={v.map?.[binding.id]?.column}
-                    onChange={(column, options) => {
-                      const map = getMap();
-                      // At this point the <input> has not been updated yet. We use the value from the event.
-                      const df = dfsRef.current[binding.id]?.value ?? "";
-                      map[binding.id] ??= { df, column };
-                      map[binding.id].column = column;
-                      onChange(JSON.stringify({ map }), options);
-                    }}
-                  />
-                ) : (
-                  <select
-                    className="select select-ghost"
-                    value={v.map?.[binding.id]?.column}
-                    ref={(el) => {
-                      columnsRef.current[binding.id] = el;
-                    }}
-                    onChange={() => onChange(JSON.stringify({ map: getMap() }))}
-                  >
-                    <option key="" value="" />
-                    {dfs[v.map?.[binding.id]?.df]?.map((col: string) => (
-                      <option key={col} value={col}>
-                        {col}
-                      </option>
-                    ))}
-                  </select>
-                )}
-              </td>
-            </tr>
-          ))
-        ) : (
-          <tr>
-            <td>no bindings</td>
-          </tr>
-        )}
-      </tbody>
-    </table>
-  );
-}

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

@@ -1,48 +0,0 @@
-import NodeParameter, { type UpdateOptions } from "./NodeParameter";
-
-interface SelectorType {
-  name: string;
-  default: string;
-  type: {
-    enum: string[];
-  };
-}
-
-interface ParameterType {
-  name: string;
-  default: string;
-  type: {
-    type: string;
-  };
-}
-
-interface GroupsType {
-  [key: string]: ParameterType[];
-}
-
-interface NodeGroupParameterProps {
-  meta: { selector: SelectorType; groups: GroupsType };
-  data: any;
-  setParam: (name: string, value: any, options: UpdateOptions) => void;
-}
-
-export default function NodeGroupParameter({ meta, data, setParam }: NodeGroupParameterProps) {
-  const selector = meta.selector;
-  const selectorValue = data.params[selector.name] || selector.default;
-  const group = meta.groups[selectorValue] || [];
-
-  return (
-    <>
-      {group.map((meta: any) => (
-        <NodeParameter
-          name={meta.name}
-          key={meta.name}
-          value={data.params[meta.name] ?? meta.default}
-          data={data}
-          meta={meta}
-          setParam={setParam}
-        />
-      ))}
-    </>
-  );
-}

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

@@ -1,147 +0,0 @@
-import jmespath from "jmespath";
-// @ts-ignore
-import ArrowsHorizontal from "~icons/tabler/arrows-horizontal.jsx";
-// @ts-ignore
-import Help from "~icons/tabler/question-mark.jsx";
-import Tooltip from "../../Tooltip";
-import ModelMapping from "./ModelMappingParameter";
-import NodeGroupParameter from "./NodeGroupParameter";
-import ParameterInput from "./ParameterInput";
-
-const BOOLEAN = "<class 'bool'>";
-const MODEL_TRAINING_INPUT_MAPPING =
-  "<class 'lynxkite_graph_analytics.ml_ops.ModelTrainingInputMapping'>";
-const MODEL_INFERENCE_INPUT_MAPPING =
-  "<class 'lynxkite_graph_analytics.ml_ops.ModelInferenceInputMapping'>";
-const MODEL_OUTPUT_MAPPING = "<class 'lynxkite_graph_analytics.ml_ops.ModelOutputMapping'>";
-
-function ParamName({ name, doc }: { name: string; doc: string }) {
-  const help = doc && (
-    <Tooltip doc={doc} width={200}>
-      <Help />
-    </Tooltip>
-  );
-  return (
-    <div className="param-name-row">
-      <span className="param-name bg-base-200">{name.replace(/_/g, " ")}</span>
-      {help}
-    </div>
-  );
-}
-
-interface NodeParameterProps {
-  name: string;
-  value: any;
-  meta: any;
-  data: any;
-  setParam: (name: string, value: any, options: UpdateOptions) => void;
-}
-
-export type UpdateOptions = { delay?: number };
-
-function findDocs(docs: any, parameter: string) {
-  for (const sec of docs) {
-    if (sec.kind === "parameters") {
-      for (const p of sec.value) {
-        if (p.name === parameter) {
-          return p.description;
-        }
-      }
-    }
-  }
-}
-
-export default function NodeParameter({ name, value, meta, data, setParam }: NodeParameterProps) {
-  const doc = findDocs(data.meta?.value?.doc ?? [], name);
-  function onChange(value: any, opts?: UpdateOptions) {
-    setParam(meta.name, value, opts || {});
-  }
-  return meta?.type?.format === "textarea" ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <textarea
-        className="textarea textarea-bordered w-full"
-        rows={(value ?? "").split("\n").length}
-        value={value ?? ""}
-        onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
-        onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
-      />
-    </label>
-  ) : meta?.type?.format === "dropdown" ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <select
-        className="select select-bordered w-full"
-        value={value ?? ""}
-        onChange={(evt) => onChange(evt.currentTarget.value)}
-      >
-        {getDropDownValues(data, meta).map((option: string) => (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        ))}
-      </select>
-    </label>
-  ) : meta?.type === "group" ? (
-    <NodeGroupParameter meta={meta} data={data} setParam={setParam} />
-  ) : meta?.type?.enum ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <select
-        className="select select-bordered w-full"
-        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>
-    </label>
-  ) : meta?.type?.type === BOOLEAN ? (
-    <div className="form-control">
-      <label className="label cursor-pointer">
-        {name.replace(/_/g, " ")}
-        <input
-          className="checkbox"
-          type="checkbox"
-          checked={value}
-          onChange={(evt) => onChange(evt.currentTarget.checked)}
-        />
-      </label>
-    </div>
-  ) : meta?.type?.type === MODEL_TRAINING_INPUT_MAPPING ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <ModelMapping value={value} data={data} variant="training input" onChange={onChange} />
-    </label>
-  ) : meta?.type?.type === MODEL_INFERENCE_INPUT_MAPPING ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <ModelMapping value={value} data={data} variant="inference input" onChange={onChange} />
-    </label>
-  ) : meta?.type?.type === MODEL_OUTPUT_MAPPING ? (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <ModelMapping value={value} data={data} variant="output" onChange={onChange} />
-    </label>
-  ) : (
-    <label className="param">
-      <ParamName name={name} doc={doc} />
-      <ParameterInput value={value} onChange={onChange} />
-    </label>
-  );
-}
-
-function getDropDownValues(data: any, meta: any): string[] {
-  const metadata = data.input_metadata.value;
-  let query = meta.type.metadata_query;
-  // Substitute parameters in the query.
-  for (const p in data.params) {
-    query = query.replace(`<${p}>`, data.params[p]);
-  }
-  const res = ["", ...jmespath.search(metadata, query)];
-  res.sort();
-  return res;
-}

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

@@ -1,58 +0,0 @@
-import { useReactFlow } from "@xyflow/react";
-import { useState } from "react";
-import Markdown from "react-markdown";
-import type { UpdateOptions } from "./NodeParameter";
-
-export default function NodeWithComment(props: any) {
-  const reactFlow = useReactFlow();
-  const [editing, setEditing] = useState(false);
-  function setComment(newValue: string, opts?: UpdateOptions) {
-    reactFlow.updateNodeData(props.id, (prevData: any) => ({
-      ...prevData,
-      params: { text: newValue },
-      __execution_delay: opts?.delay || 0,
-    }));
-  }
-  function onClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
-    // Start editing on double-click.
-    if (e.detail === 2) {
-      setEditing(true);
-    }
-  }
-  function finishEditing(el: HTMLTextAreaElement) {
-    setComment(el.value);
-    setEditing(false);
-  }
-  function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === "Escape") {
-      finishEditing(e.currentTarget);
-    }
-  }
-  function onInput(el: HTMLTextAreaElement | null) {
-    if (!el) return;
-    el.focus();
-    // Resize the textarea to the content.
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }
-  if (editing) {
-    return (
-      <textarea
-        className="comment-editor"
-        onBlur={(e) => finishEditing(e.currentTarget)}
-        onKeyDown={onKeyDown}
-        onInput={(e) => onInput(e.currentTarget)}
-        ref={(el) => onInput(el)}
-        defaultValue={props.data.params.text}
-        onClick={(e) => e.stopPropagation()}
-        placeholder="Enter workspace comment"
-      />
-    );
-  }
-  const text = props.data.params.text || "_double-click to edit_";
-  return (
-    <div className="comment-view drag-handle prose" onClick={onClick}>
-      <Markdown>{text}</Markdown>
-    </div>
-  );
-}

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

@@ -1,12 +0,0 @@
-import LynxKiteNode from "./LynxKiteNode";
-import { NodeWithParams } from "./NodeWithParams";
-
-const NodeWithImage = (props: any) => {
-  return (
-    <NodeWithParams collapsed {...props}>
-      {props.data.display && <img src={props.data.display} alt="Node Display" />}
-    </NodeWithParams>
-  );
-};
-
-export default LynxKiteNode(NodeWithImage);

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

@@ -1,68 +0,0 @@
-import React, { useEffect, type CSSProperties } from "react";
-import LynxKiteNode from "./LynxKiteNode";
-import { NodeWithParams } from "./NodeWithParams";
-
-const NodeWithMolecule = (props: any) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const viewerRef = React.useRef<any>(null);
-
-  useEffect(() => {
-    const config = props.data?.display?.value;
-    if (!config || !containerRef.current) return;
-    async function run() {
-      const $3Dmol = await import("3dmol");
-
-      try {
-        // Initialize viewer only once
-        if (!viewerRef.current) {
-          viewerRef.current = $3Dmol.createViewer(containerRef.current, {
-            backgroundColor: "white",
-          });
-        }
-
-        const viewer = viewerRef.current;
-
-        // Clear previous models
-        viewer.clear();
-
-        // Add new model and style it
-        viewer.addModel(config.data, config.format);
-        viewer.setStyle({}, { stick: {} });
-        viewer.zoomTo();
-        viewer.render();
-      } catch (error) {
-        console.error("Error rendering 3D molecule:", error);
-      }
-    }
-    run();
-    const resizeObserver = new ResizeObserver(() => {
-      viewerRef.current?.resize();
-    });
-
-    const observed = containerRef.current;
-    resizeObserver.observe(observed);
-    return () => {
-      resizeObserver.unobserve(observed);
-      if (viewerRef.current) {
-        viewerRef.current.clear();
-      }
-    };
-  }, [props.data?.display?.value]);
-
-  const vizStyle: CSSProperties = {
-    flex: 1,
-    minHeight: "300px",
-    border: "1px solid #ddd",
-    borderRadius: "4px",
-    overflow: "hidden",
-    position: "relative",
-  };
-
-  return (
-    <NodeWithParams collapsed {...props}>
-      <div style={vizStyle} ref={containerRef} />
-    </NodeWithParams>
-  );
-};
-
-export default LynxKiteNode(NodeWithMolecule);

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

@@ -1,44 +0,0 @@
-import { useReactFlow } from "@xyflow/react";
-import React from "react";
-// @ts-ignore
-import Triangle from "~icons/tabler/triangle-inverted-filled.jsx";
-import LynxKiteNode from "./LynxKiteNode";
-import NodeParameter, { type UpdateOptions } from "./NodeParameter";
-
-export function NodeWithParams(props: any) {
-  const reactFlow = useReactFlow();
-  const metaParams = props.data.meta?.value?.params ?? [];
-  const [collapsed, setCollapsed] = React.useState(props.collapsed);
-
-  function setParam(name: string, newValue: any, opts: UpdateOptions) {
-    reactFlow.updateNodeData(props.id, (prevData: any) => ({
-      ...prevData,
-      params: { ...prevData.data.params, [name]: newValue },
-      __execution_delay: opts.delay || 0,
-    }));
-  }
-
-  return (
-    <>
-      {props.collapsed && metaParams.length > 0 && (
-        <div className="params-expander" onClick={() => setCollapsed(!collapsed)}>
-          <Triangle className={`flippy ${collapsed ? "flippy-90" : ""}`} />
-        </div>
-      )}
-      {!collapsed &&
-        metaParams.map((meta: any) => (
-          <NodeParameter
-            name={meta.name}
-            key={meta.name}
-            value={props.data.params[meta.name]}
-            data={props.data}
-            meta={meta}
-            setParam={setParam}
-          />
-        ))}
-      {props.children}
-    </>
-  );
-}
-
-export default LynxKiteNode(NodeWithParams);

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

@@ -1,82 +0,0 @@
-import { useReactFlow } from "@xyflow/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") {
-    return v;
-  }
-  if (Array.isArray(v)) {
-    return v.map(toMD).join("\n\n");
-  }
-  return JSON.stringify(v);
-}
-
-type OpenState = { [name: string]: boolean };
-
-function NodeWithTableView(props: any) {
-  const reactFlow = useReactFlow();
-  const [open, setOpen] = useState((props.data?.params?._tables_open ?? {}) as OpenState);
-  const display = props.data.display?.value;
-  const single = display?.dataframes && Object.keys(display?.dataframes).length === 1;
-  const dfs = Object.entries(display?.dataframes || {});
-  dfs.sort();
-  function setParam(name: string, newValue: any) {
-    reactFlow.updateNodeData(props.id, (prevData: any) => ({
-      ...prevData,
-      params: { ...prevData.data.params, [name]: newValue },
-    }));
-  }
-  function toggleTable(name: string) {
-    setOpen((prevOpen: OpenState) => {
-      const newOpen = { ...prevOpen, [name]: !prevOpen[name] };
-      setParam("_tables_open", newOpen);
-      return newOpen;
-    });
-  }
-  return (
-    <>
-      {display && [
-        dfs.map(([name, df]: [string, any]) => (
-          <React.Fragment key={name}>
-            {!single && (
-              <div key={`${name}-header`} className="df-head" onClick={() => toggleTable(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}`}>
-                      {df.columns.length > 1 && <dt>{c}</dt>}
-                      <dd className="prose">
-                        <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={() => toggleTable(name)}>
-              {name}
-            </div>
-            {open[name] && <pre>{(o as any).toString()}</pre>}
-          </>
-        )),
-      ]}
-    </>
-  );
-}
-
-export default LynxKiteNode(NodeWithTableView);

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

@@ -1,43 +0,0 @@
-import React, { useEffect } from "react";
-import LynxKiteNode from "./LynxKiteNode";
-import { NodeWithParams } from "./NodeWithParams";
-const echarts = await import("echarts");
-
-function NodeWithVisualization(props: any) {
-  const chartsRef = React.useRef<HTMLDivElement>(null);
-  const chartsInstanceRef = React.useRef<echarts.ECharts>();
-  useEffect(() => {
-    const opts = props.data?.display?.value;
-    if (!opts || !chartsRef.current) return;
-    if (opts.tooltip?.formatter === "GET_THIRD_VALUE") {
-      // We can't pass a function from the backend, and can't get good tooltips otherwise.
-      opts.tooltip.formatter = (params: any) => params.value[2];
-    }
-    chartsInstanceRef.current = echarts.init(chartsRef.current, null, {
-      renderer: "canvas",
-      width: "auto",
-      height: "auto",
-    });
-    chartsInstanceRef.current.setOption(opts);
-    const resizeObserver = new ResizeObserver(() => {
-      const e = chartsRef.current;
-      if (!e) return;
-      e.style.padding = "1px";
-      chartsInstanceRef.current?.resize();
-      e.style.padding = "0";
-    });
-    const observed = chartsRef.current;
-    resizeObserver.observe(observed);
-    return () => {
-      resizeObserver.unobserve(observed);
-      chartsInstanceRef.current?.dispose();
-    };
-  }, [props.data?.display?.value]);
-  return (
-    <NodeWithParams collapsed {...props}>
-      <div style={{ flex: 1 }} ref={chartsRef} />
-    </NodeWithParams>
-  );
-}
-
-export default LynxKiteNode(NodeWithVisualization);