Refactor: Change more variables names

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

@@ -1,5 +1,11 @@
 import { cloneDeep } from "lodash";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -17,6 +23,7 @@ import { TOOLTIP_EMPTY } from "../../../../constants/constants";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
+import { TabsState } from "../../../../types/tabs";
 import { isValidConnection } from "../../../../utils/reactflowUtils";
 import {
   nodeColors,
@@ -38,15 +45,15 @@ export default function ParameterComponent({
   required = false,
   optionalHandle = null,
   info = "",
-}: ParameterComponentType) {
-  const ref = useRef(null);
-  const refHtml = useRef(null);
-  const infoHtml = useRef(null);
+}: ParameterComponentType): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+  const refHtml = useRef<HTMLDivElement & ReactNode>(null);
+  const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { setTabsState, tabId, save, flows } = useContext(TabsContext);
 
-  const flow = flows.find((f) => f.id === tabId).data?.nodes ?? null;
+  const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 
   // Update component position
   useEffect(() => {
@@ -62,16 +69,17 @@ export default function ParameterComponent({
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
-    reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+    reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ?? false;
 
   const { data: myData } = useContext(typesContext);
 
-  const handleOnNewValue = (newValue: any) => {
+  const handleOnNewValue = (newValue: string | string[] | boolean): void => {
     let newData = cloneDeep(data);
-    newData.node.template[name].value = newValue;
+    newData.node!.template[name].value = newValue;
     setData(newData);
     // Set state to pending
-    setTabsState((prev) => {
+    //@ts-ignore
+    setTabsState((prev: TabsState) => {
       return {
         ...prev,
         [tabId]: {
@@ -86,10 +94,11 @@ export default function ParameterComponent({
 
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
+    // @ts-ignore
     infoHtml.current = (
-      <div className="h-full w-full word-break-break-word">
-        {info.split("\n").map((line, i) => (
-          <p key={i} className="block">
+      <div className="h-full w-full break-words">
+        {info.split("\n").map((line, index) => (
+          <p key={index} className="block">
             {line}
           </p>
         ))}
@@ -98,18 +107,19 @@ export default function ParameterComponent({
   }, [info]);
 
   function renderTooltips() {
-    let groupedObj = groupByFamily(myData, tooltipTitle, left, flow);
+    let groupedObj = groupByFamily(myData, tooltipTitle!, left, flow!);
 
     if (groupedObj && groupedObj.length > 0) {
-      refHtml.current = groupedObj.map((item, i) => {
+      //@ts-ignore
+      refHtml.current = groupedObj.map((item, index) => {
         const Icon: any =
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
 
         return (
           <span
-            key={i}
+            key={index}
             className={classNames(
-              i > 0 ? "mt-2 flex items-center" : "flex items-center"
+              index > 0 ? "mt-2 flex items-center" : "flex items-center"
             )}
           >
             <div
@@ -132,10 +142,10 @@ export default function ParameterComponent({
                 {" "}
                 {item.type === "" ? "" : " - "}
                 {item.type.split(", ").length > 2
-                  ? item.type.split(", ").map((el, i) => (
-                      <React.Fragment key={el + i}>
+                  ? item.type.split(", ").map((el, index) => (
+                      <React.Fragment key={el + index}>
                         <span>
-                          {i === item.type.split(", ").length - 1
+                          {index === item.type.split(", ").length - 1
                             ? el
                             : (el += `, `)}
                         </span>
@@ -148,6 +158,7 @@ export default function ParameterComponent({
         );
       });
     } else {
+      //@ts-ignore
       refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
     }
   }
@@ -207,7 +218,7 @@ export default function ParameterComponent({
               position={left ? Position.Left : Position.Right}
               id={id}
               isValidConnection={(connection) =>
-                isValidConnection(connection, reactFlowInstance)
+                isValidConnection(connection, reactFlowInstance!)
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
@@ -223,9 +234,9 @@ export default function ParameterComponent({
 
         {left === true &&
         type === "str" &&
-        !data.node.template[name].options ? (
+        !data.node?.template[name].options ? (
           <div className="mt-2 w-full">
-            {data.node.template[name].list ? (
+            {data.node?.template[name].list ? (
               <InputListComponent
                 disabled={disabled}
                 value={
@@ -236,7 +247,7 @@ export default function ParameterComponent({
                 }
                 onChange={handleOnNewValue}
               />
-            ) : data.node.template[name].multiline ? (
+            ) : data.node?.template[name].multiline ? (
               <TextAreaComponent
                 disabled={disabled}
                 value={data.node.template[name].value ?? ""}
@@ -245,8 +256,8 @@ export default function ParameterComponent({
             ) : (
               <InputComponent
                 disabled={disabled}
-                password={data.node.template[name].password ?? false}
-                value={data.node.template[name].value ?? ""}
+                password={data.node?.template[name].password ?? false}
+                value={data.node?.template[name].value ?? ""}
                 onChange={handleOnNewValue}
               />
             )}
@@ -255,9 +266,9 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <ToggleShadComponent
               disabled={disabled}
-              enabled={data.node.template[name].value ?? false}
-              setEnabled={(t) => {
-                handleOnNewValue(t);
+              enabled={data.node?.template[name].value ?? false}
+              setEnabled={(isEnabled) => {
+                handleOnNewValue(isEnabled);
               }}
               size="large"
             />
@@ -266,13 +277,13 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <FloatComponent
               disabled={disabled}
-              value={data.node.template[name].value ?? ""}
+              value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />
           </div>
         ) : left === true &&
           type === "str" &&
-          data.node.template[name].options ? (
+          data.node?.template[name].options ? (
           <div className="mt-2 w-full">
             <Dropdown
               options={data.node.template[name].options}
@@ -283,13 +294,13 @@ export default function ParameterComponent({
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">
             <CodeAreaComponent
-              dynamic={data.node.template[name].dynamic ?? false}
+              dynamic={data.node?.template[name].dynamic ?? false}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
               }}
               nodeClass={data.node}
               disabled={disabled}
-              value={data.node.template[name].value ?? ""}
+              value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />
           </div>
@@ -297,12 +308,12 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <InputFileComponent
               disabled={disabled}
-              value={data.node.template[name].value ?? ""}
+              value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
-              fileTypes={data.node.template[name].fileTypes}
-              suffixes={data.node.template[name].suffixes}
-              onFileChange={(t: string) => {
-                data.node.template[name].file_path = t;
+              fileTypes={data.node?.template[name].fileTypes}
+              suffixes={data.node?.template[name].suffixes}
+              onFileChange={(filePath: string) => {
+                data.node!.template[name].file_path = filePath;
                 save();
               }}
             ></InputFileComponent>
@@ -311,7 +322,7 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <IntComponent
               disabled={disabled}
-              value={data.node.template[name].value ?? ""}
+              value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />
           </div>
@@ -324,7 +335,7 @@ export default function ParameterComponent({
               }}
               nodeClass={data.node}
               disabled={disabled}
-              value={data.node.template[name].value ?? ""}
+              value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />
           </div>

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

@@ -159,52 +159,52 @@ export default function GenericNode({
 
           <>
             {Object.keys(data.node.template)
-              .filter((t) => t.charAt(0) !== "_")
-              .map((t: string, idx) => (
+              .filter((templateName) => templateName.charAt(0) !== "_")
+              .map((templateName: string, idx) => (
                 <div key={idx}>
-                  {data.node.template[t].show &&
-                  !data.node.template[t].advanced ? (
+                  {data.node.template[templateName].show &&
+                  !data.node.template[templateName].advanced ? (
                     <ParameterComponent
                       key={
-                        (data.node.template[t].input_types?.join(";") ??
-                          data.node.template[t].type) +
+                        (data.node.template[templateName].input_types?.join(";") ??
+                          data.node.template[templateName].type) +
                         "|" +
-                        t +
+                        templateName +
                         "|" +
                         data.id
                       }
                       data={data}
                       setData={setData}
                       color={
-                        nodeColors[types[data.node.template[t].type]] ??
-                        nodeColors[data.node.template[t].type] ??
+                        nodeColors[types[data.node.template[templateName].type]] ??
+                        nodeColors[data.node.template[templateName].type] ??
                         nodeColors.unknown
                       }
                       title={
-                        data.node.template[t].display_name
-                          ? data.node.template[t].display_name
-                          : data.node.template[t].name
-                          ? toTitleCase(data.node.template[t].name)
-                          : toTitleCase(t)
+                        data.node.template[templateName].display_name
+                          ? data.node.template[templateName].display_name
+                          : data.node.template[templateName].name
+                          ? toTitleCase(data.node.template[templateName].name)
+                          : toTitleCase(templateName)
                       }
-                      info={data.node.template[t].info}
-                      name={t}
+                      info={data.node.template[templateName].info}
+                      name={templateName}
                       tooltipTitle={
-                        data.node.template[t].input_types?.join("\n") ??
-                        data.node.template[t].type
+                        data.node.template[templateName].input_types?.join("\n") ??
+                        data.node.template[templateName].type
                       }
-                      required={data.node.template[t].required}
+                      required={data.node.template[templateName].required}
                       id={
-                        (data.node.template[t].input_types?.join(";") ??
-                          data.node.template[t].type) +
+                        (data.node.template[templateName].input_types?.join(";") ??
+                          data.node.template[templateName].type) +
                         "|" +
-                        t +
+                        templateName +
                         "|" +
                         data.id
                       }
                       left={true}
-                      type={data.node.template[t].type}
-                      optionalHandle={data.node.template[t].input_types}
+                      type={data.node.template[templateName].type}
+                      optionalHandle={data.node.template[templateName].input_types}
                     />
                   ) : (
                     <></>

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -22,9 +22,9 @@ export default function AlertDropdown({ children }: AlertDropdownType) {
   return (
     <Popover
       open={open}
-      onOpenChange={(k) => {
-        setOpen(k);
-        if (k) setNotificationCenter(false);
+      onOpenChange={(target) => {
+        setOpen(target);
+        if (target) setNotificationCenter(false);
       }}
     >
       <PopoverTrigger>{children}</PopoverTrigger>

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -55,12 +55,12 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   };
 
   const [desc, setDesc] = useState(
-    flows.find((f) => f.id === tabId).description
+    flows.find((flow) => flow.id === tabId).description
   );
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    flows.find((f) => f.id === tabId).description = event.target.value;
-    setDesc(flows.find((f) => f.id === tabId).description);
+    flows.find((flow) => flow.id === tabId).description = event.target.value;
+    setDesc(flows.find((flow) => flow.id === tabId).description);
     setDescription(event.target.value);
   };
 

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -34,9 +34,9 @@ export default function CodeAreaComponent({
         value={myValue}
         nodeClass={nodeClass}
         setNodeClass={setNodeClass}
-        setValue={(t: string) => {
-          setMyValue(t);
-          onChange(t);
+        setValue={(value: string) => {
+          setMyValue(value);
+          onChange(value);
         }}
       >
         <div className="flex w-full items-center">

src/frontend/src/components/floatComponent/index.tsx

@@ -25,12 +25,12 @@ export default function FloatComponent({
         type="number"
         step={step}
         min={min}
-        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
-          if (e.target.value < min.toString()) {
-            e.target.value = min.toString();
+        onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
+          if (event.target.value < min.toString()) {
+            event.target.value = min.toString();
           }
-          if (e.target.value > max.toString()) {
-            e.target.value = max.toString();
+          if (event.target.value > max.toString()) {
+            event.target.value = max.toString();
           }
         }}
         max={max}
@@ -40,8 +40,8 @@ export default function FloatComponent({
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
         }
-        onChange={(e) => {
-          onChange(e.target.value);
+        onChange={(event) => {
+          onChange(event.target.value);
         }}
       />
     </div>

src/frontend/src/components/headerComponent/index.tsx

@@ -34,7 +34,7 @@ export default function Header() {
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
-        {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
+        {flows.findIndex((flow) => tabId === flow.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -31,8 +31,8 @@ export default function InputComponent({
           password && !editNode ? "pr-10" : ""
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
-        onChange={(e) => {
-          onChange(e.target.value);
+        onChange={(event) => {
+          onChange(event.target.value);
         }}
       />
       {password && (

src/frontend/src/components/inputFileComponent/index.tsx

@@ -49,11 +49,11 @@ export default function InputFileComponent({
     input.style.display = "none"; // Hidden from view
     input.multiple = false; // Allow only one file selection
 
-    input.onchange = (e: Event) => {
+    input.onchange = (event: Event) => {
       setLoading(true);
 
       // Get the selected file
-      const file = (e.target as HTMLInputElement).files?.[0];
+      const file = (event.target as HTMLInputElement).files?.[0];
 
       // Check if the file type is correct
       if (file && checkFileType(file.name)) {

src/frontend/src/components/inputListComponent/index.tsx

@@ -25,18 +25,18 @@ export default function InputListComponent({
         "flex flex-col gap-3"
       )}
     >
-      {value.map((i, idx) => {
+      {value.map((singleValue, idx) => {
         return (
           <div key={idx} className="flex w-full gap-3">
             <Input
               disabled={disabled}
               type="text"
-              value={i}
+              value={singleValue}
               className={editNode ? "input-edit-node" : ""}
               placeholder="Type something..."
-              onChange={(e) => {
+              onChange={(event) => {
                 let newInputList = _.cloneDeep(value);
-                newInputList[idx] = e.target.value;
+                newInputList[idx] = event.target.value;
                 onChange(newInputList);
               }}
             />

src/frontend/src/components/intComponent/index.tsx

@@ -41,17 +41,17 @@ export default function IntComponent({
         type="number"
         step="1"
         min={min}
-        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
-          if (e.target.value < min.toString()) {
-            e.target.value = min.toString();
+        onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
+          if (event.target.value < min.toString()) {
+            event.target.value = min.toString();
           }
         }}
         value={value ?? ""}
         className={editNode ? "input-edit-node" : ""}
         disabled={disabled}
         placeholder={editNode ? "Integer number" : "Type an integer number"}
-        onChange={(e) => {
-          onChange(e.target.value);
+        onChange={(event) => {
+          onChange(event.target.value);
         }}
       />
     </div>

src/frontend/src/components/promptComponent/index.tsx

@@ -39,8 +39,8 @@ export default function PromptAreaComponent({
         value={value}
         buttonText="Check & Save"
         modalTitle="Edit Prompt"
-        setValue={(t: string) => {
-          onChange(t);
+        setValue={(value: string) => {
+          onChange(value);
         }}
         nodeClass={nodeClass}
         setNodeClass={setNodeClass}

src/frontend/src/components/textAreaComponent/index.tsx

@@ -25,8 +25,8 @@ export default function TextAreaComponent({
         disabled={disabled}
         className={editNode ? "input-edit-node" : ""}
         placeholder={"Type something..."}
-        onChange={(e) => {
-          onChange(e.target.value);
+        onChange={(event) => {
+          onChange(event.target.value);
         }}
       />
       <div>
@@ -35,8 +35,8 @@ export default function TextAreaComponent({
           buttonText="Finishing Editing"
           modalTitle="Edit Text"
           value={value}
-          setValue={(t: string) => {
-            onChange(t);
+          setValue={(value: string) => {
+            onChange(value);
           }}
         >
           {!editNode && (

src/frontend/src/components/toggleComponent/index.tsx

@@ -18,8 +18,8 @@ export default function ToggleComponent({
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <Switch
         checked={enabled}
-        onChange={(x: boolean) => {
-          setEnabled(x);
+        onChange={(isEnabled: boolean) => {
+          setEnabled(isEnabled);
         }}
         className={classNames(
           enabled ? "bg-primary" : "bg-input",

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -35,8 +35,8 @@ export default function ToggleShadComponent({
         disabled={disabled}
         className=""
         checked={enabled}
-        onCheckedChange={(x: boolean) => {
-          setEnabled(x);
+        onCheckedChange={(isEnabled: boolean) => {
+          setEnabled(isEnabled);
         }}
       ></Switch>
     </div>

src/frontend/src/components/ui/rename-label.tsx

@@ -15,8 +15,8 @@ export default function RenameLabel(props) {
   useEffect(() => {
     if (isRename) {
       setMyValue(props.value);
-      document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
           setIsRename(false);
           props.setValue("");
         }
@@ -67,8 +67,8 @@ export default function RenameLabel(props) {
             }
           }}
           value={myValue}
-          onChange={(e) => {
-            setMyValue(e.target.value);
+          onChange={(event) => {
+            setMyValue(event.target.value);
           }}
         />
       ) : (

src/frontend/src/contexts/tabsContext.tsx

@@ -316,11 +316,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     const input = document.createElement("input");
     input.type = "file";
     // add a change event listener to the file input
-    input.onchange = (e: Event) => {
+    input.onchange = (event: Event) => {
       // check if the file type is application/json
-      if ((e.target as HTMLInputElement).files[0].type === "application/json") {
+      if ((event.target as HTMLInputElement).files[0].type === "application/json") {
         // get the file from the file input
-        const file = (e.target as HTMLInputElement).files[0];
+        const file = (event.target as HTMLInputElement).files[0];
         // read the file as text
         const formData = new FormData();
         formData.append("file", file);
@@ -359,12 +359,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     let idsMap = {};
     let nodes = reactFlowInstance.getNodes();
     let edges = reactFlowInstance.getEdges();
-    selectionInstance.nodes.forEach((n) => {
-      if (n.position.y < minimumY) {
-        minimumY = n.position.y;
+    selectionInstance.nodes.forEach((node) => {
+      if (node.position.y < minimumY) {
+        minimumY = node.position.y;
       }
-      if (n.position.x < minimumX) {
-        minimumX = n.position.x;
+      if (node.position.x < minimumX) {
+        minimumX = node.position.x;
       }
     });
 
@@ -372,43 +372,43 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       ? { x: position.paneX + position.x, y: position.paneY + position.y }
       : reactFlowInstance.project({ x: position.x, y: position.y });
 
-    selectionInstance.nodes.forEach((n: NodeType) => {
+    selectionInstance.nodes.forEach((node: NodeType) => {
       // Generate a unique node ID
-      let newId = getNodeId(n.data.type);
-      idsMap[n.id] = newId;
+      let newId = getNodeId(node.data.type);
+      idsMap[node.id] = newId;
 
       // Create a new node object
       const newNode: NodeType = {
         id: newId,
         type: "genericNode",
         position: {
-          x: insidePosition.x + n.position.x - minimumX,
-          y: insidePosition.y + n.position.y - minimumY,
+          x: insidePosition.x + node.position.x - minimumX,
+          y: insidePosition.y + node.position.y - minimumY,
         },
         data: {
-          ..._.cloneDeep(n.data),
+          ..._.cloneDeep(node.data),
           id: newId,
         },
       };
 
       // Add the new node to the list of nodes in state
       nodes = nodes
-        .map((e) => ({ ...e, selected: false }))
+        .map((node) => ({ ...node, selected: false }))
         .concat({ ...newNode, selected: false });
     });
     reactFlowInstance.setNodes(nodes);
 
-    selectionInstance.edges.forEach((e) => {
-      let source = idsMap[e.source];
-      let target = idsMap[e.target];
-      let sourceHandleSplitted = e.sourceHandle.split("|");
+    selectionInstance.edges.forEach((edge) => {
+      let source = idsMap[edge.source];
+      let target = idsMap[edge.target];
+      let sourceHandleSplitted = edge.sourceHandle.split("|");
       let sourceHandle =
         sourceHandleSplitted[0] +
         "|" +
         source +
         "|" +
         sourceHandleSplitted.slice(2).join("|");
-      let targetHandleSplitted = e.targetHandle.split("|");
+      let targetHandleSplitted = edge.targetHandle.split("|");
       let targetHandle =
         targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
       let id =
@@ -433,7 +433,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
-        edges.map((e) => ({ ...e, selected: false }))
+        edges.map((edge) => ({ ...edge, selected: false }))
       );
     });
     reactFlowInstance.setEdges(edges);

src/frontend/src/contexts/typesContext.tsx

@@ -88,12 +88,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
 
   function deleteNode(idx: string) {
     reactFlowInstance.setNodes(
-      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
+      reactFlowInstance.getNodes().filter((node: Node) => node.id !== idx)
     );
     reactFlowInstance.setEdges(
       reactFlowInstance
         .getEdges()
-        .filter((ns) => ns.source !== idx && ns.target !== idx)
+        .filter((edge) => edge.source !== idx && edge.target !== idx)
     );
   }
   return (

src/frontend/src/contexts/undoRedoContext.tsx

@@ -45,14 +45,14 @@ export function UndoRedoProvider({ children }) {
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
   const [tabIndex, setTabIndex] = useState(
-    flows.findIndex((f) => f.id === tabId)
+    flows.findIndex((flow) => flow.id === tabId)
   );
 
   useEffect(() => {
     // whenever the flows variable changes, we need to add one array to the past and future states
-    setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
-    setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
-    setTabIndex(flows.findIndex((f) => f.id === tabId));
+    setPast((old) => flows.map((flow, index) => (old[index] ? old[index] : [])));
+    setFuture((old) => flows.map((flow, index) => (old[index] ? old[index] : [])));
+    setTabIndex(flows.findIndex((flow) => flow.id === tabId));
   }, [flows, tabId]);
 
   const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();

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

@@ -181,22 +181,22 @@ const ApiModal = forwardRef(
     function filterNodes() {
       let arrNodesWithValues = [];
 
-      flow["data"]["nodes"].forEach((t) => {
-        Object.keys(t["data"]["node"]["template"])
+      flow["data"]["nodes"].forEach((node) => {
+        Object.keys(node["data"]["node"]["template"])
           .filter(
-            (n) =>
-              n.charAt(0) !== "_" &&
-              t.data.node.template[n].show &&
-              (t.data.node.template[n].type === "str" ||
-                t.data.node.template[n].type === "bool" ||
-                t.data.node.template[n].type === "float" ||
-                t.data.node.template[n].type === "code" ||
-                t.data.node.template[n].type === "prompt" ||
-                t.data.node.template[n].type === "file" ||
-                t.data.node.template[n].type === "int")
+            (templateName) =>
+              templateName.charAt(0) !== "_" &&
+              node.data.node.template[templateName].show &&
+              (node.data.node.template[templateName].type === "str" ||
+                node.data.node.template[templateName].type === "bool" ||
+                node.data.node.template[templateName].type === "float" ||
+                node.data.node.template[templateName].type === "code" ||
+                node.data.node.template[templateName].type === "prompt" ||
+                node.data.node.template[templateName].type === "file" ||
+                node.data.node.template[templateName].type === "int")
           )
           .map((n, i) => {
-            arrNodesWithValues.push(t["id"]);
+            arrNodesWithValues.push(node["id"]);
           });
       });