fix: fixed info panel for CV layout (#155)

ComPlat · Sep 22, 2023 · c3bd7d2 · c3bd7d2
1 parent 0350482
commit c3bd7d2
Show file tree

Hide file tree

Showing 18 changed files with 2,245 additions and 1,902 deletions.
diff --git a/dist/components/cmd_bar/common.js b/dist/components/cmd_bar/common.js
@@ -86,6 +86,14 @@ const commonStyle = {
   },
   selectInput: {
     height: 30
+  },
+  txtLabelBottomInput: {
+    fontFamily: 'Helvetica',
+    backgroundColor: 'white',
+    fontSize: 12,
+    margin: '22% 0 0 7px',
+    padding: '0 10px 0 10px',
+    transform: 'scale(0.75)'
   }
 };
 exports.commonStyle = commonStyle;

diff --git a/dist/components/cmd_bar/r03_threshold.js b/dist/components/cmd_bar/r03_threshold.js
@@ -12,6 +12,7 @@ var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _core = require("@material-ui/core");
 var _styles = require("@material-ui/core/styles");
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 var _CloudDoneOutlined = _interopRequireDefault(require("@material-ui/icons/CloudDoneOutlined"));
@@ -42,7 +43,9 @@ const setThreshold = (classes, thresVal, updateThresholdValueAct) => {
       updateThresholdValueAct(e.target.value);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  return /*#__PURE__*/_react.default.createElement(_core.FormControl, {
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
     className: classes.field,
     id: "outlined-name",
     placeholder: "N.A.",
@@ -56,14 +59,13 @@ const setThreshold = (classes, thresVal, updateThresholdValueAct) => {
         min: 0.01
       }
     },
-    label: /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.txtLabel, 'txtfield-sv-bar-label')
-    }, "Threshold"),
     onChange: onChange,
     onBlur: onBlur,
     onKeyPress: onEnterPress,
     variant: "outlined"
-  });
+  }), /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
+    className: (0, _classnames.default)(classes.txtLabelBottomInput)
+  }, "Threshold"));
 };
 const restoreIcon = (classes, hasEdit, isEdit) => hasEdit && isEdit ? /*#__PURE__*/_react.default.createElement(_HowToRegOutlined.default, {
   className: classes.icon

diff --git a/dist/components/panel/compare.js b/dist/components/panel/compare.js
@@ -12,8 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _core = require("@material-ui/core");
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _HighlightOff = _interopRequireDefault(require("@material-ui/icons/HighlightOff"));
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
@@ -218,14 +217,14 @@ const ComparePanel = _ref2 => {
     rmOthersOneAct,
     toggleShowAct
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_ExpansionPanel.default, {
+  return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase ExpansionPanel performance
-  }, /*#__PURE__*/_react.default.createElement(_ExpansionPanelSummary.default, {
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
     className: (0, _classnames.default)(classes.panelSummary)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {

diff --git a/dist/components/panel/cyclic_voltamery_data.js b/dist/components/panel/cyclic_voltamery_data.js
@@ -46,7 +46,7 @@ const styles = () => ({
   },
   table: {
     width: '100%',
-    wordWrap: 'break-all',
+    overflowWrap: 'anywhere',
     fontSize: '14px !important'
   },
   td: {
@@ -137,13 +137,13 @@ const CyclicVoltammetryPanel = _ref => {
     }
   };
   const getDelta = data => {
-    return data.max && data.min ? (0, _chem.GetCyclicVoltaPeakSeparate)(data.max.x, data.min.x) : 'undefined';
+    return data.max && data.min ? (0, _chem.GetCyclicVoltaPeakSeparate)(data.max.x, data.min.x).toFixed(5) : 'undefined';
   };
   const getRatio = (feature, data) => {
     const featureData = feature.data[0];
     const idx = featureData.x.indexOf(feature.maxX);
     const y_pecker = data.pecker ? data.pecker.y : featureData.y[idx];
-    return data.max && data.min ? (0, _chem.GetCyclicVoltaRatio)(data.max.y, data.min.y, y_pecker).toFixed(8) : 'undefined';
+    return data.max && data.min ? (0, _chem.GetCyclicVoltaRatio)(data.max.y, data.min.y, y_pecker).toFixed(5) : 'undefined';
   };
   const rows = list.map((o, idx) => ({
     idx,
@@ -159,7 +159,7 @@ const CyclicVoltammetryPanel = _ref => {
       jcampIdx
     })
   }));
-  return /*#__PURE__*/_react.default.createElement(_core.ExpansionPanel, null, /*#__PURE__*/_react.default.createElement(_core.ExpansionPanelSummary, {
+  return /*#__PURE__*/_react.default.createElement(_core.Accordion, null, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
     className: (0, _classnames.default)(classes.panelSummary)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {

diff --git a/dist/components/panel/graph_selection.js b/dist/components/panel/graph_selection.js
@@ -39,13 +39,17 @@ const styles = () => ({
     backgroundColor: '#fff',
     fontSize: '0.8em',
     margin: '0',
-    padding: '10px 2px 2px 10px'
+    padding: '10px 2px 2px 10px',
+    maxWidth: '95%',
+    overflowWrap: 'anywhere'
   },
   curveSelected: {
     backgroundColor: '#2196f3',
     fontSize: '0.8em',
     color: '#fff',
-    padding: '10px 2px 2px 10px'
+    padding: '10px 2px 2px 10px',
+    maxWidth: '95%',
+    overflowWrap: 'anywhere'
   }
 });
 const GraphSelectionPanel = _ref => {

diff --git a/dist/components/panel/index.js b/dist/components/panel/index.js
@@ -20,7 +20,7 @@ var _graph_selection = _interopRequireDefault(require("./graph_selection"));
 var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 /* eslint-disable react/prop-types, react/require-default-props */
 
-const theme = (0, _styles.createMuiTheme)({
+const theme = (0, _styles.createTheme)({
   typography: {
     useNextVariants: true
   }

diff --git a/dist/components/panel/info.js b/dist/components/panel/info.js
@@ -12,8 +12,7 @@ var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _reactSvgFileZoomPan = _interopRequireDefault(require("@complat/react-svg-file-zoom-pan"));
 var _reactQuill = _interopRequireDefault(require("react-quill"));
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _core = require("@material-ui/core");
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
@@ -155,14 +154,14 @@ const InfoPanel = _ref => {
     originStack = integration.originStack; // eslint-disable-line
   }
 
-  return /*#__PURE__*/_react.default.createElement(_ExpansionPanel.default, {
+  return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase ExpansionPanel performance
-  }, /*#__PURE__*/_react.default.createElement(_ExpansionPanelSummary.default, {
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
     className: (0, _classnames.default)(classes.panelSummary)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {

diff --git a/dist/components/panel/multiplicity.js b/dist/components/panel/multiplicity.js
@@ -10,8 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _core = require("@material-ui/core");
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
@@ -248,14 +247,14 @@ const MultiplicityPanel = _ref => {
     resetMpyOneAct
   } = _ref;
   const digits = 4;
-  return /*#__PURE__*/_react.default.createElement(_ExpansionPanel.default, {
+  return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase ExpansionPanel performance
-  }, /*#__PURE__*/_react.default.createElement(_ExpansionPanelSummary.default, {
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
     className: (0, _classnames.default)(classes.panelSummary)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@complat/react-spectra-editor",
-  "version": "1.0.0-rc16",
+  "version": "1.0.0-rc17.beta-2",
   "description": "An editor to View and Edit Chemical Spectra data (NMR, IR and MS, CV, UIVIS, XRD).",
   "repository": {
     "type": "git",
@@ -34,7 +34,6 @@
     "react-dropzone": "^8.0.3",
     "react-quill": "^2.0.0",
     "react-redux": "^7.2.0",
-    "react-svg-file-zoom-pan": "^1.0.5",
     "react-svg-inline": "^2.1.1",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",

diff --git a/src/components/cmd_bar/common.js b/src/components/cmd_bar/common.js
@@ -81,6 +81,14 @@ const commonStyle = {
   selectInput: {
     height: 30,
   },
+  txtLabelBottomInput: {
+    fontFamily: 'Helvetica',
+    backgroundColor: 'white',
+    fontSize: 12,
+    margin: '22% 0 0 7px',
+    padding: '0 10px 0 10px',
+    transform: 'scale(0.75)',
+  },
 };
 
 const focusStyle = (criteria, cls) => (criteria ? [cls.btnHt] : []);

diff --git a/src/components/cmd_bar/r03_threshold.js b/src/components/cmd_bar/r03_threshold.js
@@ -8,6 +8,7 @@ import { bindActionCreators } from 'redux';
 
 import TextField from '@material-ui/core/TextField';
 import InputAdornment from '@material-ui/core/InputAdornment';
+import { FormControl, InputLabel } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import CloudDoneOutlinedIcon from '@material-ui/icons/CloudDoneOutlined';
@@ -53,24 +54,26 @@ const setThreshold = (
   };
 
   return (
-    <TextField
-      className={classes.field}
-      id="outlined-name"
-      placeholder="N.A."
-      type="number"
-      value={thresVal || 0.01}
-      margin="none"
-      InputProps={{
-        endAdornment: txtPercent(),
-        className: classNames(classes.txtInput, 'txtfield-sv-bar-input'),
-        inputProps: { min: 0.01 },
-      }}
-      label={<span className={classNames(classes.txtLabel, 'txtfield-sv-bar-label')}>Threshold</span>}
-      onChange={onChange}
-      onBlur={onBlur}
-      onKeyPress={onEnterPress}
-      variant="outlined"
-    />
+    <FormControl variant="outlined">
+      <TextField
+        className={classes.field}
+        id="outlined-name"
+        placeholder="N.A."
+        type="number"
+        value={thresVal || 0.01}
+        margin="none"
+        InputProps={{
+          endAdornment: txtPercent(),
+          className: classNames(classes.txtInput, 'txtfield-sv-bar-input'),
+          inputProps: { min: 0.01 },
+        }}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyPress={onEnterPress}
+        variant="outlined"
+      />
+      <InputLabel className={classNames(classes.txtLabelBottomInput)}>Threshold</InputLabel>
+    </FormControl>
   );
 };
 

diff --git a/src/components/panel/compare.js b/src/components/panel/compare.js
@@ -7,8 +7,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Dropzone from 'react-dropzone';
 
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import {
+  Accordion, AccordionSummary,
+} from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import Table from '@material-ui/core/Table';
@@ -237,13 +238,13 @@ const ComparePanel = ({
   classes, expand, onExapnd, jcampSt,
   rmOthersOneAct, toggleShowAct,
 }) => (
-  <ExpansionPanel
+  <Accordion
     expanded={expand}
     onChange={onExapnd}
     className={classNames(classes.panel)}
     TransitionProps={{ unmountOnExit: true }} // increase ExpansionPanel performance
   >
-    <ExpansionPanelSummary
+    <AccordionSummary
       expandIcon={<ExpandMoreIcon />}
       className={classNames(classes.panelSummary)}
     >
@@ -252,15 +253,15 @@ const ComparePanel = ({
           Spectra Comparisons
         </span>
       </Typography>
-    </ExpansionPanelSummary>
+    </AccordionSummary>
     <Divider />
     { inputOthers(classes, jcampSt) }
     <div className={classNames(classes.panelDetail)}>
       {
         compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct)
       }
     </div>
-  </ExpansionPanel>
+  </Accordion>
 );
 
 const mapStateToProps = (state, props) => ( // eslint-disable-line

diff --git a/src/components/panel/cyclic_voltamery_data.js b/src/components/panel/cyclic_voltamery_data.js
@@ -18,7 +18,7 @@ import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import {
-  ExpansionPanel, ExpansionPanelSummary, Table, TableHead, TableBody, TableCell, TableRow,
+  Accordion, AccordionSummary, Table, TableHead, TableBody, TableCell, TableRow,
 } from '@material-ui/core';
 import {
   addNewCylicVoltaPairPeak, setWorkWithMaxPeak, selectPairPeak, removeCylicVoltaPairPeak,
@@ -43,7 +43,7 @@ const styles = () => ({
   },
   table: {
     width: '100%',
-    wordWrap: 'break-all',
+    overflowWrap: 'anywhere',
     fontSize: '14px !important',
   },
   td: {
@@ -120,14 +120,14 @@ const CyclicVoltammetryPanel = ({
   };
 
   const getDelta = (data) => {
-    return (data.max && data.min) ? GetCyclicVoltaPeakSeparate(data.max.x, data.min.x) : 'undefined';
+    return (data.max && data.min) ? GetCyclicVoltaPeakSeparate(data.max.x, data.min.x).toFixed(5) : 'undefined';
   };
 
   const getRatio = (feature, data) => {
     const featureData = feature.data[0];
     const idx = featureData.x.indexOf(feature.maxX);
     const y_pecker = data.pecker ? data.pecker.y : featureData.y[idx];
-    return (data.max && data.min) ? GetCyclicVoltaRatio(data.max.y, data.min.y, y_pecker).toFixed(8) : 'undefined';
+    return (data.max && data.min) ? GetCyclicVoltaRatio(data.max.y, data.min.y, y_pecker).toFixed(5) : 'undefined';
   };
 
   const rows = list.map((o, idx) => (
@@ -145,8 +145,8 @@ const CyclicVoltammetryPanel = ({
   ));
 
   return (
-    <ExpansionPanel>
-      <ExpansionPanelSummary
+    <Accordion>
+      <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         className={classNames(classes.panelSummary)}
       >
@@ -155,7 +155,7 @@ const CyclicVoltammetryPanel = ({
           Voltammetry data
         </span>
         </Typography>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
       <Divider />
       <Table className={classes.table}>
         <TableHead>
@@ -301,7 +301,7 @@ https://doi.org/10.1021/ac60242a030</i>
           </span>
         </Tooltip>
       </div>
-    </ExpansionPanel>
+    </Accordion>
   );
 };