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): add tooltip to model select

Browse Source
This commit is contained in:
psychedelicious 2024-01-22 09:16:26 +11:00
parent 8be03dead5
commit c92e25a6a7
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
View File

@ -1,15 +1,19 @@
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
import { modelSelected } from 'features/parameters/store/actions'; import { modelSelected } from 'features/parameters/store/actions';
import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { pick } from 'lodash-es'; import { pick } from 'lodash-es';
import { memo, useCallback } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { NON_REFINER_BASE_MODELS } from 'services/api/constants'; import { NON_REFINER_BASE_MODELS } from 'services/api/constants';
import type { MainModelConfigEntity } from 'services/api/endpoints/models'; import type { MainModelConfigEntity } from 'services/api/endpoints/models';
import { useGetMainModelsQuery } from 'services/api/endpoints/models'; import {
getModelId,
mainModelsAdapterSelectors,
useGetMainModelsQuery,
} from 'services/api/endpoints/models';
const selectModel = createMemoizedSelector( const selectModel = createMemoizedSelector(
selectGenerationSlice, selectGenerationSlice,
@ -21,6 +25,13 @@ const ParamMainModelSelect = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const model = useAppSelector(selectModel); const model = useAppSelector(selectModel);
const { data, isLoading } = useGetMainModelsQuery(NON_REFINER_BASE_MODELS); const { data, isLoading } = useGetMainModelsQuery(NON_REFINER_BASE_MODELS);
const tooltipLabel = useMemo(() => {
if (!data || !model) {
return;
}
return mainModelsAdapterSelectors.selectById(data, getModelId(model))
?.description;
}, [data, model]);
const _onChange = useCallback( const _onChange = useCallback(
(model: MainModelConfigEntity | null) => { (model: MainModelConfigEntity | null) => {
if (!model) { if (!model) {
@ -41,16 +52,18 @@ const ParamMainModelSelect = () => {
}); });
return ( return (
<FormControl isDisabled={!options.length} isInvalid={!options.length}> <Tooltip label={tooltipLabel}>
<FormLabel>{t('modelManager.model')}</FormLabel> <FormControl isDisabled={!options.length} isInvalid={!options.length}>
<Combobox <FormLabel>{t('modelManager.model')}</FormLabel>
value={value} <Combobox
placeholder={placeholder} value={value}
options={options} placeholder={placeholder}
onChange={onChange} options={options}
noOptionsMessage={noOptionsMessage} onChange={onChange}
/> noOptionsMessage={noOptionsMessage}
</FormControl> />
</FormControl>
</Tooltip>
); );
}; };