♻️ (GenericNode): refactor to use optional chaining for template fields

♻️ (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
2024-06-12 12:43:35 -03:00 · 2024-06-12 12:43:35 -03:00 · 191fae732c
commit 191fae732c
parent b48caa0b82
5 changed files with 51 additions and 51 deletions
--- 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 && (
                          <ParameterComponent
                            selected={selected}
                            index={idx.toString()}
@ -457,7 +457,7 @@ export default function GenericNode({
                            }
                            title={getFieldTitle(
                              data.node?.template!,
-                              templateField,
+                              templateField
                            )}
                            info={data.node?.template[templateField].info}
                            name={templateField}
@ -485,7 +485,7 @@ export default function GenericNode({
                            proxy={data.node?.template[templateField].proxy}
                            showNode={showNode}
                          />
-                        ),
+                        )
                    )}
                  <ParameterComponent
                    selected={selected}
@ -643,7 +643,7 @@ export default function GenericNode({
                      !data.node?.description) &&
                      nameEditable
                      ? "font-light italic"
-                      : "",
+                      : ""
                  )}
                  onDoubleClick={(e) => {
                    setInputDescription(true);
@ -670,8 +670,8 @@ export default function GenericNode({
                .sort((a, b) => sortFields(a, b, data.node?.field_order ?? []))
                .map((templateField: string, idx) => (
                  <div key={idx}>
-                    {data.node!.template[templateField].show &&
-                    !data.node!.template[templateField].advanced ? (
+                    {data.node!.template[templateField]?.show &&
+                    !data.node!.template[templateField]?.advanced ? (
                      <ParameterComponent
                        selected={selected}
                        index={idx.toString()}
@ -713,13 +713,13 @@ export default function GenericNode({
                        }
                        title={getFieldTitle(
                          data.node?.template!,
-                          templateField,
+                          templateField
                        )}
                        info={data.node?.template[templateField].info}
                        name={templateField}
                        tooltipTitle={
                          data.node?.template[templateField].input_types?.join(
-                            "\n",
+                            "\n"
                          ) ?? data.node?.template[templateField].type
                        }
                        required={data.node!.template[templateField].required}
@ -746,7 +746,7 @@ export default function GenericNode({
              <div
                className={classNames(
                  Object.keys(data.node!.template).length < 1 ? "hidden" : "",
-                  "flex-max-width justify-center",
+                  "flex-max-width justify-center"
                )}
              >
                {" "}
--- 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":
--- 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"]);
--- 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);
--- 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<string>,
+  excludeColumns?: Array<string>
 ): (ColDef<any> | ColGroupDef<any>)[] {
  let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
  if (rows.length === 0) {