fix(ui): fix metadata display issue

invoke-ai · Feb 29, 2024 · bae7e2e · bae7e2e
1 parent 7a80795
commit bae7e2e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx b/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
@@ -18,7 +18,7 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>(
     MetadataParsePendingToken
   );
-  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(Pending);
+  const [renderedValueInternal, setRenderedValueInternal] = useState<React.ReactNode>(null);
 
   useEffect(() => {
     const _parse = async () => {
@@ -39,26 +39,32 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   useEffect(() => {
     const _renderValue = async () => {
       if (value === MetadataParsePendingToken) {
-        setRenderedValue(Pending);
+        setRenderedValueInternal(null);
         return;
       }
       if (value === MetadataParseFailedToken) {
-        setRenderedValue(Failed);
+        setRenderedValueInternal(null);
         return;
       }
 
       const rendered = await handlers.renderValue(value);
 
-      if (typeof rendered === 'string') {
-        setRenderedValue(<Text>{rendered}</Text>);
-        return;
-      }
-      setRenderedValue(rendered);
+      setRenderedValueInternal(rendered);
     };
 
     _renderValue();
   }, [handlers, value]);
 
+  const renderedValue = useMemo(() => {
+    if (value === MetadataParsePendingToken) {
+      return <Pending />;
+    }
+    if (value === MetadataParseFailedToken) {
+      return <Failed />;
+    }
+    return <Text>{renderedValueInternal}</Text>;
+  }, [renderedValueInternal, value]);
+
   const onRecall = useCallback(() => {
     if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
       return null;

diff --git a/invokeai/frontend/web/src/features/metadata/types.ts b/invokeai/frontend/web/src/features/metadata/types.ts
@@ -4,7 +4,7 @@ import type { O } from 'ts-toolbelt';
 /**
  * Renders a value of type T as a React node.
  */
-export type MetadataRenderValueFunc<T> = (value: T) => Promise<React.ReactNode>;
+export type MetadataRenderValueFunc<T> = (value: T) => Promise<string>;
 
 /**
  * Gets the label of the current metadata item as a string.

diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -150,7 +150,7 @@ const buildRecallItem =
     }
   };
 
-const resolveToString = (value: unknown) => new Promise<React.ReactNode>((resolve) => resolve(String(value)));
+const resolveToString = (value: unknown) => new Promise<string>((resolve) => resolve(String(value)));
 
 const buildHandlers: BuildMetadataHandlers = ({
   getLabel,