From 5bdf80da65896a745403716dfdababd173222fee Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 30 May 2024 14:34:32 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(RecordsOutputComponent):=20add=20s?= =?UTF-8?q?upport=20for=20dynamic=20column=20modes=20and=20rows=20?= =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(TableComponent):=20remove=20unused=20useC?= =?UTF-8?q?allback=20import=20and=20add=20autoHeight=20=E2=9C=A8=20(conver?= =?UTF-8?q?t-to-table-rows):=20add=20helper=20function=20to=20convert=20ob?= =?UTF-8?q?jects=20to=20table=20rows=20=E2=99=BB=EF=B8=8F=20(SwitchOutputV?= =?UTF-8?q?iew):=20refactor=20to=20use=20new=20convertToTableRows=20helper?= =?UTF-8?q?=20and=20improve=20type=20checks=20=E2=99=BB=EF=B8=8F=20(Output?= =?UTF-8?q?Modal):=20change=20modal=20size=20to=20medium-log=20for=20bette?= =?UTF-8?q?r=20visualization=20=E2=99=BB=EF=B8=8F=20(IOFieldView):=20refac?= =?UTF-8?q?tor=20to=20use=20new=20rows=20and=20columnMode=20props=20in=20R?= =?UTF-8?q?ecordsOutputComponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ♻️ (baseModal): remove unnecessary comma in ReactElement type array ✨ (baseModal): add new size option "medium-log" for modal component ♻️ (textOutputView): simplify TextOutputView component props ♻️ (api): add params and messages to VertexBuildTypeAPI ♻️ (api): add type to logs in VertexDataTypeAPI ♻️ (api): make artifacts optional in VertexDataTypeAPI ♻️ (chat): make artifacts optional in FlowPoolObjectType ✨ (components): add playgroundDisabled to InputListComponentType ♻️ (components): fix formatting in various component types ♻️ (utils.ts): remove unused imports to clean up the code ✨ (utils.ts): add 'all' mode to extractColumnsFromRows for more flexibility --- .../recordsOutputComponent/index.tsx | 15 +++++--- .../src/components/tableComponent/index.tsx | 4 +- .../helpers/convert-to-table-rows.ts | 4 ++ .../components/switchOutputView/index.tsx | 38 ++++++++++++------- .../components/outputModal/index.tsx | 2 +- .../IOModal/components/IOFieldView/index.tsx | 14 +++---- src/frontend/src/modals/baseModal/index.tsx | 10 ++++- .../components/textOutputView/index.tsx | 7 +--- src/frontend/src/types/api/index.ts | 8 ++-- src/frontend/src/types/chat/index.ts | 2 +- src/frontend/src/types/components/index.ts | 1 + src/frontend/src/utils/utils.ts | 12 +++--- 12 files changed, 70 insertions(+), 47 deletions(-) create mode 100644 src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts diff --git a/src/frontend/src/components/recordsOutputComponent/index.tsx b/src/frontend/src/components/recordsOutputComponent/index.tsx index a917d00fd..65c86e859 100644 --- a/src/frontend/src/components/recordsOutputComponent/index.tsx +++ b/src/frontend/src/components/recordsOutputComponent/index.tsx @@ -1,19 +1,22 @@ import { ColDef, ColGroupDef } from "ag-grid-community"; 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 { FlowPoolObjectType } from "../../types/chat"; -import TableComponent from "../tableComponent"; import { extractColumnsFromRows } from "../../utils/utils"; +import TableComponent from "../tableComponent"; function RecordsOutputComponent({ - flowPoolObject, pagination, + rows, + columnMode, + columnDefsRow, }: { - flowPoolObject: FlowPoolObjectType; pagination: boolean; + rows: any; + columnMode: "intersection" | "union" | "all"; + columnDefsRow?: Array; }) { - const rows = flowPoolObject?.data?.artifacts?.records ?? []; - const columns = extractColumnsFromRows(rows, "union"); + const columns = extractColumnsFromRows(columnDefsRow ?? rows, columnMode); + const columnDefs = columns.map((col, idx) => ({ ...col, resizable: idx !== columns.length - 1, diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 6113316be..7fc687a78 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -1,7 +1,7 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { ElementRef, forwardRef, useCallback } from "react"; +import { ElementRef, forwardRef } from "react"; import { DEFAULT_TABLE_ALERT_MSG, DEFAULT_TABLE_ALERT_TITLE, @@ -59,7 +59,9 @@ const TableComponent = forwardRef< className={cn(props.className, "custom-scroll")} defaultColDef={{ minWidth: 100, + autoHeight: true, }} + tooltipInteraction={true} ref={ref} /> diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts new file mode 100644 index 000000000..db61acaa3 --- /dev/null +++ b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts @@ -0,0 +1,4 @@ +export const convertToTableRows = (obj: Object) => { + const tokensArray = [Object.values(obj)[0]]; + return tokensArray; +}; diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx index a81aadb7a..0c91059d2 100644 --- a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx @@ -2,23 +2,24 @@ import RecordsOutputComponent from "../../../../../../components/recordsOutputCo import { Case } from "../../../../../../shared/components/caseComponent"; import TextOutputView from "../../../../../../shared/components/textOutputView"; import useFlowStore from "../../../../../../stores/flowStore"; +import { convertToTableRows } from "./helpers/convert-to-table-rows"; export default function SwitchOutputView(nodeId): JSX.Element { - const nodes = useFlowStore((state) => state.nodes); - const setNode = useFlowStore((state) => state.setNode); - const flowPool = useFlowStore((state) => state.flowPool); - const node = nodes.find((node) => node?.id === nodeId?.nodeId); + const nodeIdentity = nodeId.nodeId; - const flowPoolNode = (flowPool[node!.id] ?? [])[ - (flowPool[node!.id]?.length ?? 1) - 1 + const nodes = useFlowStore((state) => state.nodes); + const flowPool = useFlowStore((state) => state.flowPool); + const node = nodes.find((node) => node?.id === nodeIdentity); + + const flowPoolNode = (flowPool[nodeIdentity] ?? [])[ + (flowPool[nodeIdentity]?.length ?? 1) - 1 ]; const results = flowPoolNode?.data?.logs[0] ?? ""; + const resultType = results?.type; + const resultMessage = results?.message; - const checkType = () => { - const typeOutput = typeof results; - return typeOutput; - }; + console.log("results", resultMessage); return ( <> @@ -26,14 +27,23 @@ export default function SwitchOutputView(nodeId): JSX.Element {
NO OUTPUT
- - + + - + + + + + diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx index fbddc0275..4185a1d50 100644 --- a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx @@ -4,7 +4,7 @@ import SwitchOutputView from "./components/switchOutputView"; export default function OutputModal({ open, setOpen, nodeId }): JSX.Element { return ( - +
Output View diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx index f73995c7a..e841797be 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx @@ -49,6 +49,8 @@ export default function IOFieldView({ (flowPool[node!.id] ?? [])[(flowPool[node!.id]?.length ?? 1) - 1]?.data .results.result ?? ""; + console.log(flowPoolNode?.data?.artifacts?.records); + function handleOutputType() { if (!node) return <>"No node found!"; switch (type) { @@ -161,14 +163,7 @@ export default function IOFieldView({ case InputOutput.OUTPUT: switch (fieldType) { case "TextOutput": - return ( - - ); + return ; case "PDFOutput": return left ? (
{PDFViewConstant}
@@ -256,8 +251,9 @@ export default function IOFieldView({ return (
); diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index dbde0969e..8f2a1e84d 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -86,7 +86,8 @@ interface BaseModalProps { | "medium-h-full" | "md-thin" | "sm-thin" - | "smaller-h-full"; + | "smaller-h-full" + | "medium-log"; disable?: boolean; onChangeOpenModal?: (open?: boolean) => void; @@ -172,8 +173,13 @@ function BaseModal({ case "large-h-full": minWidth = "min-w-[80vw]"; height = "h-full max-h-[70vh]"; - break; + + case "medium-log": + minWidth = "min-w-[60vw]"; + height = "h-[30vh]"; + break; + default: minWidth = "min-w-[80vw]"; height = "h-[80vh]"; diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx index 38d0ca498..a73c5938f 100644 --- a/src/frontend/src/shared/components/textOutputView/index.tsx +++ b/src/frontend/src/shared/components/textOutputView/index.tsx @@ -1,16 +1,13 @@ import { Textarea } from "../../../components/ui/textarea"; -const TextOutputView = ({ left, node, flowPool, value }) => { +const TextOutputView = ({ left, value }) => { return ( <>