Changed every flowsContext to useFlow

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -31,6 +31,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { postCustomComponentUpdate } from "../../../../controllers/API";
+import useFlow from "../../../../stores/flowManagerStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import { NodeDataType } from "../../../../types/flow";
@@ -70,7 +71,8 @@ export default function ParameterComponent({
   const { setErrorData, modalContextOpen } = useContext(alertContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { tabId, flows, nodes, edges, setNode } = useContext(FlowsContext);
+  const { tabId, flows } = useContext(FlowsContext);
+  const { nodes, edges, setNode } = useFlow();
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -7,7 +7,6 @@ import InputComponent from "../../components/inputComponent";
 import { Textarea } from "../../components/ui/textarea";
 import { priorityFields } from "../../constants/constants";
 import { useSSE } from "../../contexts/SSEContext";
-import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { undoRedoContext } from "../../contexts/undoRedoContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
@@ -17,6 +16,7 @@ import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
+import useFlow from "../../stores/flowManagerStore";
 
 export default function GenericNode({
   data,
@@ -30,7 +30,7 @@ export default function GenericNode({
   yPos: number;
 }): JSX.Element {
   const { types } = useContext(typesContext);
-  const { deleteNode, setNode } = useContext(FlowsContext);
+  const { deleteNode, setNode } = useFlow();
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -12,6 +12,7 @@ import { FlowsState } from "../../../types/tabs";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
+import useFlow from "../../../stores/flowManagerStore";
 
 export default function BuildTrigger({
   open,
@@ -24,7 +25,8 @@ export default function BuildTrigger({
   isBuilt: boolean;
 }): JSX.Element {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
-  const { setTabsState, saveFlow, nodes, edges } = useContext(FlowsContext);
+  const { setTabsState, saveFlow } = useContext(FlowsContext);
+  const { nodes, edges } = useFlow();
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";

src/frontend/src/components/chatComponent/index.tsx

@@ -9,11 +9,13 @@ import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
 import FormModal from "../../modals/formModal";
 import { NodeType } from "../../types/flow";
+import useFlow from "../../stores/flowManagerStore";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const { tabsState, isBuilt, setIsBuilt, isPending } =
+  const { isBuilt, setIsBuilt, isPending } = useFlow();
+  const { tabsState } =
     useContext(FlowsContext);
 
   useEffect(() => {

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -28,7 +28,6 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import { FlowsContext } from "../../contexts/flowsContext";
 import { useDarkStore } from "../../stores/darkStore";
 import { codeTabsPropsType } from "../../types/components";
 import {
@@ -41,6 +40,7 @@ import { classNames } from "../../utils/utils";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
 import KeypairListComponent from "../keypairListComponent";
+import useFlow from "../../stores/flowManagerStore";
 
 export default function CodeTabsComponent({
   flow,
@@ -55,7 +55,7 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const {dark} = useDarkStore();
 
-  const { setNodes } = useContext(FlowsContext);
+  const { setNodes } = useFlow();
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   useEffect(() => {

src/frontend/src/components/pageLayout/index.tsx

@@ -12,7 +12,7 @@ export default function PageLayout({
   description: string;
   children: React.ReactNode;
   button?: React.ReactNode;
-  betaIcon: boolean;
+  betaIcon?: boolean;
 }) {
   return (
     <div className="flex h-screen w-full flex-col">

src/frontend/src/contexts/flowsContext.tsx

@@ -75,40 +75,16 @@ const FlowsContextInitialValue: FlowsContextType = {
     flowData?: FlowType,
     override?: boolean
   ) => "",
-  deleteNode: () => {},
-  deleteEdge: () => {},
-  incrementNodeId: () => uid(),
   downloadFlow: (flow: FlowType) => {},
   downloadFlows: () => {},
   uploadFlows: () => {},
   uploadFlow: async () => "",
-  isBuilt: false,
-  setIsBuilt: (state: boolean) => {},
   saveFlow: async (flow?: FlowType, silent?: boolean) => {},
-  lastCopiedSelection: null,
-  setLastCopiedSelection: (selection: any) => {},
-  isPending: false,
-  setPending: (pending: boolean) => {},
   tabsState: {},
   setTabsState: () => {},
-  getNodeId: (nodeType: string) => "",
-  setTweak: (tweak: any) => {},
-  getTweak: [],
-  paste: (
-    selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
-  ) => {},
   saveComponent: async (component: NodeDataType, override: boolean) => "",
   deleteComponent: (key: string) => {},
   version: "",
-  nodes: [],
-  setNodes: () => {},
-  setNode: () => {},
-  getNode: () => undefined,
-  onNodesChange: () => {},
-  edges: [],
-  setEdges: () => {},
-  onEdgesChange: () => {},
 };
 
 export const FlowsContext = createContext<FlowsContextType>(
@@ -779,42 +755,21 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
     <FlowsContext.Provider
       value={{
         version,
+        flows,
         saveFlow,
-        isBuilt,
-        setIsBuilt,
-        lastCopiedSelection,
-        setLastCopiedSelection,
         tabId,
         setTabId,
-        flows,
-        incrementNodeId,
         removeFlow,
         addFlow,
         downloadFlow,
         downloadFlows,
         uploadFlows,
         uploadFlow,
-        getNodeId,
-        deleteNode,
-        deleteEdge,
-        isPending,
-        setPending,
         tabsState,
         setTabsState,
-        paste,
-        getTweak,
-        setTweak,
         isLoading,
         saveComponent,
         deleteComponent,
-        nodes,
-        setNodes,
-        setNode,
-        getNode,
-        onNodesChange,
-        edges,
-        setEdges,
-        onEdgesChange,
       }}
     >
       {children}

src/frontend/src/contexts/undoRedoContext.tsx

@@ -13,6 +13,7 @@ import {
 } from "../types/typesContext";
 import { isWrappedWithClass } from "../utils/utils";
 import { FlowsContext } from "./flowsContext";
+import useFlow from "../stores/flowManagerStore";
 
 const initialValue = {
   undo: () => {},
@@ -28,9 +29,11 @@ const defaultOptions: UseUndoRedoOptions = {
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
 export function UndoRedoProvider({ children }) {
-  const { tabId, flows, setNodes, setEdges, nodes, edges } =
+  const { tabId, flows } =
     useContext(FlowsContext);
 
+  const {setNodes, setEdges, nodes, edges} = useFlow();
+
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
   const [tabIndex, setTabIndex] = useState(

src/frontend/src/modals/ApiModal/index.tsx

@@ -48,7 +48,8 @@ const ApiModal = forwardRef(
     const [activeTab, setActiveTab] = useState("0");
     const tweak = useRef<tweakType>([]);
     const tweaksList = useRef<string[]>([]);
-    const { setTweak, getTweak, tabsState } = useContext(FlowsContext);
+    const { tabsState } = useContext(FlowsContext);
+    const [getTweak, setTweak] = useState<tweakType>([]);
     const pythonApiCode = getPythonApiCode(
       flow,
       autoLogin,

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -29,7 +29,6 @@ import {
   limitScrollFieldsModal,
 } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
-import { FlowsContext } from "../../contexts/flowsContext";
 import { NodeDataType } from "../../types/flow";
 import {
   convertObjToArray,
@@ -39,6 +38,7 @@ import {
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import useFlow from "../../stores/flowManagerStore";
 
 const EditNodeModal = forwardRef(
   (
@@ -57,7 +57,7 @@ const EditNodeModal = forwardRef(
   ) => {
     const [myData, setMyData] = useState(data);
 
-    const { setPending, edges, setNode } = useContext(FlowsContext);
+    const { setPending, edges, setNode } = useFlow();
     const { setModalContextOpen } = useContext(alertContext);
 
     function changeAdvanced(n) {

src/frontend/src/modals/formModal/index.tsx

@@ -25,6 +25,7 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { getBuildStatus } from "../../controllers/API";
+import useFlow from "../../stores/flowManagerStore";
 import { FlowsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
@@ -37,7 +38,8 @@ export default function FormModal({
   setOpen: (open: boolean) => void;
   flow: FlowType;
 }): JSX.Element {
-  const { tabsState, setTabsState, nodes, edges } = useContext(FlowsContext);
+  const { tabsState, setTabsState } = useContext(FlowsContext);
+  const { nodes, edges } = useFlow();
   const [chatValue, setChatValue] = useState(() => {
     try {
       const { formKeysData } = tabsState[flow.id];

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -221,10 +221,6 @@ export default function Page({
       if (event.dataTransfer.types.some((types) => types === "nodedata")) {
         takeSnapshot();
 
-        // Get the current bounds of the ReactFlow wrapper element
-        const reactflowBounds =
-          reactFlowWrapper.current?.getBoundingClientRect();
-
         // Extract the data from the drag event and parse it as a JSON object
         let data: { type: string; node?: APIClassType } = JSON.parse(
           event.dataTransfer.getData("nodedata")
@@ -356,7 +352,7 @@ export default function Page({
   const onMove = useCallback(() => {
     if (!isPending) setPending(true);
   }, [setPending]);
-
+  
   return (
     <div className="flex h-full overflow-hidden">
       {!view && <ExtraSidebar />}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -24,12 +24,14 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
+import useFlow from "../../../../stores/flowManagerStore";
 
 export default function ExtraSidebar(): JSX.Element {
   const { data, templates, getFilterEdge, setFilterEdge } =
     useContext(typesContext);
-  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, isPending } =
+  const { flows, tabId, uploadFlow, tabsState, saveFlow } =
     useContext(FlowsContext);
+  const { isBuilt, isPending } = useFlow();
   const { hasApiKey, validApiKey, hasStore } = useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -12,6 +12,7 @@ import { APIClassType } from "../../../../../types/api";
 import {
   createFlowComponent,
   downloadNode,
+  getNodeId,
 } from "../../../../../utils/reactflowUtils";
 import { removeCountFromString } from "../../../../../utils/utils";
 
@@ -35,7 +36,7 @@ export default function SidebarDraggableComponent({
   official: boolean;
 }) {
   const [open, setOpen] = useState(false);
-  const { getNodeId, deleteComponent, version } = useContext(FlowsContext);
+  const { deleteComponent, version } = useContext(FlowsContext);
   const { autoLogin, userData } = useContext(AuthContext);
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
   const popoverRef = useRef<HTMLDivElement>(null);

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -23,6 +23,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
+import useFlow from "../../../../stores/flowManagerStore";
 
 export default function NodeToolbarComponent({
   data,
@@ -49,7 +50,6 @@ export default function NodeToolbarComponent({
           data.node.template[templateField].type === "NestedDict")
     ).length
   );
-  const { getNodeId } = useContext(FlowsContext);
   const { hasApiKey, validApiKey, hasStore } = useContext(StoreContext);
 
   function canMinimize() {
@@ -65,13 +65,16 @@ export default function NodeToolbarComponent({
 
   const {
     paste,
-    saveComponent,
-    version,
-    flows,
     nodes,
     edges,
     setNodes,
     setEdges,
+  } = useFlow();
+
+  const {
+    saveComponent,
+    flows,
+    version,
   } = useContext(FlowsContext);
   const { takeSnapshot } = useContext(undoRedoContext);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@@ -120,7 +123,7 @@ export default function NodeToolbarComponent({
       case "ungroup":
         takeSnapshot();
         updateFlowPosition(position, data.node?.flow!);
-        expandGroupNode(data, getNodeId, nodes, edges, setNodes, setEdges);
+        expandGroupNode(data, nodes, edges, setNodes, setEdges);
         break;
       case "override":
         setShowOverrideModal(true);

src/frontend/src/stores/flowManagerStore.ts

@@ -37,6 +37,8 @@ type RFState = {
   onEdgesChange: OnEdgesChange;
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
   setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+  setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
+  getNode: (id: string) => Node | undefined;
   onConnect: OnConnect;
   deleteNode: (nodeId: string | Array<string>) => void;
   deleteEdge: (edgeId: string | Array<string>) => void;
@@ -45,6 +47,7 @@ type RFState = {
     position: { x: number; y: number; paneX?: number; paneY?: number }
     ) => void;
   isBuilt: boolean;
+  setIsBuilt: (isBuilt: boolean) => void;
   isPending: boolean;
   setPending: (pending: boolean) => void;
 };
@@ -58,6 +61,9 @@ const useFlow = create<RFState>((set, get) => ({
   nodes: [],
   edges: [],
   isBuilt: false,
+  setIsBuilt: (isBuilt) => {
+    set({ isBuilt });
+  },
   onNodesChange: (changes: NodeChange[]) => {
     set({
       nodes: applyNodeChanges(changes, get().nodes),
@@ -82,6 +88,24 @@ const useFlow = create<RFState>((set, get) => ({
 
     set({ edges: newChange });
   },
+  setNode: (id: string, change: Node | ((oldState: Node) => Node)) => {
+    let newChange =
+      typeof change === "function"
+        ? change(get().nodes.find((node) => node.id === id)!)
+        : change;
+
+    get().setNodes((oldNodes) =>
+      oldNodes.map((node) => {
+        if (node.id === id) {
+          return newChange;
+        }
+        return node;
+      })
+    );
+  },
+  getNode: (id: string) => {
+    return get().nodes.find((node) => node.id === id);
+  },
   onConnect: (connection: Connection) => {
     set({
       edges: addEdge(

src/frontend/src/types/tabs/index.ts

@@ -12,10 +12,6 @@ export type FlowsContextType = {
   isLoading: boolean;
   setTabId: (index: string) => void;
   //keep
-  flows: Array<FlowType>;
-  deleteNode: (idx: string | Array<string>) => void;
-  deleteEdge: (idx: string | Array<string>) => void;
-  //keep
   removeFlow: (id: string) => void;
   //keep
   addFlow: (
@@ -24,7 +20,6 @@ export type FlowsContextType = {
     override?: boolean,
     position?: XYPosition
   ) => Promise<String | undefined>;
-  incrementNodeId: () => string;
   downloadFlow: (
     flow: FlowType,
     flowName: string,
@@ -34,8 +29,6 @@ export type FlowsContextType = {
   downloadFlows: () => void;
   //keep
   uploadFlows: () => void;
-  isBuilt: boolean;
-  setIsBuilt: (state: boolean) => void;
   uploadFlow: ({
     newProject,
     file,
@@ -47,35 +40,17 @@ export type FlowsContextType = {
     isComponent?: boolean;
     position?: XYPosition;
   }) => Promise<String | never>;
-  getNodeId: (nodeType: string) => string;
-  isPending: boolean;
-  setPending: (pending: boolean) => void;
   tabsState: FlowsState;
   setTabsState: (
     update: FlowsState | ((oldState: FlowsState) => FlowsState)
   ) => void;
-  paste: (
-    selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
-  ) => void;
-  lastCopiedSelection: { nodes: any; edges: any } | null;
-  setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
-  setTweak: (tweak: tweakType) => tweakType | void;
-  getTweak: tweakType;
   saveComponent: (
     component: NodeDataType,
     override: boolean
   ) => Promise<String | undefined>;
   deleteComponent: (key: string) => void;
   version: string;
-  nodes: Array<Node>;
+  flows: Array<FlowType>;
-  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-  setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
-  getNode: (id: string) => Node | undefined;
-  onNodesChange: OnChange<NodeChange>;
-  edges: Array<Edge>;
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
-  onEdgesChange: OnChange<EdgeChange>;
 };
 
 export type FlowsState = {

src/frontend/src/utils/reactflowUtils.ts

@@ -924,7 +924,6 @@ function updateEdgesIds(edges: Edge[], idsMap: { [key: string]: string }) {
 
 export function expandGroupNode(
   groupNode: NodeDataType,
-  getNodeId: (type: string) => string,
   nodes: Node[],
   edges: Edge[],
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,