From 667d4deeb7e5c91f6024c834dfe9db6d4f66fe4f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 30 Aug 2023 22:36:40 +1000
Subject: [PATCH] feat(ui): improved model node ui

---
 .../fields/inputs/ControlNetModelInputField.tsx     |  1 +
 .../fields/inputs/LoRAModelInputField.tsx           |  2 ++
 .../fields/inputs/RefinerModelInputField.tsx        | 13 +++++--------
 .../fields/inputs/SDXLMainModelInputField.tsx       |  3 ++-
 .../Invocation/fields/inputs/VaeModelInputField.tsx |  2 ++
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelInputField.tsx
index f66c8b0cfd..804671204d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelInputField.tsx
@@ -92,6 +92,7 @@ const ControlNetModelInputFieldComponent = (
       error={!selectedModel}
       data={data}
       onChange={handleValueChanged}
+      sx={{ width: '100%' }}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx
index 6d0e37d063..7f8f179add 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx
@@ -101,8 +101,10 @@ const LoRAModelInputFieldComponent = (
         item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
         item.value.toLowerCase().includes(value.toLowerCase().trim())
       }
+      error={!selectedLoRAModel}
       onChange={handleChange}
       sx={{
+        width: '100%',
         '.mantine-Select-dropdown': {
           width: '16rem !important',
         },
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx
index 4298670934..edad33d342 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx
@@ -1,12 +1,12 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { SelectItem } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { fieldRefinerModelValueChanged } from 'features/nodes/store/nodesSlice';
 import {
+  FieldComponentProps,
   SDXLRefinerModelInputFieldTemplate,
   SDXLRefinerModelInputFieldValue,
-  FieldComponentProps,
 } from 'features/nodes/types/types';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
@@ -101,20 +101,17 @@ const RefinerModelInputFieldComponent = (
         value={selectedModel?.id}
         placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
         data={data}
-        error={data.length === 0}
+        error={!selectedModel}
         disabled={data.length === 0}
         onChange={handleChangeModel}
         sx={{
+          width: '100%',
           '.mantine-Select-dropdown': {
             width: '16rem !important',
           },
         }}
       />
-      {isSyncModelEnabled && (
-        <Box mt={7}>
-          <SyncModelsButton className="nodrag" iconMode />
-        </Box>
-      )}
+      {isSyncModelEnabled && <SyncModelsButton className="nodrag" iconMode />}
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx
index f1721ecd58..ffb4d8d412 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx
@@ -128,10 +128,11 @@ const ModelInputFieldComponent = (
         value={selectedModel?.id}
         placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
         data={data}
-        error={data.length === 0}
+        error={!selectedModel}
         disabled={data.length === 0}
         onChange={handleChangeModel}
         sx={{
+          width: '100%',
           '.mantine-Select-dropdown': {
             width: '16rem !important',
           },
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeModelInputField.tsx
index af7b426947..79ada94c3e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeModelInputField.tsx
@@ -93,8 +93,10 @@ const VaeModelInputFieldComponent = (
       data={data}
       onChange={handleChangeModel}
       disabled={data.length === 0}
+      error={!selectedVaeModel}
       clearable
       sx={{
+        width: '100%',
         '.mantine-Select-dropdown': {
           width: '16rem !important',
         },