fix(ui): fix rebase conflicts

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx

@@ -1,10 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAICustomSelect, {
-  IAICustomSelectOption,
-} from 'common/components/IAICustomSelect';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import IAISelect from 'common/components/IAISelect';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import {
   CONTROLNET_MODELS,
@@ -13,7 +9,7 @@ import {
 import { controlNetModelChanged } from 'features/controlNet/store/controlNetSlice';
 import { configSelector } from 'features/system/store/configSelectors';
 import { map } from 'lodash-es';
-import { ChangeEvent, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
 type ParamControlNetModelProps = {
   controlNetId: string;
@@ -24,15 +20,14 @@ const selector = createSelector(configSelector, (config) => {
   return map(CONTROLNET_MODELS, (m) => ({
     label: m.label,
     value: m.type,
-  })).filter((d) => !config.sd.disabledControlNetModels.includes(d.value));
+  })).filter(
+    (d) =>
+      !config.sd.disabledControlNetModels.includes(
+        d.value as ControlNetModelName
+      )
+  );
 });
 
-const DATA = map(CONTROLNET_MODELS, (m) => ({
-  value: m.type,
-  label: m.label,
-  tooltip: m.type,
-}));
-
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   const { controlNetId, model } = props;
   const controlNetModels = useAppSelector(selector);
@@ -57,18 +52,6 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
       tooltip={model}
     />
   );
-  // return (
-  //   <IAICustomSelect
-  //     tooltip={model}
-  //     tooltipProps={{ placement: 'top', hasArrow: true }}
-  //     data={DATA}
-  //     value={model}
-  //     onChange={handleModelChanged}
-  //     isDisabled={!isReady}
-  //     ellipsisPosition="start"
-  //     withCheckIcon
-  //   />
-  // );
 };
 
 export default memo(ParamControlNetModel);

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -1,10 +1,8 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 
-import IAIMantineSelect, {
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
-  IAISelectDataType,
-} from 'common/components/IAIMantineSelect';
 import { map } from 'lodash-es';
-import { ChangeEvent, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import {
@@ -14,60 +12,38 @@ import {
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import { createSelector } from '@reduxjs/toolkit';
 import { configSelector } from 'features/system/store/configSelectors';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;
   processorNode: ControlNetProcessorNode;
 };
 
-const CONTROLNET_PROCESSOR_TYPES: IAISelectDataType[] = map(
+const selector = createSelector(
-  CONTROLNET_PROCESSORS,
+  configSelector,
-  (p) => ({
+  (config) => {
-    value: p.type,
+    return map(CONTROLNET_PROCESSORS, (p) => ({
-    label: p.label,
+      value: p.type,
-    tooltip: p.description,
+      key: p.label,
-  })
+    }))
-).sort((a, b) =>
+      .sort((a, b) =>
-  // sort 'none' to the top
+        // sort 'none' to the top
-  a.value === 'none'
+        a.value === 'none'
-    ? -1
+          ? -1
-    : b.value === 'none'
+          : b.value === 'none'
-    ? 1
+          ? 1
-    : a.label.localeCompare(b.label)
+          : a.key.localeCompare(b.key)
+      )
+      .filter(
+        (d) =>
+          !config.sd.disabledControlNetProcessors.includes(
+            d.value as ControlNetProcessorType
+          )
+      );
+  },
+  defaultSelectorOptions
 );
 
-const selector = createSelector(configSelector, (config) => {
-  return map(CONTROLNET_PROCESSORS, (p) => ({
-    value: p.type,
-    key: p.label,
-  }))
-    .sort((a, b) =>
-      // sort 'none' to the top
-      a.value === 'none'
-        ? -1
-        : b.value === 'none'
-        ? 1
-        : a.key.localeCompare(b.key)
-    )
-    .filter((d) => !config.sd.disabledControlNetProcessors.includes(d.value));
-});
-
-// const CONTROLNET_PROCESSOR_TYPES: IAICustomSelectOption[] = map(
-//   CONTROLNET_PROCESSORS,
-//   (p) => ({
-//     value: p.type,
-//     label: p.label,
-//     tooltip: p.description,
-//   })
-// ).sort((a, b) =>
-//   // sort 'none' to the top
-//   a.value === 'none'
-//     ? -1
-//     : b.value === 'none'
-//     ? 1
-//     : a.label.localeCompare(b.label)
-// );
-
 const ParamControlNetProcessorSelect = (
   props: ParamControlNetProcessorSelectProps
 ) => {
@@ -76,17 +52,6 @@ const ParamControlNetProcessorSelect = (
   const isReady = useIsReadyToInvoke();
   const controlNetProcessors = useAppSelector(selector);
 
-  // const handleProcessorTypeChanged = useCallback(
-  //   (e: ChangeEvent<HTMLSelectElement>) => {
-  //     dispatch(
-  //       controlNetProcessorTypeChanged({
-  //         controlNetId,
-  //         processorType: e.target.value as ControlNetProcessorType,
-  //       })
-  //     );
-  //   },
-  //   [controlNetId, dispatch]
-  // );
   const handleProcessorTypeChanged = useCallback(
     (v: string | null) => {
       dispatch(
@@ -108,16 +73,6 @@ const ParamControlNetProcessorSelect = (
       disabled={!isReady}
     />
   );
-  // return (
-  //   <IAICustomSelect
-  //     label="Processor"
-  //     value={processorNode.type ?? 'canny_image_processor'}
-  //     data={CONTROLNET_PROCESSOR_TYPES}
-  //     onChange={handleProcessorTypeChanged}
-  //     withCheckIcon
-  //     isDisabled={!isReady}
-  //   />
-  // );
 };
 
 export default memo(ParamControlNetProcessorSelect);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx

@@ -6,19 +6,13 @@ import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { ChangeEvent, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   [uiSelector, generationSelector],
   (ui, generation) => {
-    // TODO: DPMSolverSinglestepScheduler is fixed in https://github.com/huggingface/diffusers/pull/3413
+    const allSchedulers = ui.schedulers.sort((a, b) => a.localeCompare(b));
-    // but we need to wait for the next release before removing this special handling.
-    const allSchedulers = ui.schedulers
-      .filter((scheduler) => {
-        return !['dpmpp_2s'].includes(scheduler);
-      })
-      .sort((a, b) => a.localeCompare(b));
 
     return {
       scheduler: generation.scheduler,
@@ -35,39 +29,23 @@ const ParamScheduler = () => {
   const { t } = useTranslation();
 
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
+    (v: string | null) => {
-      dispatch(setScheduler(e.target.value as Scheduler));
+      if (!v) {
+        return;
+      }
+      dispatch(setScheduler(v as Scheduler));
     },
     [dispatch]
   );
-  // const handleChange = useCallback(
-  //   (v: string | null | undefined) => {
-  //     if (!v) {
-  //       return;
-  //     }
-  //     dispatch(setScheduler(v as Scheduler));
-  //   },
-  //   [dispatch]
-  // );
 
   return (
     <IAIMantineSelect
       label={t('parameters.scheduler')}
       value={scheduler}
-      validValues={allSchedulers}
+      data={allSchedulers}
       onChange={handleChange}
     />
   );
-
-  // return (
-  //   <IAICustomSelect
-  //     label={t('parameters.scheduler')}
-  //     value={scheduler}
-  //     data={allSchedulers}
-  //     onChange={handleChange}
-  //     withCheckIcon
-  //   />
-  // );
 };
 
 export default memo(ParamScheduler);

invokeai/frontend/web/src/features/system/components/ModelSelect.tsx

@@ -23,13 +23,6 @@ const selector = createSelector(
         label: m.name,
       }))
       .sort((a, b) => a.label.localeCompare(b.label));
-    // const modelData = selectModelsAll(state)
-    //   .map<IAICustomSelectOption>((m) => ({
-    //     value: m.name,
-    //     label: m.name,
-    //     tooltip: m.description,
-    //   }))
-    //   .sort((a, b) => a.label.localeCompare(b.label));
     return {
       selectedModel,
       modelData,
@@ -46,12 +39,6 @@ const ModelSelect = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { selectedModel, modelData } = useAppSelector(selector);
-  // const handleChangeModel = useCallback(
-  //   (e: ChangeEvent<HTMLSelectElement>) => {
-  //     dispatch(modelSelected(e.target.value));
-  //   },
-  //   [dispatch]
-  // );
   const handleChangeModel = useCallback(
     (v: string | null) => {
       if (!v) {
@@ -72,18 +59,6 @@ const ModelSelect = () => {
       onChange={handleChangeModel}
     />
   );
-
-  // return (
-  //   <IAICustomSelect
-  //     label={t('modelManager.model')}
-  //     tooltip={selectedModel?.description}
-  //     data={modelData}
-  //     value={selectedModel?.name ?? ''}
-  //     onChange={handleChangeModel}
-  //     withCheckIcon={true}
-  //     tooltipProps={{ placement: 'top', hasArrow: true }}
-  //   />
-  // );
 };
 
 export default memo(ModelSelect);