From 54f26ee471f89308cac755f276538ac0c1e6dda6 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Wed, 28 Feb 2024 17:16:54 +0100 Subject: [PATCH] refactor: move slicing function down to SpectrumPhaseTrace component --- .../PhaseTraceWithMouse.tsx | 40 +------- .../phase-correction-traces/PhaseTraces.tsx | 2 +- .../SpectraPhaseTraces.tsx | 35 ++----- .../SpectrumPhaseTrace.tsx | 97 ++++++++++++++----- .../reducer/actions/FiltersActions.ts | 70 ++----------- .../getTwoDimensionPhaseCorrectionOptions.ts | 2 +- 6 files changed, 94 insertions(+), 152 deletions(-) diff --git a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx index 4771df4e36..064a7f69a1 100644 --- a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx +++ b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx @@ -1,49 +1,13 @@ -import { Spectrum2D } from 'nmr-load-save'; - -import { getSlice } from '../../../../data/data2d/Spectrum2D'; import { useMouseTracker } from '../../../EventsTrackers/MouseTracker'; -import { useChartData } from '../../../context/ChartContext'; -import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum'; -import { useScale2DX, useScale2DY } from '../../utilities/scale'; import { SpectrumPhaseTrace } from './SpectrumPhaseTrace'; -import { useActivePhaseTraces } from './useActivePhaseTraces'; export function PhaseTraceWithMouse() { - const { width, height, tempData } = useChartData(); - const activeSpectrum = useActiveSpectrum(); - const { activeTraceDirection, color } = useActivePhaseTraces(); const position = useMouseTracker(); - const scale2dX = useScale2DX(); - const scale2dY = useScale2DY(); - - if (!position || !width || !height || !activeSpectrum?.id) { - return null; - } - const spectrum = tempData[activeSpectrum.index] as Spectrum2D; - - const sliceData = getSlice( - spectrum, - { - x: scale2dX.invert(position.x), - y: scale2dY.invert(position.y), - }, - { sliceType: 'both' }, - ); - - const data = sliceData?.[activeTraceDirection]?.data; - if (!data) { + if (!position) { return null; } - return ( - - ); + return ; } diff --git a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx index 55b6b623a7..af195ce011 100644 --- a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx +++ b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx @@ -8,7 +8,7 @@ export function PhaseTraces() { const { width, height, margin, displayerKey } = useChartData(); const activeSpectrum = useActiveSpectrum(); - if (!activeSpectrum?.id) return null; + if (!activeSpectrum?.id || !width || !height) return null; const clipWidth = width - margin.left - margin.right; const clipHeight = height - margin.top - margin.bottom; diff --git a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx index e862fff8a8..0da8461372 100644 --- a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx +++ b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx @@ -4,7 +4,6 @@ import { css } from '@emotion/react'; import { useChartData } from '../../../context/ChartContext'; import { HighlightEventSource, useHighlight } from '../../../highlight'; import { SpectrumTrace, TraceDirection } from '../../../reducer/Reducer'; -import { useScale2DX, useScale2DY } from '../../utilities/scale'; import { SpectrumPhaseTrace } from './SpectrumPhaseTrace'; import { useActivePhaseTraces } from './useActivePhaseTraces'; @@ -12,25 +11,16 @@ import { useActivePhaseTraces } from './useActivePhaseTraces'; const BOX_SIZE = 20; const style = css` - .target { - fill: transparent; - } + fill: transparent; &:hover { - .target { - fill: #ff6f0057; - } + fill: #ff6f0057; } `; export function SpectraPhaseTraces() { - const { width, height } = useChartData(); const { spectra = [], color, activeTraceDirection } = useActivePhaseTraces(); - if (!width || !height || spectra.length === 0) { - return null; - } - return spectra.map((spectrumTrace) => { return ( {direction === 'horizontal' && ( )} diff --git a/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx b/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx index 67befa7d23..64bb79f6e5 100644 --- a/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx +++ b/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx @@ -2,7 +2,9 @@ import { Spectrum1D, Spectrum2D } from 'nmr-load-save'; import { Filters } from 'nmr-processing'; import { ReactNode } from 'react'; +import { getSlice } from '../../../../data/data2d/Spectrum2D'; import { useChartData } from '../../../context/ChartContext'; +import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum'; import useSpectrum from '../../../hooks/useSpectrum'; import { TraceDirection } from '../../../reducer/Reducer'; import { PathBuilder } from '../../../utility/PathBuilder'; @@ -10,17 +12,23 @@ import { get2DXScale, get2DYScale, getSliceYScale, + useScale2DX, + useScale2DY, } from '../../utilities/scale'; import { useActivePhaseTraces } from './useActivePhaseTraces'; -interface SpectrumPhaseTraceProps extends React.SVGAttributes { - data: { x: Float64Array; re: Float64Array }; - position: { x: number; y: number }; +interface BaseComponentProps extends React.SVGAttributes { children?: ReactNode; - dataSource: 'mouse' | 'tracesState'; } +interface InnerSpectrumPhaseTraceProps extends BaseComponentProps { + data: { x: Float64Array; re: Float64Array }; +} +interface SpectrumPhaseTraceProps extends BaseComponentProps { + positionUnit: 'PPM' | 'Pixel'; + position: { x: number; y: number }; +} function usePath(x: Float64Array, y: Float64Array, direction: TraceDirection) { const { width, margin, height, xDomain, yDomain, mode } = useChartData(); const { scaleRatio } = useActivePhaseTraces(); @@ -62,13 +70,67 @@ function usePath(x: Float64Array, y: Float64Array, direction: TraceDirection) { } export function SpectrumPhaseTrace(props: SpectrumPhaseTraceProps) { - const { - data: dataBeforePhasing, - position, - children, - dataSource, - ...othersProps - } = props; + const { positionUnit, position, children, ...otherProps } = props; + const { tempData, width, margin, height } = useChartData(); + const { activeTraceDirection: direction } = useActivePhaseTraces(); + + const scale2dX = useScale2DX(); + const scale2dY = useScale2DY(); + + const activeSpectrum = useActiveSpectrum(); + if (!activeSpectrum?.id) { + return null; + } + + const spectrumBeforePhasing = tempData[activeSpectrum.index] as Spectrum2D; + let positionInPixel; + let positionInPPM; + + if (positionUnit === 'Pixel') { + positionInPixel = position; + positionInPPM = { + x: scale2dX.invert(position.x), + y: scale2dY.invert(position.y), + }; + } else { + positionInPixel = { + x: scale2dX(position.x), + y: scale2dY(position.y), + }; + + positionInPPM = position; + } + + const sliceData = getSlice(spectrumBeforePhasing, positionInPPM, { + sliceType: 'both', + }); + + const data = sliceData?.[direction]?.data; + if (!data) { + return null; + } + + const innerHeight = height - margin.top - margin.bottom; + const innerWidth = width - margin.left - margin.right; + + const translateY = + direction === 'horizontal' ? positionInPixel.y - innerHeight : 0; + const translateX = + direction === 'vertical' ? positionInPixel.x - innerWidth : 0; + + return ( + + {children} + + ); +} + +function InnerSpectrumPhaseTrace(props: InnerSpectrumPhaseTraceProps) { + const { data: dataBeforePhasing, children, ...othersProps } = props; const { color, activeTraceDirection: direction, @@ -76,7 +138,6 @@ export function SpectrumPhaseTrace(props: SpectrumPhaseTraceProps) { ph1, } = useActivePhaseTraces(); - const { width, margin, height } = useChartData(); const spectrum = { data: dataBeforePhasing, info: { isComplex: true, isFid: false }, @@ -89,19 +150,9 @@ export function SpectrumPhaseTrace(props: SpectrumPhaseTraceProps) { const { x, re } = spectrum.data; const path = usePath(x, re, direction); - const innerheight = height - margin.top - margin.bottom; - const innerWidth = width - margin.left - margin.right; - - const translateY = direction === 'horizontal' ? position.y - innerheight : 0; - const translateX = direction === 'vertical' ? position.x - innerWidth : 0; return ( - + , filterKey) { .twoDimensionPhaseCorrection.traces[ direction ] as PhaseCorrectionTraceData; - const { ph0, ph1, pivot } = filterOptions[direction]; + const { ph0, ph1, pivot, spectra = [] } = filterOptions[direction]; phaseOptions.ph0 = ph0; phaseOptions.ph1 = ph1; phaseOptions.scaleRatio = 1; - phaseOptions.spectra = []; + phaseOptions.spectra = spectra.map((spectrum) => ({ + ...spectrum, + id: spectrum?.id || v4(), + })); const datum = getProjection( (spectrum.data as NmrData2DFt).rr, @@ -498,52 +501,13 @@ function beforeRollback(draft: Draft, filterKey) { } } function afterRollback(draft: Draft, filterKey) { - const activeSpectrum = getActiveSpectrum(draft); + // const activeSpectrum = getActiveSpectrum(draft); switch (filterKey) { case apodization.id: { draft.toolOptions.data.apodizationOptions = defaultApodizationOptions; break; } - case phaseCorrectionTwoDimensions.id: { - if (activeSpectrum && draft.tempData) { - const spectrum = draft.tempData[activeSpectrum.index]; - const filterOptions = getTwoDimensionFilterOptions(draft); - - if (!filterOptions || !isSpectrum2D(spectrum)) return null; - - for (const direction in filterOptions) { - const phaseOptions = draft.toolOptions.data - .twoDimensionPhaseCorrection.traces[ - direction - ] as PhaseCorrectionTraceData; - const { spectra } = filterOptions[direction]; - - for (const trace of spectra) { - const { x, y, id } = trace; - const sliceData = getSlice( - spectrum, - { - x, - y, - }, - { sliceType: 'both' }, - ); - if (sliceData) { - const { data } = sliceData[direction]; - phaseOptions.spectra.push({ - data, - id: id || v4(), - x, - y, - }); - } - } - } - } - - break; - } default: break; } @@ -1360,32 +1324,10 @@ function handleCalculateManualTwoDimensionPhaseCorrection( draft: Draft, action: ManualPhaseCorrectionFilterAction, ) { - // const activeSpectrum = getActiveSpectrum(draft); - // if (activeSpectrum) { - // const { index } = activeSpectrum; const { activeTraces } = getTwoDimensionPhaseCorrectionOptions(draft); const { ph0, ph1 } = action.payload; activeTraces.ph0 = ph0; activeTraces.ph1 = ph1; - - // for (const spectrumTrace of activeTraces.spectra) { - // const { x, y } = spectrumTrace; - // const spectrumData = draft.data[index] as Spectrum2D; - // const sliceData = getSlice(spectrumData, { x, y }, { sliceType: 'both' }); - // if (sliceData) { - // const { data, info } = sliceData[activeTraceDirection]; - // const _data = { - // data, - // info, - // }; - // phaseCorrection.apply(_data as unknown as Spectrum1D, { ph0, ph1 }); - // const { im: newIm, re: newRe } = _data.data; - - // spectrumTrace.data.im = newIm; - // spectrumTrace.data.re = newRe; - // } - // } - // } } function getTwoDimensionsPhaseCorrectionOptions(draft: Draft) { diff --git a/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts b/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts index f71dbad6f1..f07a3ecd62 100644 --- a/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts +++ b/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts @@ -1,12 +1,12 @@ import type { Draft } from 'immer'; +import { useChartData } from '../../context/ChartContext'; import type { PhaseCorrectionTraceData, State, TraceDirection, TwoDimensionPhaseCorrection, } from '../Reducer'; -import { useChartData } from '../../context/ChartContext'; export function getTwoDimensionPhaseCorrectionOptions( state: Draft | State,