From bd04259b00b31a70d5113e13bc6da8efb50e0f6b Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jun 2024 18:01:37 -0300 Subject: [PATCH 1/4] add storage to store column defs on the table --- .../tableComponent/components/loadingOverlay/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/frontend/src/components/tableComponent/components/loadingOverlay/index.tsx diff --git a/src/frontend/src/components/tableComponent/components/loadingOverlay/index.tsx b/src/frontend/src/components/tableComponent/components/loadingOverlay/index.tsx new file mode 100644 index 000000000..9df9144e0 --- /dev/null +++ b/src/frontend/src/components/tableComponent/components/loadingOverlay/index.tsx @@ -0,0 +1,9 @@ +import Loading from "../../../ui/loading"; + +export default function LoadingOverlay() { + return ( +
+ +
+ ); +} From e8ee275145a2b6170c18ee080829ac02d8d4de80 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jun 2024 18:03:00 -0300 Subject: [PATCH 2/4] refactor: Store column definitions in local storage for the table --- src/frontend/src/App.css | 5 +++ .../src/components/tableComponent/index.tsx | 36 +++++++++++++------ 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index 5a97d371e..53fe3fdc4 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -183,3 +183,8 @@ body { .react-flow__edge .react-flow__edge-path { stroke: var(--connection) !important; } + +.ag-react-container { + width: 100%; + height: 100%; +} diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index da5cf6d42..8c4cdec9f 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -13,6 +13,7 @@ import ForwardedIconComponent from "../genericIconComponent"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; import TableOptions from "./components/TableOptions"; import resetGrid from "./utils/reset-grid-columns"; +import Loading from "../ui/loading"; interface TableComponentProps extends AgGridReactProps { columnDefs: NonNullable; @@ -34,7 +35,7 @@ const TableComponent = forwardRef< alertDescription = DEFAULT_TABLE_ALERT_MSG, ...props }, - ref + ref, ) => { let colDef = props.columnDefs.map((col, index) => { let newCol = { @@ -75,7 +76,7 @@ const TableComponent = forwardRef< const dark = useDarkStore((state) => state.dark); const initialColumnDefs = useRef(colDef); const [columnStateChange, setColumnStateChange] = useState(false); - + const storeReference = props.columnDefs.map((e) => e.headerName).join("_"); const makeLastColumnNonResizable = (columnDefs) => { columnDefs.forEach((colDef, index) => { colDef.resizable = index !== columnDefs.length - 1; @@ -88,21 +89,33 @@ const TableComponent = forwardRef< realRef.current = params; const updatedColumnDefs = makeLastColumnNonResizable([...colDef]); params.api.setGridOption("columnDefs", updatedColumnDefs); + const customInit = localStorage.getItem(storeReference); initialColumnDefs.current = params.api.getColumnDefs(); + if (customInit && realRef.current) { + realRef.current.api.applyColumnState({ + state: JSON.parse(customInit), + applyOrder: true, + }); + } if (props.onGridReady) props.onGridReady(params); setTimeout(() => { - setColumnStateChange(false); + if (customInit && realRef.current) { + setColumnStateChange(true); + } else { + setColumnStateChange(false); + } }, 50); + setTimeout(() => { + realRef.current.api.hideOverlay(); + }, 1000); }; - const onColumnMoved = (params) => { const updatedColumnDefs = makeLastColumnNonResizable( - params.columnApi.getAllGridColumns().map((col) => col.getColDef()) + params.columnApi.getAllGridColumns().map((col) => col.getColDef()), ); params.api.setGridOption("columnDefs", updatedColumnDefs); if (props.onColumnMoved) props.onColumnMoved(params); }; - if (props.rowData.length === 0) { return (
@@ -122,7 +135,7 @@ const TableComponent = forwardRef< className={cn( dark ? "ag-theme-quartz-dark" : "ag-theme-quartz", "ag-theme-shadcn flex h-full flex-col", - "relative" + "relative", )} // applying the grid theme > { - console.log(e); if (e.sources.some((source) => source.includes("column"))) { + localStorage.setItem( + storeReference, + JSON.stringify(realRef.current?.api?.getColumnState()), + ); setColumnStateChange(true); } }} @@ -151,16 +167,16 @@ const TableComponent = forwardRef< duplicateRow={props.onDuplicate ? props.onDuplicate : undefined} deleteRow={props.onDelete ? props.onDelete : undefined} resetGrid={() => { - console.log("teste"); resetGrid(realRef, initialColumnDefs); setTimeout(() => { setColumnStateChange(false); + localStorage.removeItem(storeReference); }, 100); }} />
); - } + }, ); export default TableComponent; From 6918fadaed49d07e095412d3da9a7e1a440038c2 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jun 2024 18:06:30 -0300 Subject: [PATCH 3/4] refactor: Update TableComponent to call onGridReady after setting column state change flag --- src/frontend/src/components/tableComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 8c4cdec9f..37ff6cbbc 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -97,7 +97,6 @@ const TableComponent = forwardRef< applyOrder: true, }); } - if (props.onGridReady) props.onGridReady(params); setTimeout(() => { if (customInit && realRef.current) { setColumnStateChange(true); @@ -108,6 +107,7 @@ const TableComponent = forwardRef< setTimeout(() => { realRef.current.api.hideOverlay(); }, 1000); + if (props.onGridReady) props.onGridReady(params); }; const onColumnMoved = (params) => { const updatedColumnDefs = makeLastColumnNonResizable( From 2b6fec82bb3ddebead5ef7ebc187131c19ff5742 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jun 2024 18:30:56 -0300 Subject: [PATCH 4/4] refactor: Update ChatView component to handle different message formats --- .../IOModal/components/chatView/index.tsx | 15 ++++--- src/frontend/src/modals/IOModal/index.tsx | 44 ++++++++++--------- src/frontend/src/types/api/index.ts | 2 +- 3 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx index aba9a7f46..876295d07 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx @@ -65,10 +65,15 @@ export default function ChatView({ .filter((output) => output.data.message) .map((output, index) => { try { - const { sender, message, sender_name, stream_url, files } = output - .data.message as ChatOutputType; + console.log("output:", output); + const { sender, message, sender_name, stream_url, files } = + output.data.message.message !== "" || + (output.data.message.files ?? []).length > 0 + ? output.data.message + : output.data.artifacts; - const is_ai = sender === "Machine" || sender === null; + const is_ai = + sender === "Machine" || sender === null || sender === undefined; return { isSend: !is_ai, message: message, @@ -131,7 +136,7 @@ export default function ChatView({ function updateChat( chat: ChatMessageType, message: string, - stream_url?: string + stream_url?: string, ) { // if (message === "") return; chat.message = message; @@ -161,7 +166,7 @@ export default function ChatView({ setIsDragging, setFiles, currentFlowId, - setErrorData + setErrorData, ); return ( diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 0150e98a4..f19ed59e1 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -36,25 +36,25 @@ export default function IOModal({ const allNodes = useFlowStore((state) => state.nodes); const setMessages = useMessagesStore((state) => state.setMessages); const inputs = useFlowStore((state) => state.inputs).filter( - (input) => input.type !== "ChatInput" + (input) => input.type !== "ChatInput", ); const chatInput = useFlowStore((state) => state.inputs).find( - (input) => input.type === "ChatInput" + (input) => input.type === "ChatInput", ); const outputs = useFlowStore((state) => state.outputs).filter( - (output) => output.type !== "ChatOutput" + (output) => output.type !== "ChatOutput", ); const chatOutput = useFlowStore((state) => state.outputs).find( - (output) => output.type === "ChatOutput" + (output) => output.type === "ChatOutput", ); const nodes = useFlowStore((state) => state.nodes).filter( (node) => inputs.some((input) => input.id === node.id) || - outputs.some((output) => output.id === node.id) + outputs.some((output) => output.id === node.id), ); const haveChat = chatInput || chatOutput; const [selectedTab, setSelectedTab] = useState( - inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0 + inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0, ); const setErrorData = useAlertStore((state) => state.setErrorData); const setSuccessData = useAlertStore((state) => state.setSuccessData); @@ -127,7 +127,7 @@ export default function IOModal({ const { handleRemoveSession } = useRemoveSession( setSuccessData, - setErrorData + setErrorData, ); useEffect(() => { @@ -188,7 +188,7 @@ export default function IOModal({
{nodes .filter((node) => - inputs.some((input) => input.id === node.id) + inputs.some((input) => input.id === node.id), ) .map((node, index) => { const input = inputs.find( - (input) => input.id === node.id + (input) => input.id === node.id, )!; return (
{nodes .filter((node) => - outputs.some((output) => output.id === node.id) + outputs.some((output) => output.id === node.id), ) .map((node, index) => { const output = outputs.find( - (output) => output.id === node.id + (output) => output.id === node.id, )!; return (
- {session} + + {session === currentFlow?.id + ? "Default Session" + : session} +