fix: vertical zoom for spectra and integrals (#1416)

close #1416

src/component/1d/Integral.tsx

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

src/component/1d/Viewer1D.tsx

@@ -15,7 +15,7 @@ import { useAlert } from '../elements/popup/Alert';
 import { useModal } from '../elements/popup/Modal';
 import Spinner from '../loader/Spinner';
 import MultipletAnalysisModal from '../modal/MultipletAnalysisModal';
-import { ZoomType } from '../reducer/actions/Zoom';
+import { ZoomType } from '../reducer/helper/Zoom1DManager';
 import getRange from '../reducer/helper/getRange';
 import scaleReducer, {
   scaleInitialState,
@@ -27,7 +27,7 @@ import {
   ADD_BASE_LINE_ZONE,
   BRUSH_END,
   FULL_ZOOM_OUT,
-  SET_ZOOM_FACTOR,
+  SET_ZOOM,
   ADD_PEAK,
   SET_VERTICAL_INDICATOR_X_POSITION,
   ADD_RANGE,
@@ -246,7 +246,7 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
 
   const handleZoom = useCallback(
     (event) => {
-      dispatch({ type: SET_ZOOM_FACTOR, ...event, selectedTool });
+      dispatch({ type: SET_ZOOM, event, selectedTool });
     },
     [dispatch, selectedTool],
   );

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

@@ -1,23 +1,18 @@
-import { useChartData } from '../../context/ChartContext';
-import useIntegralPath from '../utilities/useIntegralPath';
+import useIntegralPath from '../../hooks/useIntegralPath';
 
 interface IntegralProps {
   range: { id: string; from: number; to: number; integral?: number };
 }
 
 function RangeIntegral({ range }: IntegralProps) {
   const path = useIntegralPath(range);
-  const { height, margin } = useChartData();
 
   return (
     <path
       className="line"
       stroke="black"
       strokeWidth="1"
       fill="none"
-      style={{
-        transform: `translateY(-${margin.bottom + height * 0.3}px)`,
-      }}
       d={path}
     />
   );

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

@@ -24,14 +24,18 @@ function getYScale(state, spectrumId: number | null | string = null) {
   return scaleLinear(domainY, [_height, margin.top]);
 }
 
-function getIntegralYScale(state, spectrumId) {
-  const { height, margin, verticalAlign, integralsYDomains } = state;
+function getIntegralYScale(state) {
+  const { height, margin, verticalAlign, integralsYDomains, activeSpectrum } =
+    state;
   const _height = verticalAlign.align === 'center' ? height / 2 : height;
-
-  return scaleLinear(integralsYDomains[spectrumId], [
-    _height - (margin.bottom + _height * 0.3),
-    margin.top,
-  ]);
+  return scaleLinear(
+    activeSpectrum?.id &&
+      integralsYDomains &&
+      integralsYDomains[activeSpectrum?.id]
+      ? integralsYDomains[activeSpectrum?.id]
+      : [0, 0],
+    [_height * 0.3, margin.top + _height * 0.1],
+  );
 }
 
 function reScaleY(scale: number, { domain, height, margin }) {

src/component/2d/Top1DChart.tsx

@@ -29,7 +29,6 @@ function Top1DChart({
   const paths = useMemo(() => {
     if (spectrum) {
       const scaleX = get2DXScale({ width, xDomain, margin: originMargin });
-
       const scaleY = get1DYScale(yDomains[spectrum.id], height, marginProps);
       const { x, re: y } = spectrum.data;
       const pathPoints = xyReduce({ x, y });

src/component/2d/Viewer2D.tsx

@@ -13,7 +13,7 @@ import {
   FULL_ZOOM_OUT,
   SET_DIMENSIONS,
   SET_2D_LEVEL,
-  SET_ZOOM_FACTOR,
+  SET_ZOOM,
   ADD_2D_ZONE,
 } from '../reducer/types/Types';
 import BrushXY, { BRUSH_TYPE } from '../tool/BrushXY';
@@ -110,15 +110,15 @@ function Viewer2D({ emptyText = undefined }: Viewer2DProps) {
     [DIMENSION, dispatch],
   );
 
-  const handleZoom = (wheelData) => {
-    const { x: startX, y: startY } = wheelData;
+  const handleZoom = (event) => {
+    const { x: startX, y: startY } = event;
     const trackID = getLayoutID(DIMENSION, { startX, startY });
 
     if (trackID) {
       if (trackID === 'CENTER_2D') {
-        dispatch({ type: SET_2D_LEVEL, ...wheelData });
+        dispatch({ type: SET_2D_LEVEL, ...event });
       } else {
-        dispatch({ type: SET_ZOOM_FACTOR, ...wheelData, trackID });
+        dispatch({ type: SET_ZOOM, event, trackID });
       }
     }
   };

src/component/header/Header.tsx

@@ -63,6 +63,7 @@ function HeaderInner(props: HeaderInnerProps) {
       position: positions.TOP_CENTER,
       enableResizing: true,
       width: 600,
+      height: 400,
     });
   }, [modal]);
 

src/component/hooks/useIntegralPath.ts

@@ -0,0 +1,75 @@
+import { ScaleLinear } from 'd3';
+import { xyIntegral, xyReduce } from 'ml-spectra-processing';
+import { useMemo } from 'react';
+
+import { Data1D } from '../../data/types/data1d';
+import { getIntegralYScale } from '../1d/utilities/scale';
+import { useChartData } from '../context/ChartContext';
+import { PathBuilder } from '../utility/PathBuilder';
+
+import { useXScale } from './useXScale';
+
+function useIntegralYDomain(): ScaleLinear<number, number, number> {
+  const { height, margin, verticalAlign, activeSpectrum, integralsYDomains } =
+    useChartData();
+
+  return useMemo(
+    () =>
+      getIntegralYScale({
+        height,
+        margin,
+        verticalAlign,
+        activeSpectrum,
+        integralsYDomains,
+      }),
+    [activeSpectrum, height, integralsYDomains, margin, verticalAlign],
+  );
+}
+
+export default function useIntegralPath(integralOptions: {
+  from: number;
+  to: number;
+}) {
+  const { data, activeSpectrum } = useChartData();
+
+  const scaleX = useXScale();
+  const scaleY = useIntegralYDomain();
+  const integral = useMemo(() => {
+    if (activeSpectrum) {
+      const { x, re } = data[activeSpectrum?.index].data as Data1D;
+      const { from, to } = integralOptions;
+      return xyIntegral(
+        { x, y: re },
+        {
+          from,
+          to,
+          reverse: true,
+        },
+      );
+    }
+    return { x: [], y: [] };
+  }, [activeSpectrum, data, integralOptions]);
+
+  const paths = useMemo(() => {
+    if (integral) {
+      const xySeries = xyReduce(integral, {
+        // from: xDomain[0],
+        // to: xDomain[1],
+        nbPoints: 200,
+        optimize: true,
+      });
+
+      const pathBuilder = new PathBuilder();
+      pathBuilder.moveTo(scaleX(xySeries.x[0]), scaleY(xySeries.y[0]));
+      for (let i = 1; i < xySeries.x.length; i++) {
+        pathBuilder.lineTo(scaleX(xySeries.x[i]), scaleY(xySeries.y[i]));
+      }
+
+      return pathBuilder.toString();
+    } else {
+      return '';
+    }
+  }, [integral, scaleX, scaleY]);
+
+  return paths;
+}

src/component/hooks/useToolsFunctions.ts

@@ -6,7 +6,7 @@ import { useCallback, useRef, useState } from 'react';
 import { useDispatch } from '../context/DispatchContext';
 import { useAlert } from '../elements/popup/Alert';
 import { TOOLS_PANELS_ACCORDION } from '../panels/Panels';
-import { ZoomType } from '../reducer/actions/Zoom';
+import { ZoomType } from '../reducer/helper/Zoom1DManager';
 import {
   CHANGE_SPECTRUM_DISPLAY_VIEW_MODE,
   FULL_ZOOM_OUT,

src/component/hooks/useXScale.ts

@@ -0,0 +1,14 @@
+import { ScaleLinear } from 'd3';
+import { useMemo } from 'react';
+
+import { getXScale } from '../1d/utilities/scale';
+import { useChartData } from '../context/ChartContext';
+
+export function useXScale(): ScaleLinear<any, any, never> {
+  const { width, margin, xDomains, xDomain, mode } = useChartData();
+
+  return useMemo(
+    () => getXScale({ width, margin, xDomains, xDomain, mode }),
+    [margin, mode, width, xDomain, xDomains],
+  );
+}

src/component/modal/setting/ControllersTabContent.tsx

@@ -4,17 +4,7 @@ import FormikInput from '../../elements/formik/FormikInput';
 function ControllersTabContent() {
   return (
     <>
-      <p className="section-header">Mouse Scroll Wheel Sensitivity</p>
-      <Label title="Low">
-        <FormikInput type="number" name="controllers.mws.low" />
-      </Label>
-      <Label title="high">
-        <FormikInput type="number" name="controllers.mws.high" />
-      </Label>
-
-      <p className="section-header" style={{ marginTop: '40px' }}>
-        Spectra
-      </p>
+      <p className="section-header">Spectra</p>
       <Label
         title="Transparency of Dimmed Spectra [ 0 - 1 ]"
         // style={{ label: styles.inputLabel, wrapper: styles.inputWrapper }}

src/component/reducer/IgnoreActions.ts

@@ -17,7 +17,7 @@ const ignoreActions = [
   types.SET_DIMENSIONS,
   types.SET_X_DOMAIN,
   types.SET_Y_DOMAIN,
-  types.SET_ZOOM_FACTOR,
+  types.SET_ZOOM,
   types.TOGGLE_REAL_IMAGINARY_VISIBILITY,
   types.CALCULATE_MANUAL_PHASE_CORRECTION_FILTER,
   types.CHANGE_SPECTRUM_DISPLAY_VIEW_MODE,