From b1b868b3929b66bf9bb6f252f9cff152f00479e0 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:12:45 +0200 Subject: [PATCH 01/13] feat: create ReadOnly component to block editing and show a message --- src/component/elements/ReadOnly.tsx | 78 +++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/component/elements/ReadOnly.tsx diff --git a/src/component/elements/ReadOnly.tsx b/src/component/elements/ReadOnly.tsx new file mode 100644 index 000000000..9cc56631d --- /dev/null +++ b/src/component/elements/ReadOnly.tsx @@ -0,0 +1,78 @@ +/** @jsxImportSource @emotion/react */ +import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; +import { ReactNode, useState } from 'react'; +import { IoLockClosedOutline } from 'react-icons/io5'; + +const fadeIn = keyframes` + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +`; + +const Overlay = styled.div` + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + cursor: not-allowed; +`; + +const MessageContainer = styled.div<{ show: boolean }>` + background-color: white; + padding: 16px; + border-radius: 5px; + align-items: center; + box-shadow: 0 2px 10px rgb(0 0 0 / 10%); + display: ${({ show }) => (show ? 'flex' : 'none')}; + animation: ${fadeIn} 0.3s ease; + gap: 8px; +`; + +interface ReadOnlyProps { + enabled: boolean; + children: ReactNode; + message?: string; + messageDisplayDuration?: number; +} + +export function ReadOnly(props: ReadOnlyProps) { + const { + enabled, + children, + message = 'Read only', + messageDisplayDuration = 800, + } = props; + const [showMessage, setShowMessage] = useState(false); + + function handleOverlayClick() { + setShowMessage(true); + setTimeout(() => setShowMessage(false), messageDisplayDuration); + } + + return ( +
+ {children} + {enabled && ( + + + + {message} + + + )} +
+ ); +} From a415e872dbca4137169388f26cba5c0281b4280b Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:14:52 +0200 Subject: [PATCH 02/13] refactor: reverse the order of filter action buttons --- .../Filters/FilterActionButtons.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx b/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx index 1b64ae7aa..519357a89 100644 --- a/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx +++ b/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx @@ -17,6 +17,15 @@ export function FilterActionButtons(props: FilterActionButtonsProps) { return (
+ - -
); } From 373d6e310a2b7753689baf671294bfb2111a0227 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:18:13 +0200 Subject: [PATCH 03/13] refactor: apodization filter restore,reset,save, and cancel actions --- .../Filters/ApodizationOptionsPanel.tsx | 72 ++++++++++--------- .../Filters/FiltersSectionsPanel.tsx | 48 +++++++++++-- .../panels/filtersPanel/Filters/index.tsx | 10 ++- 3 files changed, 91 insertions(+), 39 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx index d2282f740..74383eb42 100644 --- a/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx @@ -1,20 +1,16 @@ import { Switch } from '@blueprintjs/core'; -import { Filter } from 'nmr-processing'; import * as Yup from 'yup'; import Label from '../../../elements/Label'; import { NumberInput2Controller } from '../../../elements/NumberInput2Controller'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { FilterActionButtons } from './FilterActionButtons'; import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; import { useSharedApodization } from './hooks/useSharedApodization'; -import { formLabelStyle } from '.'; - -interface ApodizationOptionsProps { - filter: Filter; -} +import { BaseFilterOptionsPanelProps, formLabelStyle } from '.'; const advanceValidationSchema = Yup.object().shape({ lineBroadening: Yup.number().required(), @@ -24,9 +20,9 @@ const advanceValidationSchema = Yup.object().shape({ }); export default function ApodizationOptionsPanel( - props: ApodizationOptionsProps, + props: BaseFilterOptionsPanelProps, ) { - const { filter } = props; + const { filter, enableEdit = true, onCancel, onConfirm } = props; const { handleSubmit, control, @@ -39,36 +35,46 @@ export default function ApodizationOptionsPanel( validationSchema: advanceValidationSchema, }); + function handleConfirm(event) { + void handleSubmit((values) => handleApplyFilter(values))(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + const { onChange: onLivePreviewFieldChange, ...livePreviewFieldOptions } = register('livePreview'); const disabledAction = filter.value && !isDirty; return ( - <> - - - { - void onLivePreviewFieldChange(event); - submitHandler(); - }} - label="Live preview" - /> - - handleSubmit((values) => handleApplyFilter(values))() - } - onCancel={handleCancelFilter} - disabledConfirm={disabledAction} - disabledCancel={disabledAction} - /> - - + + {enableEdit && ( + + + { + void onLivePreviewFieldChange(event); + submitHandler(); + }} + label="Live preview" + /> + + + + )}
- + ); } diff --git a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx index d722344af..239f7f50e 100644 --- a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx @@ -1,10 +1,11 @@ -import { Button, Switch } from '@blueprintjs/core'; +import { Switch } from '@blueprintjs/core'; import styled from '@emotion/styled'; import { v4 } from '@lukeed/uuid'; import { Filter, Filters } from 'nmr-processing'; import { memo, useEffect, useRef, useState } from 'react'; import { FaRegTrashAlt, FaRegEyeSlash } from 'react-icons/fa'; import { ObjectInspector } from 'react-inspector'; +import { Button } from 'react-science/ui'; import { useChartData } from '../../../context/ChartContext'; import { useDispatch } from '../../../context/DispatchContext'; @@ -18,6 +19,7 @@ import { filterOptionPanels } from './index'; const IconButton = styled(Button)` padding: 2px; + font-size: 16px; `; interface FiltersProps extends Filter { @@ -28,13 +30,23 @@ interface FilterElementsProps { filter: Filter; spectraCounter: number; onEnableChange: () => void; + onFilterRestore: () => void; + activeFilterID: string | null; + hideFilterRestoreButton?: boolean; } function FilterElements(props: FilterElementsProps) { const dispatch = useDispatch(); const alert = useAlert(); const toaster = useToaster(); - const { filter, spectraCounter, onEnableChange } = props; + const { + filter, + spectraCounter, + onEnableChange, + activeFilterID, + onFilterRestore, + hideFilterRestoreButton = false, + } = props; const { id, name, flag, label, isDeleteAllow } = filter; function handleFilterCheck(id, event: React.ChangeEvent) { @@ -95,8 +107,20 @@ function FilterElements(props: FilterElementsProps) { return ( <> + {!hideFilterRestoreButton && ( + + )} { handleDeleteFilter(); @@ -212,6 +236,10 @@ function FiltersInner(props: FiltersInnerProps) { return ; } + function handleClose() { + openSection(''); + } + return ( {filtersList.map((filter, index) => { @@ -225,21 +253,31 @@ function FiltersInner(props: FiltersInnerProps) { serial={index + 1} onClick={(id) => { toggleSection(id); - filterSnapShotHandler(filter, index); }} selectedSectionId={selectedSection} rightElement={ openSection('')} + onEnableChange={handleClose} + activeFilterID={activeFilterID} + onFilterRestore={() => { + filterSnapShotHandler(filter, index); + }} + /** Hide filter restore button when the filter is new */ + hideFilterRestoreButton={value === null} /> } headerStyle={getStyle(filter, index)} sticky > {FilterOptionsPanel ? ( - + ) : ( diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx index 723580600..a821c3918 100644 --- a/src/component/panels/filtersPanel/Filters/index.tsx +++ b/src/component/panels/filtersPanel/Filters/index.tsx @@ -1,4 +1,5 @@ -import { Filters } from 'nmr-processing'; +import { ButtonProps } from '@blueprintjs/core'; +import { Filter, Filters } from 'nmr-processing'; import { LabelStyle } from '../../../elements/Label'; @@ -33,6 +34,13 @@ export const filterOptionPanels = { [exclusionZones.id]: ExclusionZonesOptionsPanel, }; +export interface BaseFilterOptionsPanelProps { + filter: Filter; + enableEdit: boolean; + onConfirm: ButtonProps['onClick']; + onCancel: ButtonProps['onClick']; +} + export const formLabelStyle: LabelStyle = { label: { flex: 5, From 22d54ff8f0b95e422a7e33292f99e94f92a33360 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:18:34 +0200 Subject: [PATCH 04/13] refactor: baseline correction filter restore,reset,save, and cancel actions --- .../BaseLineCorrectionOptionsPanel.tsx | 72 ++++++++++--------- 1 file changed, 39 insertions(+), 33 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx index b826be936..7a038570e 100644 --- a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx @@ -1,9 +1,9 @@ import { Button, Switch } from '@blueprintjs/core'; import { Select } from '@blueprintjs/select'; -import { Filter } from 'nmr-processing'; import Label from '../../../elements/Label'; import { NumberInput2Controller } from '../../../elements/NumberInput2Controller'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { FilterActionButtons } from './FilterActionButtons'; @@ -14,16 +14,12 @@ import { useBaselineCorrection, } from './hooks/useBaselineCorrection'; -import { formLabelStyle } from '.'; - -interface BaseLineCorrectionOptionsPanelProps { - filter: Filter; -} +import { BaseFilterOptionsPanelProps, formLabelStyle } from '.'; export default function BaseLineCorrectionOptionsPanel( - props: BaseLineCorrectionOptionsPanelProps, + props: BaseFilterOptionsPanelProps, ) { - const { filter } = props; + const { filter, enableEdit = true, onCancel, onConfirm } = props; const { register, @@ -40,6 +36,16 @@ export default function BaseLineCorrectionOptionsPanel( getValues, } = useBaselineCorrection(filter); + function handleConfirm(event) { + void handleSubmit((values) => handleApplyFilter(values))(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + const { onChange: onLivePreviewFieldChange, ...livePreviewFieldOptions } = register('livePreview'); @@ -48,30 +54,30 @@ export default function BaseLineCorrectionOptionsPanel( !isDirty && filter.value?.algorithm === getValues()?.algorithm; return ( - <> - - - { - void onLivePreviewFieldChange(event); - submitHandler(); - }} - label="Live preview" - /> - - handleSubmit((values) => handleApplyFilter(values))() - } - onCancel={handleCancelFilter} - disabledConfirm={disabledAction} - disabledCancel={disabledAction} - /> - - + + {enableEdit && ( + + + { + void onLivePreviewFieldChange(event); + submitHandler(); + }} + label="Live preview" + /> + + + + )}
- + ); } From c631ea7a6528d8c320dc89d8a6653a0703b544e7 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:19:00 +0200 Subject: [PATCH 05/13] refactor: zero filling filter restore,reset,save, and cancel actions --- .../Filters/ZeroFillingOptionsPanel.tsx | 68 +++++++++++-------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx index 67bcc7a6d..6dd337b8c 100644 --- a/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx @@ -1,7 +1,7 @@ import { Switch } from '@blueprintjs/core'; -import { Filter } from 'nmr-processing'; import Label from '../../../elements/Label'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { Select2Controller } from '../../../elements/Select2Controller'; @@ -9,14 +9,12 @@ import { FilterActionButtons } from './FilterActionButtons'; import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; import { useZeroFilling, zeroFillingSizes } from './hooks/useZeroFilling'; -interface ZeroFillingOptionsPanelProps { - filter: Filter; -} +import { BaseFilterOptionsPanelProps } from '.'; export default function ZeroFillingOptionsPanel( - props: ZeroFillingOptionsPanelProps, + props: BaseFilterOptionsPanelProps, ) { - const { filter } = props; + const { filter, enableEdit = true, onCancel, onConfirm } = props; const { control, submitHandler, @@ -25,33 +23,45 @@ export default function ZeroFillingOptionsPanel( formState: { isDirty }, } = useZeroFilling(filter); + function handleConfirm(event) { + submitHandler(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + const { onChange: onLivePreviewFieldChange, ...livePreviewFieldOptions } = register('livePreview'); const disabledAction = filter.value && !isDirty; return ( - <> - - - { - void onLivePreviewFieldChange(event); - submitHandler('onChange'); - }} - label="Live preview" - /> - submitHandler()} - onCancel={handleCancelFilter} - disabledConfirm={disabledAction} - disabledCancel={disabledAction} - /> - - + + {enableEdit && ( + + + { + void onLivePreviewFieldChange(event); + submitHandler('onChange'); + }} + label="Live preview" + /> + + + + )}
- + ); } From 6b9c4270302659d2d110eab843cb42bee8754244 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:19:25 +0200 Subject: [PATCH 06/13] refactor: exclusion zones filter restore,reset,save, and cancel actions --- .../Filters/ExclusionZonesOptionsPanel.tsx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx index 843ec7923..e0d187864 100644 --- a/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx @@ -1,6 +1,5 @@ import { Classes } from '@blueprintjs/core'; import { yupResolver } from '@hookform/resolvers/yup'; -import { Filter } from 'nmr-processing'; import { useCallback, useEffect, useMemo } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import { FaRegTrashAlt } from 'react-icons/fa'; @@ -12,14 +11,13 @@ import { useChartData } from '../../../context/ChartContext'; import { useDispatch } from '../../../context/DispatchContext'; import { NumberInput2Controller } from '../../../elements/NumberInput2Controller'; import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { FilterActionButtons } from './FilterActionButtons'; import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; -interface ExclusionZonesOptionsPanelProps { - filter: Filter; -} +import { BaseFilterOptionsPanelProps } from '.'; const validationSchema = (min: number, max: number) => Yup.object().shape({ @@ -35,9 +33,9 @@ const validationSchema = (min: number, max: number) => }); export default function ExclusionZonesOptionsPanel( - options: ExclusionZonesOptionsPanelProps, + props: BaseFilterOptionsPanelProps, ) { - const { filter } = options; + const { filter, enableEdit = true, onCancel, onConfirm } = props; const dispatch = useDispatch(); const { originDomain: { @@ -138,25 +136,33 @@ export default function ExclusionZonesOptionsPanel( }); } - function handleCancelFilter() { + function handleConfirm(event) { + void handleSubmit(handleApplyFilter)(); + onConfirm?.(event); + } + + function handleCancel(event) { dispatch({ type: 'RESET_SELECTED_TOOL', }); + onCancel?.(event); } return ( - <> - - -
- handleSubmit(handleApplyFilter)()} - onCancel={handleCancelFilter} - disabledConfirm={!isDirty} - disabledCancel={!isDirty} - /> - - + + {enableEdit && ( + + +
+ + + + )} columns={exclusionsZonesColumns} @@ -164,6 +170,6 @@ export default function ExclusionZonesOptionsPanel( emptyDataRowText="No Zones" /> - + ); } From 77cf0634981e386cc12d93ca6a3ee3d7275f4cf4 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:19:50 +0200 Subject: [PATCH 07/13] refactor: pashe correction filter restore,reset,save, and cancel actions --- .../Filters/PhaseCorrectionOptionsPanel.tsx | 44 ++++--- ...aseCorrectionTwoDimensionsOptionsPanel.tsx | 117 ++++++++++-------- 2 files changed, 95 insertions(+), 66 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx index 6f6da20a9..e5b084558 100644 --- a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx @@ -1,11 +1,11 @@ import { Button } from '@blueprintjs/core'; import { Select } from '@blueprintjs/select'; -import { Filter } from 'nmr-processing'; import { CSSProperties } from 'react'; import InputRange from '../../../elements/InputRange'; import Label, { LabelStyle } from '../../../elements/Label'; import { NumberInput2 } from '../../../elements/NumberInput2'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { FilterActionButtons } from './FilterActionButtons'; @@ -16,9 +16,7 @@ import { AlgorithmItem, } from './hooks/usePhaseCorrection'; -interface PhaseCorrectionOptionsPanelProps { - filter: Filter; -} +import { BaseFilterOptionsPanelProps } from '.'; const inputRangeStyle: CSSProperties = { padding: '5px 10px', @@ -38,9 +36,9 @@ const formLabelStyle: LabelStyle = { }; export default function PhaseCorrectionOptionsPanel( - props: PhaseCorrectionOptionsPanelProps, + props: BaseFilterOptionsPanelProps, ) { - const { filter } = props; + const { filter, enableEdit = true, onCancel, onConfirm } = props; const { handleApplyFilter, handleCancelFilter, @@ -53,17 +51,29 @@ export default function PhaseCorrectionOptionsPanel( ph1Ref, } = usePhaseCorrection(filter); + function handleConfirm(event) { + handleApplyFilter(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + return ( - <> - - -
- - - + + {enableEdit && ( + + +
+ + + + )}
- + ); } diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx index ba69938a4..bad31aedb 100644 --- a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx @@ -10,6 +10,7 @@ import { Button, Toolbar } from 'react-science/ui'; import InputRange from '../../../elements/InputRange'; import Label, { LabelStyle } from '../../../elements/Label'; import { NumberInput2 } from '../../../elements/NumberInput2'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { useFilter } from '../../../hooks/useFilter'; @@ -21,6 +22,8 @@ import { AlgorithmItem, } from './hooks/usePhaseCorrectionTwoDimensions'; +import { BaseFilterOptionsPanelProps } from '.'; + const inputRangeStyle: CSSProperties = { padding: '5px 10px', }; @@ -38,7 +41,11 @@ const formLabelStyle: LabelStyle = { }, }; -export default function PhaseCorrectionTwoDimensionsOptionsPanel() { +export default function PhaseCorrectionTwoDimensionsOptionsPanel( + props: BaseFilterOptionsPanelProps, +) { + const { enableEdit = true, onCancel, onConfirm } = props; + const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id); const { ph0Ref, @@ -56,54 +63,66 @@ export default function PhaseCorrectionTwoDimensionsOptionsPanel() { value, } = usePhaseCorrectionTwoDimensions(filter); + function handleConfirm(event) { + handleApplyFilter(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + return ( - <> - - -
- {phaseCorrectionSelectItem?.value === 'manual' && ( - <> - -
- - } - active={addTracesToBothDirections} - onClick={handleToggleAddTraceToBothDirections} - /> - -
- - )} -
- - - + + {enableEdit && ( + + +
+ {phaseCorrectionSelectItem?.value === 'manual' && ( + <> + +
+ + } + active={addTracesToBothDirections} + onClick={handleToggleAddTraceToBothDirections} + /> + +
+ + )} +
+ + + + )}
- + ); } From b8a75ad7670c9f2201d03159309fab902f865db4 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 10:20:08 +0200 Subject: [PATCH 08/13] refactor: shift filter restore,reset,save, and cancel actions --- .../Filters/ShiftOptionsPanel.tsx | 50 +++++++++++-------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx index 3b08583d4..ef125b838 100644 --- a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx @@ -1,24 +1,22 @@ -import { Filter, Filters } from 'nmr-processing'; +import { Filters } from 'nmr-processing'; import { useForm } from 'react-hook-form'; import { useDispatch } from '../../../context/DispatchContext'; import Label from '../../../elements/Label'; import { NumberInput2Controller } from '../../../elements/NumberInput2Controller'; +import { ReadOnly } from '../../../elements/ReadOnly'; import { Sections } from '../../../elements/Sections'; import { FilterActionButtons } from './FilterActionButtons'; import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; -import { formLabelStyle } from '.'; +import { BaseFilterOptionsPanelProps, formLabelStyle } from '.'; const { shiftX, shift2DX, shift2DY } = Filters; -interface ShiftOptionsPanelProps { - filter: Filter; -} +export default function ShiftOptionsPanel(props: BaseFilterOptionsPanelProps) { + const { filter, enableEdit = true, onCancel, onConfirm } = props; -export default function ShiftOptionsPanel(props: ShiftOptionsPanelProps) { - const { filter } = props; const dispatch = useDispatch(); const { handleSubmit, @@ -64,19 +62,31 @@ export default function ShiftOptionsPanel(props: ShiftOptionsPanelProps) { } } + function handleConfirm(event) { + void handleSubmit(handleApplyFilter)(); + onConfirm?.(event); + } + + function handleCancel(event) { + handleCancelFilter(); + onCancel?.(event); + } + return ( - <> - - -
- handleSubmit(handleApplyFilter)()} - onCancel={handleCancelFilter} - disabledConfirm={!isDirty} - disabledCancel={!isDirty} - /> - - + + {enableEdit && ( + + +
+ + + + )} - + ); } From ad511a824766138e54a4191cf7c9337a9c0be5cf Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 11 Oct 2024 11:31:38 +0200 Subject: [PATCH 09/13] test: fix selectors --- .../{Header.tsx => HeaderContainer.tsx} | 2 +- .../header/AutoPeakPickingOptionPanel.tsx | 6 +++--- src/component/header/Header.tsx | 18 +++++++++--------- .../{HeaderContainer.tsx => HeaderWrapper.tsx} | 2 +- .../header/RangesPickingOptionPanel.tsx | 6 +++--- .../header/SimpleApodizationOptionsPanel.tsx | 6 +++--- .../SimpleBaseLineCorrectionOptionsPanel.tsx | 6 +++--- .../SimplePhaseCorrectionOptionsPanel.tsx | 6 +++--- ...SimplePhaseCorrectionTwoDimensionsPanel.tsx | 6 +++--- .../header/SimpleZeroFillingOptionsPanel.tsx | 6 +++--- src/component/header/Zones2DOptionPanel.tsx | 6 +++--- src/component/main/InnerNMRiumContents.tsx | 2 +- test-e2e/NmriumPage/index.ts | 4 +++- test-e2e/panels/filters.test.ts | 8 ++++---- 14 files changed, 43 insertions(+), 41 deletions(-) rename src/component/elements/{Header.tsx => HeaderContainer.tsx} (93%) rename src/component/header/{HeaderContainer.tsx => HeaderWrapper.tsx} (83%) diff --git a/src/component/elements/Header.tsx b/src/component/elements/HeaderContainer.tsx similarity index 93% rename from src/component/elements/Header.tsx rename to src/component/elements/HeaderContainer.tsx index 5a81b186f..7646a4e2c 100644 --- a/src/component/elements/Header.tsx +++ b/src/component/elements/HeaderContainer.tsx @@ -20,7 +20,7 @@ const styles: Record<'header', CSSProperties> = { }, }; -export function Header(props: HeaderProps) { +export function HeaderContainer(props: HeaderProps) { const { children, style: { leftStyle = {}, rightStyle = {}, containerStyle = {} } = {}, diff --git a/src/component/header/AutoPeakPickingOptionPanel.tsx b/src/component/header/AutoPeakPickingOptionPanel.tsx index 93494beee..9b3e787a5 100644 --- a/src/component/header/AutoPeakPickingOptionPanel.tsx +++ b/src/component/header/AutoPeakPickingOptionPanel.tsx @@ -14,7 +14,7 @@ import { } from '../hooks/useCheckPointsNumberInWindowArea'; import { headerLabelStyle } from './Header'; -import { HeaderContainer } from './HeaderContainer'; +import { HeaderWrapper } from './HeaderWrapper'; type Direction = 'positive' | 'negative' | 'both'; @@ -85,7 +85,7 @@ export function AutoPeakPickingOptionPanel() { } return ( - + @@ -134,6 +134,6 @@ export function AutoPeakPickingOptionPanel() { > Apply - + ); } diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx index d9bc0b61b..a921fd269 100644 --- a/src/component/header/Header.tsx +++ b/src/component/header/Header.tsx @@ -16,7 +16,7 @@ import { useWorkspacesList, } from '../context/PreferencesContext'; import Button from '../elements/Button'; -import { Header } from '../elements/Header'; +import { HeaderContainer } from '../elements/HeaderContainer'; import { LabelStyle } from '../elements/Label'; import DropDownButton, { DropDownListItem, @@ -30,7 +30,7 @@ import WorkspaceItem from '../modal/setting/WorkspaceItem'; import { options } from '../toolbar/ToolTypes'; import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel'; -import { HeaderContainer } from './HeaderContainer'; +import { HeaderWrapper } from './HeaderWrapper'; import RangesPickingOptionPanel from './RangesPickingOptionPanel'; import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel'; import { SimpleBaseLineCorrectionOptionsPanel } from './SimpleBaseLineCorrectionOptionsPanel'; @@ -134,10 +134,10 @@ function HeaderInner(props: HeaderInnerProps) { return (
-
- {selectedPanel}
- - +
- - + +
); } @@ -241,7 +241,7 @@ function SaveButton() { const MemoizedHeader = memo(HeaderInner); -export default function HeaderWrapper() { +export function Header() { const { toolOptions: { selectedOptionPanel }, height, diff --git a/src/component/header/HeaderContainer.tsx b/src/component/header/HeaderWrapper.tsx similarity index 83% rename from src/component/header/HeaderContainer.tsx rename to src/component/header/HeaderWrapper.tsx index 06c4dcf89..7634f088b 100644 --- a/src/component/header/HeaderContainer.tsx +++ b/src/component/header/HeaderWrapper.tsx @@ -9,7 +9,7 @@ interface HeaderContainerProps { children: ReactNode; } -export function HeaderContainer(props: HeaderContainerProps) { +export function HeaderWrapper(props: HeaderContainerProps) { const { style = {}, children } = props; return
{children}
; } diff --git a/src/component/header/RangesPickingOptionPanel.tsx b/src/component/header/RangesPickingOptionPanel.tsx index bce82ce1f..e256fc833 100644 --- a/src/component/header/RangesPickingOptionPanel.tsx +++ b/src/component/header/RangesPickingOptionPanel.tsx @@ -13,7 +13,7 @@ import { } from '../hooks/useCheckPointsNumberInWindowArea'; import { headerLabelStyle } from './Header'; -import { HeaderContainer } from './HeaderContainer'; +import { HeaderWrapper } from './HeaderWrapper'; interface AutoRangesOptions { minMaxRatio: number; @@ -60,7 +60,7 @@ function RangesPickingOptionPanel() { } return ( - + + ); } diff --git a/src/component/header/SimpleApodizationOptionsPanel.tsx b/src/component/header/SimpleApodizationOptionsPanel.tsx index bd15df30f..e986f7d36 100644 --- a/src/component/header/SimpleApodizationOptionsPanel.tsx +++ b/src/component/header/SimpleApodizationOptionsPanel.tsx @@ -9,7 +9,7 @@ import { useFilter } from '../hooks/useFilter'; import { useSharedApodization } from '../panels/filtersPanel/Filters/hooks/useSharedApodization'; import { headerLabelStyle } from './Header'; -import { HeaderContainer } from './HeaderContainer'; +import { HeaderWrapper } from './HeaderWrapper'; interface ApodizationOptionsInnerPanelProps { filter: Filter | null; @@ -32,7 +32,7 @@ function ApodizationOptionsInnerPanel( register('livePreview'); return ( - + + ); } diff --git a/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx b/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx index 6da19b142..99d58420c 100644 --- a/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx +++ b/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx @@ -15,7 +15,7 @@ import { } from '../panels/filtersPanel/Filters/hooks/useBaselineCorrection'; import { headerLabelStyle } from './Header'; -import { HeaderContainer } from './HeaderContainer'; +import { HeaderWrapper } from './HeaderWrapper'; interface BaseLineCorrectionInnerPanelProps { filter: Filter | null; @@ -39,7 +39,7 @@ function BaseLineCorrectionInnerPanel( register(`livePreview`); return ( - +