-
Notifications
You must be signed in to change notification settings - Fork 3.1k
/
index.tsx
136 lines (125 loc) · 4.25 KB
/
index.tsx
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
import { useEffect, useMemo, useState } from "react";
import {
CSVError,
CSVNoDataError,
CSVViewErrorTitle,
} from "../../constants/constants";
import { useDarkStore } from "../../stores/darkStore";
import { VertexBuildTypeAPI } from "../../types/api";
import { NodeType } from "../../types/flow";
import ForwardedIconComponent from "../genericIconComponent";
import TableComponent from "../tableComponent";
import Loading from "../ui/loading";
import { convertCSVToData } from "./helpers/convert-data-function";
function CsvOutputComponent({
csvNode,
flowPool,
}: {
csvNode: NodeType;
flowPool: VertexBuildTypeAPI;
}) {
const csvNodeArtifacts = flowPool?.data?.artifacts?.repr;
const jsonString = csvNodeArtifacts?.replace(/'/g, '"');
let file = null;
try {
file = JSON?.parse(jsonString) || "";
} catch (e) {
console.log("Error parsing JSON");
}
if (!file) {
return (
<div className="align-center flex h-full w-full flex-col items-center justify-center gap-5">
<div className="align-center flex w-full justify-center gap-2">
<ForwardedIconComponent name="Table" />
{CSVViewErrorTitle}
</div>
<div className="align-center flex w-full justify-center">
<div className="langflow-chat-desc align-center flex justify-center px-6 py-8">
<div className="langflow-chat-desc-span">{CSVError}</div>
</div>
</div>
</div>
);
}
const separator = csvNode?.data?.node?.template?.separator?.value || ",";
const dark = useDarkStore.getState().dark;
const [rowData, setRowData] = useState([]);
const [colDefs, setColDefs] = useState([]);
const [status, setStatus] = useState("loading");
const defaultColDef = useMemo(() => {
return {
width: 200,
editable: true,
filter: true,
};
}, []);
useEffect(() => {
setStatus("loading");
if (file) {
const { rowData: data, colDefs: columns } = convertCSVToData(
file,
separator,
);
setRowData(data);
setColDefs(columns);
setTimeout(() => {
setStatus("loaded");
}, 1000);
} else {
setStatus("nodata");
}
}, [separator]);
return (
<div className="h-full rounded-md border bg-muted">
{status === "nodata" && (
<div className="align-center flex h-full w-full flex-col items-center justify-center gap-5">
<div className="align-center flex w-full justify-center gap-2">
<ForwardedIconComponent name="Table" />
{CSVViewErrorTitle}
</div>
<div className="align-center flex w-full justify-center">
<div className="langflow-chat-desc align-center flex justify-center px-6 py-8">
<div className="langflow-chat-desc-span">{CSVNoDataError}</div>
</div>
</div>
</div>
)}
{status === "error" && (
<div className="align-center flex h-full w-full flex-col items-center justify-center gap-5">
<div className="align-center flex w-full justify-center gap-2">
<ForwardedIconComponent name="Table" />
{CSVViewErrorTitle}
</div>
<div className="align-center flex w-full justify-center">
<div className="langflow-chat-desc align-center flex justify-center px-6 py-8">
<div className="langflow-chat-desc-span">{CSVError}</div>
</div>
</div>
</div>
)}
{status === "loaded" && (
<div
className={`${dark ? "ag-theme-balham-dark" : "ag-theme-balham"}`}
style={{ height: "100%", width: "100%" }}
>
<TableComponent
key={"csv-output"}
rowData={rowData}
columnDefs={colDefs}
defaultColDef={defaultColDef}
scrollbarWidth={8}
overlayNoRowsTemplate="No data available"
/>
</div>
)}
{status === "loading" && (
<div className="flex h-full w-full items-center justify-center align-middle">
<Loading />
</div>
)}
</div>
);
}
export default CsvOutputComponent;