Spaces:
Running
Running
File size: 3,267 Bytes
be095f5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
'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>
);
}
|