feat: display threshold for multiple spectra

ComPlat · Aug 12, 2024 · d171a17 · d171a17
1 parent ba84a45
commit d171a17
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 3 deletions.
diff --git a/dist/components/d3_multi/multi_focus.js b/dist/components/d3_multi/multi_focus.js
@@ -51,6 +51,8 @@ class MultiFocus {
     this.brushX = d3.brushX();
     this.axis = null;
     this.path = null;
+    this.thresLineUp = null;
+    this.thresLineDw = null;
     this.grid = null;
     this.tags = null;
     this.ref = null;
@@ -79,6 +81,7 @@ class MultiFocus {
     this.update = this.update.bind(this);
     this.setConfig = this.setConfig.bind(this);
     this.drawLine = this.drawLine.bind(this);
+    this.drawThres = this.drawThres.bind(this);
     this.drawOtherLines = this.drawOtherLines.bind(this);
     this.drawGrid = this.drawGrid.bind(this);
     this.drawPeaks = this.drawPeaks.bind(this);
@@ -258,6 +261,23 @@ class MultiFocus {
       this.path.attr('marker-mid', 'url(#arrow-left)');
     }
   }
+  drawThres() {
+    if (this.tTrEndPts.length > 0) {
+      this.thresLineUp.attr('d', this.pathCall(this.tTrEndPts));
+      this.thresLineUp.attr('visibility', 'visible');
+      const [left, right] = this.tTrEndPts;
+      const dwMirrorEndPts = [Object.assign({}, left, {
+        y: -left.y
+      }), Object.assign({}, right, {
+        y: -right.y
+      })];
+      this.thresLineDw.attr('d', this.pathCall(dwMirrorEndPts));
+      this.thresLineDw.attr('visibility', 'visible');
+    } else {
+      this.thresLineUp.attr('visibility', 'hidden');
+      this.thresLineDw.attr('visibility', 'hidden');
+    }
+  }
   drawOtherLines(layout) {
     d3.selectAll('.line-clip-compare').remove();
     if (!this.otherLineData) return null;
@@ -819,6 +839,7 @@ class MultiFocus {
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     this.path = (0, _mount.MountPath)(this, this.pathColor);
+    [this.thresLineUp, this.thresLineDw] = (0, _mount.MountThresLine)(this, 'green');
     this.grid = (0, _mount.MountGrid)(this);
     this.tags = (0, _mount.MountTags)(this);
     this.ref = (0, _mount.MountRef)(this);
@@ -827,6 +848,7 @@ class MultiFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);
@@ -868,6 +890,7 @@ class MultiFocus {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate(editPeakSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);

diff --git a/dist/components/multi_jcamps_viewer.js b/dist/components/multi_jcamps_viewer.js
@@ -88,7 +88,7 @@ class MultiJcampsViewer extends _react.default.Component {
       feature: feature,
       operations: operations,
       editorOnly: true,
-      hideThreshold: true
+      hideThreshold: !_format.default.isNmrLayout(layoutSt)
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "react-spectrum-editor"
     }, /*#__PURE__*/_react.default.createElement(_Grid.default, {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@complat/react-spectra-editor",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "An editor to View and Edit Chemical Spectra data (NMR, IR, MS, CV, UIVIS, XRD, GC, and DSC).",
   "repository": {
     "type": "git",

diff --git a/src/components/d3_multi/multi_focus.js b/src/components/d3_multi/multi_focus.js
@@ -6,6 +6,7 @@ import {
 import {
   MountPath, MountGrid, MountAxis, MountAxisLabelX, MountAxisLabelY,
   MountClip, MountMainFrame, MountTags, MountComparePath, MountRef,
+  MountThresLine,
 } from '../../helpers/mount';
 import { PksEdit, PeckersEdit } from '../../helpers/converter';
 import MountBrush from '../../helpers/brush';
@@ -49,6 +50,8 @@ class MultiFocus {
 
     this.axis = null;
     this.path = null;
+    this.thresLineUp = null;
+    this.thresLineDw = null;
     this.grid = null;
     this.tags = null;
     this.ref = null;
@@ -78,6 +81,7 @@ class MultiFocus {
     this.update = this.update.bind(this);
     this.setConfig = this.setConfig.bind(this);
     this.drawLine = this.drawLine.bind(this);
+    this.drawThres = this.drawThres.bind(this);
     this.drawOtherLines = this.drawOtherLines.bind(this);
     this.drawGrid = this.drawGrid.bind(this);
     this.drawPeaks = this.drawPeaks.bind(this);
@@ -228,6 +232,23 @@ class MultiFocus {
     }
   }
 
+  drawThres() {
+    if (this.tTrEndPts.length > 0) {
+      this.thresLineUp.attr('d', this.pathCall(this.tTrEndPts));
+      this.thresLineUp.attr('visibility', 'visible');
+      const [left, right] = this.tTrEndPts;
+      const dwMirrorEndPts = [
+        Object.assign({}, left, { y: -left.y }),
+        Object.assign({}, right, { y: -right.y }),
+      ];
+      this.thresLineDw.attr('d', this.pathCall(dwMirrorEndPts));
+      this.thresLineDw.attr('visibility', 'visible');
+    } else {
+      this.thresLineUp.attr('visibility', 'hidden');
+      this.thresLineDw.attr('visibility', 'hidden');
+    }
+  }
+
   drawOtherLines(layout) {
     d3.selectAll('.line-clip-compare').remove();
     if (!this.otherLineData) return null;
@@ -1007,6 +1028,7 @@ class MultiFocus {
 
     this.axis = MountAxis(this);
     this.path = MountPath(this, this.pathColor);
+    [this.thresLineUp, this.thresLineDw] = MountThresLine(this, 'green');
     this.grid = MountGrid(this);
     this.tags = MountTags(this);
     this.ref = MountRef(this);
@@ -1016,6 +1038,7 @@ class MultiFocus {
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);
@@ -1049,6 +1072,7 @@ class MultiFocus {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate(editPeakSt);
       this.drawLine();
+      this.drawThres();
       this.drawGrid();
       this.drawOtherLines(layoutSt);
       this.drawPeaks(editPeakSt);

diff --git a/src/components/multi_jcamps_viewer.js b/src/components/multi_jcamps_viewer.js
@@ -73,7 +73,7 @@ class MultiJcampsViewer extends React.Component { // eslint-disable-line
           feature={feature}
           operations={operations}
           editorOnly={true}
-          hideThreshold={true}
+          hideThreshold={!Format.isNmrLayout(layoutSt)}
         />
         <div className="react-spectrum-editor">
           <Grid container>