Spaces:
Running
Running
File size: 2,636 Bytes
2649b4f d460634 44b3c5d d460634 44b3c5d d460634 44b3c5d c6d869b cedd3c4 2649b4f c6d869b 44b3c5d a112474 8f6e915 9539a23 2649b4f c6d869b 2649b4f 44b3c5d cedd3c4 44b3c5d 9539a23 2649b4f 9539a23 a112474 9539a23 d460634 2649b4f d460634 cedd3c4 44b3c5d cedd3c4 |
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);
|