@complat/react-spectra-editor 1.7.1 → 1.8.0

package/dist/components/d3_line_rect/multi_focus.js

@@ -0,0 +1,433 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickTicIndex = exports.default = void 0;
+var _init = require("../../helpers/init");
+var _mount = require("../../helpers/mount");
+var _brush = _interopRequireDefault(require("../../helpers/brush"));
+var _compass = require("../../helpers/compass");
+var _list_layout = require("../../constants/list_layout");
+var _format = _interopRequireDefault(require("../../helpers/format"));
+var _list_graph = require("../../constants/list_graph");
+var _chem = require("../../helpers/chem");
+var _extractEntityLCMS = require("../../helpers/extractEntityLCMS");
+/* eslint-disable no-unused-vars, prefer-object-spread, no-mixed-operators,
+no-unneeded-ternary, arrow-body-style, max-len */
+
+const d3 = require('d3');
+const pickTicIndex = (ticEntities, curveIdx, polarity) => {
+  if (!Array.isArray(ticEntities) || ticEntities.length === 0) return 0;
+  if (polarity) {
+    const idxByPolarity = ticEntities.findIndex(ent => (0, _extractEntityLCMS.getLcMsInfo)(ent).polarity === polarity);
+    if (idxByPolarity >= 0) return idxByPolarity;
+  }
+  if (Number.isInteger(curveIdx) && curveIdx >= 0 && curveIdx < ticEntities.length) {
+    return curveIdx;
+  }
+  return 0;
+};
+exports.pickTicIndex = pickTicIndex;
+class MultiFocus {
+  constructor(props) {
+    const {
+      W,
+      H,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      ticEntities,
+      graphIndex,
+      uiSt
+    } = props;
+    this.graphIndex = graphIndex;
+    this.uiSt = uiSt;
+    this.ticEntities = ticEntities;
+    this.jcampIdx = 0;
+    this.isShowAllCurves = false;
+    this.rootKlass = `.${_list_graph.LIST_ROOT_SVG_GRAPH.MULTI}`;
+    this.brushClass = `.${_list_graph.LIST_BRUSH_SVG_GRAPH.MULTI}`;
+    this.margin = {
+      t: 5,
+      b: 40,
+      l: 60,
+      r: 5
+    };
+    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.brush = d3.brush();
+    this.brushX = d3.brushX();
+    this.axis = null;
+    this.path = null;
+    this.grid = null;
+    this.tags = null;
+    this.data = [];
+    this.otherLineData = [];
+    this.pathColor = 'steelblue';
+    this.tTrEndPts = null;
+    this.root = null;
+    this.svg = null;
+    this.axisCall = (0, _init.InitAxisCall)(5);
+    this.pathCall = null;
+    this.tip = null;
+    this.factor = 0.125;
+    this.currentExtent = null;
+    this.shouldUpdate = {};
+    this.layout = _list_layout.LIST_LAYOUT.LC_MS;
+    this.getShouldUpdate = this.getShouldUpdate.bind(this);
+    this.resetShouldUpdate = this.resetShouldUpdate.bind(this);
+    this.setTip = this.setTip.bind(this);
+    this.setDataParams = this.setDataParams.bind(this);
+    this.create = this.create.bind(this);
+    this.update = this.update.bind(this);
+    this.setConfig = this.setConfig.bind(this);
+    this.drawLine = this.drawLine.bind(this);
+    this.drawOtherLines = this.drawOtherLines.bind(this);
+    this.drawGrid = this.drawGrid.bind(this);
+    this.drawPageMarker = this.drawPageMarker.bind(this);
+    this.onClickTarget = this.onClickTarget.bind(this);
+    this.isFirefox = typeof InstallTrigger !== 'undefined';
+  }
+  colorForPolarity = polarity => {
+    if (polarity === 'negative') return '#2980b9';
+    if (polarity === 'neutral') return '#2980b9';
+    return '#d35400';
+  };
+  getTicLegendEntries = (ticEntities, hplcMsSt) => {
+    const available = hplcMsSt?.tic?.available;
+    const selected = hplcMsSt?.tic?.polarity;
+    const baseEntries = [{
+      key: 'positive',
+      label: 'PLUS'
+    }, {
+      key: 'negative',
+      label: 'MINUS'
+    }, {
+      key: 'neutral',
+      label: 'NEUTRAL'
+    }];
+    let entries = [];
+    if (available && typeof available === 'object') {
+      const filtered = baseEntries.filter(entry => available[entry.key]);
+      if (filtered.length > 0) entries = filtered;
+    }
+    if (entries.length === 0 && Array.isArray(ticEntities)) {
+      const found = new Set();
+      ticEntities.forEach(entry => {
+        const {
+          polarity
+        } = (0, _extractEntityLCMS.getLcMsInfo)(entry);
+        if (polarity) found.add(polarity);
+      });
+      if (found.size > 0) {
+        entries = baseEntries.filter(entry => found.has(entry.key));
+      }
+    }
+    if (entries.length === 0) entries = baseEntries;
+    return entries.map(entry => ({
+      ...entry,
+      color: this.colorForPolarity(entry.key),
+      selected: entry.key === selected
+    }));
+  };
+  drawTicLegend = (ticEntities, hplcMsSt) => {
+    if (!this.root) return;
+    this.root.selectAll('.tic-legend').remove();
+    const entries = this.getTicLegendEntries(ticEntities, hplcMsSt);
+    if (entries.length <= 1) return;
+    const lineLength = 14;
+    const lineGap = 6;
+    const legendX = this.w - 8 - lineLength;
+    const legendY = 10;
+    const rowHeight = 14;
+    const legend = this.root.append('g').attr('class', 'tic-legend');
+    entries.forEach((entry, idx) => {
+      const row = legend.append('g').attr('transform', `translate(${legendX}, ${legendY + idx * rowHeight})`);
+      const opacity = entry.selected ? 1 : 0.35;
+      row.append('line').attr('x1', 0).attr('x2', lineLength).attr('y1', 0).attr('y2', 0).attr('stroke', entry.color).attr('stroke-width', entry.selected ? 2 : 1).attr('stroke-opacity', opacity).attr('stroke-linecap', 'round');
+      row.append('text').attr('x', -lineGap).attr('y', 0).attr('dy', '0.32em').attr('text-anchor', 'end').attr('font-family', 'Helvetica').style('font-size', '11px').style('fill', entry.color).style('opacity', opacity).text(entry.label);
+    });
+  };
+  getShouldUpdate() {
+    const {
+      prevXt,
+      prevYt,
+      prevLySt,
+      prevTePt,
+      prevData
+    } = this.shouldUpdate;
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    const sameXY = xt(1.1) === prevXt && prevYt === yt(1.1);
+    const sameLySt = prevLySt === this.layout;
+    const sameTePt = prevTePt === this.tTrEndPts.length;
+    const sameData = prevData === this.data.length;
+    this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
+      sameXY,
+      sameLySt,
+      // eslint-disable-line
+      sameTePt,
+      sameData // eslint-disable-line
+    });
+  }
+  resetShouldUpdate() {
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    const prevXt = xt(1.1);
+    const prevYt = yt(1.1);
+    const prevTePt = this.tTrEndPts.length;
+    const prevData = this.data.length;
+    const prevLySt = this.layout;
+    this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
+      prevXt,
+      prevYt,
+      prevLySt,
+      // eslint-disable-line
+      prevTePt,
+      prevData // eslint-disable-line
+    });
+  }
+  setTip() {
+    this.tip = (0, _init.InitTip)();
+    this.root.call(this.tip);
+  }
+  setDataParams(tTrEndPts, layout, jcampIdx = 0) {
+    this.data = [];
+    this.otherLineData = [];
+    const ticEntities = Array.isArray(this.ticEntities) ? this.ticEntities : [];
+    ticEntities.forEach((entry, idx) => {
+      const {
+        topic,
+        feature
+      } = entry;
+      const {
+        polarity = 'neutral'
+      } = (0, _extractEntityLCMS.getLcMsInfo)(entry);
+      const fixedColor = this.colorForPolarity(polarity);
+      if (!feature || !topic) return;
+      const currData = (0, _chem.convertTopic)(topic, layout, feature, 0);
+      if (idx === jcampIdx) {
+        this.data = currData;
+        this.pathColor = fixedColor;
+      } else {
+        this.otherLineData.push({
+          data: currData,
+          polarity,
+          color: fixedColor,
+          idx
+        });
+      }
+    });
+    this.tTrEndPts = tTrEndPts;
+    if (layout) {
+      this.layout = layout;
+    }
+    this.jcampIdx = jcampIdx;
+    this.xOnlyBrush = this.layout === _list_layout.LIST_LAYOUT.LC_MS;
+  }
+  updatePathCall(xt, yt) {
+    this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
+  }
+  setConfig(sweepExtentSt) {
+    // Domain Calculate
+    let {
+      xExtent,
+      yExtent
+    } = sweepExtentSt || {
+      xExtent: false,
+      yExtent: false
+    };
+    let allData = null;
+    if (!xExtent || !yExtent) {
+      allData = [...this.data];
+      if (this.otherLineData) {
+        this.otherLineData.forEach(lineData => {
+          allData = [...allData, ...lineData.data];
+        });
+      }
+    }
+    if (!xExtent) {
+      const xes = d3.extent(allData, d => d.x).sort((a, b) => a - b);
+      xExtent = {
+        xL: xes[0],
+        xU: xes[1]
+      };
+    }
+    if (!yExtent) {
+      const btm = d3.min(allData, d => d.y);
+      const top = d3.max(allData, d => d.y);
+      const height = top - btm;
+      yExtent = {
+        yL: btm - this.factor * height,
+        yU: top + this.factor * height
+      };
+    }
+    this.scales.x.domain([xExtent.xL, xExtent.xU]);
+    this.scales.y.domain([yExtent.yL, yExtent.yU]);
+
+    // rescale for zoom
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+
+    // Axis Call
+    this.axisCall.x.scale(xt);
+    this.axisCall.y.scale(yt);
+    this.currentExtent = {
+      xExtent,
+      yExtent
+    };
+  }
+  drawLine() {
+    if (!this.path) return;
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    this.updatePathCall(xt, yt);
+    this.path.attr('d', this.pathCall(this.data));
+    this.path.style('stroke', this.pathColor);
+    if (this.layout === _list_layout.LIST_LAYOUT.AIF) {
+      this.path.attr('marker-mid', 'url(#arrow-left)');
+    }
+  }
+  drawOtherLines(layout) {
+    d3.selectAll('.line-clip-compare').remove();
+    if (!this.otherLineData) return null;
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    this.updatePathCall(xt, yt);
+    this.otherLineData.forEach((entry, idx) => {
+      const {
+        data,
+        color: pathColor
+      } = entry;
+      const path = (0, _mount.MountComparePath)(this, pathColor, idx, 0.4);
+      path.attr('d', this.pathCall(data));
+      if (this.layout === _list_layout.LIST_LAYOUT.AIF && this.isShowAllCurves === true) {
+        path.attr('marker-mid', 'url(#arrow-left)');
+      }
+    });
+    return null;
+  }
+  drawGrid() {
+    const {
+      sameXY
+    } = this.shouldUpdate;
+    if (sameXY || !this.grid || !this.axisCall) return;
+    if (this.grid.x && this.axisCall.x) {
+      this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+    }
+    if (this.grid.y && this.axisCall.y) {
+      this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+    }
+  }
+  drawPageMarker(hplcMsSt) {
+    if (!this.root) return;
+    const currentPageValue = hplcMsSt?.tic?.currentPageValue;
+    const hasValue = Number.isFinite(currentPageValue);
+    const marker = this.root.selectAll('.tic-page-marker').data(hasValue ? [currentPageValue] : []);
+    marker.exit().remove();
+    if (!hasValue) return;
+    const {
+      xt
+    } = (0, _compass.TfRescale)(this);
+    marker.enter().append('line').attr('class', 'tic-page-marker').attr('stroke', 'red').attr('stroke-width', 1).attr('stroke-opacity', 0.8).merge(marker).attr('x1', xt(currentPageValue)).attr('x2', xt(currentPageValue)).attr('y1', 0).attr('y2', this.h);
+  }
+  onClickTarget(event, data) {
+    event.stopPropagation();
+    event.preventDefault();
+    const onPeak = true;
+    this.clickUiTargetAct(data, onPeak, false, this.jcampIdx, false, 'lcms_tic');
+  }
+  create({
+    ticEntities,
+    curveSt,
+    hplcMsSt,
+    tTrEndPts,
+    layoutSt,
+    sweepExtentSt,
+    isUiNoBrushSt
+  }) {
+    this.svg = d3.select(this.rootKlass).select(this.brushClass);
+    (0, _mount.MountMainFrame)(this, 'focus');
+    (0, _mount.MountClip)(this);
+    const {
+      curveIdx,
+      isShowAllCurve
+    } = curveSt;
+    const selectedPolarity = hplcMsSt?.tic?.polarity;
+    const jcampIdx = pickTicIndex(ticEntities, curveIdx, selectedPolarity);
+    this.isShowAllCurves = isShowAllCurve;
+    this.ticEntities = Array.isArray(ticEntities) ? ticEntities : [];
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.scales = (0, _init.InitScale)(this, false);
+    this.setTip();
+    this.setDataParams(tTrEndPts, layoutSt, jcampIdx);
+    (0, _compass.MountCompass)(this);
+    this.axis = (0, _mount.MountAxis)(this);
+    this.path = (0, _mount.MountPath)(this, this.pathColor);
+    this.grid = (0, _mount.MountGrid)(this);
+    this.tags = (0, _mount.MountTags)(this);
+    (0, _mount.MountAxisLabelX)(this);
+    (0, _mount.MountAxisLabelY)(this);
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.drawLine();
+      this.drawGrid();
+      this.drawPageMarker(hplcMsSt);
+      this.drawOtherLines(layoutSt);
+      this.drawTicLegend(ticEntities, hplcMsSt);
+    }
+    (0, _brush.default)(this, false, isUiNoBrushSt, this.brushClass);
+    this.resetShouldUpdate();
+  }
+  update({
+    curveSt,
+    tTrEndPts,
+    layoutSt,
+    ticEntities,
+    hplcMsSt,
+    sweepExtentSt,
+    isUiNoBrushSt,
+    uiSt
+  }) {
+    this.svg = d3.select(this.rootKlass).select(this.brushClass);
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.scales = (0, _init.InitScale)(this, false);
+    const {
+      curveIdx,
+      isShowAllCurve
+    } = curveSt;
+    const selectedPolarity = hplcMsSt?.tic?.polarity;
+    const jcampIdx = pickTicIndex(ticEntities, curveIdx, selectedPolarity);
+    this.isShowAllCurves = isShowAllCurve;
+    this.ticEntities = Array.isArray(ticEntities) ? ticEntities : [];
+    this.uiSt = uiSt;
+    this.setDataParams(tTrEndPts, layoutSt, jcampIdx);
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.getShouldUpdate();
+      this.drawLine();
+      this.drawGrid();
+      this.drawPageMarker(hplcMsSt);
+      this.drawOtherLines(layoutSt);
+      this.drawTicLegend(ticEntities, hplcMsSt);
+    }
+    (0, _brush.default)(this, false, isUiNoBrushSt, this.brushClass);
+    this.resetShouldUpdate();
+  }
+}
+var _default = exports.default = MultiFocus;

package/dist/components/d3_line_rect/rect_focus.js

@@ -0,0 +1,247 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _init = require("../../helpers/init");
+var _brush = _interopRequireDefault(require("../../helpers/brush"));
+var _mount = require("../../helpers/mount");
+var _compass = require("../../helpers/compass");
+var _converter = require("../../helpers/converter");
+var _list_layout = require("../../constants/list_layout");
+var _list_graph = require("../../constants/list_graph");
+const d3 = require('d3');
+class RectFocus {
+  constructor(props) {
+    const {
+      W,
+      H,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      graphIndex,
+      uiSt
+    } = props;
+    this.graphIndex = graphIndex;
+    this.uiSt = uiSt;
+    this.rootKlass = `.${_list_graph.LIST_ROOT_SVG_GRAPH.RECT}`;
+    this.brushClass = `.${_list_graph.LIST_BRUSH_SVG_GRAPH.RECT}`;
+    this.margin = {
+      t: 5,
+      b: 40,
+      l: 60,
+      r: 5
+    };
+    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.brush = d3.brush();
+    this.brushX = d3.brushX();
+    this.axis = null;
+    this.thresLine = null;
+    this.grid = null;
+    this.ref = null;
+    this.ccPattern = null;
+    this.data = [];
+    this.dataPks = [];
+    this.tTrEndPts = null;
+    this.tSfPeaks = null;
+    this.root = null;
+    this.svg = null;
+    this.bars = null;
+    this.scales = (0, _init.InitScale)(this, false);
+    this.axisCall = (0, _init.InitAxisCall)(5);
+    this.pathCall = null;
+    this.tip = null;
+    this.factor = 0.125;
+    this.currentExtent = null;
+    this.layout = _list_layout.LIST_LAYOUT.MS;
+    this.setTip = this.setTip.bind(this);
+    this.setDataParams = this.setDataParams.bind(this);
+    this.create = this.create.bind(this);
+    this.update = this.update.bind(this);
+    this.setConfig = this.setConfig.bind(this);
+    this.drawBar = this.drawBar.bind(this);
+    this.drawThres = this.drawThres.bind(this);
+    this.drawGrid = this.drawGrid.bind(this);
+    this.mergedPeaks = this.mergedPeaks.bind(this);
+    this.isFirefox = typeof InstallTrigger !== 'undefined';
+  }
+  setTip() {
+    this.tip = (0, _init.InitTip)();
+    this.root.call(this.tip);
+  }
+  setDataParams(data, peaks, tTrEndPts, tSfPeaks, layout = null) {
+    this.data = [...data];
+    this.dataPks = [...peaks];
+    this.tTrEndPts = tTrEndPts;
+    this.tSfPeaks = tSfPeaks;
+    if (layout) {
+      this.layout = layout;
+    }
+    this.xOnlyBrush = this.layout === _list_layout.LIST_LAYOUT.LC_MS;
+    const xExtent = d3.extent(this.data, d => d.x);
+    this.scales.x.domain(xExtent);
+  }
+  updatePathCall(xt, yt) {
+    this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
+  }
+  setConfig(sweepExtentSt) {
+    // Domain Calculate
+    let {
+      xExtent,
+      yExtent
+    } = sweepExtentSt || {
+      xExtent: false,
+      yExtent: false
+    };
+    if (!xExtent || !yExtent) {
+      const xes = d3.extent(this.data, d => d.x).sort((a, b) => a - b);
+      const padding = (xes[1] - xes[0]) * 0.005;
+      xExtent = {
+        xL: Math.max(0, xes[0] - padding),
+        xU: xes[1] + padding
+      };
+      const btm = 0; // MS baseline is always 0.
+      const top = d3.max(this.data, d => d.y);
+      const height = top - btm;
+      yExtent = {
+        yL: btm - this.factor * height,
+        yU: top + this.factor * height
+      };
+    }
+    this.scales.x.domain([xExtent.xL, xExtent.xU]);
+    this.scales.y.domain([yExtent.yL, yExtent.yU]);
+
+    // rescale for zoom
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+
+    // Axis Call
+    this.axisCall.x.scale(xt);
+    this.axisCall.y.scale(yt);
+    this.currentExtent = {
+      xExtent,
+      yExtent
+    };
+  }
+  posHeight(gnd, val) {
+    const h = gnd - val;
+    return h >= 0 ? h : 0;
+  }
+  barColor(y, yRef) {
+    return y >= yRef ? 'steelblue' : '#aaa';
+  }
+  drawBar() {
+    if (!this.bars) {
+      return;
+    }
+    const {
+      xt,
+      yt
+    } = (0, _compass.TfRescale)(this);
+    this.updatePathCall(xt, yt);
+    if (!this.tTrEndPts.length) return;
+    const yRef = this.tTrEndPts[0].y;
+    const bars = this.bars.selectAll('rect').data(this.data);
+    bars.exit().attr('class', 'exit').remove();
+    const gnd = yt(0);
+    bars.enter().append('rect').attr('class', 'enter-bar').attr('width', 1.5).merge(bars).attr('fill', d => this.barColor(d.y, yRef)).attr('height', d => this.posHeight(gnd, yt(d.y))).attr('id', d => `mpp${Math.round(1000 * d.x)}`).attr('transform', d => `translate(${xt(d.x)}, ${yt(d.y)})`).on('mouseover', (event, d) => {
+      d3.select(`#mpp${Math.round(1000 * d.x)}`).attr('stroke-opacity', '1.0');
+      d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
+      const tipParams = {
+        d,
+        layout: this.layout
+      };
+      this.tip.show(tipParams, event.target);
+    }).on('mouseout', (event, d) => {
+      d3.select(`#mpp${Math.round(1000 * d.x)}`).attr('stroke-opacity', '1.0');
+      d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'red');
+      const tipParams = {
+        d,
+        layout: this.layout
+      };
+      this.tip.hide(tipParams, event.target);
+    });
+  }
+  drawThres() {
+    if (this.thresLine && this.tTrEndPts.length > 0) {
+      this.thresLine.attr('d', this.pathCall(this.tTrEndPts));
+      this.thresLine.attr('visibility', 'visible');
+    } else if (this.thresLine) {
+      this.thresLine.attr('visibility', 'hidden');
+    }
+  }
+  drawGrid() {
+    if (!this.grid) return;
+    this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+    this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
+  }
+  mergedPeaks(editPeakSt) {
+    if (!editPeakSt) return this.dataPks;
+    this.dataPks = (0, _converter.PksEdit)(this.dataPks, editPeakSt);
+    return this.dataPks;
+  }
+  create({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    layoutSt,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt
+  }) {
+    this.svg = d3.select(this.brushClass);
+    (0, _mount.MountMainFrame)(this, 'focus');
+    (0, _mount.MountClip)(this);
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.setTip();
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt);
+    (0, _compass.MountCompass)(this);
+    this.axis = (0, _mount.MountAxis)(this);
+    [this.thresLine] = (0, _mount.MountThresLine)(this, 'green');
+    this.grid = (0, _mount.MountGrid)(this);
+    this.ref = (0, _mount.MountRef)(this);
+    this.bars = (0, _mount.MountBars)(this);
+    (0, _mount.MountAxisLabelX)(this);
+    (0, _mount.MountAxisLabelY)(this);
+    (0, _mount.MountGraphLabel)(this);
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.drawBar();
+      this.drawThres();
+      this.drawGrid();
+    }
+    (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);
+  }
+  update({
+    filterSeed,
+    filterPeak,
+    tTrEndPts,
+    tSfPeaks,
+    layoutSt,
+    sweepExtentSt,
+    isUiAddIntgSt,
+    isUiNoBrushSt,
+    uiSt
+  }) {
+    this.root = d3.select(this.rootKlass).selectAll('.focus-main');
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt);
+    this.uiSt = uiSt;
+    if (this.data && this.data.length > 0) {
+      this.setConfig(sweepExtentSt);
+      this.drawBar();
+      this.drawThres();
+      this.drawGrid();
+    }
+    (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt, this.brushClass);
+  }
+}
+var _default = exports.default = RectFocus;