Add DSC layout and inline notation for CV layout (#222)

* feat: add dsc layout (#217) * feat: add function to generate inline notation for CV layout (#215)
ComPlat · Jun 25, 2024 · b65441f · b65441f
1 parent afb52d1
commit b65441f
Show file tree

Hide file tree

Showing 43 changed files with 2,044 additions and 1,117 deletions.
diff --git a/cypress/e2e/nmr1h_spec.cy.ts b/cypress/e2e/nmr1h_spec.cy.ts
@@ -70,9 +70,9 @@ describe('NMR 1H', () => {
     cy.get('.btn-sv-bar-spctrum').click()
     cy.get('.input-sv-bar-layout').click()
     cy.get('.option-sv-bar-layout').should($li => {
-      expect($li).to.have.length(22)
+      expect($li).to.have.length(23)
     })
-    cy.get('ul li:nth-child(8)').click()
+    cy.get('ul li:nth-child(9)').click()
 
     cy.get('.d3Line').children().should('have.class', 'd3Svg')
     cy.get('.d3Svg text.xLabel').should('have.text', 'X (PPM)')

diff --git a/dist/actions/meta.js b/dist/actions/meta.js
@@ -3,10 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMetaPeaks = void 0;
+exports.updateMetaPeaks = exports.updateDSCMetaData = void 0;
 var _action_type = require("../constants/action_type");
 const updateMetaPeaks = payload => ({
   type: _action_type.META.UPDATE_PEAKS,
   payload
 });
-exports.updateMetaPeaks = updateMetaPeaks;
+exports.updateMetaPeaks = updateMetaPeaks;
+const updateDSCMetaData = payload => ({
+  type: _action_type.META.UPDATE_META_DATA,
+  payload
+});
+exports.updateDSCMetaData = updateDSCMetaData;
diff --git a/dist/components/cmd_bar/r01_layout.js b/dist/components/cmd_bar/r01_layout.js
@@ -108,6 +108,10 @@ const layoutSelect = (classes, layoutSt, updateLayoutAct) => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
   }, "TGA (THERMOGRAVIMETRIC ANALYSIS)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: _list_layout.LIST_LAYOUT.DSC
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')
+  }, "DSC (DIFFERENTIAL SCANNING CALORIMETRY)")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: _list_layout.LIST_LAYOUT.XRD
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout')

diff --git a/dist/components/cmd_bar/r05_submit_btn.js b/dist/components/cmd_bar/r05_submit_btn.js
@@ -21,7 +21,7 @@ react/function-component-definition, function-call-argument-newline,
 react/require-default-props */
 
 const styles = () => Object.assign({}, _common.commonStyle);
-const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt) => () => {
+const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, analysis, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt, dscMetaData) => () => {
   operation({
     peaks: peaksEdit,
     layout: layoutSt,
@@ -40,7 +40,8 @@ const onClickCb = (operation, peaksEdit, isAscend, isIntensity, scan, thres, lay
     cyclicvoltaSt,
     curveSt,
     axesUnitsSt,
-    detectorSt
+    detectorSt,
+    dscMetaData
   });
 };
 const BtnSubmit = _ref => {
@@ -64,13 +65,17 @@ const BtnSubmit = _ref => {
     cyclicvoltaSt,
     curveSt,
     axesUnitsSt,
-    detectorSt
+    detectorSt,
+    metaSt
   } = _ref;
   const peaksEdit = (0, _extractPeaksEdit.extractPeaksEdit)(feature, editPeakSt, thresSt, shiftSt, layoutSt);
   // const disBtn = peaksEdit.length === 0 || statusSt.btnSubmit || disabled;
   const scan = (0, _chem.Convert2Scan)(feature, scanSt);
   const thres = (0, _chem.Convert2Thres)(feature, thresSt);
   const aucValues = (0, _extractPeaksEdit.extractAreaUnderCurve)(allIntegrationSt, integrationSt, layoutSt);
+  const {
+    dscMetaData
+  } = metaSt;
   if (!operation) return null;
   return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: /*#__PURE__*/_react.default.createElement("span", {
@@ -79,7 +84,7 @@ const BtnSubmit = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_common.MuButton, {
     className: (0, _classnames.default)('btn-sv-bar-submit'),
     color: "primary",
-    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt)
+    onClick: onClickCb(operation.value, peaksEdit, isAscend, isIntensity, scan, thres, layoutSt, shiftSt, forecastSt.predictions, decimalSt, integrationSt, multiplicitySt, allIntegrationSt, aucValues, waveLengthSt, cyclicvoltaSt, curveSt, axesUnitsSt, detectorSt, dscMetaData)
   }, /*#__PURE__*/_react.default.createElement(_PlayCircleOutline.default, {
     className: classes.icon
   })));
@@ -101,7 +106,8 @@ const mapStateToProps = (state, props) => (
   cyclicvoltaSt: state.cyclicvolta,
   curveSt: state.curve,
   axesUnitsSt: state.axesUnits,
-  detectorSt: state.detector
+  detectorSt: state.detector,
+  metaSt: state.meta
 });
 const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
 BtnSubmit.propTypes = {
@@ -124,6 +130,7 @@ BtnSubmit.propTypes = {
   cyclicvoltaSt: _propTypes.default.object.isRequired,
   curveSt: _propTypes.default.object,
   axesUnitsSt: _propTypes.default.object.isRequired,
-  detectorSt: _propTypes.default.object.isRequired
+  detectorSt: _propTypes.default.object.isRequired,
+  metaSt: _propTypes.default.object.isRequired
 };
 var _default = exports.default = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _styles.withStyles)(styles))(BtnSubmit);
diff --git a/dist/components/d3_line/line_focus.js b/dist/components/d3_line/line_focus.js
@@ -596,7 +596,7 @@ class LineFocus {
     return null;
   }
   reverseXAxis(layoutSt) {
-    return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.DLS_ACF, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.EMISSIONS, _list_layout.LIST_LAYOUT.DLS_INTENSITY].indexOf(layoutSt) < 0;
+    return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.DSC, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.DLS_ACF, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.EMISSIONS, _list_layout.LIST_LAYOUT.DLS_INTENSITY].indexOf(layoutSt) < 0;
   }
   create(_ref) {
     let {

diff --git a/dist/components/d3_multi/multi_focus.js b/dist/components/d3_multi/multi_focus.js
@@ -785,7 +785,7 @@ class MultiFocus {
     ccp.enter().append('path').attr('d', lineSymbol).attr('class', 'enter-ref').attr('fill', 'green').attr('fill-opacity', 0.8).merge(ccp).attr('transform', d => `translate(${xt(d.x)}, ${yt(d.y)})`);
   }
   reverseXAxis(layoutSt) {
-    return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.AIF].indexOf(layoutSt) < 0;
+    return [_list_layout.LIST_LAYOUT.UVVIS, _list_layout.LIST_LAYOUT.HPLC_UVVIS, _list_layout.LIST_LAYOUT.TGA, _list_layout.LIST_LAYOUT.DSC, _list_layout.LIST_LAYOUT.XRD, _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY, _list_layout.LIST_LAYOUT.CDS, _list_layout.LIST_LAYOUT.SEC, _list_layout.LIST_LAYOUT.AIF].indexOf(layoutSt) < 0;
   }
   create(_ref) {
     let {

diff --git a/dist/components/panel/info.js b/dist/components/panel/info.js
@@ -16,6 +16,7 @@ var _material = require("@mui/material");
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _styles = require("@mui/styles");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _meta = require("../../actions/meta");
 /* eslint-disable no-mixed-operators, react/function-component-definition,
 react/require-default-props, max-len */
 
@@ -163,7 +164,61 @@ SECData.propTypes = {
   detector: _propTypes.default.object.isRequired,
   secData: _propTypes.default.object.isRequired
 };
-const InfoPanel = _ref2 => {
+const DSCData = _ref2 => {
+  let {
+    classes,
+    layout,
+    dscMetaData,
+    updateAction
+  } = _ref2;
+  if (_format.default.isDSCLayout(layout) && dscMetaData !== undefined) {
+    const {
+      meltingPoint,
+      tg
+    } = dscMetaData;
+    const onChange = e => {
+      const {
+        name,
+        value
+      } = e.target;
+      const dataToUpdate = {
+        meltingPoint,
+        tg
+      };
+      dataToUpdate[name] = value;
+      updateAction(dataToUpdate);
+    };
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
+    }, "Melting Point: "), /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      name: "meltingPoint",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      value: meltingPoint,
+      onChange: onChange
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
+    }, "TG: "), /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      name: "tg",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      value: tg,
+      onChange: onChange
+    })));
+  }
+  return null;
+};
+DSCData.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  layout: _propTypes.default.string.isRequired,
+  dscMetaData: _propTypes.default.object.isRequired,
+  updateAction: _propTypes.default.func.isRequired
+};
+const InfoPanel = _ref3 => {
   let {
     classes,
     expand,
@@ -180,15 +235,20 @@ const InfoPanel = _ref2 => {
     onExapnd,
     canChangeDescription,
     onDescriptionChanged,
-    detectorSt
-  } = _ref2;
+    detectorSt,
+    metaSt,
+    updateDSCMetaDataAct
+  } = _ref3;
   if (!feature) return null;
   const {
     title,
     observeFrequency,
     solventName,
     secData
   } = feature;
+  const {
+    dscMetaData
+  } = metaSt;
   const {
     curveIdx
   } = curveSt;
@@ -274,7 +334,12 @@ const InfoPanel = _ref2 => {
     className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
   }, "Area under curve (AUC):"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, aucValue(integration))) : null), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
+  }, aucValue(integration))) : null, /*#__PURE__*/_react.default.createElement(DSCData, {
+    classes: classes,
+    layout: layoutSt,
+    dscMetaData: dscMetaData,
+    updateAction: updateDSCMetaDataAct
+  })), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
     className: (0, _classnames.default)(classes.quill, 'card-sv-quill'),
     value: descriptions,
     modules: {
@@ -297,9 +362,12 @@ const mapStateToProps = (state, props) => (
   simulationSt: state.simulation,
   shiftSt: state.shift,
   curveSt: state.curve,
-  detectorSt: state.detector
+  detectorSt: state.detector,
+  metaSt: state.meta
 });
-const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({}, dispatch);
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  updateDSCMetaDataAct: _meta.updateDSCMetaData
+}, dispatch);
 InfoPanel.propTypes = {
   classes: _propTypes.default.object.isRequired,
   expand: _propTypes.default.bool.isRequired,
@@ -316,7 +384,9 @@ InfoPanel.propTypes = {
   canChangeDescription: _propTypes.default.bool.isRequired,
   onDescriptionChanged: _propTypes.default.func,
   theoryMass: _propTypes.default.string,
-  detectorSt: _propTypes.default.object.isRequired
+  detectorSt: _propTypes.default.object.isRequired,
+  metaSt: _propTypes.default.object.isRequired,
+  updateDSCMetaDataAct: _propTypes.default.func.isRequired
 };
 var _default = exports.default = (0, _reactRedux.connect)(
 // eslint-disable-line

diff --git a/dist/constants/action_type.js b/dist/constants/action_type.js
@@ -106,7 +106,9 @@ const MULTIPLICITY = exports.MULTIPLICITY = {
 };
 const META = exports.META = {
   UPDATE_PEAKS: 'META_UPDATE_PEAKS',
-  UPDATE_PEAKS_RDC: 'META_UPDATE_PEAKS_RDC'
+  UPDATE_PEAKS_RDC: 'META_UPDATE_PEAKS_RDC',
+  UPDATE_META_DATA: 'UPDATE_META_DATA',
+  UPDATE_META_DATA_RDC: 'UPDATE_META_DATA_RDC'
 };
 const JCAMP = exports.JCAMP = {
   ADD_OTHERS: 'JCAMP_ADD_OTHERS',

diff --git a/dist/constants/list_layout.js b/dist/constants/list_layout.js
@@ -25,5 +25,6 @@ const LIST_LAYOUT = exports.LIST_LAYOUT = {
   AIF: 'AIF',
   EMISSIONS: 'Emissions',
   DLS_ACF: 'DLS ACF',
-  DLS_INTENSITY: 'DLS intensity'
+  DLS_INTENSITY: 'DLS intensity',
+  DSC: 'DIFFERENTIAL SCANNING CALORIMETRY'
 };
diff --git a/dist/helpers/cfg.js b/dist/helpers/cfg.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _format = _interopRequireDefault(require("./format"));
-const btnCmdAnaViewer = layoutSt => _format.default.isMsLayout(layoutSt) || _format.default.isRamanLayout(layoutSt) || _format.default.is19FLayout(layoutSt) || _format.default.isUvVisLayout(layoutSt) || _format.default.isHplcUvVisLayout(layoutSt) || _format.default.isTGALayout(layoutSt) || _format.default.isXRDLayout(layoutSt) || _format.default.is31PLayout(layoutSt) || _format.default.is15NLayout(layoutSt) || _format.default.is29SiLayout(layoutSt) || _format.default.isCyclicVoltaLayout(layoutSt) || _format.default.isCDSLayout(layoutSt) || _format.default.isSECLayout(layoutSt);
+const btnCmdAnaViewer = layoutSt => _format.default.isMsLayout(layoutSt) || _format.default.isRamanLayout(layoutSt) || _format.default.is19FLayout(layoutSt) || _format.default.isUvVisLayout(layoutSt) || _format.default.isHplcUvVisLayout(layoutSt) || _format.default.isTGALayout(layoutSt) || _format.default.isDSCLayout(layoutSt) || _format.default.isXRDLayout(layoutSt) || _format.default.is31PLayout(layoutSt) || _format.default.is15NLayout(layoutSt) || _format.default.is29SiLayout(layoutSt) || _format.default.isCyclicVoltaLayout(layoutSt) || _format.default.isCDSLayout(layoutSt) || _format.default.isSECLayout(layoutSt);
 const hideCmdAnaViewer = () => false;
 const btnCmdAddPeak = layoutSt => _format.default.isMsLayout(layoutSt);
 const btnCmdRmPeak = layoutSt => _format.default.isMsLayout(layoutSt);

diff --git a/dist/helpers/chem.js b/dist/helpers/chem.js
@@ -350,6 +350,9 @@ const readLayout = jcamp => {
     if (dataType.includes('THERMOGRAVIMETRIC ANALYSIS')) {
       return _list_layout.LIST_LAYOUT.TGA;
     }
+    if (dataType.includes('DIFFERENTIAL SCANNING CALORIMETRY')) {
+      return _list_layout.LIST_LAYOUT.DSC;
+    }
     if (dataType.includes('X-RAY DIFFRACTION')) {
       return _list_layout.LIST_LAYOUT.XRD;
     }
@@ -514,7 +517,8 @@ const buildPeakFeature = function (jcamp, layout, peakUp, s, thresRef) {
     solventName: info['.SOLVENTNAME'],
     upperThres,
     lowerThres,
-    volammetryData: extractVoltammetryData(jcamp)
+    volammetryData: extractVoltammetryData(jcamp),
+    scanRate: +info.$CSSCANRATE || 0.1
   }, s);
 };
 const maxArray = arr => {
@@ -683,6 +687,7 @@ const extrFeaturesNi = (jcamp, layout, peakUp, spectra) => {
     nfs.simulation = buildSimFeature(jcamp);
     return nfs;
   }
+
   // workaround for legacy design
   const features = jcamp.spectra.map(s => {
     const thresRef = calcThresRef(s, peakUp);
@@ -768,7 +773,6 @@ const extrFeaturesCylicVolta = (jcamp, layout, peakUp) => {
         mw: MW
       };
     }
-    // const detector = Format.isSECLayout(layout) && jcamp.info.$DETECTOR ? jcamp.info.$DETECTOR : '';
     return Object.assign({}, base, cpo, bnd, {
       detector,
       secData
@@ -818,7 +822,7 @@ const extractTemperature = jcamp => {
 const ExtractJcamp = source => {
   const jcamp = _jcampconverter.default.convert(source, {
     xy: true,
-    keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR|MN|MW|D|MP)/ // eslint-disable-line
+    keepRecordsRegExp: /(\$CSTHRESHOLD|\$CSSCANAUTOTARGET|\$CSSCANEDITTARGET|\$CSSCANCOUNT|\$CSSOLVENTNAME|\$CSSOLVENTVALUE|\$CSSOLVENTX|\$CSCATEGORY|\$CSITAREA|\$CSITFACTOR|\$OBSERVEDINTEGRALS|\$OBSERVEDMULTIPLETS|\$OBSERVEDMULTIPLETSPEAKS|\.SOLVENTNAME|\.OBSERVEFREQUENCY|\$CSSIMULATIONPEAKS|\$CSUPPERTHRESHOLD|\$CSLOWERTHRESHOLD|\$CSCYCLICVOLTAMMETRYDATA|UNITS|SYMBOL|CSAUTOMETADATA|\$DETECTOR|MN|MW|D|MP|MELTINGPOINT|TG|\$CSSCANRATE|\$CSSPECTRUMDIRECTION)/ // eslint-disable-line
   });
   const layout = readLayout(jcamp);
   const peakUp = !_format.default.isIrLayout(layout);
@@ -839,6 +843,22 @@ const ExtractJcamp = source => {
     features = extrFeaturesCylicVolta(jcamp, layout, peakUp);
   } else {
     features = extrFeaturesNi(jcamp, layout, peakUp, spectra);
+    if (_format.default.isDSCLayout(layout)) {
+      const {
+        info
+      } = jcamp;
+      const {
+        MELTINGPOINT,
+        TG
+      } = info;
+      const dscMetaData = {
+        meltingPoint: MELTINGPOINT,
+        tg: TG
+      };
+      features = Object.assign({}, features, {
+        dscMetaData
+      });
+    }
   }
   // const features = Format.isMsLayout(layout)
   //   ? extrFeaturesMs(jcamp, layout, peakUp)

diff --git a/dist/helpers/compass.js b/dist/helpers/compass.js
@@ -97,7 +97,7 @@ const MouseMove = (event, focus) => {
           dValue = (0, _chem.Convert2DValue)(pt.x).toExponential(2);
         }
         focus.root.select('.cursor-txt-hz').attr('transform', `translate(${tx},${ty - 30})`).text(`2Theta: ${pt.x.toExponential(2)}, d-value: ${dValue}`);
-      } else if (_format.default.isTGALayout(layout)) {
+      } else if (_format.default.isTGALayout(layout) || _format.default.isDSCLayout(layout)) {
         focus.root.select('.cursor-txt').attr('transform', `translate(${tx},${10})`).text(`X: ${pt.x.toFixed(3)}, Y: ${pt.y.toFixed(3)}`);
       } else {
         focus.root.select('.cursor-txt').attr('transform', `translate(${tx},${10})`).text(pt.x.toFixed(3));