From 0d1d9b781062855ff21f286f223ade126123b82a Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 20 Sep 2024 09:39:35 +0200 Subject: [PATCH] refactor: phase correction panel and have simple and advance options --- src/component/header/Header.tsx | 4 +- .../SimplePhaseCorrectionOptionsPanel.tsx | 68 ++++++++ .../Filters/PhaseCorrectionOptionsPanel.tsx | 123 +++++++++++++++ .../panels/filtersPanel/Filters/index.tsx | 4 +- .../Filters/usePhaseCorrection.tsx} | 149 ++++++------------ 5 files changed, 248 insertions(+), 100 deletions(-) create mode 100644 src/component/header/SimplePhaseCorrectionOptionsPanel.tsx create mode 100644 src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx rename src/component/{header/PhaseCorrectionPanel.tsx => panels/filtersPanel/Filters/usePhaseCorrection.tsx} (50%) diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx index 828a293d0..76a8a52f7 100644 --- a/src/component/header/Header.tsx +++ b/src/component/header/Header.tsx @@ -32,10 +32,10 @@ import { options } from '../toolbar/ToolTypes'; import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel'; import BaseLineCorrectionPanel from './BaseLineCorrectionPanel'; import { HeaderContainer } from './HeaderContainer'; -import PhaseCorrectionPanel from './PhaseCorrectionPanel'; import PhaseCorrectionTwoDimensionsPanel from './PhaseCorrectionTwoDimensionsPanel'; import RangesPickingOptionPanel from './RangesPickingOptionPanel'; import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel'; +import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel'; import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel'; import Zones2DOptionPanel from './Zones2DOptionPanel'; @@ -108,7 +108,7 @@ function HeaderInner(props: HeaderInnerProps) { case options.zeroFilling.id: return ; case options.phaseCorrection.id: - return ; + return ; case options.phaseCorrectionTwoDimensions.id: return ; case options.peakPicking.id: diff --git a/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx b/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx new file mode 100644 index 000000000..9919f9555 --- /dev/null +++ b/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx @@ -0,0 +1,68 @@ +import { Select } from '@blueprintjs/select'; +import { Filters } from 'nmr-processing'; +import { Button } from 'react-science/ui'; + +import ActionButtons from '../elements/ActionButtons'; +import InputRange from '../elements/InputRange'; +import { useFilter } from '../hooks/useFilter'; +import { + algorithms, + AlgorithmItem, + usePhaseCorrection, +} from '../panels/filtersPanel/Filters/usePhaseCorrection'; + +import { HeaderContainer } from './HeaderContainer'; + +export function SimplePhaseCorrectionOptionsPanel() { + const filter = useFilter(Filters.phaseCorrection.id); + + const { + handleApplyFilter, + handleCancelFilter, + handleRangeChange, + defaultSelectProps, + phaseCorrectionTypeItem, + ph0Ref, + ph1Ref, + } = usePhaseCorrection(filter); + + return ( + +
+ + items={algorithms} + filterable={false} + itemsEqual="value" + {...defaultSelectProps} + > +
+ {phaseCorrectionTypeItem?.value === 'manual' && ( + <> + + + + )} + + + + ); +} diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx new file mode 100644 index 000000000..e33d271fc --- /dev/null +++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx @@ -0,0 +1,123 @@ +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 { Sections } from '../../../elements/Sections'; + +import { FilterActionButtons } from './FilterActionButtons'; +import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; +import { + algorithms, + usePhaseCorrection, + AlgorithmItem, +} from './usePhaseCorrection'; + +interface PhaseCorrectionOptionsPanelProps { + filter: Filter; +} + +const inputRangeStyle: CSSProperties = { + padding: '5px 10px', +}; + +const formLabelStyle: LabelStyle = { + label: { + flex: 2, + }, + wrapper: { + flex: 10, + display: 'flex', + }, + container: { + marginBottom: '5px', + }, +}; + +export default function PhaseCorrectionOptionsPanel( + props: PhaseCorrectionOptionsPanelProps, +) { + const { filter } = props; + const { + handleApplyFilter, + handleCancelFilter, + handleInput, + handleRangeChange, + value, + defaultSelectProps, + phaseCorrectionTypeItem, + ph0Ref, + ph1Ref, + } = usePhaseCorrection(filter); + + return ( + <> + + +
+ + + + +
+
+ + + ); +} diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx index e013a173c..683877b78 100644 --- a/src/component/panels/filtersPanel/Filters/index.tsx +++ b/src/component/panels/filtersPanel/Filters/index.tsx @@ -3,10 +3,12 @@ import { Filters } from 'nmr-processing'; import { LabelStyle } from '../../../elements/Label'; import ApodizationOptionsPanel from './ApodizationOptionsPanel'; +import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel'; -const { apodization } = Filters; +const { apodization, phaseCorrection } = Filters; export const filterOptionPanels = { [apodization.id]: ApodizationOptionsPanel, + [phaseCorrection.id]: PhaseCorrectionOptionsPanel, }; export const formLabelStyle: LabelStyle = { diff --git a/src/component/header/PhaseCorrectionPanel.tsx b/src/component/panels/filtersPanel/Filters/usePhaseCorrection.tsx similarity index 50% rename from src/component/header/PhaseCorrectionPanel.tsx rename to src/component/panels/filtersPanel/Filters/usePhaseCorrection.tsx index d85ca229b..9ada1fb72 100644 --- a/src/component/header/PhaseCorrectionPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/usePhaseCorrection.tsx @@ -1,23 +1,17 @@ -import { FormGroup } from '@blueprintjs/core'; -import { Select } from '@blueprintjs/select'; import { Spectrum1D } from 'nmr-load-save'; -import { Filters } from 'nmr-processing'; +import { Filter } from 'nmr-processing'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { Button, useSelect } from 'react-science/ui'; +import { useSelect } from 'react-science/ui'; -import { useChartData } from '../context/ChartContext'; -import { useDispatch } from '../context/DispatchContext'; -import ActionButtons from '../elements/ActionButtons'; -import InputRange from '../elements/InputRange'; -import { NumberInput2 } from '../elements/NumberInput2'; -import { useFilter } from '../hooks/useFilter'; -import useSpectrum from '../hooks/useSpectrum'; +import { useChartData } from '../../../context/ChartContext'; +import { useDispatch } from '../../../context/DispatchContext'; +import useSpectrum from '../../../hooks/useSpectrum'; -import { HeaderContainer } from './HeaderContainer'; +import { useSyncedFilterOptions } from './useSyncedFilterOptions'; type PhaseCorrectionTypes = 'manual' | 'automatic' | 'absolute'; -interface AlgorithmItem { +export interface AlgorithmItem { label: string; value: PhaseCorrectionTypes; } @@ -27,7 +21,7 @@ const defaultPhasingTypeItem: AlgorithmItem = { value: 'manual', }; -const algorithms: AlgorithmItem[] = [ +export const algorithms: AlgorithmItem[] = [ defaultPhasingTypeItem, { label: 'Automatic', @@ -40,7 +34,7 @@ const algorithms: AlgorithmItem[] = [ ]; const emptyData = { datum: {}, filter: null }; -export default function PhaseCorrectionPanel() { +export function usePhaseCorrection(filter: Filter | null) { const { toolOptions: { data: { pivot }, @@ -48,9 +42,6 @@ export default function PhaseCorrectionPanel() { } = useChartData(); const { data } = useSpectrum(emptyData) as Spectrum1D; - - const filter = useFilter(Filters.phaseCorrection.id); - const dispatch = useDispatch(); const [value, setValue] = useState({ ph0: 0, ph1: 0 }); const valueRef = useRef({ ph0: 0, ph1: 0 }); @@ -63,20 +54,26 @@ export default function PhaseCorrectionPanel() { itemTextKey: 'label', }); + function syncWatch(sharedFilterOptions) { + updateInputRangeInitialValue(sharedFilterOptions); + } + + const { syncFilterOptions, clearSyncFilterOptions } = + useSyncedFilterOptions(syncWatch); + useEffect(() => { if (filter && phaseCorrectionTypeItem?.value === 'manual') { - valueRef.current = filter.value; - setValue(filter.value); + const { ph0 = 0, ph1 = 0 } = filter.value; + valueRef.current = { ph0, ph1 }; + setValue(valueRef.current); } - if (ph0Ref.current && ph1Ref.current) { - if (filter) { - ph0Ref.current.setValue(filter.value.ph0); - ph1Ref.current.setValue(filter.value.ph1); - } else { - ph0Ref.current.setValue(valueRef.current.ph0); - ph1Ref.current.setValue(valueRef.current.ph1); - } + if (filter) { + ph0Ref.current?.setValue(filter?.value?.ph0 || 0); + ph1Ref.current?.setValue(filter?.value?.ph1 || 0); + } else { + ph0Ref.current?.setValue(valueRef.current?.ph0 || 0); + ph1Ref.current?.setValue(valueRef.current?.ph1 || 0); } }, [filter, phaseCorrectionTypeItem]); @@ -105,6 +102,7 @@ export default function PhaseCorrectionPanel() { default: break; } + clearSyncFilterOptions(); } const calcPhaseCorrectionHandler = useCallback( @@ -125,8 +123,8 @@ export default function PhaseCorrectionPanel() { const updateInputRangeInitialValue = useCallback((value) => { // update InputRange initial value - ph0Ref.current.setValue(value.ph0); - ph1Ref.current.setValue(value.ph1); + ph0Ref.current?.setValue(value.ph0); + ph1Ref.current?.setValue(value.ph1); }, []); const handleInput = useCallback( @@ -142,8 +140,13 @@ export default function PhaseCorrectionPanel() { updateInputRangeInitialValue(newValue); valueRef.current = newValue; setValue(valueRef.current); + syncFilterOptions(valueRef.current); }, - [calcPhaseCorrectionHandler, updateInputRangeInitialValue], + [ + calcPhaseCorrectionHandler, + syncFilterOptions, + updateInputRangeInitialValue, + ], ); const handleRangeChange = useCallback( @@ -153,79 +156,31 @@ export default function PhaseCorrectionPanel() { updateInputRangeInitialValue(newValue); valueRef.current = newValue; setValue(valueRef.current); + syncFilterOptions(valueRef.current); }, - [calcPhaseCorrectionHandler, updateInputRangeInitialValue], + [ + calcPhaseCorrectionHandler, + syncFilterOptions, + updateInputRangeInitialValue, + ], ); function handleCancelFilter() { dispatch({ type: 'RESET_SELECTED_TOOL', }); + clearSyncFilterOptions(); } - return ( - -
- - items={algorithms} - filterable={false} - itemsEqual="value" - {...defaultSelectProps} - > -
- {phaseCorrectionTypeItem?.value === 'manual' && ( - <> - - - - - - - - - - )} - - - - ); + return { + handleApplyFilter, + handleCancelFilter, + handleRangeChange, + handleInput, + defaultSelectProps, + phaseCorrectionTypeItem, + ph0Ref, + ph1Ref, + value, + }; }