diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 7b20a673b..8ef4b20ce 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -13,6 +13,7 @@ "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@mui/material": "^5.14.7", + "@preact/signals-react": "^2.0.0", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", @@ -1466,6 +1467,31 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@preact/signals-core": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz", + "integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/@preact/signals-react": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz", + "integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==", + "dependencies": { + "@preact/signals-core": "^1.5.1", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "react": "^16.14.0 || 17.x || 18.x" + } + }, "node_modules/@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", @@ -12607,6 +12633,20 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@preact/signals-core": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz", + "integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==" + }, + "@preact/signals-react": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz", + "integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==", + "requires": { + "@preact/signals-core": "^1.5.1", + "use-sync-external-store": "^1.2.0" + } + }, "@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index d5783e648..015b6d9a2 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -8,6 +8,7 @@ "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@mui/material": "^5.14.7", + "@preact/signals-react": "^2.0.0", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index b1a5dcd69..e2ead96d9 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -132,12 +132,14 @@ export default function App() { const { getAuthentication } = useContext(AuthContext); const { refreshFlows, setVersion } = useContext(FlowsContext); + const { getTypes } = useContext(typesContext); useEffect(() => { // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks. if (getAuthentication() === true) { // get data from db refreshFlows(); + getTypes(); } getVersion().then((data) => { diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 74503ddc2..8e73c40e5 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -6,7 +6,7 @@ import React, { useRef, useState, } from "react"; -import { Handle, Position, useUpdateNodeInternals } from "reactflow"; +import { Handle, Position } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent"; import DictComponent from "../../../../components/dictComponent"; @@ -69,8 +69,6 @@ export default function ParameterComponent({ const refHtml = useRef(null); const infoHtml = useRef(null); const setErrorData = useAlertStore((state) => state.setErrorData); - const updateNodeInternals = useUpdateNodeInternals(); - const [position, setPosition] = useState(0); const { tabId, flows } = useContext(FlowsContext); const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); @@ -78,18 +76,6 @@ export default function ParameterComponent({ const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null; - // Update component position - useEffect(() => { - if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { - setPosition(ref.current.offsetTop + ref.current.clientHeight / 2); - updateNodeInternals(data.id); - } - }, [data.id, ref, ref.current, ref.current?.offsetTop, updateNodeInternals]); - - useEffect(() => { - updateNodeInternals(data.id); - }, [data.id, position, updateNodeInternals]); - const groupedEdge = useRef(null); const { setFilterEdge } = useContext(typesContext); @@ -300,7 +286,6 @@ export default function ParameterComponent({ )} style={{ borderColor: color, - top: position, }} onClick={() => { setFilterEdge(groupedEdge.current); @@ -313,7 +298,7 @@ export default function ParameterComponent({ ) : (
<>
{ setFilterEdge(groupedEdge.current); diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 8e12c0797..16deecf00 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -21,6 +21,7 @@ const initialValue: typesContextType = { setTemplates: () => {}, data: {}, setData: () => {}, + getTypes: () => {}, setFetchError: () => {}, fetchError: false, setFilterEdge: (filter) => {}, @@ -35,16 +36,8 @@ export function TypesProvider({ children }: { children: ReactNode }) { const [data, setData] = useState({}); const [fetchError, setFetchError] = useState(false); const setLoading = useAlertStore((state) => state.setLoading); - const { getAuthentication } = useContext(AuthContext); const [getFilterEdge, setFilterEdge] = useState([]); - useEffect(() => { - // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks. - if (getAuthentication() === true) { - getTypes(); - } - }, [getAuthentication()]); - async function getTypes(): Promise { // We will keep a flag to handle the case where the component is unmounted before the API call resolves. let isMounted = true; @@ -99,6 +92,7 @@ export function TypesProvider({ children }: { children: ReactNode }) { templates, data, setData, + getTypes, fetchError, setFetchError, setFilterEdge, diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index b86b0d02a..2a2544997 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -17,6 +17,8 @@ import ReactFlow, { SelectionDragHandler, addEdge, updateEdge, + useEdgesState, + useNodesState, } from "reactflow"; import GenericNode from "../../../../CustomNodes/GenericNode"; import Chat from "../../../../components/chatComponent"; @@ -67,6 +69,7 @@ export default function Page({ const setReactFlowInstance = useFlowStore( (state) => state.setReactFlowInstance ); + const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); const onNodesChange = useFlowStore((state) => state.onNodesChange); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 16d7985e4..900ca4370 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -38,18 +38,23 @@ const useFlowStore = create((set, get) => ({ set({ isBuilt }); }, onNodesChange: (changes: NodeChange[]) => { + console.log("a") set({ nodes: applyNodeChanges(changes, get().nodes), }); if (!get().isPending) set({ isPending: true }); }, onEdgesChange: (changes: EdgeChange[]) => { + console.log("b") + set({ edges: applyEdgeChanges(changes, get().edges), }); if (!get().isPending) set({ isPending: true }); }, setNodes: (change) => { + console.log("c") + let newChange = typeof change === "function" ? change(get().nodes) : change; let newEdges = cleanEdges(newChange, get().edges); @@ -57,6 +62,8 @@ const useFlowStore = create((set, get) => ({ set({ nodes: newChange }); }, setEdges: (change) => { + console.log("d") + let newChange = typeof change === "function" ? change(get().edges) : change; set({ edges: newChange }); diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index dc877244b..e0d9644ef 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/src/frontend/src/types/typesContext/index.ts @@ -13,6 +13,7 @@ export type typesContextType = { setTemplates: (newState: {}) => void; data: APIDataType; setData: (newState: {}) => void; + getTypes: () => void; fetchError: boolean; setFetchError: (newState: boolean) => void; setFilterEdge: (newState) => void;