chore(ui): "useInputFieldLabel" -> "useInputFieldLabelSafe"

Also update docstrings

Author: psychedelicious

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx

@@ -9,7 +9,7 @@ import {
   useIsConnectionStartField,
 } from 'features/nodes/hooks/useFieldConnectionState';
 import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
-import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldLabelSafe } from 'features/nodes/hooks/useInputFieldLabelSafe';
 import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
 import { HANDLE_TOOLTIP_OPEN_DELAY, NO_FIT_ON_DOUBLE_CLICK_CLASS } from 'features/nodes/types/constants';
@@ -43,7 +43,7 @@ interface Props {
 export const InputFieldTitle = memo((props: Props) => {
   const { nodeId, fieldName, isInvalid, isDragging } = props;
   const inputRef = useRef<HTMLInputElement>(null);
-  const label = useInputFieldLabel(nodeId, fieldName);
+  const label = useInputFieldLabelSafe(nodeId, fieldName);
   const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
   const { t } = useTranslation();
   const isConnected = useInputFieldIsConnected(nodeId, fieldName);

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx

@@ -1,14 +1,14 @@
 import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
 import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
-import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldLabelSafe } from 'features/nodes/hooks/useInputFieldLabelSafe';
 import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
 import type { NodeFieldElement } from 'features/nodes/types/workflow';
 import { memo, useMemo } from 'react';
 
 export const NodeFieldElementLabel = memo(({ el }: { el: NodeFieldElement }) => {
   const { data } = el;
   const { fieldIdentifier } = data;
-  const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
+  const label = useInputFieldLabelSafe(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
   const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
 
   const _label = useMemo(() => label || fieldTemplate.title, [label, fieldTemplate.title]);

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx

@@ -2,7 +2,7 @@ import { Flex, FormLabel, Input, Spacer } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useEditable } from 'common/hooks/useEditable';
 import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
-import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldLabelSafe } from 'features/nodes/hooks/useInputFieldLabelSafe';
 import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
 import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
 import type { NodeFieldElement } from 'features/nodes/types/workflow';
@@ -12,7 +12,7 @@ export const NodeFieldElementLabelEditable = memo(({ el }: { el: NodeFieldElemen
   const { data } = el;
   const { fieldIdentifier } = data;
   const dispatch = useAppDispatch();
-  const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
+  const label = useInputFieldLabelSafe(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
   const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
   const inputRef = useRef<HTMLInputElement>(null);
 

invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLabel.ts

@@ -0,0 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectFieldInputInstanceSafe, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+/**
+ * Gets the user-defined label of an input field for a given node.
+ *
+ * If the node doesn't exist or is not an invocation node, an empty string is returned.
+ *
+ * @param nodeId The ID of the node
+ * @param fieldName The name of the field
+ */
+export const useInputFieldLabelSafe = (nodeId: string, fieldName: string): string => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => selectFieldInputInstanceSafe(nodes, nodeId, fieldName)?.label ?? ''),
+    [fieldName, nodeId]
+  );
+
+  const label = useAppSelector(selector);
+
+  return label;
+};