refactor: move slicing function down to SpectrumPhaseTrace component

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 (
-    <SpectrumPhaseTrace
-      dataSource="mouse"
-      data={data}
-      position={position}
-      color={color}
-      direction={activeTraceDirection}
-    />
-  );
+  return <SpectrumPhaseTrace positionUnit="Pixel" position={position} />;
 }

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;

src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx

@@ -4,33 +4,23 @@ 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';
 
 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 (
       <PhaseTrace
@@ -53,33 +43,28 @@ function PhaseTrace(props: SpectrumTraceProps) {
   const { width, height, margin } = useChartData();
 
   const {
-    spectrum: { data, x, y, id },
+    spectrum: { x, y, id },
     direction,
   } = props;
   const highligh = useHighlight([id], {
     type: HighlightEventSource.PHASE_CORRECTION_TRACE,
     extra: { id },
   });
 
-  const scale2dX = useScale2DX();
-  const scale2dY = useScale2DY();
-
-  const innerheight = height - margin.top - margin.bottom;
+  const innerHeight = height - margin.top - margin.bottom;
   const innerWidth = width - margin.left - margin.right;
-  const transformY = innerheight - BOX_SIZE / 2;
+  const transformY = innerHeight - BOX_SIZE / 2;
   const transformX = innerWidth - BOX_SIZE / 2;
 
   return (
     <SpectrumPhaseTrace
-      dataSource="tracesState"
-      data={data}
-      position={{ x: scale2dX(x), y: scale2dY(y) }}
+      positionUnit="PPM"
+      position={{ x, y }}
       {...highligh.onHover}
-      css={style}
     >
       {direction === 'horizontal' && (
         <rect
-          className="target"
+          css={style}
           y={transformY}
           x={margin.left}
           width={`${innerWidth}px`}
@@ -88,11 +73,11 @@ function PhaseTrace(props: SpectrumTraceProps) {
       )}
       {direction === 'vertical' && (
         <rect
-          className="target"
+          css={style}
           y={margin.top}
           x={transformX}
           width={`${BOX_SIZE}px`}
-          height={innerheight}
+          height={innerHeight}
         />
       )}
     </SpectrumPhaseTrace>

src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx

@@ -2,25 +2,33 @@ 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';
 import {
   get2DXScale,
   get2DYScale,
   getSliceYScale,
+  useScale2DX,
+  useScale2DY,
 } from '../../utilities/scale';
 
 import { useActivePhaseTraces } from './useActivePhaseTraces';
 
-interface SpectrumPhaseTraceProps extends React.SVGAttributes<SVGGElement> {
-  data: { x: Float64Array; re: Float64Array };
-  position: { x: number; y: number };
+interface BaseComponentProps extends React.SVGAttributes<SVGGElement> {
   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,21 +70,74 @@ 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 (
+    <InnerSpectrumPhaseTrace
+      transform={`translate(${translateX} ${translateY})`}
+      {...otherProps}
+      data={data}
+    >
+      {children}
+    </InnerSpectrumPhaseTrace>
+  );
+}
+
+function InnerSpectrumPhaseTrace(props: InnerSpectrumPhaseTraceProps) {
+  const { data: dataBeforePhasing, children, ...othersProps } = props;
   const {
     color,
     activeTraceDirection: direction,
     ph0,
     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 (
-    <g
-      style={{
-        transform: `translate(${translateX}px,${translateY}px) `,
-      }}
-      {...othersProps}
-    >
+    <g {...othersProps}>
       <path
         className="line"
         stroke={color}

src/component/reducer/actions/FiltersActions.ts

@@ -437,11 +437,14 @@ function beforeRollback(draft: Draft<State>, 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<State>, filterKey) {
   }
 }
 function afterRollback(draft: Draft<State>, 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<State>,
   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<State>) {