Missed these files. Workspace in React.

web/app/workspace/LynxKiteState.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const LynxKiteState = createContext({ workspace: {} as any });

web/app/workspace/Workspace.tsx

@@ -0,0 +1,94 @@
+'use client';
+import useSWR from 'swr';
+import { useMemo } from "react";
+import { useSearchParams } from 'next/navigation';
+import {
+  ReactFlow,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  MiniMap,
+  MarkerType,
+  useReactFlow,
+  type XYPosition,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeTypes,
+} from '@xyflow/react';
+// @ts-ignore
+import ArrowBack from '~icons/tabler/arrow-back.jsx';
+// @ts-ignore
+import Backspace from '~icons/tabler/backspace.jsx';
+// @ts-ignore
+import Atom from '~icons/tabler/atom.jsx';
+import { syncedStore, getYjsDoc } from "@syncedstore/core";
+import { useSyncedStore } from "@syncedstore/react";
+import { WebsocketProvider } from "y-websocket";
+import NodeWithParams from './nodes/NodeWithParams';
+// import NodeWithVisualization from './NodeWithVisualization';
+// import NodeWithImage from './NodeWithImage';
+// import NodeWithTableView from './NodeWithTableView';
+// import NodeWithSubFlow from './NodeWithSubFlow';
+// import NodeWithArea from './NodeWithArea';
+// import NodeSearch from './NodeSearch';
+import EnvironmentSelector from './EnvironmentSelector';
+import { LynxKiteState } from './LynxKiteState';
+import '@xyflow/react/dist/style.css';
+
+export default function Workspace() {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const searchParams = useSearchParams();
+
+  let path = searchParams.get('path');
+  const sstore = syncedStore({ workspace: {} });
+  const doc = getYjsDoc(sstore);
+  const wsProvider = new WebsocketProvider("ws://localhost:8000/ws/crdt", path, doc);
+  const state = useSyncedStore(sstore);
+
+  const fetcher = (resource: string, init?: RequestInit) => fetch(resource, init).then(res => res.json());
+  const catalog = useSWR('/api/catalog', fetcher);
+
+  const nodeTypes = useMemo(() => ({
+    basic: NodeWithParams,
+    table_view: NodeWithParams,
+  }), []);
+  return (
+    <div className="workspace">
+      <div className="top-bar bg-neutral">
+        <a className="logo" href=""><img src="/favicon.ico" /></a>
+        <div className="ws-name">
+          {path}
+        </div>
+        <EnvironmentSelector
+          options={Object.keys(catalog.data || {})}
+          value={state.workspace?.env}
+          onChange={(env) => state.workspace.env = env}
+        />
+        <div className="tools text-secondary">
+          <a href=""><Atom /></a>
+          <a href=""><Backspace /></a>
+          <a href="#dir?path={parentDir}"><ArrowBack /></a>
+        </div>
+      </div>
+      <div style={{ height: "100%", width: '100vw' }}>
+        <LynxKiteState.Provider value={state}>
+          <ReactFlow nodes={state.workspace?.nodes} edges={state.workspace?.edges} nodeTypes={nodeTypes} fitView
+            proOptions={{ hideAttribution: true }}
+            maxZoom={3}
+            minZoom={0.3}
+            defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
+          >
+            <Controls />
+            <MiniMap />
+            {/* {#if nodeSearchSettings}
+          <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} on:cancel={closeNodeSearch} on:add={addNode} />
+          {/if} */}
+          </ReactFlow>
+        </LynxKiteState.Provider>
+      </div>
+    </div>
+
+  );
+}

web/app/workspace/nodes/LynxKiteNode.tsx

@@ -0,0 +1,90 @@
+import { useContext } from 'react';
+import { LynxKiteState } from '../LynxKiteState';
+import { Handle, NodeResizeControl } from '@xyflow/react';
+// @ts-ignore
+import ChevronDownRight from '~icons/tabler/chevron-down-right.jsx';
+
+interface LynxKiteNodeProps {
+  width: number;
+  height: number;
+  nodeStyle: any;
+  data: any;
+  children: any;
+}
+
+function getHandles(inputs, outputs) {
+  const handles: {
+    position: 'top' | 'bottom' | 'left' | 'right',
+    name: string,
+    index: number,
+    offsetPercentage: number,
+    showLabel: boolean,
+  }[] = [];
+  for (const e of Object.values(inputs)) {
+    handles.push({ ...e, type: 'target' });
+  }
+  for (const e of Object.values(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]++;
+  }
+  for (const e of handles) {
+    e.offsetPercentage = 100 * (e.index + 1) / (counts[e.position] + 1);
+    const simpleHorizontal = counts.top === 0 && counts.bottom === 0 && handles.length <= 2;
+    const simpleVertical = counts.left === 0 && counts.right === 0 && handles.length <= 2;
+    e.showLabel = !simpleHorizontal && !simpleVertical;
+  }
+  return handles;
+}
+
+export default function LynxKiteNode(props: LynxKiteNodeProps) {
+  const data = props.data;
+  const state = useContext(LynxKiteState);
+  const expanded = true;
+  const handles = getHandles(data.meta?.inputs || {}, data.meta?.outputs || {});
+  function asPx(n: number | undefined) {
+    return (n ? n + 'px' : undefined) || '200px';
+  }
+  function titleClicked() { }
+  function updateNodeData() { }
+  const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
+
+  return (
+    <div className={'node-container ' + (expanded ? 'expanded' : 'collapsed')}
+      style={{ width: asPx(props.width), height: asPx(expanded ? props.height : undefined) }}>
+      <div className="lynxkite-node" style={props.nodeStyle}>
+        <div className="title bg-primary" onClick={titleClicked}>
+          {data.title}
+          {data.error && <span className="title-icon">⚠️</span>}
+          {expanded || <span className="title-icon">⋯</span>}
+        </div>
+        {expanded && <>
+          {data.error &&
+            <div className="error">{data.error}</div>
+          }
+          {props.children}
+          {handles.map(handle => (
+            <Handle
+              key={handle.name}
+              id={handle.name} type={handle.type} position={handle.position}
+              style={{ [handleOffsetDirection[handle.position]]: handle.offsetPercentage + '%' }}>
+              {handle.showLabel && <span className="handle-name">{handle.name.replace(/_/g, " ")}</span>}
+            </Handle>
+          ))}
+          <NodeResizeControl
+            minWidth={100}
+            minHeight={50}
+            style={{ 'background': 'transparent', 'border': 'none' }}
+            onResizeStart={() => updateNodeData(id, { beingResized: true })}
+            onResizeEnd={() => updateNodeData(id, { beingResized: false })}
+          >
+            <ChevronDownRight className="node-resizer" />
+          </NodeResizeControl>
+        </>}
+      </div>
+    </div>
+  );
+}

web/app/workspace/nodes/NodeParameter.tsx

@@ -0,0 +1,51 @@
+const BOOLEAN = "<class 'bool'>";
+
+function ParamName({ name }) {
+  return <span className="param-name bg-base-200">{name.replace(/_/g, ' ')}</span>;
+}
+
+export default function NodeParameter({ name, value, meta, onChange }) {
+  return (
+    <label className="param">
+      {meta?.type?.format === 'collapsed' ? <>
+        <ParamName name={name} />
+        <button className="collapsed-param">
+          ⋯
+        </button>
+      </> : meta?.type?.format === 'textarea' ? <>
+        <ParamName name={name} />
+        <textarea className="textarea textarea-bordered w-full max-w-xs"
+          rows={6}
+          value={value}
+          onChange={(evt) => onChange(evt.currentTarget.value)}
+        />
+      </> : meta?.type?.enum ? <>
+        <ParamName name={name} />
+        <select className="select select-bordered w-full max-w-xs"
+          value={value || meta.type.enum[0]}
+          onChange={(evt) => onChange(evt.currentTarget.value)}
+        >
+          {meta.type.enum.map(option =>
+            <option key={option} value={option}>{option}</option>
+          )}
+        </select>
+      </> : meta?.type?.type === BOOLEAN ? <div className="form-control">
+        <label className="label cursor-pointer">
+          <input className="checkbox"
+            type="checkbox"
+            checked={value}
+            onChange={(evt) => onChange(evt.currentTarget.checked)}
+          />
+          {name.replace(/_/g, ' ')}
+        </label>
+      </div> : <>
+        <ParamName name={name} />
+        <input className="input input-bordered w-full max-w-xs"
+          value={value || ""}
+          onChange={(evt) => onChange(evt.currentTarget.value)}
+        />
+      </>
+      }
+    </label >
+  );
+}

web/app/workspace/nodes/NodeWithParams.tsx

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { LynxKiteState } from '../LynxKiteState';
+import LynxKiteNode from './LynxKiteNode';
+import { useNodesState } from '@xyflow/react';
+import NodeParameter from './NodeParameter';
+
+function NodeWithParams(props) {
+  const metaParams = props.data.meta?.params;
+  const state = useContext(LynxKiteState);
+  function setParam(name, newValue) {
+    const i = state.workspace.nodes.findIndex((n) => n.id === props.id);
+    state.workspace.nodes[i].data.params[name] = newValue;
+  }
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const params = nodes && props.data?.params ? Object.entries(props.data.params) : [];
+
+  return (
+    <LynxKiteNode {...props}>
+      {params.map(([name, value]) =>
+        <NodeParameter
+          name={name}
+          key={name}
+          value={value}
+          meta={metaParams?.[name]}
+          onChange={(value) => setParam(name, value)}
+        />
+      )}
+    </LynxKiteNode >
+  );
+}
+
+export default NodeWithParams;