From c92e25a6a7627584812b420e54b68771a1e50a87 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 22 Jan 2024 09:16:26 +1100
Subject: [PATCH] fix(ui): add tooltip to model select

---
 .../MainModel/ParamMainModelSelect.tsx        | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
index db9a3cb646..950ffa0f6e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -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 { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { modelSelected } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { pick } from 'lodash-es';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NON_REFINER_BASE_MODELS } from 'services/api/constants';
 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(
   selectGenerationSlice,
@@ -21,6 +25,13 @@ const ParamMainModelSelect = () => {
   const { t } = useTranslation();
   const model = useAppSelector(selectModel);
   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(
     (model: MainModelConfigEntity | null) => {
       if (!model) {
@@ -41,16 +52,18 @@ const ParamMainModelSelect = () => {
     });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length}>
-      <FormLabel>{t('modelManager.model')}</FormLabel>
-      <Combobox
-        value={value}
-        placeholder={placeholder}
-        options={options}
-        onChange={onChange}
-        noOptionsMessage={noOptionsMessage}
-      />
-    </FormControl>
+    <Tooltip label={tooltipLabel}>
+      <FormControl isDisabled={!options.length} isInvalid={!options.length}>
+        <FormLabel>{t('modelManager.model')}</FormLabel>
+        <Combobox
+          value={value}
+          placeholder={placeholder}
+          options={options}
+          onChange={onChange}
+          noOptionsMessage={noOptionsMessage}
+        />
+      </FormControl>
+    </Tooltip>
   );
 };