Spaces:
Running
Running
File size: 2,636 Bytes
e42831a 8fe4e41 d60fc1c 8fe4e41 d60fc1c 8fe4e41 d60fc1c 2bb2d1d 342bc0e e42831a 2bb2d1d d60fc1c b0968aa b133985 2b83b53 e42831a 2bb2d1d e42831a d60fc1c 342bc0e d60fc1c 2b83b53 e42831a 2b83b53 b0968aa 2b83b53 8fe4e41 e42831a 8fe4e41 342bc0e d60fc1c 342bc0e |
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 |
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}`}>
<dt>{c}</dt>
<dd>
<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);
|