Merge pull request #173 from OpenChemistry/various-fixes

Various fixes

package.json

@@ -14,14 +14,14 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/lab": "^3.0.0-alpha.30",
-    "@openchemistry/girder-redux": "^0.0.34",
-    "@openchemistry/girder-client": "^0.0.25",
-    "@openchemistry/girder-ui": "^0.0.41",
-    "@openchemistry/molecule": "^0.4.32",
-    "@openchemistry/redux": "^0.3.30",
-    "@openchemistry/rest": "^0.3.32",
-    "@openchemistry/sagas": "^0.3.44",
-    "@openchemistry/utils": "^0.6.20",
+    "@openchemistry/girder-redux": "^0.0.36",
+    "@openchemistry/girder-client": "^0.0.27",
+    "@openchemistry/girder-ui": "^0.0.43",
+    "@openchemistry/molecule": "^0.4.35",
+    "@openchemistry/redux": "^0.3.32",
+    "@openchemistry/rest": "^0.3.34",
+    "@openchemistry/sagas": "^0.3.47",
+    "@openchemistry/utils": "^0.6.22",
     "connected-react-router": "^6.4.0",
     "core-js": "^2.6.5",
     "enumify": "^1.0.4",

src/components/calculation/index.js

@@ -37,7 +37,8 @@ const styles = theme => ({
   moleculeContainer: {
     height: 80 * theme.spacing.unit,
     width: '100%',
-    marginBottom: 2 * theme.spacing.unit
+    marginBottom: 2 * theme.spacing.unit,
+    overflow: 'visible'
   }
 });
 

src/components/download-selector/index.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { withStyles, Fab } from '@material-ui/core';
 import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
+import { isNil } from 'lodash-es';
 
 const styles = theme => ({
   root: {
@@ -24,7 +25,9 @@ const DownloadSelector = ({options, classes}) => {
   const [selectedOption, setSelectedOption] = useState(0);
 
   const handleSelect = (_event, selected) => {
-    setSelectedOption(selected);
+    if (!isNil(selected)) {
+      setSelectedOption(selected);
+    }
   }
 
   const { downloadUrl, fileName } = options[selectedOption];
@@ -33,7 +36,7 @@ const DownloadSelector = ({options, classes}) => {
     <div className={classes.root}>
       <ToggleButtonGroup exclusive value={selectedOption} onChange={handleSelect} className={classes.selectButtonGroup}>
         {options.map(({label}, i) => (
-          <ToggleButton value={i} className={classes.selectButton}>
+          <ToggleButton key={i} value={i} className={classes.selectButton}>
             {label}
           </ToggleButton>
         ))}

src/components/molecule.js

@@ -23,7 +23,8 @@ const styles = theme => ({
   moleculeContainer: {
     height: 80 * theme.spacing.unit,
     width: '100%',
-    marginBottom: 2 * theme.spacing.unit
+    marginBottom: 2 * theme.spacing.unit,
+    overflow: 'visible'
   }
 });
 

src/containers/calculation.js

@@ -23,27 +23,21 @@ class CalculationContainer extends Component {
     this.onOrbital = this.onOrbital.bind(this);
   }
 
-  componentWillMount() {
-    const { dispatch, id, mo } = this.props;
-    dispatch(calculations.loadCalculationById(id));
-    if (!isNil(mo)) {
-      dispatch(calculations.loadOrbital(id, mo));
-    }
-    this.fetchMolecule();
-  }
-
   componentDidMount() {
-    if (this.state.id && !this.props.cjson) {
-      this.props.dispatch(calculations.loadCalculationById(this.state.id));
+    const { dispatch, id, mo, cjson } = this.props;
 
+    if (!isNil(id)) {
+      dispatch(calculations.loadCalculationById(id));
     }
 
-    if (this.state.id && this.state.orbital) {
-        this.props.dispatch(calculations.loadOrbital(this.state.id, this.state.orbital));
+    if (!isNil(mo)) {
+      dispatch(calculations.loadOrbital(id, mo));
     }
+
+    this.fetchMolecule();
   }
 
-  componentWillUpdate() {
+  componentDidUpdate() {
     this.fetchMolecule();
   }