From a3fa38b353cae05f004f3ab7231f345ab740829d Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 12 Jun 2023 16:17:54 +1000 Subject: [PATCH] fix(ui): revert IAICustomSelect usage to IAISelect There are some bugs with it that I cannot figure out related to `floating-ui` and `downshift`'s handling of refs. Will need to revisit this component in the future. --- .../parameters/ParamControlNetModel.tsx | 47 +++++++++--- .../ParamControlNetProcessorSelect.tsx | 72 +++++++++++++------ .../Parameters/Core/ParamScheduler.tsx | 34 ++++++--- .../system/components/ModelSelect.tsx | 50 +++++++++---- 4 files changed, 149 insertions(+), 54 deletions(-) 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 62c9824df4..6fd9cc26bd 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx @@ -2,6 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import IAICustomSelect, { IAICustomSelectOption, } from 'common/components/IAICustomSelect'; +import IAISelect from 'common/components/IAISelect'; import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; import { CONTROLNET_MODELS, @@ -9,45 +10,71 @@ import { } from 'features/controlNet/store/constants'; import { controlNetModelChanged } from 'features/controlNet/store/controlNetSlice'; import { map } from 'lodash-es'; -import { memo, useCallback } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; type ParamControlNetModelProps = { controlNetId: string; model: ControlNetModelName; }; -const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({ +const DATA = map(CONTROLNET_MODELS, (m) => ({ + key: m.label, value: m.type, - label: m.label, - tooltip: m.type, })); +// const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({ +// value: m.type, +// label: m.label, +// tooltip: m.type, +// })); + const ParamControlNetModel = (props: ParamControlNetModelProps) => { const { controlNetId, model } = props; const dispatch = useAppDispatch(); const isReady = useIsReadyToInvoke(); const handleModelChanged = useCallback( - (val: string | null | undefined) => { + (e: ChangeEvent) => { // TODO: do not cast - const model = val as ControlNetModelName; + const model = e.target.value as ControlNetModelName; dispatch(controlNetModelChanged({ controlNetId, model })); }, [controlNetId, dispatch] ); + // const handleModelChanged = useCallback( + // (val: string | null | undefined) => { + // // TODO: do not cast + // const model = val as ControlNetModelName; + // dispatch(controlNetModelChanged({ controlNetId, model })); + // }, + // [controlNetId, dispatch] + // ); + return ( - ); + // return ( + // + // ); }; export default memo(ParamControlNetModel); diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx index 1b1914b6ec..e35d0e5588 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx @@ -1,39 +1,47 @@ import IAICustomSelect, { IAICustomSelectOption, } from 'common/components/IAICustomSelect'; -import { memo, useCallback } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; import { ControlNetProcessorNode, ControlNetProcessorType, } from '../../store/types'; import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useAppDispatch } from 'app/store/storeHooks'; import { CONTROLNET_PROCESSORS } from '../../store/constants'; import { map } from 'lodash-es'; -import { isProcessingSelector } from 'features/system/store/systemSelectors'; import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; +import IAISelect from 'common/components/IAISelect'; type ParamControlNetProcessorSelectProps = { controlNetId: string; processorNode: ControlNetProcessorNode; }; -const CONTROLNET_PROCESSOR_TYPES: IAICustomSelectOption[] = map( - CONTROLNET_PROCESSORS, - (p) => ({ - value: p.type, - label: p.label, - tooltip: p.description, - }) -).sort((a, b) => +const CONTROLNET_PROCESSOR_TYPES = 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.label.localeCompare(b.label) + a.value === 'none' ? -1 : b.value === 'none' ? 1 : a.key.localeCompare(b.key) ); +// 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 ) => { @@ -42,26 +50,46 @@ const ParamControlNetProcessorSelect = ( const isReady = useIsReadyToInvoke(); const handleProcessorTypeChanged = useCallback( - (v: string | null | undefined) => { + (e: ChangeEvent) => { dispatch( controlNetProcessorTypeChanged({ controlNetId, - processorType: v as ControlNetProcessorType, + processorType: e.target.value as ControlNetProcessorType, }) ); }, [controlNetId, dispatch] ); + // const handleProcessorTypeChanged = useCallback( + // (v: string | null | undefined) => { + // dispatch( + // controlNetProcessorTypeChanged({ + // controlNetId, + // processorType: v as ControlNetProcessorType, + // }) + // ); + // }, + // [controlNetId, dispatch] + // ); + return ( - ); + // return ( + // + // ); }; export default memo(ParamControlNetProcessorSelect); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx index 2aa762b477..b12345ae8d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx @@ -3,10 +3,11 @@ import { Scheduler } from 'app/constants'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import IAICustomSelect from 'common/components/IAICustomSelect'; +import IAISelect from 'common/components/IAISelect'; import { generationSelector } from 'features/parameters/store/generationSelectors'; import { setScheduler } from 'features/parameters/store/generationSlice'; import { uiSelector } from 'features/ui/store/uiSelectors'; -import { memo, useCallback } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; const selector = createSelector( @@ -35,24 +36,39 @@ const ParamScheduler = () => { const { t } = useTranslation(); const handleChange = useCallback( - (v: string | null | undefined) => { - if (!v) { - return; - } - dispatch(setScheduler(v as Scheduler)); + (e: ChangeEvent) => { + dispatch(setScheduler(e.target.value as Scheduler)); }, [dispatch] ); + // const handleChange = useCallback( + // (v: string | null | undefined) => { + // if (!v) { + // return; + // } + // dispatch(setScheduler(v as Scheduler)); + // }, + // [dispatch] + // ); return ( - ); + + // return ( + // + // ); }; export default memo(ParamScheduler); diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx index 1eb8e4cb4c..48be6d263a 100644 --- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx @@ -1,5 +1,5 @@ import { createSelector } from '@reduxjs/toolkit'; -import { memo, useCallback } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; import { isEqual } from 'lodash-es'; import { useTranslation } from 'react-i18next'; @@ -11,6 +11,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector import IAICustomSelect, { IAICustomSelectOption, } from 'common/components/IAICustomSelect'; +import IAISelect from 'common/components/IAISelect'; const selector = createSelector( [(state: RootState) => state, generationSelector], @@ -18,12 +19,18 @@ const selector = createSelector( const selectedModel = selectModelsById(state, generation.model); const modelData = selectModelsAll(state) - .map((m) => ({ + .map((m) => ({ value: m.name, - label: m.name, - tooltip: m.description, + key: m.name, })) - .sort((a, b) => a.label.localeCompare(b.label)); + .sort((a, b) => a.key.localeCompare(b.key)); + // const modelData = selectModelsAll(state) + // .map((m) => ({ + // value: m.name, + // label: m.name, + // tooltip: m.description, + // })) + // .sort((a, b) => a.label.localeCompare(b.label)); return { selectedModel, modelData, @@ -41,26 +48,43 @@ const ModelSelect = () => { const { t } = useTranslation(); const { selectedModel, modelData } = useAppSelector(selector); const handleChangeModel = useCallback( - (v: string | null | undefined) => { - if (!v) { - return; - } - dispatch(modelSelected(v)); + (e: ChangeEvent) => { + dispatch(modelSelected(e.target.value)); }, [dispatch] ); + // const handleChangeModel = useCallback( + // (v: string | null | undefined) => { + // if (!v) { + // return; + // } + // dispatch(modelSelected(v)); + // }, + // [dispatch] + // ); return ( - ); + + // return ( + // + // ); }; export default memo(ModelSelect);