From ceb9b1d1550611d0e91e444d61e1a5d1836df38f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 12 Jun 2023 18:19:05 -0300 Subject: [PATCH] Added flow id and routes logic --- langflow.db | Bin 0 -> 28672 bytes src/frontend/src/App.tsx | 24 ++- .../src/components/headerComponent/index.tsx | 114 ++++++++++++++ src/frontend/src/contexts/index.tsx | 25 +-- .../extraSidebarComponent/index.tsx | 4 +- src/frontend/src/pages/FlowPage/index.tsx | 147 +++++++++++------- .../components/cardComponent/index.tsx | 7 +- src/frontend/src/pages/MainPage/index.tsx | 108 +------------ src/frontend/src/routes.tsx | 16 ++ 9 files changed, 262 insertions(+), 183 deletions(-) create mode 100644 langflow.db create mode 100644 src/frontend/src/components/headerComponent/index.tsx create mode 100644 src/frontend/src/routes.tsx diff --git a/langflow.db b/langflow.db new file mode 100644 index 0000000000000000000000000000000000000000..f47b46f37b0bac89e47bc26b007010b63c3e311b GIT binary patch literal 28672 zcmeI4U5H&*702(*OeUH8ady5YH(!%E$xLDbMb7>@dv7din%>yhWMU_YB%p--87H00 z)MP?ieUPe%#iF1H^`o}*K_3*QD1FffUwlx|L@R|V_);jo2%;#3qPX^LCZ2FY4niL! z-DkLK&YH8ba_lUM9JY8U2$(~~Q3E z4&#Z5!EmPCT3mMiiL0Mnf``lt`r7Ks$iHxFU>ESM(+%gxCkAw?{p2WQ@rhB;1?R8Y zD~pe-}%{7yD&@taqdL zT<=m(^v1it?S7~GXjgXEcYfD-zO&R(or%d;pn-HG0*OE(kO(9Ki9jNd2)rW%@WJ&{ z)BTgn*Or#%{p0yD_<7Ull3G?^U1-g$!^Sd00xqSsP6a~nfm(|91QW+?;e=$i;KnoI zJ(E&uA+4c!u9iYeM@ph7m5MUOwGN7VsU<0m7K%tbTT9UeB{(pGHP$Q$t4di~=b2%Y zQ^_daUr!-MFv5l4s$iH(34t2rK1+(-L;g!Whe?Pbx}agOSliA&?&}XPz9A9@2aIpR`MW}E-mK_Gpr0R zWKl|A7^Q4U@y=QbRV8M;Fc^Eoq+mJ-PdLStQUkNV;2pITA84sHz=3(f3gNU7j>v*3 zEI4J><3TM2ONR@X>gb+ zr)nt*2dsE$19K1rQ=f3nTwo^;i zr3*Z0sg=MCX1gg(p-YE@g*GC|EwvOFh$Zl$pyDiml>$fv!lV*~5d?3prFdHeO=$tc zhJKaGV8JY*)Z;jf0q3S#3N^+V55GUn&PXBvhy%TEKLp z!sAXY1sfxj3yOLH%hOWWH=Tu*=7Z-Y+zfB1rAPub$Ifc+Eh_;oOgO2zglb7x`WjEx zQbS^ueS2; z{jKgl`fv3wW;uEYz1)8_`$_i;{psuyy4-uS=lU;ozu&!)z1I6c_x|1w(QI#5|C!#? z*)aP`S7-n3KY;$&d*vPZW|taC1QLNnAQ4Ce5`jb@5l967j|t3;ooqLWF$ZH%ll*cZ z1~myTb1|q%VwoKUHHa$vV^EWfvM&ZT2`70BYLZH3Vo;MfvNr}b$syBk-|p@L$etL~ zBzf!}^{GMR*cF4CWR0CMs7c7!5rdkfi@~U+2C-s$3~G`mreaW&Ah9h5HAxU#V^EXm zuq6gH$qbugP?NB*Y1C4Klz?JTlX#HDpeDJXKe}CmK+uapO_D%21~rKQofy>g*dO0< zKNmEJuNqVUP%2n3TALDk$Cx7q^fb<6Lrr49WDIJ0{NLC?e`w{|nHK!^|L^Dx^mFuM z^j-7~^bGn8x`I49haN`nM;Oha0qSJ`%Kn)98xPiM=Sh6d7+ z2qXfDKq8O`Bm#**B9I6q0*OE(@UA1!8=G#gy;daJ~ zy;Wzr>g=gHyQ|Kwsh!Bluj+KG zPN(Wb9ig{Yh3bXLssqpee{1FFV=eR-^cMOj`ZIbR{RzE>evhuBU!h-s9`IB2GI|O9 z0DTX=h@L~wqOYMZqo>j5K_B=Ox`rM@kD`DyG?0!&AQ4Ce5`jb@5l93QfkYq?NCXmr zMBrUYV0^6KJ{Zk`Xy&4sjb?u|`=ZICnTcj^G}F=SiDq{+yQ0|{&5mdW(QJ=qDw=K4 zY>j41G@GN@6b*_di>4npv9a Bg17(x literal 0 HcmV?d00001 diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index b16c36766..7f0b14be6 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -1,7 +1,7 @@ import "reactflow/dist/style.css"; import { useState, useEffect, useContext } from "react"; import "./App.css"; -import { useLocation } from "react-router-dom"; +import { useLocation, useParams } from "react-router-dom"; import _ from "lodash"; import ErrorAlert from "./alerts/error"; @@ -15,6 +15,8 @@ import CrashErrorComponent from "./components/CrashErrorComponent"; import { TabsContext } from "./contexts/tabsContext"; import MainPage from "./pages/MainPage"; import { getVersion } from "./controllers/API"; +import Router from "./routes"; +import Header from "./components/headerComponent"; export default function App() { let { setCurrent, setShowSideBar, setIsStackedOpen } = @@ -25,7 +27,7 @@ export default function App() { setShowSideBar(true); setIsStackedOpen(true); }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]); - const { hardReset } = useContext(TabsContext); + const { hardReset, setTabIndex } = useContext(TabsContext); const { errorData, errorOpen, @@ -38,6 +40,17 @@ export default function App() { setSuccessOpen, } = useContext(alertContext); + const { flows, addFlow } = useContext(TabsContext); + + useEffect(() => { + //create the first flow + if (flows.length === 0) { + addFlow(); + console.log("que"); + } + }, [addFlow, flows.length]); + + // Initialize state variable for the list of alerts const [alertsList, setAlertsList] = useState< Array<{ @@ -122,7 +135,12 @@ export default function App() { }} FallbackComponent={CrashErrorComponent} > - + {flows.length !== 0 && ( + <> +
+ + + )}
{ + //create the first flow + if (flows.length === 0 && Object.keys(templates).length > 0) { + addFlow(); + } + }, [addFlow, flows.length, templates]); + return ( +
+ +
+ + +
+
+
+ + + + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index ab199368e..aa8bf31d4 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -5,22 +5,25 @@ import { LocationProvider } from "./locationContext"; import PopUpProvider from "./popUpContext"; import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; +import { ReactFlowProvider } from "reactflow"; export default function ContextWrapper({ children }: { children: ReactNode }) { //element to wrap all context return ( <> - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + ); } diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index f0fe333d5..88309ffda 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -49,7 +49,7 @@ export default function ExtraSidebar() { } return ( - <> +
- +
); } diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 0060f0107..e4d6cbeba 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -18,6 +18,7 @@ import ReactFlow, { useOnViewportChange, OnSelectionChangeParams, OnNodesChange, + ReactFlowProvider, } from "reactflow"; import _ from "lodash"; import { locationContext } from "../../contexts/locationContext"; @@ -32,12 +33,13 @@ import { FlowType, NodeType } from "../../types/flow"; import { APIClassType } from "../../types/api"; import { isValidConnection } from "../../utils"; import useUndoRedo from "./hooks/useUndoRedo"; +import { useParams } from "react-router-dom"; const nodeTypes = { genericNode: GenericNode, }; -export default function FlowPage({ flow }: { flow: FlowType }) { +export default function FlowPage() { let { updateFlow, disableCopyPaste, @@ -46,6 +48,10 @@ export default function FlowPage({ flow }: { flow: FlowType }) { paste, lastCopiedSelection, setLastCopiedSelection, + flows, + tabIndex, + setTabIndex + } = useContext(TabsContext); const { types, reactFlowInstance, setReactFlowInstance, templates } = useContext(typesContext); @@ -53,6 +59,18 @@ export default function FlowPage({ flow }: { flow: FlowType }) { const { takeSnapshot } = useUndoRedo(); + const {id} = useParams(); + + useEffect(() => { + if(flows.length !== 0){ + console.log(id, "o id é esse"); + setTabIndex(flows.findIndex((flow) => flow.id === id) == -1 ? 0 : flows.findIndex((flow) => flow.id === id)); + console.log("setou", flows.findIndex((flow) => flow.id === id)) + console.log(flows[tabIndex]) + } + + }, [flows, id]) + const [position, setPosition] = useState({ x: 0, y: 0 }); const [lastSelection, setLastSelection] = useState(null); @@ -111,28 +129,28 @@ export default function FlowPage({ flow }: { flow: FlowType }) { const { setExtraComponent, setExtraNavigation } = useContext(locationContext); const { setErrorData } = useContext(alertContext); const [nodes, setNodes, onNodesChange] = useNodesState( - flow.data?.nodes ?? [] + flows[tabIndex].data?.nodes ?? [] ); const [edges, setEdges, onEdgesChange] = useEdgesState( - flow.data?.edges ?? [] + flows[tabIndex].data?.edges ?? [] ); const { setViewport } = useReactFlow(); const edgeUpdateSuccessful = useRef(true); useEffect(() => { - if (reactFlowInstance && flow) { - flow.data = reactFlowInstance.toObject(); - updateFlow(flow); + if (reactFlowInstance && flows[tabIndex]) { + flows[tabIndex].data = reactFlowInstance.toObject(); + updateFlow(flows[tabIndex]); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [nodes, edges]); //update flow when tabs change useEffect(() => { - setNodes(flow?.data?.nodes ?? []); - setEdges(flow?.data?.edges ?? []); + setNodes(flows[tabIndex]?.data?.nodes ?? []); + setEdges(flows[tabIndex]?.data?.edges ?? []); if (reactFlowInstance) { - setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 }); + setViewport(flows[tabIndex]?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 }); } - }, [flow, reactFlowInstance, setEdges, setNodes, setViewport]); + }, [flows[tabIndex], reactFlowInstance, setEdges, setNodes, setViewport]); //set extra sidebar useEffect(() => { setExtraComponent(); @@ -312,55 +330,66 @@ export default function FlowPage({ flow }: { flow: FlowType }) { const { setDisableCopyPaste } = useContext(TabsContext); return ( -
- {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? ( - <> - { - updateFlow({ ...flow, data: reactFlowInstance.toObject() }); - }} - edges={edges} - onPaneClick={() => { - setDisableCopyPaste(false); - }} - onPaneMouseLeave={() => { - setDisableCopyPaste(true); - }} - onNodesChange={onNodesChange} - onEdgesChange={onEdgesChangeMod} - onConnect={onConnect} - disableKeyboardA11y={true} - onLoad={setReactFlowInstance} - onInit={setReactFlowInstance} - nodeTypes={nodeTypes} - onEdgeUpdate={onEdgeUpdate} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} - onNodeDragStart={onNodeDragStart} - onSelectionDragStart={onSelectionDragStart} - onSelectionEnd={onSelectionEnd} - onSelectionStart={onSelectionStart} - onEdgesDelete={onEdgesDelete} - connectionLineComponent={ConnectionLineComponent} - onDragOver={onDragOver} - onDrop={onDrop} - onNodesDelete={onDelete} - onSelectionChange={onSelectionChange} - nodesDraggable={!disableCopyPaste} - panOnDrag={!disableCopyPaste} - zoomOnDoubleClick={!disableCopyPaste} - selectNodesOnDrag={false} - className="theme-attribution" - > - - - - - - ) : ( - <> - )} +
+ +
+ {/* Primary column */} + +
+ {Object.keys(templates).length > 0 && + Object.keys(types).length > 0 ? ( + <> + { + updateFlow({ + ...flows[tabIndex], + data: reactFlowInstance.toObject(), + }); + }} + edges={edges} + onPaneClick={() => { + setDisableCopyPaste(false); + }} + onPaneMouseLeave={() => { + setDisableCopyPaste(true); + }} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChangeMod} + onConnect={onConnect} + disableKeyboardA11y={true} + onLoad={setReactFlowInstance} + onInit={setReactFlowInstance} + nodeTypes={nodeTypes} + onEdgeUpdate={onEdgeUpdate} + onEdgeUpdateStart={onEdgeUpdateStart} + onEdgeUpdateEnd={onEdgeUpdateEnd} + onNodeDragStart={onNodeDragStart} + onSelectionDragStart={onSelectionDragStart} + onSelectionEnd={onSelectionEnd} + onSelectionStart={onSelectionStart} + onEdgesDelete={onEdgesDelete} + connectionLineComponent={ConnectionLineComponent} + onDragOver={onDragOver} + onDrop={onDrop} + onNodesDelete={onDelete} + onSelectionChange={onSelectionChange} + nodesDraggable={!disableCopyPaste} + panOnDrag={!disableCopyPaste} + zoomOnDoubleClick={!disableCopyPaste} + selectNodesOnDrag={false} + className="theme-attribution" + > + + + + + + ) : ( + <> + )} +
+
); } diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx index b69201a05..ad5214a38 100644 --- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx @@ -20,18 +20,17 @@ import _ from "lodash"; import { TabsContext } from "../../../../contexts/tabsContext"; import { alertContext } from "../../../../contexts/alertContext"; import { updateFlowInDatabase } from "../../../../controllers/API"; +import { Link } from "react-router-dom"; export const CardComponent = ({ flow, idx, removeFlow, setTabIndex, - setActiveTab, }: { flow: FlowType; idx: number; removeFlow: (id: string) => void; setTabIndex: (idx: number) => void; - setActiveTab: (tab: string) => void; }) => { const { setErrorData } = useContext(alertContext); const { updateFlow } = useContext(TabsContext); @@ -65,13 +64,15 @@ export const CardComponent = ({ />
+ { setTabIndex(idx); - setActiveTab("myflow"); + }} /> + { diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index a0951a3d2..621a51cdd 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -30,14 +30,11 @@ export default function HomePage() { removeFlow, tabIndex, setTabIndex, - uploadFlow, - downloadFlow, } = useContext(TabsContext); const { openPopUp } = useContext(PopUpContext); const { templates } = useContext(typesContext); const AlertWidth = 384; const { dark, setDark } = useContext(darkContext); - const [activeTab, setActiveTab] = useState("myflow"); const [rename, setRename] = useState(false); const { notificationCenter, setNotificationCenter, setErrorData } = useContext(alertContext); @@ -50,106 +47,9 @@ export default function HomePage() { return ( flows.length !== 0 && ( - - - -
- Explore - My Flows -
-
-
- - - - -
-
- - - -
- -
- {/* Primary column */} -
- - {flows[tabIndex] ? ( - - ) : ( - <> - )} - -
-
-
- -
{flows.map((flow, idx) => ( ))}
- - +
) ); } diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx new file mode 100644 index 000000000..9fe1d8d28 --- /dev/null +++ b/src/frontend/src/routes.tsx @@ -0,0 +1,16 @@ +import { Route, Routes } from "react-router-dom" +import HomePage from "./pages/MainPage"; +import FlowPage from "./pages/FlowPage"; + +const Router = () => { + return( + + }/> + + }/> + + + ) + } + + export default Router; \ No newline at end of file