From 191fae732c85b755b2c3017775f1ab11c3e04f69 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 12 Jun 2024 12:43:35 -0300 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(GenericNode):=20refactor?= =?UTF-8?q?=20to=20use=20optional=20chaining=20for=20template=20fields?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ♻️ (count-handles): refactor to use optional chaining for template fields ♻️ (get-nodes-with-default-value): refactor to use optional chaining ♻️ (nodeToolbarComponent): refactor to use optional chaining for template fields 💡 (utils.ts): remove unnecessary trailing commas in function parameters to improve code readability and consistency --- .../src/CustomNodes/GenericNode/index.tsx | 40 +++++++++---------- .../src/CustomNodes/helpers/count-handles.ts | 6 +-- .../utils/get-nodes-with-default-value.ts | 6 +-- .../components/nodeToolbarComponent/index.tsx | 22 +++++----- src/frontend/src/utils/utils.ts | 28 ++++++------- 5 files changed, 51 insertions(+), 51 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 6838d3a42..44ef1a9d2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,5 +1,6 @@ import emojiRegex from "emoji-regex"; import { useEffect, useMemo, useState } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import Markdown from "react-markdown"; import { NodeToolbar, useUpdateNodeInternals } from "reactflow"; import IconComponent from "../../components/genericIconComponent"; @@ -38,7 +39,6 @@ import useValidationStatusString from "../hooks/use-validation-status-string"; import getFieldTitle from "../utils/get-field-title"; import sortFields from "../utils/sort-fields"; import ParameterComponent from "./components/parameterComponent"; -import { useHotkeys } from "react-hotkeys-hook"; export default function GenericNode({ data, @@ -61,10 +61,10 @@ export default function GenericNode({ const setErrorData = useAlertStore((state) => state.setErrorData); const isDark = useDarkStore((state) => state.dark); const buildStatus = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.status, + (state) => state.flowBuildStatus[data.id]?.status ); const lastRunTime = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.timestamp, + (state) => state.flowBuildStatus[data.id]?.timestamp ); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); @@ -72,7 +72,7 @@ export default function GenericNode({ const [nodeName, setNodeName] = useState(data.node!.display_name); const [inputDescription, setInputDescription] = useState(false); const [nodeDescription, setNodeDescription] = useState( - data.node?.description!, + data.node?.description! ); const [isOutdated, setIsOutdated] = useState(false); const [validationStatus, setValidationStatus] = @@ -90,7 +90,7 @@ export default function GenericNode({ data.node!, setNode, setIsOutdated, - updateNodeInternals, + updateNodeInternals ); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; @@ -117,12 +117,12 @@ export default function GenericNode({ selected: boolean, showNode: boolean, buildStatus: BuildStatus | undefined, - validationStatus: VertexBuildTypeAPI | null, + validationStatus: VertexBuildTypeAPI | null ) => { const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( buildStatus, validationStatus, - isDark, + isDark ); const baseBorderClass = getBaseBorderClass(selected); @@ -131,7 +131,7 @@ export default function GenericNode({ baseBorderClass, nodeSizeClass, "generic-node-div group/node", - specificClassFromBuildStatus, + specificClassFromBuildStatus ); return names; }; @@ -176,7 +176,7 @@ export default function GenericNode({ showNode, isEmoji, nodeIconFragment, - checkNodeIconFragment, + checkNodeIconFragment ); function countHandles(): void { @@ -309,7 +309,7 @@ export default function GenericNode({ selected, showNode, buildStatus, - validationStatus, + validationStatus )} > {data.node?.beta && showNode && ( @@ -411,8 +411,8 @@ export default function GenericNode({ .filter((templateField) => templateField.charAt(0) !== "_") .map( (templateField: string, idx) => - data.node!.template[templateField].show && - !data.node!.template[templateField].advanced && ( + data.node!.template[templateField]?.show && + !data.node!.template[templateField]?.advanced && ( - ), + ) )} { setInputDescription(true); @@ -670,8 +670,8 @@ export default function GenericNode({ .sort((a, b) => sortFields(a, b, data.node?.field_order ?? [])) .map((templateField: string, idx) => (
- {data.node!.template[templateField].show && - !data.node!.template[templateField].advanced ? ( + {data.node!.template[templateField]?.show && + !data.node!.template[templateField]?.advanced ? ( {" "} diff --git a/src/frontend/src/CustomNodes/helpers/count-handles.ts b/src/frontend/src/CustomNodes/helpers/count-handles.ts index ebfbfe01b..a7c8697ce 100644 --- a/src/frontend/src/CustomNodes/helpers/count-handles.ts +++ b/src/frontend/src/CustomNodes/helpers/count-handles.ts @@ -5,9 +5,9 @@ export function countHandlesFn(data: NodeDataType): number { .filter((templateField) => templateField.charAt(0) !== "_") .map((templateCamp) => { const { template } = data.node!; - if (template[templateCamp].input_types) return true; - if (!template[templateCamp].show) return false; - switch (template[templateCamp].type) { + if (template[templateCamp]?.input_types) return true; + if (!template[templateCamp]?.show) return false; + switch (template[templateCamp]?.type) { case "str": case "bool": case "float": diff --git a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts index fb30a57a1..657526dda 100644 --- a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts +++ b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts @@ -11,10 +11,10 @@ export const getNodesWithDefaultValue = (flow) => { .filter( (templateField) => templateField.charAt(0) !== "_" && - node.data.node.template[templateField].show && + node.data.node.template[templateField]?.show && LANGFLOW_SUPPORTED_TYPES.has( - node.data.node.template[templateField].type, - ), + node.data.node.template[templateField]?.type + ) ) .map((n, i) => { arrNodesWithValues.push(node["id"]); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 1d0716d83..d61a114ed 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -57,17 +57,17 @@ export default function NodeToolbarComponent({ const nodeLength = Object.keys(data.node!.template).filter( (templateField) => templateField.charAt(0) !== "_" && - data.node?.template[templateField].show && - (data.node.template[templateField].type === "str" || - data.node.template[templateField].type === "bool" || - data.node.template[templateField].type === "float" || - data.node.template[templateField].type === "code" || - data.node.template[templateField].type === "prompt" || - data.node.template[templateField].type === "file" || - data.node.template[templateField].type === "Any" || - data.node.template[templateField].type === "int" || - data.node.template[templateField].type === "dict" || - data.node.template[templateField].type === "NestedDict") + data.node?.template[templateField]?.show && + (data.node.template[templateField]?.type === "str" || + data.node.template[templateField]?.type === "bool" || + data.node.template[templateField]?.type === "float" || + data.node.template[templateField]?.type === "code" || + data.node.template[templateField]?.type === "prompt" || + data.node.template[templateField]?.type === "file" || + data.node.template[templateField]?.type === "Any" || + data.node.template[templateField]?.type === "int" || + data.node.template[templateField]?.type === "dict" || + data.node.template[templateField]?.type === "NestedDict") ).length; const hasStore = useStoreStore((state) => state.hasStore); diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 5d99927a5..5a1f6621f 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string { export function toTitleCase( str: string | undefined, - isNodeField?: boolean, + isNodeField?: boolean ): string { if (!str) return ""; let result = str @@ -65,7 +65,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase(), + word[0].toUpperCase() + word.slice(1).toLowerCase() ); } return checkUpperWords(word.toLowerCase()); @@ -78,7 +78,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase(), + word[0].toUpperCase() + word.slice(1).toLowerCase() ); } return checkUpperWords(word.toLowerCase()); @@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean { export function IncrementObjectKey( object: object, - key: string, + key: string ): { newKey: string; increment: number } { let count = 1; const type = removeCountFromString(key); @@ -217,7 +217,7 @@ export function groupByFamily( data: APIDataType, baseClasses: string, left: boolean, - flow?: NodeType[], + flow?: NodeType[] ): groupedObjType[] { const baseClassesSet = new Set(baseClasses.split("\n")); let arrOfPossibleInputs: Array<{ @@ -237,13 +237,13 @@ export function groupByFamily( const checkBaseClass = (template: TemplateVariableType) => { return ( - template.type && - template.show && + template?.type && + template?.show && ((!excludeTypes.has(template.type) && baseClassesSet.has(template.type)) || - (template.input_types && - template.input_types.some((inputType) => - baseClassesSet.has(inputType), + (template?.input_types && + template?.input_types.some((inputType) => + baseClassesSet.has(inputType) ))) ); }; @@ -263,7 +263,7 @@ export function groupByFamily( hasBaseClassInBaseClasses: foundNode?.hasBaseClassInBaseClasses || nodeData.node!.base_classes.some((baseClass) => - baseClassesSet.has(baseClass), + baseClassesSet.has(baseClass) ), //seta como anterior ou verifica se o node tem base class displayName: nodeData.node?.display_name, }); @@ -280,10 +280,10 @@ export function groupByFamily( if (!foundNode) { foundNode = { hasBaseClassInTemplate: Object.values(node!.template).some( - checkBaseClass, + checkBaseClass ), hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) => - baseClassesSet.has(baseClass), + baseClassesSet.has(baseClass) ), displayName: node?.display_name, }; @@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean { export function extractColumnsFromRows( rows: object[], mode: "intersection" | "union", - excludeColumns?: Array, + excludeColumns?: Array ): (ColDef | ColGroupDef)[] { let columnsKeys: { [key: string]: ColDef | ColGroupDef } = {}; if (rows.length === 0) {