feat: debounce applying the 2d filter

src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx

@@ -1,9 +1,12 @@
 /** @jsxImportSource @emotion/react */
 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
+import { Toolbar } from 'react-science/ui';
 
 import { useActivePhaseTraces } from '../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces';
 import { useDispatch } from '../context/DispatchContext';
@@ -17,8 +20,6 @@ import { PhaseCorrectionTraceData, TraceDirection } from '../reducer/Reducer';
 
 import { headerLabelStyle } from './Header';
 import { HeaderContainer } from './HeaderContainer';
-import { Toolbar } from 'react-science/ui';
-import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 
 const inputStyle: InputStyle = {
   input: {
@@ -45,6 +46,18 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
   const ph0Ref = useRef<any>();
   const ph1Ref = useRef<any>();
 
+  const debounceCalculation = useMemo(
+    (options: { ph0: number; ph1: number }, time = 250) => {
+      return debounce(() => {
+        dispatch({
+          type: 'CALCULATE_TOW_DIMENSIONS_MANUAL_PHASE_CORRECTION_FILTER',
+          payload: { ...options, applyOn2D: true },
+        });
+      }, time);
+    },
+    [dispatch],
+  );
+
   useEffect(() => {
     if (filter) {
       const { value } = filter;
@@ -70,7 +83,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
   }, [activeTraceDirection, filter]);
 
   const calcPhaseCorrectionHandler = useCallback(
-    (newValues, filedName) => {
+    (newValues, filedName, source: 'input' | 'inputRange') => {
       if (filedName === 'ph1' && data && pivot) {
         const datum = (data as NmrData2DFt).rr;
         const nbPoints =
@@ -81,10 +94,15 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
         const diff1 = newValues.ph1 - valueRef.current.ph1;
         newValues.ph0 += diff0 - (diff1 * (nbPoints - pivot?.index)) / nbPoints;
       }
+
       dispatch({
         type: 'CALCULATE_TOW_DIMENSIONS_MANUAL_PHASE_CORRECTION_FILTER',
-        payload: newValues,
+        payload: { ...newValues, applyOn2D: source === 'input' },
       });
+
+      if (source === 'inputRange') {
+        debounceCalculation.current(newValues);
+      }
     },
     [activeTraceDirection, data, dispatch, pivot],
   );
@@ -102,7 +120,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
         const newValue = { ...valueRef.current, [name]: Number(value) };
 
         if (String(value).trim() !== '-') {
-          calcPhaseCorrectionHandler(newValue, name);
+          calcPhaseCorrectionHandler(newValue, name, 'input');
         }
         updateInputRangeInitialValue(newValue);
         valueRef.current = newValue;
@@ -115,7 +133,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
   const handleRangeChange = useCallback(
     (e) => {
       const newValue = { ...valueRef.current, [e.name]: e.value };
-      calcPhaseCorrectionHandler(newValue, e.name);
+      calcPhaseCorrectionHandler(newValue, e.name, 'inputRange');
       updateInputRangeInitialValue(newValue);
       valueRef.current = newValue;
       setValue(valueRef.current);

src/component/reducer/actions/FiltersActions.ts

@@ -85,10 +85,13 @@ type ZeroFillingFilterLiveAction = ActionType<
 >;
 type ManualPhaseCorrectionFilterAction = ActionType<
   | 'APPLY_MANUAL_PHASE_CORRECTION_FILTER'
-  | 'CALCULATE_MANUAL_PHASE_CORRECTION_FILTER'
-  | 'CALCULATE_TOW_DIMENSIONS_MANUAL_PHASE_CORRECTION_FILTER',
+  | 'CALCULATE_MANUAL_PHASE_CORRECTION_FILTER',
   { ph0: number; ph1: number }
 >;
+type ManualTwoDimensionsPhaseCorrectionFilterAction = ActionType<
+  'CALCULATE_TOW_DIMENSIONS_MANUAL_PHASE_CORRECTION_FILTER',
+  { ph0: number; ph1: number; applyOn2D?: boolean }
+>;
 
 type BaselineCorrectionFilterOptions = Omit<BaselineCorrectionOptions, 'zones'>;
 interface BaselineCorrectionFilterProps {
@@ -172,6 +175,7 @@ export type FiltersActions =
   | DeletePhaseCorrectionTrace
   | SetOneDimensionPhaseCorrectionPivotPoint
   | SetTwoDimensionPhaseCorrectionPivotPoint
+  | ManualTwoDimensionsPhaseCorrectionFilterAction
   | ActionType<
       | 'APPLY_FFT_FILTER'
       | 'APPLY_FFT_DIMENSION_1_FILTER'
@@ -1309,12 +1313,31 @@ function handleSetTwoDimensionPhaseCorrectionPivotPoint(
 //action
 function handleCalculateManualTwoDimensionPhaseCorrection(
   draft: Draft<State>,
-  action: ManualPhaseCorrectionFilterAction,
+  action: ManualTwoDimensionsPhaseCorrectionFilterAction,
 ) {
+  const activeSpectrum = getActiveSpectrum(draft);
   const { activeTraces } = getTwoDimensionPhaseCorrectionOptions(draft);
-  const { ph0, ph1 } = action.payload;
+  const { ph0, ph1, applyOn2D = false } = action.payload;
   activeTraces.ph0 = ph0;
   activeTraces.ph1 = ph1;
+
+  if (!applyOn2D || !activeSpectrum) {
+    return;
+  }
+
+  const { index } = activeSpectrum;
+  const spectrum = draft.tempData[index];
+
+  if (!isSpectrum2D(spectrum)) {
+    return;
+  }
+
+  const filterOptions = getTwoDimensionsPhaseCorrectionOptions(draft);
+
+  const { data, info } = spectrum;
+  const _data = { data, info };
+  phaseCorrectionTwoDimensions.apply(_data, filterOptions);
+  draft.data[index].data = _data.data;
 }
 
 function getTwoDimensionsPhaseCorrectionOptions(draft: Draft<State>) {