From 6cb0581b0d624352827bab12bd4978194e3703cb Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 19 Jul 2024 20:54:19 -0400
Subject: [PATCH] add description to upscale model dropdown tooltip

---
 .../components/Upscale/ParamSpandrelModel.tsx | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
index 3d32a0ad91..11216692ec 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
@@ -1,8 +1,8 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
 import type { SpandrelImageToImageModelConfig } from 'services/api/types';
@@ -12,9 +12,15 @@ const ParamSpandrelModel = () => {
   const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
 
   const model = useAppSelector((s) => s.upscale.upscaleModel);
-
   const dispatch = useAppDispatch();
 
+  const tooltipLabel = useMemo(() => {
+    if (!modelConfigs.length || !model) {
+      return;
+    }
+    return modelConfigs.find((m) => m.key === model?.key)?.description;
+  }, [modelConfigs, model]);
+
   const _onChange = useCallback(
     (v: SpandrelImageToImageModelConfig | null) => {
       dispatch(upscaleModelChanged(v));
@@ -32,13 +38,17 @@ const ParamSpandrelModel = () => {
   return (
     <FormControl orientation="vertical">
       <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
-      <Combobox
-        value={value}
-        placeholder={placeholder}
-        options={options}
-        onChange={onChange}
-        noOptionsMessage={noOptionsMessage}
-      />
+      <Tooltip label={tooltipLabel}>
+        <Box w="full">
+          <Combobox
+            value={value}
+            placeholder={placeholder}
+            options={options}
+            onChange={onChange}
+            noOptionsMessage={noOptionsMessage}
+          />
+        </Box>
+      </Tooltip>
     </FormControl>
   );
 };