feat: Integral scaling

 - re-implement scaling for integral, Scaling mechanism start by press shift + scroll wheel.
 - ability to scale integral in ranges,close  #1244.

src/component/1d/Integral.tsx

@@ -1,7 +1,7 @@
 // import { xyReduce, xyIntegral } from 'ml-spectra-processing';
 import { useMemo } from 'react';
 
-import { Datum1D } from '../../data/data1d/Spectrum1D';
+import { useChartData } from '../context/ChartContext';
 import { usePreferences } from '../context/PreferencesContext';
 import { integralDefaultValues } from '../panels/extra/preferences/defaultValues';
 import { getValue } from '../utility/LocalStorage';
@@ -11,13 +11,13 @@ import useIntegralPath from './utilities/useIntegralPath';
 
 interface IntegralProps {
   integral: { id: string; from: number; to: number; integral?: number };
-  spectrum: Datum1D;
   isActive: boolean;
 }
 
-function Integral({ integral, spectrum, isActive }: IntegralProps) {
+function Integral({ integral, isActive }: IntegralProps) {
   const preferences = usePreferences();
-  const path = useIntegralPath(integral, { spectrum });
+  const path = useIntegralPath(integral);
+  const { height, margin } = useChartData();
 
   const integralSettings = useMemo(() => {
     let {
@@ -37,6 +37,7 @@ function Integral({ integral, spectrum, isActive }: IntegralProps) {
         style={{
           transformOrigin: 'center top',
           opacity: isActive ? 1 : 0.2,
+          transform: `translateY(-${margin.bottom + height * 0.3}px)`,
         }}
         d={path}
       />

src/component/1d/IntegralsSeries.tsx

@@ -28,7 +28,6 @@ function IntegralsSeries() {
                 <Integral
                   key={integral.id}
                   integral={integral}
-                  spectrum={spectrum}
                   isActive={isActive(spectrum.id)}
                 />
               )),

src/component/1d/Viewer1D.tsx

@@ -21,7 +21,6 @@ import {
   ADD_BASE_LINE_ZONE,
   BRUSH_END,
   FULL_ZOOM_OUT,
-  CHANGE_INTEGRAL_ZOOM,
   SET_ZOOM_FACTOR,
   ADD_PEAK,
   SET_VERTICAL_INDICATOR_X_POSITION,
@@ -200,21 +199,12 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
   );
 
   const handelOnDoubleClick = useCallback(() => {
-    dispatch({ type: FULL_ZOOM_OUT, zoomType: ZoomType.STEP_HROZENTAL });
+    dispatch({ type: FULL_ZOOM_OUT, zoomType: ZoomType.STEP_HORIZONTAL });
   }, [dispatch]);
 
   const handleZoom = useCallback(
     (event) => {
-      switch (selectedTool) {
-        case options.integral.id:
-          dispatch({ type: CHANGE_INTEGRAL_ZOOM, ...event });
-          break;
-
-        default:
-          dispatch({ type: SET_ZOOM_FACTOR, ...event });
-
-          return;
-      }
+      dispatch({ type: SET_ZOOM_FACTOR, ...event, selectedTool });
     },
     [dispatch, selectedTool],
   );

src/component/1d/ranges/RangeIntegral.tsx

@@ -6,11 +6,8 @@ interface IntegralProps {
 }
 
 function RangeIntegral({ range }: IntegralProps) {
-  const path = useIntegralPath(range, {
-    useActiveSpectrum: true,
-    useConstantScale: true,
-  });
-  const { height } = useChartData();
+  const path = useIntegralPath(range);
+  const { height, margin } = useChartData();
 
   return (
     <path
@@ -19,8 +16,7 @@ function RangeIntegral({ range }: IntegralProps) {
       strokeWidth="1"
       fill="none"
       style={{
-        transformOrigin: 'center center',
-        transform: `translateY(-${height / 4}px)`,
+        transform: `translateY(-${margin.bottom + height * 0.3}px)`,
       }}
       d={path}
     />

src/component/1d/utilities/useIntegralPath.ts

@@ -2,98 +2,58 @@ import { extent } from 'd3';
 import { xyIntegral, xyReduce } from 'ml-spectra-processing';
 import { useCallback, useMemo } from 'react';
 
-import { Data1D, Datum1D } from '../../../data/data1d/Spectrum1D';
+import { Data1D } from '../../../data/data1d/Spectrum1D';
 import { useChartData } from '../../context/ChartContext';
 import { useScale } from '../../context/ScaleContext';
 
-import { getIntegralYScale, getYScale, reScaleY } from './scale';
+import { getYScale, reScaleY } from './scale';
 
-export default function useIntegralPath(
-  integralOptions: { from: number; to: number },
-  options:
-    | {
-        useConstantScale?: boolean;
-        useActiveSpectrum?: false;
-        spectrum: Datum1D;
-      }
-    | {
-        useConstantScale?: boolean;
-        useActiveSpectrum: true;
-        spectrum?: Datum1D;
-      },
-) {
-  const {
-    useConstantScale = false,
-    useActiveSpectrum = false,
-    spectrum,
-  } = options;
-  const {
-    xDomain,
-    integralsYDomains,
-    height,
-    margin,
-    verticalAlign,
-    data,
-    activeSpectrum,
-  } = useChartData();
+export default function useIntegralPath(integralOptions: {
+  from: number;
+  to: number;
+}) {
+  const { xDomain, height, margin, verticalAlign, data, activeSpectrum, zoom } =
+    useChartData();
 
   const { scaleX } = useScale();
 
   const scaleY = useCallback(
     (ySeries: number[] = []) => {
-      if (!useConstantScale) {
-        return getIntegralYScale(
-          { integralsYDomains, height, margin, verticalAlign },
-          useActiveSpectrum ? activeSpectrum?.id : spectrum?.id,
-        );
-      } else {
-        const yDomain = extent(ySeries) as number[];
-        const scaledYDomain = reScaleY(0.5, {
+      const yDomain = extent(ySeries) as number[];
+      const scale = zoom.integral.scales[activeSpectrum?.id || ''];
+      const scaledYDomain = reScaleY(
+        scale === undefined ? 0.3 : scale < 0.1 ? 0.05 : scale,
+        {
           domain: yDomain,
           height,
           margin,
-        });
-        return getYScale({
-          height,
-          margin,
-          verticalAlign,
-          yDomain: scaledYDomain,
-        });
-      }
+        },
+      );
+      return getYScale({
+        height,
+        margin,
+        verticalAlign,
+        yDomain: scaledYDomain,
+      });
     },
-    [
-      useConstantScale,
-      integralsYDomains,
-      height,
-      margin,
-      verticalAlign,
-      useActiveSpectrum,
-      activeSpectrum?.id,
-      spectrum?.id,
-    ],
+    [activeSpectrum, height, margin, verticalAlign, zoom.integral.scales],
   );
 
   const integral = useMemo(() => {
-    const { x, y } =
-      useActiveSpectrum && activeSpectrum
-        ? (data[activeSpectrum?.index].data as Data1D)
-        : (spectrum?.data as Data1D);
-    const { from, to } = integralOptions;
-    return xyIntegral(
-      { x, y },
-      {
-        from,
-        to,
-        reverse: true,
-      },
-    );
-  }, [
-    useActiveSpectrum,
-    activeSpectrum,
-    data,
-    spectrum?.data,
-    integralOptions,
-  ]);
+    if (activeSpectrum) {
+      const { x, y } = data[activeSpectrum?.index].data as Data1D;
+      const { from, to } = integralOptions;
+      return xyIntegral(
+        { x, y },
+        {
+          from,
+          to,
+          reverse: true,
+        },
+      );
+    }
+    return { x: [], y: [] };
+  }, [activeSpectrum, data, integralOptions]);
 
   const path = useMemo(() => {
     if (integral && scaleX) {

src/component/panels/RangesPanel/RangesHeader.tsx

@@ -242,6 +242,7 @@ function RangesHeader({
         popupTitle={showRangesIntegrals ? 'Hide integrals' : 'Show integrals'}
         popupPlacement="right"
         onClick={handleShowIntegrals}
+        defaultValue={showRangesIntegrals}
         disabled={!ranges || !ranges.values || ranges.values.length === 0}
       >
         <SvgNmrIntegrate style={{ pointerEvents: 'none', fontSize: '12px' }} />

src/component/reducer/IgnoreActions.ts

@@ -28,7 +28,6 @@ const ignoreActions = [
   types.CHANGE_VISIBILITY,
   types.CHANGE_PEAKS_MARKERS_VISIBILITY,
   types.CHANGE_ACTIVE_SPECTRUM,
-  types.CHANGE_INTEGRAL_ZOOM,
   types.CHANGE_SPECTRUM_COLOR,
 ];
 

src/component/reducer/Reducer.ts

@@ -71,8 +71,6 @@ export const initialState: State = {
     yDomains: {},
     shareYDomain: false,
   },
-  integralsYDomains: {},
-  originIntegralYDomain: {},
   activeTab: '',
   width: 0,
   height: 0,
@@ -121,7 +119,7 @@ export const initialState: State = {
       activeFilterID: null,
       tempRange: null,
       showMultiplicityTrees: false,
-      showRangesIntegrals: false,
+      showRangesIntegrals: true,
     },
   },
 };
@@ -187,18 +185,7 @@ export interface State {
     yDomains: Record<string, Array<number>>;
     shareYDomain: boolean;
   };
-  /**
-   * X axis domain for Integrals
-   * value change when vertical scale change for the selected integral
-   * @default {}
-   */
-  integralsYDomains: Record<string, Array<number>>;
 
-  /**
-   * X axis domain for Integrals
-   * @default {}
-   */
-  originIntegralYDomain: Record<string, Array<number>>;
   /**
    * current select tab (nucleus)
    * @default null
@@ -499,8 +486,6 @@ function innerSpectrumReducer(draft: Draft<State>, action) {
       return IntegralsActions.changeIntegral(draft, action);
     case types.RESIZE_INTEGRAL:
       return IntegralsActions.changeIntegral(draft, action);
-    case types.CHANGE_INTEGRAL_ZOOM:
-      return IntegralsActions.handleChangeIntegralZoom(draft, action);
     case types.CHANGE_INTEGRAL_SUM:
       return IntegralsActions.handleChangeIntegralSum(draft, action.value);
     case types.CHANGE_INTEGRALS_SUM_FLAG:
@@ -628,9 +613,6 @@ function innerSpectrumReducer(draft: Draft<State>, action) {
     case types.SET_CORRELATIONS:
       return CorrelationsActions.handleSetCorrelations(draft, action.payload);
 
-    case types.SET_INTEGRAL_Y_DOMAIN:
-      return DomainActions.handleChangeIntegralYDomain(draft, action.yDomain);
-
     case types.BRUSH_END:
       return ToolsActions.handleBrushEnd(draft, action);
 

src/component/reducer/actions/DomainActions.ts

@@ -1,6 +1,5 @@
 import { extent } from 'd3';
 import { Draft } from 'immer';
-import { xyIntegral } from 'ml-spectra-processing';
 
 import { Datum1D } from '../../../data/data1d/Spectrum1D';
 import { Datum2D, isSpectrum2D } from '../../../data/data2d/Spectrum2D';
@@ -35,7 +34,6 @@ function getDomain(drfat: Draft<State>) {
   let yArray: Array<number> = [];
   let yDomains = {};
   let xDomains = {};
-  let integralYDomain = {};
 
   const data = getActiveData(drfat);
   try {
@@ -50,23 +48,10 @@ function getDomain(drfat: Draft<State>) {
     }, []);
 
     yArray = data.reduce<Array<number>>((acc, d: Datum1D) => {
-      const { display, data, integrals } = d;
+      const { display, data } = d;
       const _extent = extent(data.y) as Array<number>;
       yDomains[d.id] = _extent;
-      if (integrals.values && integrals.values.length > 0) {
-        const values = integrals.values;
-        const { from = 0, to = 0 } = values[0];
-        const { x, y } = data;
-        const integralResult = xyIntegral(
-          { x: x, y: y },
-          {
-            from: from,
-            to: to,
-            reverse: true,
-          },
-        );
-        integralYDomain[d.id] = extent(integralResult.y);
-      }
+
       if (display.isVisible) {
         acc = acc.concat(_extent);
       }
@@ -82,7 +67,6 @@ function getDomain(drfat: Draft<State>) {
     yDomain: extent(yArray),
     yDomains,
     xDomains,
-    integralYDomain,
   };
 }
 function get2DDomain(state) {
@@ -178,11 +162,6 @@ function setDomain(draft: Draft<State>, isYDomainChanged = true) {
       } else {
         draft.yDomains = domain.yDomains;
       }
-
-      draft.integralsYDomains =
-        domain.integralYDomain && domain.integralYDomain;
-      draft.originIntegralYDomain =
-        domain.integralYDomain && domain.integralYDomain;
     } else {
       draft.originDomain = {
         ...draft.originDomain,
@@ -222,13 +201,6 @@ function setMode(draft: Draft<State>) {
   draft.mode = (data[0] as Datum1D)?.info.isFid ? 'LTR' : 'RTL';
 }
 
-function handleChangeIntegralYDomain(draft, newYDomain) {
-  const activeSpectrum = draft.activeSpectrum;
-  if (activeSpectrum) {
-    draft.integralsYDomains[activeSpectrum.id] = newYDomain;
-  }
-}
-
 export {
   getDomain,
   setOriginalDomain,
@@ -237,5 +209,4 @@ export {
   handelResetDomain,
   setDomain,
   setMode,
-  handleChangeIntegralYDomain,
 };