Spaces:
Running
Running
File size: 3,829 Bytes
5fe7b6c 98f8f03 03fbff6 5fe7b6c 98f8f03 03fbff6 98f8f03 03fbff6 98f8f03 03fbff6 98f8f03 03fbff6 5fe7b6c 98f8f03 03fbff6 5fe7b6c 03fbff6 98f8f03 5fe7b6c 98f8f03 5fe7b6c 98f8f03 03fbff6 98f8f03 5fe7b6c 98f8f03 03fbff6 98f8f03 |
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
// The LynxKite workspace editor.
import { useParams } from "react-router";
import useSWR from 'swr';
import { useMemo, useCallback } from "react";
import favicon from '../assets/favicon.ico';
import {
ReactFlow,
Controls,
MiniMap,
MarkerType,
useReactFlow,
ReactFlowProvider,
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';
import { Workspace } from "../apiTypes.ts";
import { useShallow } from 'zustand/react/shallow';
import { useStore, selector, doc } from './store';
export default function (props: any) {
return (
<ReactFlowProvider>
<LynxKiteFlow {...props} />
</ReactFlowProvider>
);
}
function LynxKiteFlow() {
const { screenToFlowPosition } = useReactFlow();
const store = useStore(
useShallow(selector),
);
const { path } = useParams();
// const sstore = syncedStore({ workspace: {} });
// const doc = getYjsDoc(sstore);
const wsProvider = new WebsocketProvider("ws://localhost:8000/ws/crdt", path!, doc);
wsProvider; // Just to disable the lint warning. The life cycle of this object is a mystery.
// const state: { workspace: Workspace } = 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,
}), []);
const parentDir = path!.split('/').slice(0, -1).join('/');
return (
<div className="workspace">
<div className="top-bar bg-neutral">
<a className="logo" href=""><img src={favicon} /></a>
<div className="ws-name">
{path}
</div>
<EnvironmentSelector
options={Object.keys(catalog.data || {})}
value={store.env}
onChange={(env) => store.setEnv(env)}
/>
<div className="tools text-secondary">
<a href=""><Atom /></a>
<a href=""><Backspace /></a>
<a href={'/dir/' + parentDir}><ArrowBack /></a>
</div>
</div>
<div style={{ height: "100%", width: '100vw' }}>
<LynxKiteState.Provider value={store}>
<ReactFlow
nodes={store.nodes as Node[]}
edges={store.edges}
nodeTypes={nodeTypes} fitView
onNodesChange={store.onNodesChange}
onEdgesChange={store.onEdgesChange}
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>
);
}
|