Get types done at App.tsx and fixed handle position

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",

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",

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) => {

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<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(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({
   ) : (
     <div
       ref={ref}
-      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
+      className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
     >
       <>
         <div
@@ -373,7 +358,6 @@ export default function ParameterComponent({
                   )}
                   style={{
                     borderColor: color,
-                    top: position,
                   }}
                   onClick={() => {
                     setFilterEdge(groupedEdge.current);

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<void> {
     // 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,

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);

src/frontend/src/stores/flowStore.ts

@@ -38,18 +38,23 @@ const useFlowStore = create<FlowStoreType>((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<FlowStoreType>((set, get) => ({
     set({ nodes: newChange });
   },
   setEdges: (change) => {
+    console.log("d")
+
     let newChange = typeof change === "function" ? change(get().edges) : change;
 
     set({ edges: newChange });

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;