-
- );
-}
diff --git a/lynxkite-app/web/src/Directory.tsx b/lynxkite-app/web/src/Directory.tsx
deleted file mode 100644
index 90f7d4963284f1b8136d5b2470397f9873222afc..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/Directory.tsx
+++ /dev/null
@@ -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 ? (
-
- ) : (
-
- )}
-
- );
-}
-
-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 (
-
-
- 
-
- {path}
-
- {path}
-
-
-
- encodeURIComponent(segment))
- .join("/")}`}
- className="btn btn-link"
- >
-
-
-
- );
-}
diff --git a/lynxkite-app/web/src/Tooltip.tsx b/lynxkite-app/web/src/Tooltip.tsx
deleted file mode 100644
index 07fbbdaac782f0761a2876f8890dca9028308aa6..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/Tooltip.tsx
+++ /dev/null
@@ -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 (
- <>
-
- {props.children}
-
-
-
- 
-
-
- The Complete Graph Data Science Platform
-
- {list.error && LynxKite 2000:MM
- )}
-
- {list.data.map(
- (item: DirectoryEntry) =>
- !shortName(item)?.startsWith("__") && (
-
{" "}
- {list.error.message}
} - {list.isLoading && ( - - )} - - {list.data && ( - <> -
- {
- newWorkspaceIn(path || "", name);
- }}
- icon={ {
- newCodeFile(path || "", name);
- }}
- icon={ {
- newFolderIn(path || "", name);
- }}
- icon={
-
- {path ? (
-
-
- {path}
-
- ) : (
-
-
- {item.type === "directory" ? (
-
- ),
- )}
-
- )}
-
-
- );
-}
-
-const router = createBrowserRouter(
- createRoutesFromElements(
- <>
-
-
-
-
- Something went wrong...
-{stack || "Unknown error."}
-
-
- Close workspace
-
-
-
- typed(event.target.value)}
- onKeyDown={onKeyDown}
- onBlur={lostFocus}
- placeholder="Search for box"
- />
-
- );
-}
diff --git a/lynxkite-app/web/src/workspace/Workspace.tsx b/lynxkite-app/web/src/workspace/Workspace.tsx
deleted file mode 100644
index 69359f3ac9e49b7ce7feb6065a661c7f8e2775c6..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/workspace/Workspace.tsx
+++ /dev/null
@@ -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 (
-
- {hits.map((box, index) => (
-
- setSelectedIndex(index)}
- onMouseEnter={() => setSelectedIndex(index)}
- onClick={addSelected}
- className={`search-result ${index === selectedIndex ? "selected" : ""}`}
- >
- {box.item.categories.map((category) => `${category}\u00A0›\u00A0`)}
- {box.item.name}
-
- ))}
-
-
- );
-}
diff --git a/lynxkite-app/web/src/workspace/nodes/GraphCreationNode.tsx b/lynxkite-app/web/src/workspace/nodes/GraphCreationNode.tsx
deleted file mode 100644
index 7c7dc65bb576618fd0cbc81dc7d9a5762085b4c2..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/workspace/nodes/GraphCreationNode.tsx
+++ /dev/null
@@ -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 (
-
-
-
-
- {shortPath}
- {
- state.workspace.env = env;
- }}
- />
-
- {shortPath}
-
- {areMultipleNodesSelected && (
-
-
-
- )}
- {isAnyGroupSelected && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- encodeURIComponent(segment))
- .join("/")}`}
- aria-label="close"
- >
-
-
-
-
-
-
-
- {message && (
-
-
- setMessage(null)}>
-
- )}
- -
- {df.columns.map((c: string, i: number) => (
-
- {c} -
-
-
{toMD(df.data[0][i])} -
-
-
- );
-}
-
-export default LynxKiteNode(NodeWithGraphCreationView);
diff --git a/lynxkite-app/web/src/workspace/nodes/Group.tsx b/lynxkite-app/web/src/workspace/nodes/Group.tsx
deleted file mode 100644
index 092c760c344ba61617b1abcfc57e78fae76d3b17..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/workspace/nodes/Group.tsx
+++ /dev/null
@@ -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
-
- {!singleTable && (
-
- )),
- Object.entries(display.others || {}).map(([name, o]) => (
- <>
-
- Node Tables
- {display && [
- Object.entries(tables).map(([name, df]: [string, any]) => (
- setOpen({ ...open, [name]: !open[name] })}
- >
- {name}
-
- )}
- {(singleTable || open[name]) && displayTable(name, df)}
- setOpen({ ...open, [name]: !open[name] })}
- >
- {name}
-
- {open[name] && {(o as any).toString()}}
-
- )),
- ]}
-
-
-
- ))}
-
-
- Relationships
-
-
- {relations &&
- Object.entries(relations).map(([name, relation]: [string, any]) => (
- setOpen({ ...open, [name]: !open[name] })}
- >
- {name}
-
-
- {(singleRelation || open[name]) && displayRelation(relation)}
-
-
- {displayingColorPicker &&
- );
-}
-
-function ColorPicker(props: { currentColor: string; onPick: (color: string) => void }) {
- const colors = Object.keys(COLORS).filter((color) => color !== props.currentColor);
- return (
-
- {colors.map((color) => (
-
- ))}
-
- );
-}
diff --git a/lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx b/lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx
deleted file mode 100644
index a11daf832a60c64d49ca27fd8b18b8e925733edd..0000000000000000000000000000000000000000
--- a/lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx
+++ /dev/null
@@ -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
-
- );
-}
-
-export default function LynxKiteNode(Component: React.ComponentType
-
-
-
-
-
- )}
- {handles.map((handle) => (
-
- {handle.showLabel && (
- {handle.name.replace(/_/g, " ")}
- )}
-
- ))}
-
-
- {data.title}
- {data.error && (
-
-
- )}
- {expanded || (
-
-
- )}
-
-
-
- {expanded && (
- <>
- {data.error && {data.error}
}
- {props.children}
- | {binding.name} | -
- |
- - - | -
- {variant === "output" ? (
- |
-
| no bindings | -
- {name.replace(/_/g, " ")}
- {help}
-
- );
-}
-
-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" ? (
-