Spaces:
Running
Running
File size: 2,637 Bytes
94d9c60 7ed5764 ec23591 7ed5764 ec23591 7ed5764 ec23591 00663e3 ec23591 94d9c60 00663e3 ec23591 1270bff 3a28e0d 83d3ff5 94d9c60 00663e3 94d9c60 ec23591 83d3ff5 94d9c60 83d3ff5 1270bff 83d3ff5 7ed5764 94d9c60 7ed5764 ec23591 |
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 |
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 };
export default 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 (
<LynxKiteNode {...props}>
{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>}
</>
)),
]}
</LynxKiteNode>
);
}
|