fix: zoom through graphes fixed

Author: Nicolass67

src/components/d3_line_rect/index.js

@@ -169,22 +169,22 @@ class ViewerLineRect extends React.Component {
     super(props);
 
     const {
-      clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities,
+      clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities, uiSt,
     } = props;
 
     this.rootKlassLine = `.${LIST_ROOT_SVG_GRAPH.LINE}`;
     this.lineFocus = new LineFocus({
-      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, graphIndex: 0, uiSt,
     });
 
     this.rootKlassMulti = `.${LIST_ROOT_SVG_GRAPH.MULTI}`;
     this.multiFocus = new MultiFocus({
-      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, graphIndex: 1, uiSt,
     });
 
     this.rootKlassRect = `.${LIST_ROOT_SVG_GRAPH.RECT}`;
     this.rectFocus = new RectFocus({
-      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, graphIndex: 2, uiSt,
     });
 
     this.normChange = this.normChange.bind(this);
@@ -282,6 +282,7 @@ class ViewerLineRect extends React.Component {
         tTrEndPts,
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[0],
+        uiSt,
       });
       drawLabel(this.rootKlassLine, null, 'Minutes', 'Intensity');
       drawDisplay(this.rootKlassLine, false);
@@ -298,6 +299,7 @@ class ViewerLineRect extends React.Component {
       sweepExtentSt: sweepExtent[1],
       isUiAddIntgSt,
       isUiNoBrushSt,
+      uiSt,
     });
     drawLabel(this.rootKlassMulti, cLabel, 'Minutes', 'Intensity');
     drawDisplay(this.rootKlassMulti, isHidden);
@@ -319,6 +321,7 @@ class ViewerLineRect extends React.Component {
         tTrEndPts: curTrEndPts,
         isUiNoBrushSt: true,
         sweepExtentSt: sweepExtent[2],
+        uiSt,
       });
       drawLabel(this.rootKlassRect, `${pageValue} min`, 'M/Z', 'Intensity');
       drawDisplay(this.rootKlassRect, false);

src/components/d3_line_rect/line_focus.js

@@ -16,9 +16,10 @@ const d3 = require('d3');
 class LineFocus {
   constructor(props) {
     const {
-      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, graphIndex, uiSt,
     } = props;
-
+    this.graphIndex = graphIndex;
+    this.uiSt = uiSt;
     this.jcampIdx = 0;
     this.rootKlass = `.${LIST_ROOT_SVG_GRAPH.LINE}`;
     this.margin = {
@@ -216,12 +217,12 @@ class LineFocus {
   update({
     filterSeed, tTrEndPts,
     layoutSt,
-    sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
+    sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt, uiSt,
   }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = InitScale(this, false);
     this.setDataParams(filterSeed, tTrEndPts, layoutSt);
-
+    this.uiSt = uiSt;
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate();

src/components/d3_line_rect/multi_focus.js

@@ -21,9 +21,10 @@ const d3 = require('d3');
 class MultiFocus {
   constructor(props) {
     const {
-      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities,
+      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities, graphIndex, uiSt,
     } = props;
-
+    this.graphIndex = graphIndex;
+    this.uiSt = uiSt;
     this.entities = entities;
     this.jcampIdx = 0;
     this.isShowAllCurves = false;
@@ -270,7 +271,7 @@ class MultiFocus {
     entities, curveSt,
     filterSeed, tTrEndPts,
     layoutSt,
-    sweepExtentSt, isUiNoBrushSt,
+    sweepExtentSt, isUiNoBrushSt, uiSt,
   }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = InitScale(this, false);
@@ -279,6 +280,7 @@ class MultiFocus {
     const jcampIdx = curveIdx;
     this.isShowAllCurves = isShowAllCurve;
     this.entities = entities;
+    this.uiSt = uiSt;
 
     this.setDataParams(filterSeed, tTrEndPts, layoutSt, jcampIdx);
 

src/components/d3_line_rect/rect_focus.js

@@ -16,9 +16,10 @@ const d3 = require('d3');
 class RectFocus {
   constructor(props) {
     const {
-      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, graphIndex, uiSt,
     } = props;
-
+    this.graphIndex = graphIndex;
+    this.uiSt = uiSt;
     this.rootKlass = `.${LIST_ROOT_SVG_GRAPH.RECT}`;
     this.brushClass = `.${LIST_BRUSH_SVG_GRAPH.RECT}`;
     this.margin = {
@@ -230,10 +231,11 @@ class RectFocus {
 
   update({
     filterSeed, filterPeak, tTrEndPts, tSfPeaks,
-    sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
+    sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt, uiSt,
   }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
+    this.uiSt = uiSt;
 
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);

src/helpers/brush.js

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-object-spread */
-
 import { MouseMove } from './compass';
+import { LIST_UI_SWEEP_TYPE } from '../constants/list_ui';
 
 const d3 = require('d3');
 
@@ -44,8 +44,23 @@ const MountBrush = (focus, isUiAddIntgSt, isUiNoBrushSt, brushedClass = '.d3Svg'
   } = focus;
   svg.selectAll('.brush').remove();
   svg.selectAll('.brushX').remove();
+  if (focus.uiSt
+    && focus.uiSt.zoom
+    && Array.isArray(focus.uiSt.zoom.sweepTypes)
+    && focus.uiSt.zoom.sweepTypes[focus.graphIndex] !== LIST_UI_SWEEP_TYPE.ZOOMIN) {
+    return;
+  }
 
-  const brushedCb = (event) => brushed(focus, isUiAddIntgSt, event, brushedClass);
+  const brushedCb = (event) => {
+    if (focus.graphIndex !== undefined
+      && focus.uiSt
+      && focus.uiSt.zoom
+      && Array.isArray(focus.uiSt.zoom.sweepTypes)
+      && focus.uiSt.zoom.sweepTypes[focus.graphIndex] !== LIST_UI_SWEEP_TYPE.ZOOMIN) {
+      return;
+    }
+    brushed(focus, isUiAddIntgSt, event, brushedClass);
+  };
   const wheeledCb = (event) => wheeled(focus, event);
 
   if (isUiNoBrushSt) {

src/reducers/reducer_ui.js

@@ -36,9 +36,20 @@ const updateSweepType = (state, action) => {
     });
   }
   const { zoom } = state;
-  const { sweepTypes } = zoom;
-  sweepTypes[graphIndex] = sweepType;
-  const newZoom = Object.assign({}, zoom, { sweepTypes, graphIndex });
+  let newSweepTypes = zoom.sweepTypes.slice();
+  newSweepTypes[graphIndex] = sweepType;
+
+  if (sweepType === LIST_UI_SWEEP_TYPE.ZOOMIN) {
+    newSweepTypes = newSweepTypes.map((val, idx) => (
+      idx === graphIndex
+        ? LIST_UI_SWEEP_TYPE.ZOOMIN
+        : LIST_UI_SWEEP_TYPE.ZOOMRESET
+    ));
+  }
+  const newZoom = Object.assign({}, zoom, {
+    sweepTypes: newSweepTypes,
+    graphIndex,
+  });
   return Object.assign({}, state, {
     zoom: newZoom,
     sweepType,