feat: WIP update zoom each graph

Author: baolanlequang

.github/workflows/e2e_testing.yml

@@ -10,6 +10,6 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
-          build: npm run build
-          start: npm start
+          build: npm run --max_old_space_size=12288 build
+          start: npm --max_old_space_size=12288 start
           browser: chrome

cypress.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  pageLoadTimeout: 100000,
+  requestTimeout: 100000,
+  responseTimeout: 100000,
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    experimentalStudio: true
+    experimentalStudio: true,
+    pageLoadTimeout: 100000,
+    requestTimeout: 100000,
+    responseTimeout: 100000,
   },
 });

package.json

@@ -41,7 +41,7 @@
   },
   "scripts": {
     "start": "react-scripts --max_old_space_size=12288 start",
-    "build": "react-scripts --max_old_space_size=4096 build",
+    "build": "react-scripts --max_old_space_size=12288 build",
     "compile": "rm -rf dist && NODE_ENV=production babel --ignore tests,stories ./src --out-dir ./dist",
     "test": "react-scripts test --env=jsdom --verbose --testPathIgnorePatterns=./src/__tests__/fixtures/",
     "test:coverage": "CI=true react-scripts test --env=jsdom --verbose --testPathIgnorePatterns=./src/__tests__/fixtures/ --coverage",

src/components/cmd_bar/02_zoom.js

@@ -22,23 +22,18 @@ const styles = () => (
 );
 
 const Zoom = ({
-  classes, isfocusZoomSt, isfocusZoomSubViewSt, setUiSweepTypeAct, isSubView,
+  classes, isfocusZoomSt, setUiSweepTypeAct,
 }) => {
-  let onSweepZoomIn = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMIN);
-  let onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET);
-  const isZoomFocus = isSubView ? isfocusZoomSubViewSt : isfocusZoomSt;
-  if (isSubView) {
-    onSweepZoomIn = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMIN_SUBVIEW);
-    onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET_SUBVIEW);
-  }
+  const onSweepZoomIn = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMIN);
+  const onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET);
 
   return (
     <span className={classes.group} data-testid="Zoom">
       <Tooltip title={<span className="txt-sv-tp">Zoom In</span>}>
         <MuButton
           className={
             classNames(
-              focusStyle(isZoomFocus, classes),
+              focusStyle(isfocusZoomSt, classes),
               'btn-sv-bar-zoomin',
             )
           }
@@ -66,7 +61,6 @@ const Zoom = ({
 const mapStateToProps = (state, _) => ( // eslint-disable-line
   {
     isfocusZoomSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.ZOOMIN,
-    isfocusZoomSubViewSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.ZOOMIN_SUBVIEW,
   }
 );
 
@@ -80,8 +74,6 @@ Zoom.propTypes = {
   classes: PropTypes.object.isRequired,
   isfocusZoomSt: PropTypes.bool.isRequired,
   setUiSweepTypeAct: PropTypes.func.isRequired,
-  isSubView: PropTypes.bool.isRequired,
-  isfocusZoomSubViewSt: PropTypes.bool.isRequired,
 };
 
 export default compose(

src/components/cmd_bar/08_peak_group.js

@@ -23,13 +23,20 @@ const styles = () => (
 
 const PeakGroup = ({
   classes, feature, isSelectingGroupSt, setUiSweepTypeAct,
+  graphIndex,
 }) => {
   const { operation } = feature;
   const { layout } = operation;
   if (!Format.isLCMsLayout(layout)) {
     return null;
   }
-  const onSelectPeakGroup = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT);
+  const onSelectPeakGroup = () => {
+    const payload = {
+      graphIndex,
+      sweepType: LIST_UI_SWEEP_TYPE.PEAK_GROUP_SELECT,
+    };
+    setUiSweepTypeAct(payload);
+  };
 
   return (
     <span className={classes.group} data-testid="Zoom">
@@ -67,6 +74,7 @@ PeakGroup.propTypes = {
   feature: PropTypes.object.isRequired,
   isSelectingGroupSt: PropTypes.bool.isRequired,
   setUiSweepTypeAct: PropTypes.func.isRequired,
+  graphIndex: PropTypes.number.isRequired,
 };
 
 export default compose(

src/components/d3_line_rect/index.js

@@ -1,18 +1,25 @@
-/* eslint-disable no-mixed-operators */
+/* eslint-disable no-mixed-operators, prefer-object-spread, react/function-component-definition */
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import withStyles from '@mui/styles/withStyles';
 import {
   Select, MenuItem, FormControl, InputLabel,
+  Tooltip,
 } from '@mui/material';
+import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
+import FindReplaceOutlinedIcon from '@mui/icons-material/FindReplaceOutlined';
+import { MuButton, commonStyle, focusStyle } from '../cmd_bar/common';
 
 import {
   Topic2Seed, ToThresEndPts,
 } from '../../helpers/chem';
 import { resetAll } from '../../actions/manager';
-import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
+import {
+  selectUiSweep, scrollUiWheel, clickUiTarget, setUiSweepType,
+} from '../../actions/ui';
 import { selectWavelength, changeTic } from '../../actions/hplcms';
 import { selectCurve } from '../../actions/curve';
 import RectFocus from './rect_focus';
@@ -25,12 +32,72 @@ import {
 } from '../common/draw';
 import { LIST_UI_SWEEP_TYPE, LIST_NON_BRUSH_TYPES } from '../../constants/list_ui';
 import { LIST_ROOT_SVG_GRAPH, LIST_BRUSH_SVG_GRAPH } from '../../constants/list_graph';
-import Zoom from '../cmd_bar/02_zoom';
+// import Zoom from '../cmd_bar/02_zoom';
 import PeakGroup from '../cmd_bar/08_peak_group';
 
 const W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
 const H = Math.round(window.innerHeight * 0.90 * 0.85 / 3); // ROI
 
+const styles = () => (
+  Object.assign(
+    {},
+    commonStyle,
+  )
+);
+
+const zoomView = (classes, graphIndex, uiSt, zoomInAct) => {
+  const onSweepZoomIn = () => {
+    const payload = {
+      graphIndex,
+      sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN,
+    };
+    zoomInAct(payload);
+  };
+
+  const onSweepZoomReset = () => {
+    const payload = {
+      graphIndex,
+      sweepType: LIST_UI_SWEEP_TYPE.ZOOMRESET,
+    };
+    zoomInAct(payload);
+  };
+
+  const { zoom } = uiSt;
+  const { sweepTypes } = zoom;
+
+  const isZoomFocus = sweepTypes[graphIndex] === LIST_UI_SWEEP_TYPE.ZOOMIN;
+
+  return (
+    <span className={classes.group} data-testid="Zoom">
+      <Tooltip title={<span className="txt-sv-tp">Zoom In</span>}>
+        <MuButton
+          className={
+            classNames(
+              focusStyle(isZoomFocus, classes),
+              'btn-sv-bar-zoomin',
+            )
+          }
+          onClick={onSweepZoomIn}
+        >
+          <ZoomInOutlinedIcon className={classNames(classes.icon, classes.iconWp)} />
+        </MuButton>
+      </Tooltip>
+      <Tooltip title={<span className="txt-sv-tp">Reset Zoom</span>}>
+        <MuButton
+          className={
+            classNames(
+              'btn-sv-bar-zoomreset',
+            )
+          }
+          onClick={onSweepZoomReset}
+        >
+          <FindReplaceOutlinedIcon className={classes.icon} />
+        </MuButton>
+      </Tooltip>
+    </span>
+  );
+};
+
 const waveLengthSelect = (classes, hplcMsSt, updateWaveLengthAct) => {
   const { uvvis } = hplcMsSt;
   const { listWaveLength, selectedWaveLength } = uvvis;
@@ -128,15 +195,18 @@ class ViewerLineRect extends React.Component {
     const {
       entities, curveSt, seed, cLabel, xLabel, yLabel, feature,
       tTrEndPts, layoutSt,
-      sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
-      isHidden, sweepExtentSubViewSt,
-      resetAllAct,
+      isUiAddIntgSt, isUiNoBrushSt,
+      isHidden,
+      resetAllAct, uiSt,
     } = this.props;
     drawDestroy(this.rootKlassMulti);
     drawDestroy(this.rootKlassLine);
     drawDestroy(this.rootKlassRect);
     resetAllAct(feature);
 
+    const { zoom } = uiSt;
+    const { sweepExtent } = zoom;
+
     const uvvisViewFeature = this.extractUvvisView();
     const { data } = uvvisViewFeature;
     const currentData = data[0];
@@ -151,7 +221,7 @@ class ViewerLineRect extends React.Component {
       filterPeak: [],
       tTrEndPts,
       isUiNoBrushSt: true,
-      sweepExtentSt: sweepExtentSubViewSt,
+      sweepExtentSt: sweepExtent[0],
     });
     drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
     drawDisplay(this.rootKlassLine, false);
@@ -165,7 +235,7 @@ class ViewerLineRect extends React.Component {
       filterSeed,
       tTrEndPts,
       layoutSt,
-      sweepExtentSt,
+      sweepExtentSt: sweepExtent[1],
       isUiAddIntgSt,
       isUiNoBrushSt,
     });
@@ -178,7 +248,7 @@ class ViewerLineRect extends React.Component {
       filterPeak: [],
       tTrEndPts,
       isUiNoBrushSt: true,
-      sweepExtentSt: sweepExtentSubViewSt,
+      sweepExtentSt: sweepExtent[2],
     });
     drawLabel(this.rootKlassRect, null, 'M/Z', 'Intensity');
     drawDisplay(this.rootKlassRect, false);
@@ -188,11 +258,14 @@ class ViewerLineRect extends React.Component {
     const {
       entities, curveSt, seed, cLabel, xLabel, yLabel,
       tTrEndPts, layoutSt,
-      sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
-      isHidden, sweepExtentSubViewSt,
+      isUiAddIntgSt, isUiNoBrushSt,
+      isHidden, uiSt,
     } = this.props;
     this.normChange(prevProps);
 
+    const { zoom } = uiSt;
+    const { sweepExtent } = zoom;
+
     const uvvisViewFeature = this.extractUvvisView();
     if (uvvisViewFeature) {
       const { data } = uvvisViewFeature;
@@ -207,7 +280,7 @@ class ViewerLineRect extends React.Component {
         filterPeak: [],
         tTrEndPts,
         isUiNoBrushSt: true,
-        sweepExtentSt: sweepExtentSubViewSt,
+        sweepExtentSt: sweepExtent[0],
       });
       drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
       drawDisplay(this.rootKlassLine, false);
@@ -221,7 +294,7 @@ class ViewerLineRect extends React.Component {
       filterSeed,
       tTrEndPts,
       layoutSt,
-      sweepExtentSt,
+      sweepExtentSt: sweepExtent[1],
       isUiAddIntgSt,
       isUiNoBrushSt,
     });
@@ -242,7 +315,7 @@ class ViewerLineRect extends React.Component {
         filterPeak: [],
         tTrEndPts,
         isUiNoBrushSt: true,
-        sweepExtentSt: sweepExtentSubViewSt,
+        sweepExtentSt: sweepExtent[2],
       });
       drawLabel(this.rootKlassRect, `${pageValue} min`, xUnit, 'Intensity');
       drawDisplay(this.rootKlassRect, false);
@@ -296,29 +369,37 @@ class ViewerLineRect extends React.Component {
 
   render() {
     const {
-      hplcMsSt, selectWavelengthAct, updateTicAct, selectCurveAct,
-      feature,
+      classes, hplcMsSt, selectWavelengthAct, updateTicAct, selectCurveAct,
+      feature, zoomInAct, uiSt,
     } = this.props;
     const handleTicChanged = (event) => {
       updateTicAct(event);
       selectCurveAct(event.target.value);
     };
     return (
       <div>
+        {
+          zoomView(classNames, 0, uiSt, zoomInAct)
+        }
         <div style={{ textAlign: 'right' }}>
           {
-            waveLengthSelect(classNames, hplcMsSt, selectWavelengthAct)
+            waveLengthSelect(classes, hplcMsSt, selectWavelengthAct)
           }
           <div className={LIST_ROOT_SVG_GRAPH.LINE} />
         </div>
-        <PeakGroup feature={feature} />
+        <PeakGroup feature={feature} graphIndex={1} />
+        {
+          zoomView(classes, 1, uiSt, zoomInAct)
+        }
         <div style={{ textAlign: 'right' }}>
           {
-            ticSelect(classNames, hplcMsSt, handleTicChanged)
+            ticSelect(classes, hplcMsSt, handleTicChanged)
           }
           <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
         </div>
-        <Zoom isSubView />
+        {
+          zoomView(classes, 2, uiSt, zoomInAct)
+        }
         <div className={LIST_ROOT_SVG_GRAPH.RECT} />
       </div>
     );
@@ -330,8 +411,6 @@ const mapStateToProps = (state, props) => (
     curveSt: state.curve,
     seed: Topic2Seed(state, props),
     tTrEndPts: ToThresEndPts(state, props),
-    sweepExtentSt: state.ui.sweepExtent,
-    sweepExtentSubViewSt: state.ui.sweepExtentSubView,
     isUiAddIntgSt: state.ui.sweepType === LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
     isUiNoBrushSt: LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
     uiSt: state.ui,
@@ -348,10 +427,12 @@ const mapDispatchToProps = (dispatch) => (
     selectWavelengthAct: selectWavelength,
     updateTicAct: changeTic,
     selectCurveAct: selectCurve,
+    zoomInAct: setUiSweepType,
   }, dispatch)
 );
 
 ViewerLineRect.propTypes = {
+  classes: PropTypes.object.isRequired,
   uiSt: PropTypes.object.isRequired,
   curveSt: PropTypes.object.isRequired,
   entities: PropTypes.array.isRequired,
@@ -363,8 +444,6 @@ ViewerLineRect.propTypes = {
   layoutSt: PropTypes.string.isRequired,
   feature: PropTypes.object.isRequired,
   tTrEndPts: PropTypes.array.isRequired,
-  sweepExtentSt: PropTypes.object.isRequired,
-  sweepExtentSubViewSt: PropTypes.object.isRequired,
   isUiAddIntgSt: PropTypes.bool.isRequired,
   isUiNoBrushSt: PropTypes.bool.isRequired,
   resetAllAct: PropTypes.func.isRequired,
@@ -376,6 +455,11 @@ ViewerLineRect.propTypes = {
   selectWavelengthAct: PropTypes.func.isRequired,
   updateTicAct: PropTypes.func.isRequired,
   selectCurveAct: PropTypes.func.isRequired,
+  zoomInAct: PropTypes.func.isRequired,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);
+// export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withStyles(styles),
+)(ViewerLineRect);