Spaces:
Running
Running
File size: 2,306 Bytes
8fe4e41 d60fc1c 8fe4e41 d60fc1c 8fe4e41 d60fc1c 8fe4e41 b133985 2b83b53 d60fc1c 2b83b53 8fe4e41 d60fc1c |
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 |
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);
}
export default function NodeWithTableView(props: any) {
const [open, setOpen] = useState({} as { [name: string]: boolean });
const display = props.data.display?.value;
const single =
display?.dataframes && Object.keys(display?.dataframes).length === 1;
const dfs = Object.entries(display?.dataframes || {});
dfs.sort();
return (
<LynxKiteNode {...props}>
{display && [
dfs.map(([name, df]: [string, any]) => (
<React.Fragment key={name}>
{!single && (
<div
key={`${name}-header`}
className="df-head"
onClick={() => setOpen({ ...open, [name]: !open[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={() => setOpen({ ...open, [name]: !open[name] })}
>
{name}
</div>
{open[name] && <pre>{(o as any).toString()}</pre>}
</>
)),
]}
</LynxKiteNode>
);
}
|