From 4ba5086b9afccff84152ed541a42ecc2c2989e5f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 12 Jun 2023 22:11:56 +1000
Subject: [PATCH] feat(ui): add tooltip to IAIMantineSelect

---
 .../common/components/IAIMantineSelect.tsx    | 95 ++++++++++---------
 .../parameters/ParamControlNetModel.tsx       |  1 +
 .../system/components/ModelSelect.tsx         |  1 +
 3 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 1dff0db407..115914213b 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -1,62 +1,67 @@
-import { forwardRef } from '@chakra-ui/react';
+import { Tooltip, forwardRef } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { memo } from 'react';
 
-type IAISelectProps = SelectProps;
+type IAISelectProps = SelectProps & {
+  tooltip?: string;
+};
 
 const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
-  const { searchable = true, ...rest } = props;
+  const { searchable = true, tooltip, ...rest } = props;
   return (
-    <Select
-      ref={ref}
-      searchable={searchable}
-      styles={() => ({
-        label: {
-          color: 'var(--invokeai-colors-base-300)',
-          fontWeight: 'normal',
-        },
-        input: {
-          backgroundColor: 'var(--invokeai-colors-base-900)',
-          borderWidth: '2px',
-          borderColor: 'var(--invokeai-colors-base-800)',
-          color: 'var(--invokeai-colors-base-100)',
-          fontWeight: 600,
-          '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
-          '&:focus': {
-            borderColor: 'var(--invokeai-colors-accent-600)',
+    <Tooltip label={tooltip} placement="top" hasArrow>
+      <Select
+        ref={ref}
+        searchable={searchable}
+        styles={() => ({
+          root: {},
+          label: {
+            color: 'var(--invokeai-colors-base-300)',
+            fontWeight: 'normal',
           },
-        },
-        dropdown: {
-          backgroundColor: 'var(--invokeai-colors-base-800)',
-          borderColor: 'var(--invokeai-colors-base-700)',
-        },
-        item: {
-          backgroundColor: 'var(--invokeai-colors-base-800)',
-          color: 'var(--invokeai-colors-base-200)',
-          padding: 6,
-          '&[data-hovered]': {
+          input: {
+            backgroundColor: 'var(--invokeai-colors-base-900)',
+            borderWidth: '2px',
+            borderColor: 'var(--invokeai-colors-base-800)',
             color: 'var(--invokeai-colors-base-100)',
-            backgroundColor: 'var(--invokeai-colors-base-750)',
+            fontWeight: 600,
+            '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
+            '&:focus': {
+              borderColor: 'var(--invokeai-colors-accent-600)',
+            },
           },
-          '&[data-active]': {
-            backgroundColor: 'var(--invokeai-colors-base-750)',
-            '&:hover': {
+          dropdown: {
+            backgroundColor: 'var(--invokeai-colors-base-800)',
+            borderColor: 'var(--invokeai-colors-base-700)',
+          },
+          item: {
+            backgroundColor: 'var(--invokeai-colors-base-800)',
+            color: 'var(--invokeai-colors-base-200)',
+            padding: 6,
+            '&[data-hovered]': {
               color: 'var(--invokeai-colors-base-100)',
               backgroundColor: 'var(--invokeai-colors-base-750)',
             },
-          },
-          '&[data-selected]': {
-            color: 'var(--invokeai-colors-base-50)',
-            backgroundColor: 'var(--invokeai-colors-accent-650)',
-            fontWeight: 600,
-            '&:hover': {
-              backgroundColor: 'var(--invokeai-colors-accent-600)',
+            '&[data-active]': {
+              backgroundColor: 'var(--invokeai-colors-base-750)',
+              '&:hover': {
+                color: 'var(--invokeai-colors-base-100)',
+                backgroundColor: 'var(--invokeai-colors-base-750)',
+              },
+            },
+            '&[data-selected]': {
+              color: 'var(--invokeai-colors-base-50)',
+              backgroundColor: 'var(--invokeai-colors-accent-650)',
+              fontWeight: 600,
+              '&:hover': {
+                backgroundColor: 'var(--invokeai-colors-accent-600)',
+              },
             },
           },
-        },
-      })}
-      {...rest}
-    />
+        })}
+        {...rest}
+      />
+    </Tooltip>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
index e5543cc2eb..d5d86dd3ef 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
@@ -54,6 +54,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
       value={model}
       onChange={handleModelChanged}
       disabled={!isReady}
+      tooltip={model}
     />
   );
   // return (
diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
index 69407b6e61..3f76aa0251 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
@@ -63,6 +63,7 @@ const ModelSelect = () => {
 
   return (
     <IAIMantineSelect
+      tooltip={selectedModel?.description}
       label={t('modelManager.model')}
       value={selectedModel?.name ?? ''}
       placeholder="Pick one"