From 9204b723834cac6509e9d6ea542b1d7016fbb653 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Thu, 6 Jul 2023 01:45:00 +1200
Subject: [PATCH] feat: Make Embedding Picker a mini toggle

---
 .../components/ParamEmbeddingCollapse.tsx     | 11 +++++++---
 .../Core/ParamPositiveConditioning.tsx        | 22 ++++++++++++++++---
 .../ImageToImageTabParameters.tsx             |  2 +-
 .../TextToImage/TextToImageTabParameters.tsx  |  2 +-
 .../UnifiedCanvas/UnifiedCanvasParameters.tsx |  2 +-
 .../web/src/features/ui/store/uiSlice.ts      |  7 +++++-
 .../web/src/features/ui/store/uiTypes.ts      |  1 +
 7 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingCollapse.tsx b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingCollapse.tsx
index cb3a7bc7e0..4afce97ee5 100644
--- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingCollapse.tsx
+++ b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingCollapse.tsx
@@ -1,13 +1,18 @@
 import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import ParamEmbeddingSelect from './ParamEmbeddingSelect';
 
 export default function ParamEmbeddingCollapse() {
+  const shouldShowEmbeddingPicker = useAppSelector(
+    (state: RootState) => state.ui.shouldShowEmbeddingPicker
+  );
+
   return (
-    <IAICollapse label="Embeddings">
+    shouldShowEmbeddingPicker && (
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamEmbeddingSelect />
       </Flex>
-    </IAICollapse>
+    )
   );
 }
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
index f42942a84b..4a03f83c7c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
@@ -11,12 +11,15 @@ import {
 } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 
+import { userInvoked } from 'app/store/actions';
+import IAIIconButton from 'common/components/IAIIconButton';
+import IAITextarea from 'common/components/IAITextarea';
+import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import { toggleEmbeddingPicker } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { userInvoked } from 'app/store/actions';
-import IAITextarea from 'common/components/IAITextarea';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import { BiCode } from 'react-icons/bi';
 
 const promptInputSelector = createSelector(
   [(state: RootState) => state.generation, activeTabNameSelector],
@@ -68,8 +71,21 @@ const ParamPositiveConditioning = () => {
     [dispatch, activeTabName, isReady]
   );
 
+  const shouldShowEmbeddingPicker = useAppSelector(
+    (state: RootState) => state.ui.shouldShowEmbeddingPicker
+  );
+
   return (
     <Box>
+      <IAIIconButton
+        size="xs"
+        aria-label="Toggle Embedding Picker"
+        tooltip="Toggle Embedding Picker"
+        icon={<BiCode />}
+        sx={{ position: 'absolute', top: 8, right: 2, zIndex: 2 }}
+        isChecked={shouldShowEmbeddingPicker}
+        onClick={() => dispatch(toggleEmbeddingPicker())}
+      ></IAIIconButton>
       <FormControl>
         <IAITextarea
           id="prompt"
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
index 00edbe4706..1207853fe8 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
@@ -17,9 +17,9 @@ const ImageToImageTabParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
index 1853679625..edd5e22d83 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
@@ -18,9 +18,9 @@ const TextToImageTabParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
index bb6e7f2612..bfe9584b86 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@@ -17,9 +17,9 @@ const UnifiedCanvasParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 38af668cac..861bf49405 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -1,10 +1,10 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import { SchedulerParam } from 'features/parameters/store/parameterZodSchemas';
 import { setActiveTabReducer } from './extraReducers';
 import { InvokeTabName } from './tabMap';
 import { AddNewModelType, UIState } from './uiTypes';
-import { SchedulerParam } from 'features/parameters/store/parameterZodSchemas';
 
 export const initialUIState: UIState = {
   activeTab: 0,
@@ -19,6 +19,7 @@ export const initialUIState: UIState = {
   shouldShowGallery: true,
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
+  shouldShowEmbeddingPicker: false,
   favoriteSchedulers: [],
 };
 
@@ -96,6 +97,9 @@ export const uiSlice = createSlice({
     ) => {
       state.favoriteSchedulers = action.payload;
     },
+    toggleEmbeddingPicker: (state) => {
+      state.shouldShowEmbeddingPicker = !state.shouldShowEmbeddingPicker;
+    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -122,6 +126,7 @@ export const {
   toggleGalleryPanel,
   setShouldShowProgressInViewer,
   favoriteSchedulersChanged,
+  toggleEmbeddingPicker,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index d55a1d8fcf..ad0250e56d 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -27,5 +27,6 @@ export interface UIState {
   shouldPinGallery: boolean;
   shouldShowGallery: boolean;
   shouldShowProgressInViewer: boolean;
+  shouldShowEmbeddingPicker: boolean;
   favoriteSchedulers: SchedulerParam[];
 }