feat: automatic two dimensions phase correction (#3022)

* feat: prepare automatic two dimensions phase correction action * chore: update nmr-processing and nmr-load-save with the new automatic phase correction algorithm --------- Co-authored-by: jobo322 <[email protected]>
cheminfo · Apr 18, 2024 · 690971f · 690971f
1 parent c0b406d
commit 690971f
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,8 +90,8 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.29.2",
-    "nmr-processing": "^12.1.1",
+    "nmr-load-save": "^0.29.3",
+    "nmr-processing": "^12.2.0",
     "nmredata": "^0.9.9",
     "numeral": "^2.0.6",
     "openchemlib": "^8.9.0",
@@ -152,4 +152,4 @@
     "vite": "^5.2.9",
     "vitest": "^1.5.0"
   }
-}
+}
diff --git a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx
@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import { Select } from '@blueprintjs/select';
 import { css } from '@emotion/react';
 import { NmrData2DFt } from 'cheminfo-types';
 import debounce from 'lodash/debounce';
@@ -7,7 +8,7 @@ import { Filters } from 'nmr-processing';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';
-import { Toolbar } from 'react-science/ui';
+import { Button, Toolbar, useSelect } from 'react-science/ui';
 
 import { useActivePhaseTraces } from '../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces';
 import { useDispatch } from '../context/DispatchContext';
@@ -22,6 +23,25 @@ import { TraceDirection } from '../reducer/Reducer';
 import { headerLabelStyle } from './Header';
 import { HeaderContainer } from './HeaderContainer';
 
+type PhaseCorrectionTypes = 'manual' | 'automatic';
+
+interface AlgorithmItem {
+  label: string;
+  value: PhaseCorrectionTypes;
+}
+
+const defaultPhasingTypeItem: AlgorithmItem = {
+  label: 'Manual',
+  value: 'manual',
+};
+const algorithms: AlgorithmItem[] = [
+  defaultPhasingTypeItem,
+  {
+    label: 'Automatic',
+    value: 'automatic',
+  },
+];
+
 const inputStyle: InputStyle = {
   input: {
     width: '70px',
@@ -62,8 +82,14 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
   const ph0Ref = useRef<any>();
   const ph1Ref = useRef<any>();
 
+  const { value: phaseCorrectionTypeItem, ...defaultSelectProps } =
+    useSelect<AlgorithmItem>({
+      defaultSelectedItem: defaultPhasingTypeItem,
+      itemTextKey: 'label',
+    });
+
   useEffect(() => {
-    if (filter) {
+    if (filter && phaseCorrectionTypeItem?.value === 'manual') {
       const { value } = filter;
       const phaseOptions: PhaseOptions = defaultPhaseOptions;
 
@@ -75,7 +101,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
       setValue(phaseOptions);
       valueRef.current = phaseOptions;
     }
-  }, [filter]);
+  }, [filter, phaseCorrectionTypeItem?.value]);
 
   useEffect(() => {
     if (ph0Ref.current && ph1Ref.current) {
@@ -184,7 +210,23 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
   }
 
   function handleApplyFilter() {
-    dispatch({ type: 'APPLY_MANUAL_PHASE_CORRECTION_TOW_DIMENSION_FILTER' });
+    switch (phaseCorrectionTypeItem?.value) {
+      case 'automatic': {
+        dispatch({
+          type: 'APPLY_AUTO_PHASE_CORRECTION_TOW_DIMENSION_FILTER',
+        });
+        break;
+      }
+
+      case 'manual': {
+        dispatch({
+          type: 'APPLY_MANUAL_PHASE_CORRECTION_TOW_DIMENSION_FILTER',
+        });
+        break;
+      }
+      default:
+        break;
+    }
   }
 
   function handleToggleAddTraceToBothDirections() {
@@ -193,76 +235,92 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
 
   return (
     <HeaderContainer style={{ padding: '0 5px' }}>
-      <Label title="Direction:" style={headerLabelStyle}>
-        <Toolbar>
-          <Toolbar.Item
-            css={css`
-              border: 1px solid #f7f7f7;
-            `}
-            tooltip="Horizontal"
-            icon={<FaRulerHorizontal />}
-            active={activeTraceDirection === 'horizontal'}
-            onClick={() => onChangeHandler('horizontal')}
-          />
-          <Toolbar.Item
-            css={css`
-              border: 1px solid #f7f7f7;
-            `}
-            tooltip="Vertical"
-            icon={<FaRulerVertical />}
-            active={activeTraceDirection === 'vertical'}
-            onClick={() => onChangeHandler('vertical')}
+      <div style={{ padding: '0 5px' }}>
+        <Select<AlgorithmItem>
+          items={algorithms}
+          filterable={false}
+          itemsEqual="value"
+          {...defaultSelectProps}
+        >
+          <Button
+            text={phaseCorrectionTypeItem?.label}
+            rightIcon="double-caret-vertical"
           />
-        </Toolbar>
-      </Label>
-      <div style={{ paddingRight: '5px' }}>
-        <Toolbar>
-          <Toolbar.Item
-            tooltip="Add the trace in both directions"
-            icon={<MdLooksTwo />}
-            active={addTracesToBothDirections}
-            onClick={handleToggleAddTraceToBothDirections}
-          />
-        </Toolbar>
+        </Select>
       </div>
+      {phaseCorrectionTypeItem?.value === 'manual' && (
+        <>
+          <Label title="Direction:" style={headerLabelStyle}>
+            <Toolbar>
+              <Toolbar.Item
+                css={css`
+                  border: 1px solid #f7f7f7;
+                `}
+                tooltip="Horizontal"
+                icon={<FaRulerHorizontal />}
+                active={activeTraceDirection === 'horizontal'}
+                onClick={() => onChangeHandler('horizontal')}
+              />
+              <Toolbar.Item
+                css={css`
+                  border: 1px solid #f7f7f7;
+                `}
+                tooltip="Vertical"
+                icon={<FaRulerVertical />}
+                active={activeTraceDirection === 'vertical'}
+                onClick={() => onChangeHandler('vertical')}
+              />
+            </Toolbar>
+          </Label>
+          <div style={{ paddingRight: '5px' }}>
+            <Toolbar>
+              <Toolbar.Item
+                tooltip="Add the trace in both directions"
+                icon={<MdLooksTwo />}
+                active={addTracesToBothDirections}
+                onClick={handleToggleAddTraceToBothDirections}
+              />
+            </Toolbar>
+          </div>
 
-      <Label title="PH0:" style={headerLabelStyle}>
-        <Input
-          name="ph0"
-          style={inputStyle}
-          onChange={handleInput}
-          value={value[activeTraceDirection].ph0}
-          type="number"
-          debounceTime={250}
-        />
-      </Label>
-      <Label title="PH1:" style={headerLabelStyle}>
-        <Input
-          name="ph1"
-          style={inputStyle}
-          onChange={handleInput}
-          value={value[activeTraceDirection].ph1}
-          type="number"
-          debounceTime={250}
-        />
-      </Label>
-      <InputRange
-        ref={ph0Ref}
-        name="ph0"
-        label="Change PH0 (click and drag)"
-        shortLabel="Ph0"
-        style={{ width: '20%' }}
-        onChange={handleRangeChange}
-      />
-      <InputRange
-        ref={ph1Ref}
-        name="ph1"
-        label="Change PH1 (click and drag)"
-        shortLabel="Ph1"
-        style={{ width: '20%' }}
-        onChange={handleRangeChange}
-      />
-
+          <Label title="PH0:" style={headerLabelStyle}>
+            <Input
+              name="ph0"
+              style={inputStyle}
+              onChange={handleInput}
+              value={value[activeTraceDirection].ph0}
+              type="number"
+              debounceTime={250}
+            />
+          </Label>
+          <Label title="PH1:" style={headerLabelStyle}>
+            <Input
+              name="ph1"
+              style={inputStyle}
+              onChange={handleInput}
+              value={value[activeTraceDirection].ph1}
+              type="number"
+              debounceTime={250}
+            />
+          </Label>
+          <InputRange
+            ref={ph0Ref}
+            name="ph0"
+            label="Change PH0 (click and drag)"
+            shortLabel="Ph0"
+            style={{ width: '20%' }}
+            onChange={handleRangeChange}
+          />
+          <InputRange
+            ref={ph1Ref}
+            name="ph1"
+            label="Change PH1 (click and drag)"
+            shortLabel="Ph1"
+            style={{ width: '20%' }}
+            onChange={handleRangeChange}
+          />
+        </>
+      )}
       <ActionButtons onDone={handleApplyFilter} onCancel={handleCancelFilter} />
     </HeaderContainer>
   );

diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts
@@ -524,6 +524,10 @@ function innerSpectrumReducer(draft: Draft<State>, action: Action) {
         return FiltersActions.handleApplyManualTowDimensionsPhaseCorrectionFilter(
           draft,
         );
+      case 'APPLY_AUTO_PHASE_CORRECTION_TOW_DIMENSION_FILTER':
+        return FiltersActions.handleApplyAutoPhaseCorrectionTwoDimensionsFilter(
+          draft,
+        );
       case 'CHANGE_SPECTRUM_VISIBILITY':
         return SpectraActions.handleChangeSpectrumVisibilityById(draft, action);
       case 'CHANGE_SPECTRA_VISIBILITY_BY_NUCLEUS':

diff --git a/src/component/reducer/actions/FiltersActions.ts b/src/component/reducer/actions/FiltersActions.ts
@@ -184,6 +184,7 @@ export type FiltersActions =
       | 'APPLY_ABSOLUTE_FILTER'
       | 'APPLY_MANUAL_PHASE_CORRECTION_TOW_DIMENSION_FILTER'
       | 'TOGGLE_ADD_PHASE_CORRECTION_TRACE_TO_BOTH_DIRECTIONS'
+      | 'APPLY_AUTO_PHASE_CORRECTION_TOW_DIMENSION_FILTER'
     >;
 
 function getFilterUpdateDomainRules(
@@ -1516,6 +1517,43 @@ function handleApplyManualTowDimensionsPhaseCorrectionFilter(
   }
 }
 
+//action
+function handleApplyAutoPhaseCorrectionTwoDimensionsFilter(
+  draft: Draft<State>,
+) {
+  const activeSpectrum = getActiveSpectrum(draft);
+
+  if (!activeSpectrum || !draft.tempData) {
+    return;
+  }
+
+  const { index } = activeSpectrum;
+  const activeFilterIndex = getActiveFilterIndex(draft);
+
+  FiltersManager.applyFilter(
+    draft.tempData[index],
+    [
+      {
+        name: phaseCorrectionTwoDimensions.id,
+        value: {},
+      },
+    ],
+    { filterIndex: activeFilterIndex },
+  );
+
+  draft.data[index] = draft.tempData[index];
+
+  if (activeFilterIndex !== -1) {
+    rollbackSpectrumByFilter(draft, {
+      searchBy: 'name',
+      key: phaseCorrectionTwoDimensions.id,
+      triggerSource: 'Apply',
+    });
+  } else {
+    updateView(draft, phaseCorrectionTwoDimensions.DOMAIN_UPDATE_RULES);
+  }
+}
+
 export {
   handleShiftSpectrumAlongXAxis,
   handleApplyZeroFillingFilter,
@@ -1549,4 +1587,5 @@ export {
   handleSetTwoDimensionPhaseCorrectionPivotPoint,
   handleCalculateManualTwoDimensionPhaseCorrection,
   handleToggleAddTracesToBothDirections,
+  handleApplyAutoPhaseCorrectionTwoDimensionsFilter,
 };