github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-14 11:55:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): traverse groups when finding selected model in picker

Browse Source
This commit is contained in:
psychedelicious
2025-07-08 15:33:37 +10:00
committed by Kent Keirsey
parent b1e2cb8401
commit c391f1117a
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/common/components/Picker/Picker.tsx
View File

@@ -87,14 +87,10 @@ export const buildGroup = <T extends object>(group: Omit<Group<T>, typeof unique
[uniqueGroupKey]: true,
});
const isGroup = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is Group<T> => {
export const isGroup = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is Group<T> => {
return uniqueGroupKey in optionOrGroup && optionOrGroup[uniqueGroupKey] === true;
};
export const isOption = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is T => {
return !(uniqueGroupKey in optionOrGroup);
};
const DefaultOptionComponent = typedMemo(<T extends object>({ option }: { option: T }) => {
const { getOptionId } = usePickerContext();
return <Text fontWeight="bold">{getOptionId(option)}</Text>;

23
invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx
View File

@@ -18,7 +18,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { $onClickGoToModelManager } from 'app/store/nanostores/onClickGoToModelManager';
import { useAppSelector } from 'app/store/storeHooks';
import type { Group, PickerContextState } from 'common/components/Picker/Picker';
import { buildGroup, getRegex, isOption, Picker, usePickerContext } from 'common/components/Picker/Picker';
import { buildGroup, getRegex, isGroup, Picker, usePickerContext } from 'common/components/Picker/Picker';
import { useDisclosure } from 'common/hooks/useBoolean';
import { typedMemo } from 'common/util/typedMemo';
import { uniq } from 'es-toolkit/compat';
@@ -277,8 +277,19 @@ export const ModelPicker = typedMemo(
if (!selectedModelConfig) {
return undefined;
}
let _selectedOption: WithStarred<T> | undefined = undefined;
return options.filter(isOption).find((o) => o.key === selectedModelConfig.key);
for (const optionOrGroup of options) {
if (isGroup(optionOrGroup)) {
_selectedOption = optionOrGroup.options.find((o) => o.key === selectedModelConfig.key);
break;
} else if (optionOrGroup.key === selectedModelConfig.key) {
_selectedOption = optionOrGroup;
break;
}
}
return _selectedOption;
}, [options, selectedModelConfig]);
const onClose = useCallback(() => {
@@ -362,6 +373,12 @@ const optionSx: SystemStyleObject = {
borderRadius: 'base',
'&[data-selected="true"]': {
bg: 'base.700',
'.picker-option': {
fontWeight: 'bold',
'&[data-is-compact="true"]': {
fontWeight: 'semibold',
},
},
'&[data-active="true"]': {
bg: 'base.650',
},
@@ -400,7 +417,7 @@ const PickerOptionComponent = typedMemo(
<Flex flexDir="column" gap={1} flex={1}>
<Flex gap={2} alignItems="center">
{option.starred && <Icon as={PiLinkSimple} color="invokeYellow.500" boxSize={4} />}
<Text sx={optionNameSx} data-is-compact={compactView}>
<Text className="picker-option" sx={optionNameSx} data-is-compact={compactView}>
{option.name}
</Text>
<Spacer />