Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix metadata display issue

Browse Source
This commit is contained in:
psychedelicious 2024-03-01 09:57:26 +11:00
parent bbbd18f119
commit 8b03af391a
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
View File

@ -18,7 +18,7 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>( const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>(
MetadataParsePendingToken MetadataParsePendingToken
); );
const [renderedValue, setRenderedValue] = useState<React.ReactNode>(Pending); const [renderedValueInternal, setRenderedValueInternal] = useState<React.ReactNode>(null);
useEffect(() => { useEffect(() => {
const _parse = async () => { const _parse = async () => {
@ -39,26 +39,32 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
useEffect(() => { useEffect(() => {
const _renderValue = async () => { const _renderValue = async () => {
if (value === MetadataParsePendingToken) { if (value === MetadataParsePendingToken) {
setRenderedValue(Pending); setRenderedValueInternal(null);
return; return;
} }
if (value === MetadataParseFailedToken) { if (value === MetadataParseFailedToken) {
setRenderedValue(Failed); setRenderedValueInternal(null);
return; return;
} }
const rendered = await handlers.renderValue(value); const rendered = await handlers.renderValue(value);
if (typeof rendered === 'string') { setRenderedValueInternal(rendered);
setRenderedValue(<Text>{rendered}</Text>);
return;
}
setRenderedValue(rendered);
}; };
_renderValue(); _renderValue();
}, [handlers, value]); }, [handlers, value]);
const renderedValue = useMemo(() => {
if (value === MetadataParsePendingToken) {
return <Pending />;
}
if (value === MetadataParseFailedToken) {
return <Failed />;
}
return <Text>{renderedValueInternal}</Text>;
}, [renderedValueInternal, value]);
const onRecall = useCallback(() => { const onRecall = useCallback(() => {
if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) { if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
return null; return null;

2
invokeai/frontend/web/src/features/metadata/types.ts
View File

@ -4,7 +4,7 @@ import type { O } from 'ts-toolbelt';
/** /**
* Renders a value of type T as a React node. * 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. * Gets the label of the current metadata item as a string.

2
invokeai/frontend/web/src/features/metadata/util/handlers.ts
View File

@ -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 = ({ const buildHandlers: BuildMetadataHandlers = ({
getLabel, getLabel,