diff --git a/langflow.db b/langflow.db new file mode 100644 index 000000000..f47b46f37 Binary files /dev/null and b/langflow.db differ 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