From 1f93cb551303226ee91f89375dc98f4178e58b48 Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Mon, 7 Aug 2023 17:14:54 -0300 Subject: [PATCH] Refactor: Change more variables names --- .../components/parameterComponent/index.tsx | 91 ++++++----- .../src/CustomNodes/GenericNode/index.tsx | 48 +++--- .../src/alerts/alertDropDown/index.tsx | 6 +- .../EditFlowSettingsComponent/index.tsx | 6 +- .../components/codeAreaComponent/index.tsx | 6 +- .../src/components/floatComponent/index.tsx | 14 +- .../src/components/headerComponent/index.tsx | 2 +- .../src/components/inputComponent/index.tsx | 4 +- .../components/inputFileComponent/index.tsx | 4 +- .../components/inputListComponent/index.tsx | 8 +- .../src/components/intComponent/index.tsx | 10 +- .../src/components/promptComponent/index.tsx | 4 +- .../components/textAreaComponent/index.tsx | 8 +- .../src/components/toggleComponent/index.tsx | 4 +- .../components/toggleShadComponent/index.tsx | 4 +- .../src/components/ui/rename-label.tsx | 8 +- src/frontend/src/contexts/tabsContext.tsx | 42 ++--- src/frontend/src/contexts/typesContext.tsx | 4 +- src/frontend/src/contexts/undoRedoContext.tsx | 8 +- src/frontend/src/modals/ApiModal/index.tsx | 26 ++-- .../src/modals/EditNodeModal/index.tsx | 144 +++++++++--------- src/frontend/src/modals/exportModal/index.tsx | 8 +- .../src/modals/flowSettingsModal/index.tsx | 6 +- .../src/modals/formModal/chatInput/index.tsx | 4 +- src/frontend/src/modals/formModal/index.tsx | 56 +++---- .../src/modals/genericModal/index.tsx | 10 +- .../components/DisclosureComponent/index.tsx | 6 +- .../components/PageComponent/index.tsx | 26 ++-- .../extraSidebarComponent/index.tsx | 42 ++--- .../components/nodeToolbarComponent/index.tsx | 22 +-- src/frontend/src/utils/reactflowUtils.ts | 60 ++++---- src/frontend/src/utils/utils.ts | 11 +- 32 files changed, 357 insertions(+), 345 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 72c2a8e4d..42942a360 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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(null); + const refHtml = useRef(null); + const infoHtml = useRef(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 = ( -
- {info.split("\n").map((line, i) => ( -

+

+ {info.split("\n").map((line, index) => ( +

{line}

))} @@ -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 ( 0 ? "mt-2 flex items-center" : "flex items-center" + index > 0 ? "mt-2 flex items-center" : "flex items-center" )} >
2 - ? item.type.split(", ").map((el, i) => ( - + ? item.type.split(", ").map((el, index) => ( + - {i === item.type.split(", ").length - 1 + {index === item.type.split(", ").length - 1 ? el : (el += `, `)} @@ -148,6 +158,7 @@ export default function ParameterComponent({ ); }); } else { + //@ts-ignore refHtml.current = {TOOLTIP_EMPTY}; } } @@ -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 ? (
- {data.node.template[name].list ? ( + {data.node?.template[name].list ? ( - ) : data.node.template[name].multiline ? ( + ) : data.node?.template[name].multiline ? ( )} @@ -255,9 +266,9 @@ export default function ParameterComponent({
{ - handleOnNewValue(t); + enabled={data.node?.template[name].value ?? false} + setEnabled={(isEnabled) => { + handleOnNewValue(isEnabled); }} size="large" /> @@ -266,13 +277,13 @@ export default function ParameterComponent({
) : left === true && type === "str" && - data.node.template[name].options ? ( + data.node?.template[name].options ? (
{ data.node = nodeClass; }} nodeClass={data.node} disabled={disabled} - value={data.node.template[name].value ?? ""} + value={data.node?.template[name].value ?? ""} onChange={handleOnNewValue} />
@@ -297,12 +308,12 @@ export default function ParameterComponent({
{ - 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(); }} > @@ -311,7 +322,7 @@ export default function ParameterComponent({
@@ -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} />
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index d72e46d23..61717ad1d 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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) => (
- {data.node.template[t].show && - !data.node.template[t].advanced ? ( + {data.node.template[templateName].show && + !data.node.template[templateName].advanced ? ( ) : ( <> diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx index 90838d693..59f42d3ec 100644 --- a/src/frontend/src/alerts/alertDropDown/index.tsx +++ b/src/frontend/src/alerts/alertDropDown/index.tsx @@ -22,9 +22,9 @@ export default function AlertDropdown({ children }: AlertDropdownType) { return ( { - setOpen(k); - if (k) setNotificationCenter(false); + onOpenChange={(target) => { + setOpen(target); + if (target) setNotificationCenter(false); }} > {children} diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index 6504c2b4e..caf2fa5b0 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx @@ -55,12 +55,12 @@ export const EditFlowSettings: React.FC = ({ }; const [desc, setDesc] = useState( - flows.find((f) => f.id === tabId).description + flows.find((flow) => flow.id === tabId).description ); const handleDescriptionChange = (event: ChangeEvent) => { - 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); }; diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 05e8127da..853fff1e8 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/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); }} >
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx index 40d6fc3fe..ae3719959 100644 --- a/src/frontend/src/components/floatComponent/index.tsx +++ b/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) => { - if (e.target.value < min.toString()) { - e.target.value = min.toString(); + onInput={(event: React.ChangeEvent) => { + 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); }} />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 91e9bbd8a..545a49593 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -34,7 +34,7 @@ export default function Header() { ⛓️ - {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( + {flows.findIndex((flow) => tabId === flow.id) !== -1 && tabId !== "" && ( )}
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 78b06c411..5345239ef 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/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 && ( diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 8c9693d8c..53d1ad4de 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/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)) { diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 13f5f7cca..c66e93c8f 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/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 (
{ + onChange={(event) => { let newInputList = _.cloneDeep(value); - newInputList[idx] = e.target.value; + newInputList[idx] = event.target.value; onChange(newInputList); }} /> diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index c43055b47..504f3b816 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/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) => { - if (e.target.value < min.toString()) { - e.target.value = min.toString(); + onInput={(event: React.ChangeEvent) => { + 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); }} />
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 82196658f..e3393512b 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/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} diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index cd598f01e..7c5af6da9 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/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); }} />
@@ -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 && ( diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx index 210c9223a..23acccee7 100644 --- a/src/frontend/src/components/toggleComponent/index.tsx +++ b/src/frontend/src/components/toggleComponent/index.tsx @@ -18,8 +18,8 @@ export default function ToggleComponent({
{ - setEnabled(x); + onChange={(isEnabled: boolean) => { + setEnabled(isEnabled); }} className={classNames( enabled ? "bg-primary" : "bg-input", diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx index 95ef6d062..5671b6465 100644 --- a/src/frontend/src/components/toggleShadComponent/index.tsx +++ b/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); }} >
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx index e1cef4996..8b12fdfb0 100644 --- a/src/frontend/src/components/ui/rename-label.tsx +++ b/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); }} /> ) : ( diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 5ea8c11c0..2cc4adc2b 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/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); diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index d4523bf60..c87a2a19a 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/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 ( diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx index dbe0baa45..218a5ec8a 100644 --- a/src/frontend/src/contexts/undoRedoContext.tsx +++ b/src/frontend/src/contexts/undoRedoContext.tsx @@ -45,14 +45,14 @@ export function UndoRedoProvider({ children }) { const [past, setPast] = useState(flows.map(() => [])); const [future, setFuture] = useState(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(); diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 236a03d65..7af77a205 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/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"]); }); }); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 4b4b55568..9447f21ac 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -49,13 +49,13 @@ const EditNodeModal = forwardRef( const { reactFlowInstance } = useContext(typesContext); let disabled = - reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? + reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === data.id) ?? false; - function changeAdvanced(n) { + function changeAdvanced(templateParam) { setMyData((old) => { let newData = cloneDeep(old); - newData.node.template[n].advanced = !newData.node.template[n].advanced; + newData.node.template[templateParam].advanced = !newData.node.template[templateParam].advanced; return newData; }); } @@ -112,51 +112,51 @@ const EditNodeModal = forwardRef( {Object.keys(myData.node.template) .filter( - (t) => - t.charAt(0) !== "_" && - myData.node.template[t].show && - (myData.node.template[t].type === "str" || - myData.node.template[t].type === "bool" || - myData.node.template[t].type === "float" || - myData.node.template[t].type === "code" || - myData.node.template[t].type === "prompt" || - myData.node.template[t].type === "file" || - myData.node.template[t].type === "int") + (templateParam) => + templateParam.charAt(0) !== "_" && + myData.node.template[templateParam].show && + (myData.node.template[templateParam].type === "str" || + myData.node.template[templateParam].type === "bool" || + myData.node.template[templateParam].type === "float" || + myData.node.template[templateParam].type === "code" || + myData.node.template[templateParam].type === "prompt" || + myData.node.template[templateParam].type === "file" || + myData.node.template[templateParam].type === "int") ) - .map((n, i) => ( - + .map((templateParam, index) => ( + - {myData.node.template[n].name - ? myData.node.template[n].name - : myData.node.template[n].display_name} + {myData.node.template[templateParam].name + ? myData.node.template[templateParam].name + : myData.node.template[templateParam].display_name} - {myData.node.template[n].type === "str" && - !myData.node.template[n].options ? ( + {myData.node.template[templateParam].type === "str" && + !myData.node.template[templateParam].options ? (
- {myData.node.template[n].list ? ( + {myData.node.template[templateParam].list ? ( { - handleOnNewValue(t, n); + onChange={(value: string[]) => { + handleOnNewValue(value, templateParam); }} /> - ) : myData.node.template[n].multiline ? ( + ) : myData.node.template[templateParam].multiline ? ( { - handleOnNewValue(t, n); + onChange={(value: string) => { + handleOnNewValue(value, templateParam); }} /> ) : ( @@ -164,105 +164,105 @@ const EditNodeModal = forwardRef( editNode={true} disabled={disabled} password={ - myData.node.template[n].password ?? + myData.node.template[templateParam].password ?? false } value={ - myData.node.template[n].value ?? "" + myData.node.template[templateParam].value ?? "" } - onChange={(t) => { - handleOnNewValue(t, n); + onChange={(value) => { + handleOnNewValue(value, templateParam); }} /> )}
- ) : myData.node.template[n].type === "bool" ? ( + ) : myData.node.template[templateParam].type === "bool" ? (
{" "} { - handleOnNewValue(t, n); + enabled={myData.node.template[templateParam].value} + setEnabled={(isEnabled) => { + handleOnNewValue(isEnabled, templateParam); }} size="small" />
- ) : myData.node.template[n].type === "float" ? ( + ) : myData.node.template[templateParam].type === "float" ? (
{ - handleOnNewValue(t, n); + value={myData.node.template[templateParam].value ?? ""} + onChange={(value) => { + handleOnNewValue(value, templateParam); }} />
- ) : myData.node.template[n].type === "str" && - myData.node.template[n].options ? ( + ) : myData.node.template[templateParam].type === "str" && + myData.node.template[templateParam].options ? (
handleOnNewValue(t, n)} + options={myData.node.template[templateParam].options} + onSelect={(value) => handleOnNewValue(value, templateParam)} value={ - myData.node.template[n].value ?? + myData.node.template[templateParam].value ?? "Choose an option" } >
- ) : myData.node.template[n].type === "int" ? ( + ) : myData.node.template[templateParam].type === "int" ? (
{ - handleOnNewValue(t, n); + value={myData.node.template[templateParam].value ?? ""} + onChange={(value) => { + handleOnNewValue(value, templateParam); }} />
- ) : myData.node.template[n].type === "file" ? ( + ) : myData.node.template[templateParam].type === "file" ? (
{ - handleOnNewValue(t, n); + value={myData.node.template[templateParam].value ?? ""} + onChange={(value: string) => { + handleOnNewValue(value, templateParam); }} fileTypes={ - myData.node.template[n].fileTypes + myData.node.template[templateParam].fileTypes } - suffixes={myData.node.template[n].suffixes} - onFileChange={(t: string) => { - data.node.template[n].file_path = t; + suffixes={myData.node.template[templateParam].suffixes} + onFileChange={(filePath: string) => { + data.node.template[templateParam].file_path = filePath; }} >
- ) : myData.node.template[n].type === "prompt" ? ( + ) : myData.node.template[templateParam].type === "prompt" ? (
{ myData.node = nodeClass; }} - value={myData.node.template[n].value ?? ""} - onChange={(t: string) => { - handleOnNewValue(t, n); + value={myData.node.template[templateParam].value ?? ""} + onChange={(value: string) => { + handleOnNewValue(value, templateParam); }} />
- ) : myData.node.template[n].type === "code" ? ( + ) : myData.node.template[templateParam].type === "code" ? (
{ data.node = nodeClass; @@ -270,13 +270,13 @@ const EditNodeModal = forwardRef( nodeClass={data.node} disabled={disabled} editNode={true} - value={myData.node.template[n].value ?? ""} - onChange={(t: string) => { - handleOnNewValue(t, n); + value={myData.node.template[templateParam].value ?? ""} + onChange={(value: string) => { + handleOnNewValue(value, templateParam); }} />
- ) : myData.node.template[n].type === "Any" ? ( + ) : myData.node.template[templateParam].type === "Any" ? ( "-" ) : (
@@ -285,8 +285,8 @@ const EditNodeModal = forwardRef(
changeAdvanced(n)} + enabled={!myData.node.template[templateParam].advanced} + setEnabled={(e) => changeAdvanced(templateParam)} disabled={disabled} size="small" /> diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index c45723e04..d3bbbaa64 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -12,10 +12,10 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => { const { flows, tabId, updateFlow, downloadFlow, saveFlow } = useContext(TabsContext); const [checked, setChecked] = useState(false); - const [name, setName] = useState(flows.find((f) => f.id === tabId).name); + const [name, setName] = useState(flows.find((flow) => flow.id === tabId).name); const [invalidName, setInvalidName] = useState(false); const [description, setDescription] = useState( - flows.find((f) => f.id === tabId).description + flows.find((flow) => flow.id === tabId).description ); const [open, setOpen] = useState(false); return ( @@ -59,13 +59,13 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => { onClick={() => { if (checked) downloadFlow( - flows.find((f) => f.id === tabId), + flows.find((flow) => flow.id === tabId), name, description ); else downloadFlow( - removeApiKeys(flows.find((f) => f.id === tabId)), + removeApiKeys(flows.find((flow) => flow.id === tabId)), name, description ); diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index 7f9e2e6e9..12db76931 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/src/frontend/src/modals/flowSettingsModal/index.tsx @@ -19,14 +19,14 @@ export default function FlowSettingsModal({ const { flows, tabId, updateFlow, setTabsState, saveFlow } = useContext(TabsContext); const maxLength = 50; - const [name, setName] = useState(flows.find((f) => f.id === tabId).name); + const [name, setName] = useState(flows.find((flow) => flow.id === tabId).name); const [description, setDescription] = useState( - flows.find((f) => f.id === tabId).description + flows.find((flow) => flow.id === tabId).description ); const [invalidName, setInvalidName] = useState(false); function handleClick() { - let savedFlow = flows.find((f) => f.id === tabId); + let savedFlow = flows.find((flow) => flow.id === tabId); savedFlow.name = name; savedFlow.description = description; saveFlow(savedFlow); diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx index e8be2f292..be1e5a45a 100644 --- a/src/frontend/src/modals/formModal/chatInput/index.tsx +++ b/src/frontend/src/modals/formModal/chatInput/index.tsx @@ -46,8 +46,8 @@ export default function ChatInput({ }`, }} value={lockChat ? "Thinking..." : chatValue} - onChange={(e) => { - setChatValue(e.target.value); + onChange={(event) => { + setChatValue(event.target.value); }} className={classNames( lockChat diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 751eacea1..d0fa348d1 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -46,7 +46,7 @@ export default function FormModal({ const handleKeys = formKeysData.handle_keys; const keyToUse = Object.keys(inputKeys).find( - (k) => !handleKeys.some((j) => j === k) && inputKeys[k] === "" + (key) => !handleKeys.some((j) => j === key) && inputKeys[key] === "" ); return inputKeys[keyToUse]; @@ -69,9 +69,9 @@ export default function FormModal({ const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData; const [chatKey, setChatKey] = useState( Object.keys(tabsState[flow.id].formKeysData.input_keys).find( - (k) => - !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) && - tabsState[flow.id].formKeysData.input_keys[k] === "" + (key) => + !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === key) && + tabsState[flow.id].formKeysData.input_keys[key] === "" ) ); @@ -420,13 +420,13 @@ export default function FormModal({
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( - (i, k) => ( -
+ (key, index) => ( +
- {i} + {key}
- handleOnCheckedChange(value, i) + handleOnCheckedChange(value, key) } size="small" disabled={tabsState[ id.current - ].formKeysData.handle_keys.some((t) => t === i)} + ].formKeysData.handle_keys.some((t) => t === key)} />
} - key={k} - keyValue={i} + key={index} + keyValue={key} >
{tabsState[id.current].formKeysData.handle_keys.some( - (t) => t === i + (t) => t === key ) && (
Source: Component @@ -462,18 +462,18 @@ export default function FormModal({
@@ -481,17 +481,17 @@ export default function FormModal({
) )} - {tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( -
+ {tabsState[id.current].formKeysData.memory_keys.map((key, index) => ( +
- {i} + {key}
{}} size="small" disabled={true} @@ -499,8 +499,8 @@ export default function FormModal({
} - key={k} - keyValue={i} + key={index} + keyValue={key} >
@@ -529,14 +529,14 @@ export default function FormModal({
{chatHistory.length > 0 ? ( - chatHistory.map((c, i) => ( + chatHistory.map((chat, index) => ( )) ) : ( diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index df9d32f6d..c3d26700f 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -208,9 +208,9 @@ export default function GenericModal({ setIsEdit(false); }} autoFocus - onChange={(e) => { - setInputValue(e.target.value); - checkVariables(e.target.value); + onChange={(event) => { + setInputValue(event.target.value); + checkVariables(event.target.value); }} placeholder="Type message here." /> @@ -221,8 +221,8 @@ export default function GenericModal({ ref={ref} className="form-input h-full w-full rounded-lg focus-visible:ring-1" value={inputValue} - onChange={(e) => { - setInputValue(e.target.value); + onChange={(event) => { + setInputValue(event.target.value); }} placeholder="Type message here." /> diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx index d48f0d812..33287f60a 100644 --- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx @@ -18,9 +18,9 @@ export default function DisclosureComponent({ {title}
- {buttons.map((x, index) => ( - ))}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index ac9aa1d01..63e89e883 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -141,10 +141,10 @@ export default function Page({ flow }: { flow: FlowType }) { }, [setExtraComponent, setExtraNavigation]); const onEdgesChangeMod = useCallback( - (s: EdgeChange[]) => { - onEdgesChange(s); - setNodes((x) => { - let newX = _.cloneDeep(x); + (change: EdgeChange[]) => { + onEdgesChange(change); + setNodes((node) => { + let newX = _.cloneDeep(node); return newX; }); setTabsState((prev) => { @@ -161,8 +161,8 @@ export default function Page({ flow }: { flow: FlowType }) { ); const onNodesChangeMod = useCallback( - (s: NodeChange[]) => { - onNodesChange(s); + (change: NodeChange[]) => { + onNodesChange(change); setTabsState((prev) => { return { ...prev, @@ -193,8 +193,8 @@ export default function Page({ flow }: { flow: FlowType }) { eds ) ); - setNodes((x) => { - let newX = _.cloneDeep(x); + setNodes((node) => { + let newX = _.cloneDeep(node); return newX; }); }, @@ -219,7 +219,7 @@ export default function Page({ flow }: { flow: FlowType }) { const onDragOver = useCallback((event: React.DragEvent) => { event.preventDefault(); - if (event.dataTransfer.types.some((t) => t === "nodedata")) { + if (event.dataTransfer.types.some((types) => types === "nodedata")) { event.dataTransfer.dropEffect = "move"; } else { event.dataTransfer.dropEffect = "copy"; @@ -229,7 +229,7 @@ export default function Page({ flow }: { flow: FlowType }) { const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); - if (event.dataTransfer.types.some((t) => t === "nodedata")) { + if (event.dataTransfer.types.some((types) => types === "nodedata")) { takeSnapshot(); // Get the current bounds of the ReactFlow wrapper element @@ -281,7 +281,7 @@ export default function Page({ flow }: { flow: FlowType }) { // Add the new node to the list of nodes in state } setNodes((nds) => nds.concat(newNode)); - } else if (event.dataTransfer.types.some((t) => t === "Files")) { + } else if (event.dataTransfer.types.some((types) => types === "Files")) { takeSnapshot(); uploadFlow(false, event.dataTransfer.files.item(0)); } @@ -303,7 +303,7 @@ export default function Page({ flow }: { flow: FlowType }) { takeSnapshot(); setEdges( edges.filter( - (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id) + (edge) => !mynodes.some((node) => edge.source === node.id || edge.target === node.id) ) ); }, @@ -326,7 +326,7 @@ export default function Page({ flow }: { flow: FlowType }) { const onEdgeUpdateEnd = useCallback((_, edge) => { if (!edgeUpdateSuccessful.current) { - setEdges((eds) => eds.filter((e) => e.id !== edge.id)); + setEdges((eds) => eds.filter((edg) => edg.id !== edge.id)); } edgeUpdateSuccessful.current = true; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 5413d6ec9..924168f9d 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -56,7 +56,7 @@ export default function ExtraSidebar() { return ret; }); } - const flow = flows.find((f) => f.id === tabId); + const flow = flows.find((flow) => flow.id === tabId); useEffect(() => { // show components with error on load let errors = []; @@ -143,10 +143,10 @@ export default function ExtraSidebar() { id="search" placeholder="Search" className="nopan nodrag noundo nocopy input-search" - onChange={(e) => { - handleSearchInput(e.target.value); + onChange={(event) => { + handleSearchInput(event.target.value); // Set search input state - setSearch(e.target.value); + setSearch(event.target.value); }} />
@@ -161,42 +161,42 @@ export default function ExtraSidebar() {
{Object.keys(dataFilter) .sort() - .map((d: keyof APIObjectType, i) => - Object.keys(dataFilter[d]).length > 0 ? ( + .map((SBSectionName: keyof APIObjectType, index) => + Object.keys(dataFilter[SBSectionName]).length > 0 ? (
- {Object.keys(dataFilter[d]) + {Object.keys(dataFilter[SBSectionName]) .sort() - .map((t: string, k) => ( + .map((SBItemName: string, index) => ( -
+
onDragStart(event, { - type: t, - node: data[d][t], + type: SBItemName, + node: data[SBSectionName][SBItemName], }) } onDragEnd={() => { @@ -209,7 +209,7 @@ export default function ExtraSidebar() { >
- {data[d][t].display_name} + {data[SBSectionName][SBItemName].display_name} ) : ( -
+
) )}
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 06d8ea06d..9bd6db214 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -9,17 +9,17 @@ import { classNames } from "../../../../utils/utils"; export default function NodeToolbarComponent({ data, setData, deleteNode }) { const [nodeLength, setNodeLength] = useState( Object.keys(data.node.template).filter( - (t) => - t.charAt(0) !== "_" && - data.node.template[t].show && - (data.node.template[t].type === "str" || - data.node.template[t].type === "bool" || - data.node.template[t].type === "float" || - data.node.template[t].type === "code" || - data.node.template[t].type === "prompt" || - data.node.template[t].type === "file" || - data.node.template[t].type === "Any" || - data.node.template[t].type === "int") + (templateName) => + templateName.charAt(0) !== "_" && + data.node.template[templateName].show && + (data.node.template[templateName].type === "str" || + data.node.template[templateName].type === "bool" || + data.node.template[templateName].type === "float" || + data.node.template[templateName].type === "code" || + data.node.template[templateName].type === "prompt" || + data.node.template[templateName].type === "file" || + data.node.template[templateName].type === "Any" || + data.node.template[templateName].type === "int") ).length ); diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index ff486ebb2..416ba145f 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -15,7 +15,7 @@ export function cleanEdges({ const sourceNode = nodes.find((node) => node.id === edge.source); const targetNode = nodes.find((node) => node.id === edge.target); if (!sourceNode || !targetNode) { - newEdges = newEdges.filter((e) => e.id !== edge.id); + newEdges = newEdges.filter((edg) => edg.id !== edge.id); } // check if the source and target handle still exists if (sourceNode && targetNode) { @@ -41,7 +41,7 @@ export function cleanEdges({ ...sourceNode.data.node.base_classes, ].join("|"); if (id !== sourceHandle) { - newEdges = newEdges.filter((e) => e.id !== edge.id); + newEdges = newEdges.filter((edg) => edg.id !== edge.id); } } } @@ -57,15 +57,15 @@ export function isValidConnection( targetHandle .split("|")[0] .split(";") - .some((n) => n === sourceHandle.split("|")[0]) || + .some((target) => target === sourceHandle.split("|")[0]) || sourceHandle .split("|") .slice(2) - .some((t) => + .some((target) => targetHandle .split("|")[0] .split(";") - .some((n) => n === t) + .some((n) => n === target) ) || targetHandle.split("|")[0] === "str" ) { @@ -129,35 +129,35 @@ export function updateTemplate( export function updateIds(newFlow, getNodeId) { let idsMap = {}; - newFlow.nodes.forEach((n: NodeType) => { + newFlow.nodes.forEach((node: NodeType) => { // Generate a unique node ID - let newId = getNodeId(n.data.type); - idsMap[n.id] = newId; - n.id = newId; - n.data.id = newId; + let newId = getNodeId(node.data.type); + idsMap[node.id] = newId; + node.id = newId; + node.data.id = newId; // Add the new node to the list of nodes in state }); - newFlow.edges.forEach((e) => { - e.source = idsMap[e.source]; - e.target = idsMap[e.target]; - let sourceHandleSplitted = e.sourceHandle.split("|"); - e.sourceHandle = + newFlow.edges.forEach((edge) => { + edge.source = idsMap[edge.source]; + edge.target = idsMap[edge.target]; + let sourceHandleSplitted = edge.sourceHandle.split("|"); + edge.sourceHandle = sourceHandleSplitted[0] + "|" + - e.source + + edge.source + "|" + sourceHandleSplitted.slice(2).join("|"); - let targetHandleSplitted = e.targetHandle.split("|"); - e.targetHandle = - targetHandleSplitted.slice(0, -1).join("|") + "|" + e.target; - e.id = + let targetHandleSplitted = edge.targetHandle.split("|"); + edge.targetHandle = + targetHandleSplitted.slice(0, -1).join("|") + "|" + edge.target; + edge.id = "reactflow__edge-" + - e.source + - e.sourceHandle + + edge.source + + edge.sourceHandle + "-" + - e.target + - e.targetHandle; + edge.target + + edge.targetHandle; }); } @@ -169,10 +169,10 @@ export function buildTweaks(flow) { } export function validateNode( - n: NodeType, + node: NodeType, reactFlowInstance: ReactFlowInstance ): Array { - if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { + if (!node.data?.node?.template || !Object.keys(node.data.node.template)) { return [ "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!", ]; @@ -181,7 +181,7 @@ export function validateNode( const { type, node: { template }, - } = n.data; + } = node.data; return Object.keys(template).reduce( (errors: Array, t) => @@ -194,9 +194,9 @@ export function validateNode( !reactFlowInstance .getEdges() .some( - (e) => - e.targetHandle.split("|")[1] === t && - e.targetHandle.split("|")[2] === n.id + (edge) => + edge.targetHandle.split("|")[1] === t && + edge.targetHandle.split("|")[2] === node.id ) ? [ `${type} is missing ${ diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 462e72084..dc387635c 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -103,14 +103,15 @@ export function groupByFamily(data, baseClasses, left, flow?: NodeType[]) { "int", ]); - const checkBaseClass = (t: any) => - t.type && - t.show && - ((!excludeTypes.has(t.type) && baseClassesSet.has(t.type)) || - (t.input_types && t.input_types.some((x) => baseClassesSet.has(x)))); + const checkBaseClass = (template: any) => + template.type && + template.show && + ((!excludeTypes.has(template.type) && baseClassesSet.has(template.type)) || + (template.input_types && template.input_types.some((inputType) => baseClassesSet.has(inputType)))); if (flow) { for (const node of flow) { + console.log(node) const nodeData = node.data; const foundNode = checkedNodes.get(nodeData.type); checkedNodes.set(nodeData.type, {