@complat/react-spectra-editor 1.5.3 → 1.6.0

package/dist/components/d3_multi/index.js

@@ -10,6 +10,7 @@ var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _chem = require("../../helpers/chem");
+var _format = _interopRequireDefault(require("../../helpers/format"));
 var _manager = require("../../actions/manager");
 var _ui = require("../../actions/ui");
 var _list_ui = require("../../constants/list_ui");
@@ -33,6 +34,9 @@ class ViewerMulti extends _react.default.Component {
       scrollUiWheelAct
     } = this.props;
     this.rootKlass = '.d3Line';
+    this.containerRef = /*#__PURE__*/_react.default.createRef();
+    this.currentSize = null;
+    this.resizeObserver = null;
     this.focus = new _multi_focus.default({
       W,
       H,
@@ -42,8 +46,11 @@ class ViewerMulti extends _react.default.Component {
       scrollUiWheelAct
     });
     this.normChange = this.normChange.bind(this);
+    this.handleResize = this.handleResize.bind(this);
   }
   componentDidMount() {
+    this.renderChart(this.props, true);
+    this.setupResizeObserver();
     const {
       curveSt,
       seed,
@@ -90,6 +97,11 @@ class ViewerMulti extends _react.default.Component {
       xxLabel = xUnit === '' ? xLabel : xUnit;
       yyLabel = yUnit === '' ? yLabel : yUnit;
     }
+    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
+      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
+    }
     const filterSeed = seed;
     const filterPeak = peak;
     (0, _draw.drawMain)(this.rootKlass, W, H);
@@ -156,8 +168,16 @@ class ViewerMulti extends _react.default.Component {
       xxLabel = xUnit === '' ? xLabel : xUnit;
       yyLabel = yUnit === '' ? yLabel : yUnit;
     }
+    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
+      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
+    }
     const filterSeed = seed;
     const filterPeak = peak;
+    if (_format.default.isCyclicVoltaLayout(layoutSt)) {
+      this.handleResize();
+    }
     this.focus.update({
       entities,
       curveSt,
@@ -179,6 +199,53 @@ class ViewerMulti extends _react.default.Component {
   }
   componentWillUnmount() {
     (0, _draw.drawDestroy)(this.rootKlass);
+    this.teardownResizeObserver();
+  }
+  handleResize() {
+    const {
+      layoutSt
+    } = this.props;
+    if (!_format.default.isCyclicVoltaLayout(layoutSt)) return;
+    const size = this.getContainerSize();
+    if (!size) return;
+    if (!this.currentSize || size.width !== this.currentSize.width || size.height !== this.currentSize.height) {
+      this.renderChart(this.props, false);
+    }
+  }
+  getContainerSize() {
+    const node = this.containerRef.current;
+    if (!node) return null;
+    const {
+      clientWidth,
+      clientHeight
+    } = node;
+    if (!clientWidth || !clientHeight) return null;
+    return {
+      width: clientWidth,
+      height: clientHeight
+    };
+  }
+  getTargetSize(layoutSt) {
+    if (_format.default.isCyclicVoltaLayout(layoutSt)) {
+      const size = this.getContainerSize();
+      if (size) return size;
+    }
+    return {
+      width: W,
+      height: H
+    };
+  }
+  setupResizeObserver() {
+    if (typeof ResizeObserver === 'undefined') return;
+    if (!this.containerRef.current || this.resizeObserver) return;
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.containerRef.current);
+  }
+  teardownResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
   normChange(prevProps) {
     const {
@@ -191,9 +258,101 @@ class ViewerMulti extends _react.default.Component {
       resetAllAct(feature);
     }
   }
+  renderChart(props, shouldReset) {
+    const {
+      curveSt,
+      seed,
+      peak,
+      cLabel,
+      xLabel,
+      yLabel,
+      feature,
+      tTrEndPts,
+      tSfPeaks,
+      editPeakSt,
+      layoutSt,
+      sweepExtentSt,
+      isUiNoBrushSt,
+      isHidden,
+      resetAllAct,
+      cyclicvoltaSt,
+      integationSt,
+      mtplySt,
+      axesUnitsSt,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct
+    } = props;
+    const size = this.getTargetSize(layoutSt);
+    this.currentSize = size;
+    (0, _draw.drawDestroy)(this.rootKlass);
+    if (shouldReset) {
+      resetAllAct(feature);
+    }
+    let xxLabel = xLabel;
+    let yyLabel = yLabel;
+    if (axesUnitsSt) {
+      const {
+        curveIdx
+      } = curveSt;
+      const {
+        axes
+      } = axesUnitsSt;
+      let selectedAxes = axes[curveIdx];
+      if (!selectedAxes) {
+        selectedAxes = {
+          xUnit: '',
+          yUnit: ''
+        };
+      }
+      const {
+        xUnit,
+        yUnit
+      } = selectedAxes;
+      xxLabel = xUnit === '' ? xLabel : xUnit;
+      yyLabel = yUnit === '' ? yLabel : yUnit;
+    }
+    const filterSeed = seed;
+    const filterPeak = peak;
+    this.focus = new _multi_focus.default({
+      W: size.width,
+      H: size.height,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct
+    });
+    (0, _draw.drawMain)(this.rootKlass, size.width, size.height);
+    this.focus.create({
+      curveSt,
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      editPeakSt,
+      layoutSt,
+      sweepExtentSt,
+      isUiNoBrushSt,
+      cyclicvoltaSt,
+      integationSt,
+      mtplySt
+    });
+    (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
+    (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden);
+  }
   render() {
+    const {
+      layoutSt
+    } = this.props;
+    const isCyclicVolta = _format.default.isCyclicVoltaLayout(layoutSt);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d3Line"
+      className: "d3Line",
+      ref: this.containerRef,
+      style: isCyclicVolta ? {
+        height: '100%'
+      } : undefined
     });
   }
 }

package/dist/components/d3_multi/multi_focus.js

@@ -96,6 +96,7 @@ class MultiFocus {
     this.onClickPecker = this.onClickPecker.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
     this.cyclicvoltaSt = null;
+    this.yTransformFactor = 1.0;
   }
   getShouldUpdate(nextEpSt) {
     const {
@@ -106,7 +107,8 @@ class MultiFocus {
       prevTePt,
       prevDtPk,
       prevSfPk,
-      prevData
+      prevData,
+      prevYFactor
     } = this.shouldUpdate;
     const {
       xt,
@@ -119,6 +121,7 @@ class MultiFocus {
     const sameDtPk = prevDtPk === this.dataPks.length;
     const sameSfPk = JSON.stringify(prevSfPk) === JSON.stringify(this.tSfPeaks);
     const sameData = prevData === this.data.length;
+    const sameYFactor = prevYFactor === this.yTransformFactor;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
       sameXY,
       sameEpSt,
@@ -127,7 +130,8 @@ class MultiFocus {
       sameTePt,
       sameDtPk,
       sameSfPk,
-      sameData // eslint-disable-line
+      sameData,
+      sameYFactor // eslint-disable-line
     });
   }
   resetShouldUpdate(prevEpSt) {
@@ -142,6 +146,7 @@ class MultiFocus {
     const prevSfPk = this.tSfPeaks;
     const prevData = this.data.length;
     const prevLySt = this.layout;
+    const prevYFactor = this.yTransformFactor;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
       prevXt,
       prevYt,
@@ -151,17 +156,41 @@ class MultiFocus {
       prevTePt,
       prevDtPk,
       prevSfPk,
-      prevData // eslint-disable-line
+      prevData,
+      prevYFactor // eslint-disable-line
     });
   }
   setTip() {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);
   }
+  computeYTransformFactor(layout, cyclicvoltaSt, feature) {
+    let factor = 1.0;
+    if (layout === _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY && cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const rawArea = (cyclicvoltaSt.areaValue === '' ? 1.0 : cyclicvoltaSt.areaValue) || 1.0;
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const safeArea = rawArea > 0 ? rawArea : 1.0;
+      const areaInCm2 = areaUnit === 'mm²' ? safeArea / 100.0 : safeArea;
+      factor = 1.0 / areaInCm2;
+      const baseY = feature && feature.yUnit ? String(feature.yUnit) : 'A';
+      if (/mA/i.test(baseY)) {
+        factor *= 1000.0;
+      }
+      if (areaUnit === 'mm²') {
+        factor /= 100.0;
+      }
+    }
+    return factor;
+  }
+  transformYValue(y) {
+    return y * this.yTransformFactor;
+  }
   setDataParams(filterSeed, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt, jcampIdx = 0) {
     this.data = [];
     this.otherLineData = [];
     let filterSubLayoutValue = null;
+    const currFeature = this.entities && this.entities[0] ? this.entities[0].feature : null;
+    this.yTransformFactor = this.computeYTransformFactor(layout, cyclicvoltaSt, currFeature);
     this.entities.forEach((entry, idx) => {
       const {
         topic,
@@ -205,6 +234,11 @@ class MultiFocus {
   updatePathCall(xt, yt) {
     this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
   }
+  setYAxisTickFormat() {
+    const f = this.yTransformFactor || 1;
+    const format = d3.format('.2n');
+    this.axisCall.y.tickFormat(v => format(v * f));
+  }
   setConfig(sweepExtentSt) {
     // Domain Calculate
     let {
@@ -246,6 +280,9 @@ class MultiFocus {
     // Axis Call
     this.axisCall.x.scale(xt);
     this.axisCall.y.scale(yt);
+    if (this.layout === _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) {
+      this.setYAxisTickFormat();
+    }
     this.currentExtent = {
       xExtent,
       yExtent
@@ -299,9 +336,10 @@ class MultiFocus {
   }
   drawGrid() {
     const {
-      sameXY
+      sameXY,
+      sameYFactor
     } = this.shouldUpdate;
-    if (sameXY) return;
+    if (sameXY && sameYFactor) 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');
   }
@@ -473,7 +511,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.show(tipParams, event.target);
     }).on('mouseout', (event, d) => {
@@ -481,7 +520,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'red');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.hide(tipParams, event.target);
     }).on('click', (event, d) => this.onClickTarget(event, d));
@@ -534,7 +574,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.show(tipParams, event.target);
     }).on('mouseout', (event, d) => {
@@ -542,7 +583,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', '#228B22');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.hide(tipParams, event.target);
     }).on('click', (event, d) => this.onClickPecker(event, d));

package/dist/components/multi_jcamps_viewer.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _styles = require("@mui/styles");
 var _index = _interopRequireDefault(require("./panel/index"));
+var _cyclic_voltamery_data = _interopRequireDefault(require("./panel/cyclic_voltamery_data"));
 var _index2 = _interopRequireDefault(require("./cmd_bar/index"));
 var _index3 = _interopRequireDefault(require("./d3_multi/index"));
 var _curve = require("../actions/curve");
@@ -33,6 +35,32 @@ const styles = () => ({
   },
   tabLabel: {
     fontSize: '14px'
+  },
+  cvEditor: {
+    height: 'calc(90vh - 220px)',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    overflow: 'hidden'
+  },
+  cvTopRow: {
+    flex: '1 1 auto',
+    minHeight: 0,
+    overflow: 'hidden'
+  },
+  cvViewerCol: {
+    height: '100%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  cvViewerWrap: {
+    flex: '1 1 auto',
+    minHeight: 0
+  },
+  cvPanelBelow: {
+    marginTop: 16,
+    width: '100%'
   }
 });
 const seperatingSubLayout = (entities, featureCondition, layoutSt) => {
@@ -86,6 +114,7 @@ class MultiJcampsViewer extends _react.default.Component {
       integrations
     } = integrationSt;
     const currentIntegration = integrations[curveIdx];
+    const isCyclicVolta = _format.default.isCyclicVoltaLayout(layoutSt);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.root,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
@@ -94,19 +123,31 @@ class MultiJcampsViewer extends _react.default.Component {
         editorOnly: true,
         hideThreshold: !_format.default.isNmrLayout(layoutSt)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "react-spectrum-editor",
+        className: (0, _classnames.default)('react-spectrum-editor', isCyclicVolta && classes.cvEditor),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
           container: true,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+          className: isCyclicVolta ? classes.cvTopRow : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
             item: true,
             xs: 9,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
-              entities: entities,
-              topic: topic,
-              xLabel: feature.xUnit,
-              yLabel: feature.yUnit,
-              feature: feature
-            })
+            className: isCyclicVolta ? classes.cvViewerCol : undefined,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: isCyclicVolta ? classes.cvViewerWrap : undefined,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
+                entities: entities,
+                topic: topic,
+                xLabel: feature.xUnit,
+                yLabel: feature.yUnit,
+                feature: feature
+              })
+            }), isCyclicVolta ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: classes.cvPanelBelow,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cyclic_voltamery_data.default, {
+                jcampIdx: curveIdx,
+                feature: feature,
+                userManualLink: userManualLink ? userManualLink.cv : undefined
+              })
+            }) : null]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
             item: true,
             xs: 3,
@@ -122,7 +163,8 @@ class MultiJcampsViewer extends _react.default.Component {
               integration: currentIntegration,
               descriptions: descriptions,
               canChangeDescription: canChangeDescription,
-              onDescriptionChanged: onDescriptionChanged
+              onDescriptionChanged: onDescriptionChanged,
+              hideCyclicVolta: isCyclicVolta
             })
           })]
         })