From 67ee202bb677512c45d7dab1af22233803112f50 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Mon, 23 Sep 2024 11:45:43 +0200 Subject: [PATCH] refactor: 2D phase correction filter options panel --- src/component/header/Header.tsx | 4 +- ...implePhaseCorrectionTwoDimensionsPanel.tsx | 108 +++++++++ ...aseCorrectionTwoDimensionsOptionsPanel.tsx | 165 ++++++++++++++ .../panels/filtersPanel/Filters/index.tsx | 10 +- .../usePhaseCorrectionTwoDimensions.tsx} | 205 ++++++------------ 5 files changed, 345 insertions(+), 147 deletions(-) create mode 100644 src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx create mode 100644 src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx rename src/component/{header/PhaseCorrectionTwoDimensionsPanel.tsx => panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions.tsx} (51%) diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx index aea568a7a..c1ae1802a 100644 --- a/src/component/header/Header.tsx +++ b/src/component/header/Header.tsx @@ -32,7 +32,7 @@ import { options } from '../toolbar/ToolTypes'; import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel'; import BaseLineCorrectionPanel from './BaseLineCorrectionPanel'; import { HeaderContainer } from './HeaderContainer'; -import PhaseCorrectionTwoDimensionsPanel from './PhaseCorrectionTwoDimensionsPanel'; +import { SimplePhaseCorrectionTwoDimensionsPanel } from './SimplePhaseCorrectionTwoDimensionsPanel'; import RangesPickingOptionPanel from './RangesPickingOptionPanel'; import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel'; import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel'; @@ -110,7 +110,7 @@ function HeaderInner(props: HeaderInnerProps) { case options.phaseCorrection.id: return ; case options.phaseCorrectionTwoDimensions.id: - return ; + return ; case options.peakPicking.id: return ; case options.rangePicking.id: diff --git a/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx new file mode 100644 index 000000000..8d532eec2 --- /dev/null +++ b/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx @@ -0,0 +1,108 @@ +/** @jsxImportSource @emotion/react */ +import { Select } from '@blueprintjs/select'; +import { css } from '@emotion/react'; +import { Filters } from 'nmr-processing'; +import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa'; +import { MdLooksTwo } from 'react-icons/md'; +import { Button, Toolbar } from 'react-science/ui'; + +import ActionButtons from '../elements/ActionButtons'; +import InputRange from '../elements/InputRange'; +import Label from '../elements/Label'; +import { useFilter } from '../hooks/useFilter'; +import { + phaseCorrectionalAlgorithms, + usePhaseCorrectionTwoDimensions, + AlgorithmItem, +} from '../panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions'; + +import { headerLabelStyle } from './Header'; +import { HeaderContainer } from './HeaderContainer'; + +export function SimplePhaseCorrectionTwoDimensionsPanel() { + const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id); + const { + ph0Ref, + ph1Ref, + phaseCorrectionSelectItem, + defaultPhaseCorrectionSelectProps, + activeTraceDirection, + addTracesToBothDirections, + handleRangeChange, + handleApplyFilter, + handleCancelFilter, + handleToggleAddTraceToBothDirections, + onChangeHandler, + } = usePhaseCorrectionTwoDimensions(filter); + + return ( + +
+ + items={phaseCorrectionalAlgorithms} + filterable={false} + itemsEqual="value" + {...defaultPhaseCorrectionSelectProps} + > +
+ {phaseCorrectionSelectItem?.value === 'manual' && ( + <> + +
+ + } + active={addTracesToBothDirections} + onClick={handleToggleAddTraceToBothDirections} + /> + +
+ + + + )} + + + ); +} diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx new file mode 100644 index 000000000..6e8e33a17 --- /dev/null +++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx @@ -0,0 +1,165 @@ +/** @jsxImportSource @emotion/react */ +import { Select } from '@blueprintjs/select'; +import { css } from '@emotion/react'; +import { Filters } from 'nmr-processing'; +import { CSSProperties } from 'react'; +import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa'; +import { MdLooksTwo } from 'react-icons/md'; +import { Button, Toolbar } from 'react-science/ui'; + +import InputRange from '../../../elements/InputRange'; +import Label, { LabelStyle } from '../../../elements/Label'; +import { NumberInput2 } from '../../../elements/NumberInput2'; +import { Sections } from '../../../elements/Sections'; +import { useFilter } from '../../../hooks/useFilter'; +import { + phaseCorrectionalAlgorithms, + usePhaseCorrectionTwoDimensions, + AlgorithmItem, +} from '../../../panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions'; + +import { FilterActionButtons } from './FilterActionButtons'; +import { HeaderContainer, StickyHeader } from './InnerFilterHeader'; + +const inputRangeStyle: CSSProperties = { + padding: '5px 10px', +}; + +const formLabelStyle: LabelStyle = { + label: { + flex: 2, + }, + wrapper: { + flex: 10, + display: 'flex', + }, + container: { + marginBottom: '5px', + }, +}; + +export default function PhaseCorrectionTwoDimensionsOptionsPanel() { + const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id); + const { + ph0Ref, + ph1Ref, + phaseCorrectionSelectItem, + defaultPhaseCorrectionSelectProps, + activeTraceDirection, + addTracesToBothDirections, + handleRangeChange, + handleApplyFilter, + handleCancelFilter, + handleToggleAddTraceToBothDirections, + onChangeHandler, + handleInputValueChange, + value, + } = usePhaseCorrectionTwoDimensions(filter); + + return ( + <> + + +
+ {phaseCorrectionSelectItem?.value === 'manual' && ( + <> + +
+ + } + active={addTracesToBothDirections} + onClick={handleToggleAddTraceToBothDirections} + /> + +
+ + )} +
+ + + + +
+
+ + + ); +} diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx index c52e9d104..fb225ce2d 100644 --- a/src/component/panels/filtersPanel/Filters/index.tsx +++ b/src/component/panels/filtersPanel/Filters/index.tsx @@ -4,14 +4,20 @@ import { LabelStyle } from '../../../elements/Label'; import ApodizationOptionsPanel from './ApodizationOptionsPanel'; import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel'; +import PhaseCorrectionTwoDimensionsOptionsPanel from './PhaseCorrectionTwoDimensionsOptionsPanel'; import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel'; -const { apodization, phaseCorrection, zeroFilling } = Filters; +const { + apodization, + phaseCorrection, + phaseCorrectionTwoDimensions, + zeroFilling, +} = Filters; export const filterOptionPanels = { [apodization.id]: ApodizationOptionsPanel, [phaseCorrection.id]: PhaseCorrectionOptionsPanel, - [phaseCorrection.id]: PhaseCorrectionOptionsPanel, [zeroFilling.id]: ZeroFillingOptionsPanel, + [phaseCorrectionTwoDimensions.id]: PhaseCorrectionTwoDimensionsOptionsPanel, }; export const formLabelStyle: LabelStyle = { diff --git a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx b/src/component/panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions.tsx similarity index 51% rename from src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx rename to src/component/panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions.tsx index cc3d4fb06..1f3adfd47 100644 --- a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx +++ b/src/component/panels/filtersPanel/Filters/usePhaseCorrectionTwoDimensions.tsx @@ -1,31 +1,20 @@ -/** @jsxImportSource @emotion/react */ -import { Select } from '@blueprintjs/select'; -import { css } from '@emotion/react'; import { NmrData2DFt } from 'cheminfo-types'; import debounce from 'lodash/debounce'; import { Spectrum2D } from 'nmr-load-save'; -import { Filters } from 'nmr-processing'; +import { Filter } from 'nmr-processing'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa'; -import { MdLooksTwo } from 'react-icons/md'; -import { Button, Toolbar, useSelect } from 'react-science/ui'; - -import { useActivePhaseTraces } from '../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces'; -import { useDispatch } from '../context/DispatchContext'; -import ActionButtons from '../elements/ActionButtons'; -import Input, { InputStyle } from '../elements/Input'; -import InputRange from '../elements/InputRange'; -import Label from '../elements/Label'; -import { useFilter } from '../hooks/useFilter'; -import useSpectrum from '../hooks/useSpectrum'; -import { TraceDirection } from '../reducer/Reducer'; - -import { headerLabelStyle } from './Header'; -import { HeaderContainer } from './HeaderContainer'; +import { useSelect } from 'react-science/ui'; + +import { useActivePhaseTraces } from '../../../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces'; +import { useDispatch } from '../../../context/DispatchContext'; +import useSpectrum from '../../../hooks/useSpectrum'; +import { TraceDirection } from '../../../reducer/Reducer'; + +import { useSyncedFilterOptions } from './useSyncedFilterOptions'; type PhaseCorrectionTypes = 'manual' | 'automatic'; -interface AlgorithmItem { +export interface AlgorithmItem { label: string; value: PhaseCorrectionTypes; } @@ -34,7 +23,7 @@ const defaultPhasingTypeItem: AlgorithmItem = { label: 'Manual', value: 'manual', }; -const algorithms: AlgorithmItem[] = [ +export const phaseCorrectionalAlgorithms: AlgorithmItem[] = [ defaultPhasingTypeItem, { label: 'Automatic', @@ -42,16 +31,6 @@ const algorithms: AlgorithmItem[] = [ }, ]; -const inputStyle: InputStyle = { - input: { - width: '70px', - textAlign: 'center', - }, - inputWrapper: { - height: '100%', - }, -}; - const emptyData = { datum: {}, filter: null }; type PhaseOptions = Record; @@ -60,12 +39,18 @@ const defaultPhaseOptions: PhaseOptions = { vertical: { ph0: 0, ph1: 0 }, }; -export default function PhaseCorrectionTwoDimensionsPanel() { +export function usePhaseCorrectionTwoDimensions(filter: Filter | null) { const { activeTraceDirection, pivot, addTracesToBothDirections } = useActivePhaseTraces(); + const dispatch = useDispatch(); + const [value, setValue] = useState(defaultPhaseOptions); + const valueRef = useRef(defaultPhaseOptions); + + const ph0Ref = useRef(); + const ph1Ref = useRef(); + const { data } = useSpectrum(emptyData) as Spectrum2D; - const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id); const debounceCalculation = useRef( debounce((options) => { dispatch({ @@ -75,21 +60,24 @@ export default function PhaseCorrectionTwoDimensionsPanel() { }, 250), ); - const dispatch = useDispatch(); - const [value, setValue] = useState(defaultPhaseOptions); - const valueRef = useRef(defaultPhaseOptions); + function syncWatch(sharedFilterOptions) { + updateInputRangeInitialValue(sharedFilterOptions); + setValue(sharedFilterOptions); + } - const ph0Ref = useRef(); - const ph1Ref = useRef(); + const { syncFilterOptions, clearSyncFilterOptions } = + useSyncedFilterOptions(syncWatch); - const { value: phaseCorrectionTypeItem, ...defaultSelectProps } = - useSelect({ - defaultSelectedItem: defaultPhasingTypeItem, - itemTextKey: 'label', - }); + const { + value: phaseCorrectionSelectItem, + ...defaultPhaseCorrectionSelectProps + } = useSelect({ + defaultSelectedItem: defaultPhasingTypeItem, + itemTextKey: 'label', + }); useEffect(() => { - if (filter && phaseCorrectionTypeItem?.value === 'manual') { + if (filter && phaseCorrectionSelectItem?.value === 'manual') { const { value } = filter; const phaseOptions: PhaseOptions = defaultPhaseOptions; @@ -101,7 +89,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() { setValue(phaseOptions); valueRef.current = phaseOptions; } - }, [filter, phaseCorrectionTypeItem?.value]); + }, [filter, phaseCorrectionSelectItem?.value]); useEffect(() => { if (ph0Ref.current && ph1Ref.current) { @@ -142,13 +130,13 @@ export default function PhaseCorrectionTwoDimensionsPanel() { (value) => { // update InputRange initial value const { ph0, ph1 } = value[activeTraceDirection]; - ph0Ref.current.setValue(ph0); - ph1Ref.current.setValue(ph1); + ph0Ref.current?.setValue(ph0); + ph1Ref.current?.setValue(ph1); }, [activeTraceDirection], ); - const handleInput = useCallback( + const handleInputValueChange = useCallback( (e) => { const { name, value } = e.target; if (e.target) { @@ -166,11 +154,13 @@ export default function PhaseCorrectionTwoDimensionsPanel() { updateInputRangeInitialValue(newValue); valueRef.current = newValue; setValue(valueRef.current); + syncFilterOptions(valueRef.current); } }, [ activeTraceDirection, calcPhaseCorrectionHandler, + syncFilterOptions, updateInputRangeInitialValue, ], ); @@ -188,19 +178,22 @@ export default function PhaseCorrectionTwoDimensionsPanel() { updateInputRangeInitialValue(newValue); valueRef.current = newValue; setValue(valueRef.current); + syncFilterOptions(valueRef.current); }, [ activeTraceDirection, calcPhaseCorrectionHandler, + syncFilterOptions, updateInputRangeInitialValue, ], ); - const handleCancelFilter = useCallback(() => { + function handleCancelFilter() { dispatch({ type: 'RESET_SELECTED_TOOL', }); - }, [dispatch]); + clearSyncFilterOptions(); + } function onChangeHandler(direction: TraceDirection) { dispatch({ @@ -210,7 +203,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() { } function handleApplyFilter() { - switch (phaseCorrectionTypeItem?.value) { + switch (phaseCorrectionSelectItem?.value) { case 'automatic': { dispatch({ type: 'APPLY_AUTO_PHASE_CORRECTION_TOW_DIMENSION_FILTER', @@ -227,101 +220,27 @@ export default function PhaseCorrectionTwoDimensionsPanel() { default: break; } + + clearSyncFilterOptions(); } function handleToggleAddTraceToBothDirections() { dispatch({ type: 'TOGGLE_ADD_PHASE_CORRECTION_TRACE_TO_BOTH_DIRECTIONS' }); } - return ( - -
- - items={algorithms} - filterable={false} - itemsEqual="value" - {...defaultSelectProps} - > -
- {phaseCorrectionTypeItem?.value === 'manual' && ( - <> - -
- - } - active={addTracesToBothDirections} - onClick={handleToggleAddTraceToBothDirections} - /> - -
- - - - - - - )} - - - ); + return { + handleCancelFilter, + onChangeHandler, + handleApplyFilter, + handleToggleAddTraceToBothDirections, + handleRangeChange, + handleInputValueChange, + value, + addTracesToBothDirections, + defaultPhaseCorrectionSelectProps, + phaseCorrectionSelectItem, + activeTraceDirection, + ph0Ref, + ph1Ref, + }; }