From 1719895367e5ce28f68b3db2b8cc267b985a78a5 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Tue, 4 Jun 2024 15:33:24 -0300 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(reactflowUtils.ts):=20reo?= =?UTF-8?q?rder=20imports=20for=20better=20readability=20=E2=99=BB?= =?UTF-8?q?=EF=B8=8F=20(reactflowUtils.ts):=20remove=20console.log=20state?= =?UTF-8?q?ments=20to=20clean=20up=20code=20=E2=99=BB=EF=B8=8F=20(reactflo?= =?UTF-8?q?wUtils.ts):=20fix=20formatting=20issues=20and=20align=20code=20?= =?UTF-8?q?style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ♻️ (reactflowUtils.ts): remove trailing commas to improve code consistency and readability --- src/frontend/src/utils/reactflowUtils.ts | 115 +++++++++++------------ 1 file changed, 55 insertions(+), 60 deletions(-) diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index b379b445e..d1f960017 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -16,6 +16,8 @@ import { specialCharsRegex, } from "../constants/constants"; import { downloadFlowsFromDatabase } from "../controllers/API"; +import getFieldTitle from "../customNodes/utils/get-field-title"; +import { DESCRIPTIONS } from "../flow_constants"; import { APIClassType, APIKindType, @@ -37,8 +39,6 @@ import { updateEdgesHandleIdsType, } from "../types/utils/reactflowUtils"; import { createRandomKey, toTitleCase } from "./utils"; -import { DESCRIPTIONS } from "../flow_constants"; -import getFieldTitle from "../customNodes/utils/get-field-title"; const uid = new ShortUniqueId({ length: 5 }); export function checkChatInput(nodes: Node[]) { @@ -99,18 +99,18 @@ export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) { export function isValidConnection( { source, target, sourceHandle, targetHandle }: Connection, nodes: Node[], - edges: Edge[], + edges: Edge[] ) { const targetHandleObject: targetHandleType = scapeJSONParse(targetHandle!); const sourceHandleObject: sourceHandleType = scapeJSONParse(sourceHandle!); if ( targetHandleObject.inputTypes?.some( - (n) => n === sourceHandleObject.dataType, + (n) => n === sourceHandleObject.dataType ) || sourceHandleObject.baseClasses.some( (t) => targetHandleObject.inputTypes?.some((n) => n === t) || - t === targetHandleObject.type, + t === targetHandleObject.type ) ) { let targetNode = nodes.find((node) => node.id === target!)?.data?.node; @@ -143,7 +143,7 @@ export function removeApiKeys(flow: FlowType): FlowType { export function updateTemplate( reference: APITemplateType, - objectToUpdate: APITemplateType, + objectToUpdate: APITemplateType ): APITemplateType { let clonedObject: APITemplateType = cloneDeep(reference); @@ -203,7 +203,7 @@ export const processDataFromFlow = (flow: FlowType, refreshIds = true) => { export function updateIds( { edges, nodes }: { edges: Edge[]; nodes: Node[] }, - selection?: { edges: Edge[]; nodes: Node[] }, + selection?: { edges: Edge[]; nodes: Node[] } ) { let idsMap = {}; const selectionIds = selection?.nodes.map((n) => n.id); @@ -231,7 +231,7 @@ export function updateIds( edge.source = idsMap[edge.source]; edge.target = idsMap[edge.target]; const sourceHandleObject: sourceHandleType = scapeJSONParse( - edge.sourceHandle!, + edge.sourceHandle! ); edge.sourceHandle = scapedJSONStringfy({ ...sourceHandleObject, @@ -241,7 +241,7 @@ export function updateIds( edge.data.sourceHandle.id = edge.source; } const targetHandleObject: targetHandleType = scapeJSONParse( - edge.targetHandle!, + edge.targetHandle! ); edge.targetHandle = scapedJSONStringfy({ ...targetHandleObject, @@ -287,11 +287,11 @@ export function validateNode(node: NodeType, edges: Edge[]): Array { (scapeJSONParse(edge.targetHandle!) as targetHandleType).fieldName === t && (scapeJSONParse(edge.targetHandle!) as targetHandleType).id === - node.id, + node.id ) ) { errors.push( - `${displayName || type} is missing ${getFieldTitle(template, t)}.`, + `${displayName || type} is missing ${getFieldTitle(template, t)}.` ); } else if ( template[t].type === "dict" && @@ -305,15 +305,15 @@ export function validateNode(node: NodeType, edges: Edge[]): Array { errors.push( `${displayName || type} (${getFieldTitle( template, - t, - )}) contains duplicate keys with the same values.`, + t + )}) contains duplicate keys with the same values.` ); if (hasEmptyKey(template[t].value)) errors.push( `${displayName || type} (${getFieldTitle( template, - t, - )}) field must not be empty.`, + t + )}) field must not be empty.` ); } return errors; @@ -322,7 +322,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array { export function validateNodes( nodes: Node[], - edges: Edge[], + edges: Edge[] ): // this returns an array of tuples with the node id and the errors Array<{ id: string; errors: Array }> { if (nodes.length === 0) { @@ -343,19 +343,14 @@ export function updateEdges(edges: Edge[]) { if (edges) edges.forEach((edge) => { const targetHandleObject: targetHandleType = scapeJSONParse( - edge.targetHandle!, + edge.targetHandle! ); edge.className = "stroke-gray-900 stroke-connection"; }); } export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) { - console.log("flow", flow); - console.log("flows", flows); - const existingNames = flows - .filter((f) => f.folder_id === flow.folder_id) - .map((item) => item.name); - console.log("existingNames", existingNames); + const existingNames = flows.map((item) => item.name); let newName = flow.name; let count = 1; @@ -415,7 +410,7 @@ export function handleKeyDown( | React.KeyboardEvent | React.KeyboardEvent, inputValue: string | string[] | null, - block: string, + block: string ) { //condition to fix bug control+backspace on Windows/Linux if ( @@ -440,7 +435,7 @@ export function handleKeyDown( } export function handleOnlyIntegerInput( - event: React.KeyboardEvent, + event: React.KeyboardEvent ) { if ( event.key === "." || @@ -456,7 +451,7 @@ export function handleOnlyIntegerInput( export function getConnectedNodes( edge: Edge, - nodes: Array, + nodes: Array ): Array { const sourceId = edge.source; const targetId = edge.target; @@ -557,7 +552,7 @@ export function checkOldEdgesHandles(edges: Edge[]): boolean { !edge.sourceHandle || !edge.targetHandle || !edge.sourceHandle.includes("{") || - !edge.targetHandle.includes("{"), + !edge.targetHandle.includes("{") ); } @@ -580,7 +575,7 @@ export function customStringify(obj: any): string { const keys = Object.keys(obj).sort(); const keyValuePairs = keys.map( - (key) => `"${key}":${customStringify(obj[key])}`, + (key) => `"${key}":${customStringify(obj[key])}` ); return `{${keyValuePairs.join(",")}}`; } @@ -609,7 +604,7 @@ export function getHandleId( source: string, sourceHandle: string, target: string, - targetHandle: string, + targetHandle: string ) { return ( "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle @@ -620,7 +615,7 @@ export function generateFlow( selection: OnSelectionChangeParams, nodes: Node[], edges: Edge[], - name: string, + name: string ): generateFlowType { const newFlowData = { nodes, edges, viewport: { zoom: 1, x: 0, y: 0 } }; const uid = new ShortUniqueId({ length: 5 }); @@ -629,7 +624,7 @@ export function generateFlow( newFlowData.edges = selection.edges.filter( (edge) => selection.nodes.some((node) => node.id === edge.target) && - selection.nodes.some((node) => node.id === edge.source), + selection.nodes.some((node) => node.id === edge.source) ); newFlowData.nodes = selection.nodes; @@ -650,7 +645,7 @@ export function generateFlow( (edge) => (selection.nodes.some((node) => node.id === edge.target) || selection.nodes.some((node) => node.id === edge.source)) && - newFlowData.edges.every((e) => e.id !== edge.id), + newFlowData.edges.every((e) => e.id !== edge.id) ), }; } @@ -661,13 +656,13 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) { const { nodes, edges } = groupNode.data.node!.flow!.data!; const lastNode = findLastNode(groupNode.data.node!.flow!.data!); newEdges = newEdges.filter( - (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id), + (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id) ); newEdges.forEach((edge) => { if (lastNode && edge.source === lastNode.id) { edge.source = groupNode.id; let newSourceHandle: sourceHandleType = scapeJSONParse( - edge.sourceHandle!, + edge.sourceHandle! ); newSourceHandle.id = groupNode.id; edge.sourceHandle = scapedJSONStringfy(newSourceHandle); @@ -694,7 +689,7 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) { export function filterFlow( selection: OnSelectionChangeParams, setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void, - setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void, + setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void ) { setNodes((nodes) => nodes.filter((node) => !selection.nodes.includes(node))); setEdges((edges) => edges.filter((edge) => !selection.edges.includes(edge))); @@ -732,7 +727,7 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) { export function concatFlows( flow: FlowType, setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void, - setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void, + setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void ) { const { nodes, edges } = flow.data!; setNodes((old) => [...old, ...nodes]); @@ -741,7 +736,7 @@ export function concatFlows( export function validateSelection( selection: OnSelectionChangeParams, - edges: Edge[], + edges: Edge[] ): Array { const clonedSelection = cloneDeep(selection); const clonedEdges = cloneDeep(edges); @@ -755,7 +750,7 @@ export function validateSelection( let nodesSet = new Set(clonedSelection.nodes.map((n) => n.id)); // then filter the edges that are connected to the nodes in the set let connectedEdges = clonedSelection.edges.filter( - (e) => nodesSet.has(e.source) && nodesSet.has(e.target), + (e) => nodesSet.has(e.source) && nodesSet.has(e.target) ); // add the edges to the selection clonedSelection.edges = connectedEdges; @@ -769,17 +764,17 @@ export function validateSelection( clonedSelection.nodes.some( (node) => isInputNode(node.data as NodeDataType) || - isOutputNode(node.data as NodeDataType), + isOutputNode(node.data as NodeDataType) ) ) { errorsArray.push( - "Please select only nodes that are not input or output nodes", + "Please select only nodes that are not input or output nodes" ); } //check if there are two or more nodes with free outputs if ( clonedSelection.nodes.filter( - (n) => !clonedSelection.edges.some((e) => e.source === n.id), + (n) => !clonedSelection.edges.some((e) => e.source === n.id) ).length > 1 ) { errorsArray.push("Please select only one node with free outputs"); @@ -790,7 +785,7 @@ export function validateSelection( clonedSelection.nodes.some( (node) => !clonedSelection.edges.some((edge) => edge.target === node.id) && - !clonedSelection.edges.some((edge) => edge.source === node.id), + !clonedSelection.edges.some((edge) => edge.source === node.id) ) ) { errorsArray.push("Please select only nodes that are connected"); @@ -847,8 +842,8 @@ export function mergeNodeTemplates({ nodeTemplate[key].display_name ? nodeTemplate[key].display_name : nodeTemplate[key].name - ? toTitleCase(nodeTemplate[key].name) - : toTitleCase(key); + ? toTitleCase(nodeTemplate[key].name) + : toTitleCase(key); } } }); @@ -859,7 +854,7 @@ function isHandleConnected( edges: Edge[], key: string, field: TemplateVariableType, - nodeId: string, + nodeId: string ) { /* this function receives a flow and a handleId and check if there is a connection with this handle @@ -875,7 +870,7 @@ function isHandleConnected( id: nodeId, proxy: { id: field.proxy!.id, field: field.proxy!.field }, inputTypes: field.input_types, - } as targetHandleType), + } as targetHandleType) ) ) { return true; @@ -890,7 +885,7 @@ function isHandleConnected( fieldName: key, id: nodeId, inputTypes: field.input_types, - } as targetHandleType), + } as targetHandleType) ) ) { return true; @@ -913,7 +908,7 @@ export function generateNodeTemplate(Flow: FlowType) { export function generateNodeFromFlow( flow: FlowType, - getNodeId: (type: string) => string, + getNodeId: (type: string) => string ): NodeType { const { nodes } = flow.data!; const outputNode = cloneDeep(findLastNode(flow.data!)); @@ -944,7 +939,7 @@ export function generateNodeFromFlow( export function connectedInputNodesOnHandle( nodeId: string, handleId: string, - { nodes, edges }: { nodes: NodeType[]; edges: Edge[] }, + { nodes, edges }: { nodes: NodeType[]; edges: Edge[] } ) { const connectedNodes: Array<{ name: string; id: string; isGroup: boolean }> = []; @@ -981,7 +976,7 @@ export function connectedInputNodesOnHandle( export function updateProxyIdsOnTemplate( template: APITemplateType, - idsMap: { [key: string]: string }, + idsMap: { [key: string]: string } ) { Object.keys(template).forEach((key) => { if (template[key].proxy && idsMap[template[key].proxy!.id]) { @@ -992,7 +987,7 @@ export function updateProxyIdsOnTemplate( export function updateEdgesIds( edges: Edge[], - idsMap: { [key: string]: string }, + idsMap: { [key: string]: string } ) { edges.forEach((edge) => { let targetHandle: targetHandleType = edge.data.targetHandle; @@ -1024,7 +1019,7 @@ export function expandGroupNode( nodes: Node[], edges: Edge[], setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void, - setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void, + setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void ) { const idsMap = updateIds(flow!.data!); updateProxyIdsOnTemplate(template, idsMap); @@ -1067,7 +1062,7 @@ export function expandGroupNode( const lastNode = cloneDeep(findLastNode(flow!.data!)); newEdge.source = lastNode!.id; let newSourceHandle: sourceHandleType = scapeJSONParse( - newEdge.sourceHandle!, + newEdge.sourceHandle! ); newSourceHandle.id = lastNode!.id; newEdge.data.sourceHandle = newSourceHandle; @@ -1124,7 +1119,7 @@ export function expandGroupNode( export function getGroupStatus( flow: FlowType, - ssData: { [key: string]: { valid: boolean; params: string } }, + ssData: { [key: string]: { valid: boolean; params: string } } ) { let status = { valid: true, params: SUCCESS_BUILD }; const { nodes } = flow.data!; @@ -1143,7 +1138,7 @@ export function getGroupStatus( export function createFlowComponent( nodeData: NodeDataType, - version: string, + version: string ): FlowType { const flowNode: FlowType = { data: { @@ -1179,7 +1174,7 @@ export function downloadNode(NodeFLow: FlowType) { export function updateComponentNameAndType( data: any, - component: NodeDataType, + component: NodeDataType ) {} export function removeFileNameFromComponents(flow: FlowType) { @@ -1253,7 +1248,7 @@ export function extractFieldsFromComponenents(data: APIObjectType) { export function downloadFlow( flow: FlowType, flowName: string, - flowDescription?: string, + flowDescription?: string ) { let clonedFlow = cloneDeep(flow); removeFileNameFromComponents(clonedFlow); @@ -1263,7 +1258,7 @@ export function downloadFlow( ...clonedFlow, name: flowName, description: flowDescription, - }), + }) )}`; // create a link element and set its properties @@ -1278,7 +1273,7 @@ export function downloadFlow( export function downloadFlows() { downloadFlowsFromDatabase().then((flows) => { const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( - JSON.stringify(flows), + JSON.stringify(flows) )}`; // create a link element and set its properties @@ -1302,7 +1297,7 @@ export function getRandomDescription(): string { export const createNewFlow = ( flowData: ReactFlowJsonObject, flow: FlowType, - folderId: string, + folderId: string ) => { return { description: flow?.description ?? getRandomDescription(),