@complat/react-spectra-editor 1.7.1 → 1.8.0

package/dist/components/d3_line/index.js

@@ -12,9 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _chem = require("../../helpers/chem");
 var _manager = require("../../actions/manager");
 var _ui = require("../../actions/ui");
+var _integration = require("../../actions/integration");
 var _line_focus = _interopRequireDefault(require("./line_focus"));
 var _draw = require("../common/draw");
 var _list_ui = require("../../constants/list_ui");
+var _list_graph = require("../../constants/list_graph");
+var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators */
@@ -28,17 +31,24 @@ class ViewerLine extends _react.default.Component {
     const {
       clickUiTargetAct,
       selectUiSweepAct,
-      scrollUiWheelAct
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     } = props;
-    this.rootKlass = '.d3Line';
+    this.rootKlass = `.${_list_graph.LIST_ROOT_SVG_GRAPH.LINE}`;
     this.focus = new _line_focus.default({
       W,
       H,
       clickUiTargetAct,
       selectUiSweepAct,
-      scrollUiWheelAct
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     });
     this.normChange = this.normChange.bind(this);
+    this.syncFocusActions = this.syncFocusActions.bind(this);
   }
   componentDidMount() {
     const {
@@ -54,16 +64,20 @@ class ViewerLine extends _react.default.Component {
       tSfPeaks,
       editPeakSt,
       layoutSt,
-      integationSt,
+      integrationSt,
       mtplySt,
       sweepExtentSt,
       isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       isHidden,
       wavelength,
       axesUnitsSt,
-      resetAllAct
+      resetAllAct,
+      uiSt
     } = this.props;
+    this.syncFocusActions();
     (0, _draw.drawDestroy)(this.rootKlass);
     resetAllAct(feature);
     let xxLabel = xLabel;
@@ -91,12 +105,15 @@ class ViewerLine extends _react.default.Component {
       tSfPeaks,
       editPeakSt,
       layoutSt,
-      integationSt,
+      integrationSt,
       mtplySt,
       sweepExtentSt,
       isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
-      wavelength
+      wavelength,
+      uiSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -114,15 +131,19 @@ class ViewerLine extends _react.default.Component {
       tSfPeaks,
       editPeakSt,
       layoutSt,
-      integationSt,
+      integrationSt,
       mtplySt,
       sweepExtentSt,
       isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       isHidden,
       wavelength,
-      axesUnitsSt
+      axesUnitsSt,
+      uiSt
     } = this.props;
+    this.syncFocusActions();
     this.normChange(prevProps);
     let xxLabel = xLabel;
     let yyLabel = yLabel;
@@ -148,12 +169,15 @@ class ViewerLine extends _react.default.Component {
       tSfPeaks,
       editPeakSt,
       layoutSt,
-      integationSt,
+      integrationSt,
       mtplySt,
       sweepExtentSt,
       isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
-      wavelength
+      wavelength,
+      uiSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
@@ -161,6 +185,25 @@ class ViewerLine extends _react.default.Component {
   componentWillUnmount() {
     (0, _draw.drawDestroy)(this.rootKlass);
   }
+  syncFocusActions() {
+    if (!this.focus) return;
+    const {
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    } = this.props;
+    Object.assign(this.focus, {
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    });
+  }
   normChange(prevProps) {
     const {
       feature,
@@ -173,7 +216,7 @@ class ViewerLine extends _react.default.Component {
   }
   render() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d3Line"
+      className: _list_graph.LIST_ROOT_SVG_GRAPH.LINE
     });
   }
 }
@@ -186,19 +229,25 @@ const mapStateToProps = (state, props) => ({
   tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
   editPeakSt: state.editPeak.present,
   layoutSt: state.layout,
-  integationSt: state.integration.present,
+  integrationSt: state.integration.present,
   mtplySt: state.multiplicity.present,
   sweepExtentSt: state.ui.sweepExtent,
   isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+  isUiSplitIntgSt: _cfg.default.showIntegSplitTools(state.layout) && state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SPLIT,
+  isUiVisualSplitIntgSt: _cfg.default.showIntegSplitTools(state.layout) && state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT,
   isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
   wavelength: state.wavelength,
-  axesUnitsSt: state.axesUnits
+  axesUnitsSt: state.axesUnits,
+  uiSt: state.ui
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   resetAllAct: _manager.resetAll,
   clickUiTargetAct: _ui.clickUiTarget,
   selectUiSweepAct: _ui.selectUiSweep,
   scrollUiWheelAct: _ui.scrollUiWheel,
+  splitIntegrationAct: _integration.splitIntegration,
+  addVisualSplitLineAct: _integration.addVisualSplitLine,
+  removeVisualSplitLineAct: _integration.removeVisualSplitLine,
   addNewCylicVoltaPairPeakAct: _cyclic_voltammetry.addNewCylicVoltaPairPeak,
   addCylicVoltaMaxPeakAct: _cyclic_voltammetry.addCylicVoltaMaxPeak,
   addCylicVoltaMinPeakAct: _cyclic_voltammetry.addCylicVoltaMinPeak
@@ -208,6 +257,7 @@ ViewerLine.propTypes = {
   peak: _propTypes.default.array.isRequired,
   freq: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]).isRequired,
   comparisons: _propTypes.default.array.isRequired,
+  uiSt: _propTypes.default.object.isRequired,
   cLabel: _propTypes.default.string.isRequired,
   xLabel: _propTypes.default.string.isRequired,
   yLabel: _propTypes.default.string.isRequired,
@@ -216,15 +266,20 @@ ViewerLine.propTypes = {
   tSfPeaks: _propTypes.default.array.isRequired,
   editPeakSt: _propTypes.default.object.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
-  integationSt: _propTypes.default.object.isRequired,
+  integrationSt: _propTypes.default.object.isRequired,
   mtplySt: _propTypes.default.object.isRequired,
   sweepExtentSt: _propTypes.default.object.isRequired,
   isUiAddIntgSt: _propTypes.default.bool.isRequired,
+  isUiSplitIntgSt: _propTypes.default.bool.isRequired,
+  isUiVisualSplitIntgSt: _propTypes.default.bool.isRequired,
   isUiNoBrushSt: _propTypes.default.bool.isRequired,
   resetAllAct: _propTypes.default.func.isRequired,
   clickUiTargetAct: _propTypes.default.func.isRequired,
   selectUiSweepAct: _propTypes.default.func.isRequired,
   scrollUiWheelAct: _propTypes.default.func.isRequired,
+  splitIntegrationAct: _propTypes.default.func.isRequired,
+  addVisualSplitLineAct: _propTypes.default.func.isRequired,
+  removeVisualSplitLineAct: _propTypes.default.func.isRequired,
   isHidden: _propTypes.default.bool.isRequired,
   wavelength: _propTypes.default.object.isRequired,
   axesUnitsSt: _propTypes.default.object.isRequired

package/dist/components/d3_line/line_focus.js

@@ -9,6 +9,8 @@ var _init = require("../../helpers/init");
 var _mount = require("../../helpers/mount");
 var _brush = _interopRequireDefault(require("../../helpers/brush"));
 var _compass = require("../../helpers/compass");
+var _integration_focus = require("../../helpers/integration_focus");
+var _integration_split = require("../../helpers/integration_split");
 var _converter = require("../../helpers/converter");
 var _focus = require("../../helpers/focus");
 var _integration = require("../../helpers/integration");
@@ -16,7 +18,6 @@ var _multiplicity_calc = require("../../helpers/multiplicity_calc");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _list_layout = require("../../constants/list_layout");
-var _calc = require("../../helpers/calc");
 /* eslint-disable prefer-object-spread, no-mixed-operators */
 
 const d3 = require('d3');
@@ -27,7 +28,11 @@ class LineFocus {
       H,
       clickUiTargetAct,
       selectUiSweepAct,
-      scrollUiWheelAct
+      scrollUiWheelAct,
+      uiSt,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     } = props;
     this.jcampIdx = 0;
     this.rootKlass = '.d3Line';
@@ -37,11 +42,16 @@ class LineFocus {
       l: 60,
       r: 5
     };
+    this.uiSt = uiSt;
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     this.w = W - this.margin.l - this.margin.r;
     this.h = H - this.margin.t - this.margin.b;
     this.clickUiTargetAct = clickUiTargetAct;
     this.selectUiSweepAct = selectUiSweepAct;
     this.scrollUiWheelAct = scrollUiWheelAct;
+    this.splitIntegrationAct = splitIntegrationAct;
+    this.addVisualSplitLineAct = addVisualSplitLineAct;
+    this.removeVisualSplitLineAct = removeVisualSplitLineAct;
     this.brush = d3.brush();
     this.brushX = d3.brushX();
     this.axis = null;
@@ -66,6 +76,11 @@ class LineFocus {
     this.shouldUpdate = {};
     this.freq = false;
     this.layout = _list_layout.LIST_LAYOUT.H1;
+    this.isUiAddIntgSt = false;
+    this.isUiSplitIntgSt = false;
+    this.isUiVisualSplitIntgSt = false;
+    this.integrationSplitTargets = null;
+    this.firstIntegrationPoint = null;
     this.getShouldUpdate = this.getShouldUpdate.bind(this);
     this.resetShouldUpdate = this.resetShouldUpdate.bind(this);
     this.setTip = this.setTip.bind(this);
@@ -83,6 +98,10 @@ class LineFocus {
     this.drawMtply = this.drawMtply.bind(this);
     this.drawComparisons = this.drawComparisons.bind(this);
     this.onClickTarget = this.onClickTarget.bind(this);
+    this.onClickIntegrationTarget = this.onClickIntegrationTarget.bind(this);
+    this.onIntegrationMouseMove = this.onIntegrationMouseMove.bind(this);
+    this.clearSplitPreview = this.clearSplitPreview.bind(this);
+    this.drawVisualSplitLines = this.drawVisualSplitLines.bind(this);
     this.mergedPeaks = this.mergedPeaks.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
     this.wavelength = null;
@@ -111,7 +130,7 @@ class LineFocus {
     const sameMySt = prevMySt === nextMySt;
     const sameTePt = prevTePt === this.tTrEndPts.length;
     const sameDtPk = prevDtPk === this.dataPks.length;
-    const sameSfPk = JSON.stringify(prevSfPk) === JSON.stringify(this.tSfPeaks);
+    const sameSfPk = prevSfPk === this.tSfPeaks || Array.isArray(prevSfPk) && Array.isArray(this.tSfPeaks) && prevSfPk.length === this.tSfPeaks.length && prevSfPk.every((peak, idx) => peak === this.tSfPeaks[idx]);
     const sameData = prevData === this.data.length;
     const sameRef = prevEpSt.prevOffset === nextEpSt.prevOffset;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
@@ -256,49 +275,28 @@ class LineFocus {
     const onPeak = true;
     this.clickUiTargetAct(data, onPeak);
   }
+  clearSplitPreview() {
+    (0, _integration_split.clearIntegrationSplitPreview)(this);
+  }
+  onIntegrationMouseMove(event, data, shift, ignoreRef) {
+    (0, _integration_focus.handleIntegrationMouseMove)(this, event, data, shift, ignoreRef);
+  }
+  onClickIntegrationTarget(event, data) {
+    (0, _integration_focus.handleIntegrationClick)(this, event, data, (clickEvent, clickData) => {
+      this.onClickTarget(clickEvent, clickData);
+    });
+  }
+  drawVisualSplitLines(stack, shift, ignoreRef) {
+    (0, _integration_focus.drawVisualSplitLinesForFocus)(this, stack, shift, ignoreRef);
+  }
+  drawAUC(stack, shift = 0) {
+    (0, _integration_focus.drawIntegrationAUC)(this, stack, shift);
+  }
   mergedPeaks(editPeakSt) {
     if (!editPeakSt) return this.dataPks;
     this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt);
     return this.dataPks;
   }
-  drawAUC(stack) {
-    const {
-      xt,
-      yt
-    } = (0, _compass.TfRescale)(this);
-    const auc = this.tags.aucPath.selectAll('path').data(stack);
-    auc.exit().attr('class', 'exit').remove();
-    const integCurve = border => {
-      const {
-        xL,
-        xU
-      } = border;
-      const ps = this.data.filter(d => d.x > xL && d.x < xU);
-      if (!ps[0]) return null;
-      const point1 = ps[0];
-      const point2 = ps[ps.length - 1];
-      const slope = (0, _calc.calcSlope)(point1.x, point1.y, point2.x, point2.y);
-      let lastDY = point1.y;
-      return d3.area().x(d => xt(d.x)).y0((d, index) => {
-        if (index > 0) {
-          const lastD = ps[index - 1];
-          const y = slope * (d.x - lastD.x) + lastDY;
-          lastDY = y;
-          return yt(y);
-        }
-        return yt(0);
-      }).y1(d => yt(d.y))(ps);
-    };
-    auc.enter().append('path').attr('class', 'auc').attr('fill', 'red').attr('stroke', 'none').attr('fill-opacity', 0.2).attr('stroke-width', 2).merge(auc).attr('d', d => integCurve(d)).attr('id', d => `auc${(0, _focus.itgIdTag)(d)}`).on('mouseover', (event, d) => {
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill', 'blue');
-    }).on('mouseout', (event, d) => {
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'none');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill', 'red');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill-opacity', 0.2);
-    }).on('click', (event, d) => this.onClickTarget(event, d));
-  }
   drawPeaks(editPeakSt) {
     const {
       sameXY,
@@ -355,7 +353,7 @@ class LineFocus {
       bpTxt.enter().append('text').attr('class', 'peak-text').attr('font-family', 'Helvetica').style('font-size', '12px').attr('fill', '#228B22').style('text-anchor', 'middle').merge(bpTxt).attr('id', d => `mpp${Math.round(1000 * d.x)}`).text(d => d.x.toFixed(2)).attr('transform', d => `translate(${xt(d.x)}, ${yt(d.y) - 25})`).on('click', (event, d) => this.onClickTarget(event, d));
     }
   }
-  drawInteg(integationSt) {
+  drawInteg(integrationState) {
     const {
       sameXY,
       sameLySt,
@@ -366,7 +364,7 @@ class LineFocus {
     const {
       selectedIdx,
       integrations
-    } = integationSt;
+    } = integrationState;
     const selectedIntegration = integrations[selectedIdx];
     const {
       stack,
@@ -377,9 +375,20 @@ class LineFocus {
     const isDisable = _cfg.default.btnCmdIntg(this.layout);
     const ignoreRef = _format.default.isHplcUvVisLayout(this.layout);
     const itgs = isDisable ? [] : stack;
-    const igbp = this.tags.igbPath.selectAll('path').data(itgs);
+    const {
+      showIntegSplit,
+      igBarData
+    } = (0, _integration_focus.buildIntegrationBarData)(this.layout, itgs);
+    Object.assign(this, {
+      integrationSplitTargets: {
+        stack: itgs,
+        shift,
+        ignoreRef
+      }
+    });
+    const igbp = this.tags.igbPath.selectAll('path').data(igBarData);
     igbp.exit().attr('class', 'exit').remove();
-    const igcp = this.tags.igcPath.selectAll('path').data(itgs);
+    const igcp = this.tags.igcPath.selectAll('path').data(igBarData);
     igcp.exit().attr('class', 'exit').remove();
     const igtp = this.tags.igtPath.selectAll('text').data(itgs);
     igtp.exit().attr('class', 'exit').remove();
@@ -388,10 +397,11 @@ class LineFocus {
       const auc = this.tags.aucPath.selectAll('path').data(stack);
       auc.exit().attr('class', 'exit').remove();
       auc.merge(auc);
+      this.drawVisualSplitLines(showIntegSplit ? itgs : [], shift, ignoreRef);
       return;
     }
     if (ignoreRef) {
-      this.drawAUC(stack);
+      this.drawAUC(stack, shift);
     } else {
       // rescale for zoom
       const {
@@ -407,7 +417,8 @@ class LineFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
       const integCurve = border => {
         const {
           xL,
@@ -431,7 +442,8 @@ class LineFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
       igtp.enter().append('text').attr('class', 'igtp').attr('font-family', 'Helvetica').style('font-size', '12px').attr('fill', '#228B22').style('text-anchor', 'middle').merge(igtp).attr('id', d => `igtp${(0, _focus.itgIdTag)(d)}`).text(d => (0, _integration.calcArea)(d, refArea, refFactor, ignoreRef)).attr('transform', d => `translate(${xt((d.xL + d.xU) / 2 - shift)}, ${dh - 12})`).on('mouseover', (event, d) => {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
@@ -440,8 +452,10 @@ class LineFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
     }
+    this.drawVisualSplitLines(showIntegSplit ? itgs : [], shift, ignoreRef);
   }
   drawMtply(mtplySt) {
     const {
@@ -452,17 +466,19 @@ class LineFocus {
     if (sameXY && sameLySt && sameMySt) return;
     const {
       selectedIdx,
-      multiplicities
-    } = mtplySt;
-    const selectedMulti = multiplicities[selectedIdx];
+      multiplicities = []
+    } = mtplySt || {};
+    const selectedMulti = multiplicities[selectedIdx] || {};
     const {
-      stack,
-      smExtext,
-      shift
+      stack = [],
+      smExtext = false,
+      shift = 0
     } = selectedMulti;
-    const mpys = stack;
+    const hasValidExtent = extent => extent && Number.isFinite(extent.xL) && Number.isFinite(extent.xU);
+    const mpys = stack.filter(m => hasValidExtent(m?.xExtent));
     const isDisable = _cfg.default.btnCmdMpy(this.layout);
-    if (mpys === 0 || isDisable) return;
+    if (mpys.length === 0 || isDisable) return;
+    const activeExtent = hasValidExtent(smExtext) ? smExtext : mpys[0].xExtent;
     // rescale for zoom
     const {
       xt
@@ -478,7 +494,8 @@ class LineFocus {
         peaks,
         xExtent
       } = m;
-      return peaks.map(p => Object.assign({}, p, {
+      const safePeaks = Array.isArray(peaks) ? peaks : [];
+      return safePeaks.filter(p => Number.isFinite(p?.x) && Number.isFinite(p?.y)).map(p => Object.assign({}, p, {
         xExtent
       }));
     });
@@ -493,7 +510,7 @@ class LineFocus {
         xL,
         xU
       } = d.xExtent;
-      return smExtext.xL === xL && smExtext.xU === xU ? 'purple' : '#DA70D6';
+      return activeExtent.xL === xL && activeExtent.xU === xU ? 'purple' : '#DA70D6';
     };
     mpyb.enter().append('path').attr('class', 'mpyb').attr('fill', 'none').attr('stroke-width', 2).merge(mpyb).attr('stroke', d => mpyColor(d)).attr('id', d => `mpyb${(0, _focus.mpyIdTag)(d)}`).attr('d', d => mpyBar(d)).on('mouseover', (event, d) => {
       d3.selectAll(`#mpyb${(0, _focus.mpyIdTag)(d)}`).attr('stroke', 'blue');
@@ -607,13 +624,18 @@ class LineFocus {
     comparisons,
     editPeakSt,
     layoutSt,
-    integationSt,
+    integrationSt,
     mtplySt,
     sweepExtentSt,
     isUiAddIntgSt,
+    isUiSplitIntgSt,
+    isUiVisualSplitIntgSt,
     isUiNoBrushSt,
-    wavelength
+    wavelength,
+    uiSt
   }) {
+    this.uiSt = uiSt;
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     this.svg = d3.select('.d3Svg');
     (0, _mount.MountMainFrame)(this, 'focus');
     (0, _mount.MountClip)(this);
@@ -621,6 +643,11 @@ class LineFocus {
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setTip();
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, freq, layoutSt, wavelength);
+    Object.assign(this, {
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt
+    });
+    if (!isUiSplitIntgSt && !isUiVisualSplitIntgSt) this.clearSplitPreview();
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     this.path = (0, _mount.MountPath)(this, 'steelblue');
@@ -637,12 +664,12 @@ class LineFocus {
       this.drawGrid();
       this.drawRef();
       this.drawPeaks(editPeakSt);
-      this.drawInteg(integationSt);
+      this.drawInteg(integrationSt);
       this.drawMtply(mtplySt);
       this.drawComparisons(comparisons);
     }
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
-    this.resetShouldUpdate(editPeakSt, integationSt, mtplySt);
+    this.resetShouldUpdate(editPeakSt, integrationSt, mtplySt);
   }
   update({
     filterSeed,
@@ -653,30 +680,40 @@ class LineFocus {
     comparisons,
     editPeakSt,
     layoutSt,
-    integationSt,
+    integrationSt,
     mtplySt,
+    uiSt,
     sweepExtentSt,
     isUiAddIntgSt,
+    isUiSplitIntgSt,
+    isUiVisualSplitIntgSt,
     isUiNoBrushSt,
     wavelength
   }) {
+    this.uiSt = uiSt;
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, freq, layoutSt, wavelength);
+    Object.assign(this, {
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt
+    });
+    if (!isUiSplitIntgSt && !isUiVisualSplitIntgSt) this.clearSplitPreview();
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
-      this.getShouldUpdate(editPeakSt, integationSt, mtplySt);
+      this.getShouldUpdate(editPeakSt, integrationSt, mtplySt);
       this.drawLine();
       this.drawThres();
       this.drawGrid();
       this.drawRef();
       this.drawPeaks(editPeakSt);
-      this.drawInteg(integationSt);
+      this.drawInteg(integrationSt);
       this.drawMtply(mtplySt);
       this.drawComparisons(comparisons);
     }
     (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
-    this.resetShouldUpdate(editPeakSt, integationSt, mtplySt);
+    this.resetShouldUpdate(editPeakSt, integrationSt, mtplySt);
   }
 }
 var _default = exports.default = LineFocus;