From 75326cad27c76954dea47afcbd19526806c5c0e6 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 5 Jan 2024 11:20:02 -0300 Subject: [PATCH] Changed every flowsContext to useFlow --- .../components/parameterComponent/index.tsx | 4 +- .../src/CustomNodes/GenericNode/index.tsx | 4 +- .../chatComponent/buildTrigger/index.tsx | 4 +- .../src/components/chatComponent/index.tsx | 4 +- .../components/codeTabsComponent/index.tsx | 4 +- .../src/components/pageLayout/index.tsx | 2 +- src/frontend/src/contexts/flowsContext.tsx | 47 +------------------ src/frontend/src/contexts/undoRedoContext.tsx | 5 +- src/frontend/src/modals/ApiModal/index.tsx | 3 +- .../src/modals/EditNodeModal/index.tsx | 4 +- src/frontend/src/modals/formModal/index.tsx | 4 +- .../components/PageComponent/index.tsx | 6 +-- .../extraSidebarComponent/index.tsx | 4 +- .../sideBarDraggableComponent/index.tsx | 3 +- .../components/nodeToolbarComponent/index.tsx | 13 +++-- src/frontend/src/stores/flowManagerStore.ts | 24 ++++++++++ src/frontend/src/types/tabs/index.ts | 27 +---------- src/frontend/src/utils/reactflowUtils.ts | 1 - 18 files changed, 65 insertions(+), 98 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 27e685c5e..fc0ed31a9 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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; diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index eb6d27137..6d343f9cd 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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); diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 2370772ce..65531e995 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/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" : ""; diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index dcee84ade..b07732a64 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/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(() => { diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index f86fe370e..e4e4bbb60 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/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([]); const {dark} = useDarkStore(); - const { setNodes } = useContext(FlowsContext); + const { setNodes } = useFlow(); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); useEffect(() => { diff --git a/src/frontend/src/components/pageLayout/index.tsx b/src/frontend/src/components/pageLayout/index.tsx index 9af894730..fb10f9550 100644 --- a/src/frontend/src/components/pageLayout/index.tsx +++ b/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 (
diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index 0b9f1fbec..80851d945 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/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( @@ -779,42 +755,21 @@ export function FlowsProvider({ children }: { children: ReactNode }) { {children} diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx index 2c15210ce..f4b50beb0 100644 --- a/src/frontend/src/contexts/undoRedoContext.tsx +++ b/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(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(flows.map(() => [])); const [future, setFuture] = useState(flows.map(() => [])); const [tabIndex, setTabIndex] = useState( diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 93d85549d..97a476363 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -48,7 +48,8 @@ const ApiModal = forwardRef( const [activeTab, setActiveTab] = useState("0"); const tweak = useRef([]); const tweaksList = useRef([]); - const { setTweak, getTweak, tabsState } = useContext(FlowsContext); + const { tabsState } = useContext(FlowsContext); + const [getTweak, setTweak] = useState([]); const pythonApiCode = getPythonApiCode( flow, autoLogin, diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 131db81a0..d2e4a9e77 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/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) { diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 83bd3f9b7..71115aef8 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/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]; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 7a8582501..17777adcd 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/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 (
{!view && } diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 909a0dcd7..5f09cfa40 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx index 07aacaefc..0d1bcdddb 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/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(null); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 83a7b7b3a..26dfd0333 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/stores/flowManagerStore.ts b/src/frontend/src/stores/flowManagerStore.ts index 29404e37f..db6501460 100644 --- a/src/frontend/src/stores/flowManagerStore.ts +++ b/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) => void; deleteEdge: (edgeId: string | Array) => 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((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((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( diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 68f7447e7..c5c0e680b 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -12,10 +12,6 @@ export type FlowsContextType = { isLoading: boolean; setTabId: (index: string) => void; //keep - flows: Array; - deleteNode: (idx: string | Array) => void; - deleteEdge: (idx: string | Array) => void; - //keep removeFlow: (id: string) => void; //keep addFlow: ( @@ -24,7 +20,6 @@ export type FlowsContextType = { override?: boolean, position?: XYPosition ) => Promise; - 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; - 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; deleteComponent: (key: string) => void; version: string; - nodes: Array; - setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void; - setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void; - getNode: (id: string) => Node | undefined; - onNodesChange: OnChange; - edges: Array; - setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void; - onEdgesChange: OnChange; + flows: Array; }; export type FlowsState = { diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 91fd39c83..a2a12ba29 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/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,