diff --git a/langflow.db b/langflow.db index 17fd1d662..c5b0c3b35 100644 Binary files a/langflow.db and b/langflow.db differ diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index a8e896aa1..b24e195de 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -42,13 +42,6 @@ export default function App() { const { flows, addFlow } = useContext(TabsContext); - useEffect(() => { - //create the first flow - if (flows.length === 0) { - addFlow(); - } - }, [addFlow, flows.length]); - // Initialize state variable for the list of alerts const [alertsList, setAlertsList] = useState< Array<{ @@ -133,12 +126,8 @@ export default function App() { }} FallbackComponent={CrashErrorComponent} > - {flows.length !== 0 && ( - <>
- - )}
+ {flows.findIndex((f) => tabId === f.id) !== -1 && + }
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 38c59f9f8..0bc7754cd 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -130,12 +130,6 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); }, [templates]); - function getLocalStorageTabsData() { - let cookie = window.localStorage.getItem("tabsData"); - let cookieObject: LangFlowState = JSON.parse(cookie); - return cookieObject; - } - function getTabsDataFromDB() { //get tabs from db return readFlowsFromDatabase(); diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index a45e650c7..e4a167b34 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -1,6 +1,21 @@ import _ from "lodash"; import { useContext, useRef, useState, useEffect, useCallback } from "react"; -import ReactFlow, { OnSelectionChangeParams, useNodesState, useEdgesState, useReactFlow, EdgeChange, Connection, addEdge, NodeDragHandler, SelectionDragHandler, OnEdgesDelete, Edge, updateEdge, Background, Controls } from "reactflow"; +import ReactFlow, { + OnSelectionChangeParams, + useNodesState, + useEdgesState, + useReactFlow, + EdgeChange, + Connection, + addEdge, + NodeDragHandler, + SelectionDragHandler, + OnEdgesDelete, + Edge, + updateEdge, + Background, + Controls, +} from "reactflow"; import GenericNode from "../../../../CustomNodes/GenericNode"; import Chat from "../../../../components/chatComponent"; import { alertContext } from "../../../../contexts/alertContext"; @@ -14,8 +29,6 @@ import useUndoRedo from "../../hooks/useUndoRedo"; import ConnectionLineComponent from "../ConnectionLineComponent"; import ExtraSidebar from "../extraSidebarComponent"; - - const nodeTypes = { genericNode: GenericNode, }; @@ -295,55 +308,68 @@ export default function Page({ 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" - > - - - - - - ) : ( - <> - )} +
+ + {/* Main area */} +
+ {/* Primary column */} +
+
+ {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" + > + + + + +
+ ) : ( + <> + )} +
+
+
); } diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 88309ffda..835c51529 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 ( -
+
{ const { updateFlow, setTabId, addFlow } = useContext(TabsContext); @@ -129,6 +130,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => { Flows + { @@ -137,9 +139,12 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => { > {flows.map((flow, idx) => { return ( - + + {emoji} {flow.name} + + ); })} diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 1844ed61f..36e7846be 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -30,7 +30,6 @@ export default function HomePage() { setTabId, } = useContext(TabsContext); return ( - Object.keys(flows).length !== 0 && (
@@ -45,6 +44,5 @@ export default function HomePage() { ))}
- ) ); }