Spaces:
Running
Running
File size: 2,636 Bytes
94d9c60 7ed5764 ec23591 7ed5764 ec23591 7ed5764 ec23591 00663e3 0d8f49d 94d9c60 00663e3 ec23591 1270bff 3a28e0d 83d3ff5 94d9c60 00663e3 94d9c60 ec23591 0d8f49d ec23591 83d3ff5 94d9c60 83d3ff5 1270bff 83d3ff5 7ed5764 94d9c60 7ed5764 0d8f49d ec23591 0d8f49d |
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);
|