feat: 2D phase correction

package.json

@@ -56,7 +56,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.3.3",
+    "@blueprintjs/core": "^5.5.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lukeed/uuid": "^2.0.1",
@@ -70,7 +70,7 @@
     "file-saver": "^2.0.5",
     "filelist-utils": "^1.10.2",
     "formik": "^2.4.5",
-    "immer": "^10.0.2",
+    "immer": "^10.0.3",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "ml-airpls": "^1.0.2",
@@ -81,17 +81,17 @@
     "ml-baseline-correction-regression": "^1.0.2",
     "ml-conrec": "^5.0.2",
     "ml-gsd": "^12.1.3",
-    "ml-matrix": "^6.10.5",
-    "ml-spectra-processing": "^12.5.1",
+    "ml-matrix": "^6.10.6",
+    "ml-spectra-processing": "^12.6.0",
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.21.0",
-    "nmr-processing": "^11.1.1",
+    "nmr-load-save": "^0.22.2",
+    "nmr-processing": "^11.3.0",
     "nmredata": "^0.9.7",
     "numeral": "^2.0.6",
-    "openchemlib": "^8.5.0",
-    "openchemlib-utils": "^5.3.0",
+    "openchemlib": "^8.7.1",
+    "openchemlib-utils": "^5.4.0",
     "papaparse": "^5.4.1",
     "re-resizable": "6.9.11",
     "react-d3-utils": "^1.0.0",
@@ -110,41 +110,42 @@
     "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
     "smart-array-filter": "^4.0.2",
-    "yup": "^1.3.1"
+    "yup": "^1.3.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
-    "@playwright/test": "^1.38.1",
+    "@babel/preset-typescript": "^7.23.2",
+    "@playwright/test": "^1.39.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/d3": "^7.4.1",
-    "@types/node": "^20.7.0",
-    "@types/papaparse": "^5.3.9",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@types/react-table": "^7.7.16",
+    "@types/d3": "^7.4.2",
+    "@types/lodash": "^4.14.200",
+    "@types/node": "^20.8.7",
+    "@types/papaparse": "^5.3.10",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-table": "^7.7.17",
     "@vitejs/plugin-react-swc": "^3.4.0",
-    "@vitest/coverage-v8": "^0.34.5",
+    "@vitest/coverage-v8": "^0.34.6",
     "cross-env": "^7.0.3",
-    "cspell": "^7.3.6",
-    "eslint": "^8.50.0",
+    "cspell": "^7.3.8",
+    "eslint": "^8.51.0",
     "eslint-config-cheminfo-react": "^10.0.0",
     "eslint-config-cheminfo-typescript": "^12.0.4",
     "modern-normalize": "^2.0.0",
     "postcss-styled-syntax": "^0.5.0",
     "prettier": "^3.0.3",
-    "rc-menu": "^9.12.0",
+    "rc-menu": "^9.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "rimraf": "^5.0.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.2.1",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.5"
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   }
 }

public/data/brukerFolders/alphaIonone.json

@@ -0,0 +1,41 @@
+{
+  "data": {
+    "spectra": [
+      {
+        "sourceSelector": {
+          "files": [
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/acqu2s",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/acqus",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/procs",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/proc2s",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/2rr",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/2ri",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/2ir",
+            "data/brukerFolders/alphaIonone.zip/alphaIonone/3/pdata/1/2ii"
+          ]
+        },
+        "filters": [],
+        "display": {
+          "isPositiveVisible": true,
+          "isNegativeVisible": true,
+          "isVisible": true,
+          "dimension": 2
+        },
+        "zones": {
+          "values": [],
+          "options": {}
+        }
+      }
+    ],
+    "molecules": [],
+    "source": {
+      "baseURL": "",
+      "entries": [
+        {
+          "relativePath": "data/brukerFolders/alphaIonone.zip"
+        }
+      ]
+    }
+  },
+  "version": 4
+}

src/component/1d-2d/tools/BrushX.tsx

@@ -10,6 +10,7 @@ const styles: Record<'container', CSSProperties> = {
     position: 'absolute',
     top: '0px',
     left: '0px',
+    zIndex: 9,
   },
 };
 

src/component/1d-2d/tools/BrushXY.tsx

@@ -11,6 +11,7 @@ const styles: Record<'container', CSSProperties> = {
     top: '0px',
     left: '0px',
     zoom: '100%',
+    zIndex: 9,
   },
 };
 
@@ -21,6 +22,7 @@ const allowTools = new Set([
   options.peakPicking.id,
   options.integral.id,
   options.phaseCorrection.id,
+  options.phaseCorrectionTwoDimensions.id,
   options.baselineCorrection.id,
   options.rangePicking.id,
   options.zonePicking.id,

src/component/1d-2d/tools/CrossLinePointer.tsx

@@ -20,6 +20,7 @@ const allowTools = new Set([
   options.apodization.id,
   options.equalizer.id,
   options.baselineCorrection.id,
+  options.phaseCorrectionTwoDimensions.id,
   options.zonePicking.id,
   options.slicing.id,
   options.integral.id,
@@ -68,6 +69,7 @@ function CrossLinePointer() {
         overflow: 'visible',
         width: 2 * width,
         height: 2 * height,
+        zIndex: 9,
       }}
     >
       <svg width={2 * width} height={2 * height}>

src/component/1d/Chart1D.tsx

@@ -14,6 +14,7 @@ import { PeakEditionProvider } from './peaks/PeakEditionManager';
 import Peaks from './peaks/Peaks';
 import PeaksShapes from './peaks/PeaksShapes';
 import Ranges from './ranges/Ranges';
+import RangesIntegrals from './ranges/RangesIntegrals';
 import BaseLineZones from './tool/BaseLineZones';
 
 function Chart1D({ mode, width, height, margin, displayerKey }) {
@@ -45,6 +46,7 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
         <ApodizationLine />
         <IntegralsSeries />
         <Peaks peaksSource="peaks" />
+        <RangesIntegrals />
         <Ranges />
         <Peaks peaksSource="ranges" />
         <JGraph />

src/component/1d/Viewer1D.tsx

@@ -289,30 +289,30 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
 
   const handleZoom = useCallback<OnZoom>(
     (event) => {
-      dispatch({ type: 'SET_ZOOM', payload: { event, selectedTool } });
+      dispatch({ type: 'SET_ZOOM', payload: { event } });
     },
-    [dispatch, selectedTool],
+    [dispatch],
   );
 
   const mouseClick = useCallback<OnClick>(
-    (position) => {
+    (event) => {
       if (!scaleState.scaleX) return;
 
-      const xPPM = scaleState.scaleX().invert(position.x);
+      const xPPM = scaleState.scaleX().invert(event.x);
 
       const propagateEvent = () => {
         Events.emit('mouseClick', {
-          ...position,
+          ...event,
           xPPM,
         });
       };
 
-      if (position.shiftKey) {
+      if (event.shiftKey) {
         switch (selectedTool) {
           case options.peakPicking.id:
             dispatch({
               type: 'ADD_PEAK',
-              payload: position,
+              payload: event,
             });
             break;
           case options.editRange.id:
@@ -330,20 +330,21 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
               payload: { cutValue: xPPM },
             });
             break;
-          default:
-            break;
-        }
-      } else {
-        switch (selectedTool) {
+
           case options.phaseCorrection.id:
             dispatch({
-              type: 'SET_VERTICAL_INDICATOR_X_POSITION',
+              type: 'SET_ONE_DIMENSION_PIVOT_POINT',
               payload: {
-                position: position.x,
+                value: event.x,
               },
             });
-            break;
 
+            break;
+          default:
+            break;
+        }
+      } else {
+        switch (selectedTool) {
           default:
         }
       }

src/component/1d/integral/IntegralsSeries.tsx

@@ -1,20 +1,45 @@
+import { xyIntegral, xyMaxY } from 'ml-spectra-processing';
 import { Spectrum1D } from 'nmr-load-save';
+import { Integral as IntegralType } from 'nmr-processing';
 
 import { useChartData } from '../../context/ChartContext';
-
-import Integral from './Integral';
 import useSpectrum from '../../hooks/useSpectrum';
 
+import { Integration } from './Integration';
+
 const emptyData = { integrals: {}, info: {}, display: {} };
 
-function IntegralsSeries() {
+export interface IntegralData extends IntegralType {
+  x: Float64Array;
+  y: Float64Array;
+}
+
+export default function IntegralsSeries() {
   const {
     displayerKey,
     view: {
       spectra: { activeTab: nucleus },
     },
   } = useChartData();
+  const integrals = useIntegrals();
+
+  if (!integrals) return null;
+
+  return (
+    <g clipPath={`url(#${displayerKey}clip-chart-1d)`} className="integrals">
+      {integrals.values.map((integral) => (
+        <Integration
+          nucleus={nucleus}
+          key={integral.id}
+          integral={integral}
+          max={integrals.max}
+        />
+      ))}
+    </g>
+  );
+}
 
+function useIntegrals() {
   const spectrum = useSpectrum(emptyData) as Spectrum1D;
 
   if (
@@ -25,15 +50,27 @@ function IntegralsSeries() {
     return null;
   }
 
-  return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
-      <g className="integrals">
-        {spectrum.integrals.values.map((integral) => (
-          <Integral nucleus={nucleus} key={integral.id} integral={integral} />
-        ))}
-      </g>
-    </g>
-  );
-}
+  let max = Number.NEGATIVE_INFINITY;
+  const values: IntegralData[] = [];
 
-export default IntegralsSeries;
+  const {
+    data: { x, re },
+    integrals,
+  } = spectrum;
+  for (const integral of integrals?.values || []) {
+    const { from, to } = integral;
+    const integralData = xyIntegral(
+      { x, y: re },
+      {
+        from,
+        to,
+        reverse: true,
+      },
+    );
+    values.push({ ...integral, ...integralData } as IntegralData);
+    const value = xyMaxY(integralData);
+    if (value > max) max = value;
+  }
+
+  return { max, values };
+}

src/component/1d/integral/Integral.tsx → src/component/1d/integral/Integration.tsx

@@ -1,17 +1,20 @@
-import { Integral as IntegralType } from 'nmr-processing';
-
+import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState';
 import useIntegralPath from '../../hooks/useIntegralPath';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 
 import IntegralResizable from './IntegralResizable';
+import { IntegralData } from './IntegralsSeries';
 
 interface IntegralProps {
-  integral: IntegralType;
+  integral: IntegralData;
   nucleus: string;
+  max: number;
 }
 
-function Integral({ integral, nucleus }: IntegralProps) {
-  const path = useIntegralPath(integral);
+export function Integration({ integral, nucleus, max }: IntegralProps) {
+  const { x, y } = integral;
+  const { scaleRatio } = useActiveSpectrumIntegralsViewState();
+  const path = useIntegralPath({ x, y, max, scaleRatio });
   const integralPreferences = usePanelPreferences('integrals', nucleus);
 
   return (
@@ -31,5 +34,3 @@ function Integral({ integral, nucleus }: IntegralProps) {
     </g>
   );
 }
-
-export default Integral;