Merge branch 'master' into owner-module

OpenChemistry · Nov 25, 2019 · cda7f8e · cda7f8e
2 parents 1d6e0ee + 269f220
commit cda7f8e
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 44 deletions.
diff --git a/src/components/calculation/index.js b/src/components/calculation/index.js
@@ -123,10 +123,10 @@ class Calculation extends Component {
       moleculeProperties.push({label: 'Mass', value: molecule.properties.mass.toFixed(2)});
     }
     if (has(molecule, 'inchi')) {
-      moleculeProperties.push({label: 'Inchi', value: molecule.inchi});
+      moleculeProperties.push({label: 'InChi', value: molecule.inchi});
     }
     if (has(molecule, 'smiles')) {
-      moleculeProperties.push({label: 'Smiles', value: molecule.smiles});
+      moleculeProperties.push({label: 'SMILES', value: molecule.smiles});
     }
 
     const moleculeSection = {

diff --git a/src/components/calculations.js b/src/components/calculations.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { has } from 'lodash-es';
+import { has, filter, eq } from 'lodash-es';
 import { withStyles } from '@material-ui/core';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -52,7 +52,10 @@ class Calculations extends Component {
                 const title = this.getName(calculation);
                 const image = `${window.location.origin}/api/v1/molecules/${calculation.moleculeId}/svg`;
                 const pending = has(calculation, 'properties.pending');
-                const properties = getCalculationProperties(calculation);
+                let properties = getCalculationProperties(calculation);
+                properties = filter(properties, function(obj) {
+                  return !eq(obj.label, 'Version');
+                  });
 
                 return (
                   <Grid key={calculation._id} item xs={12} sm={6} md={4} lg={3}>

diff --git a/src/components/molecule.js b/src/components/molecule.js
@@ -90,10 +90,10 @@ class Molecule extends Component {
       moleculeProperties.push({label: 'Mass', value: molecule.properties.mass.toFixed(2)});
     }
     if (has(molecule, 'inchi')) {
-      moleculeProperties.push({label: 'Inchi', value: molecule.inchi});
+      moleculeProperties.push({label: 'InChi', value: molecule.inchi});
     }
     if (has(molecule, 'smiles')) {
-      moleculeProperties.push({label: 'Smiles', value: molecule.smiles});
+      moleculeProperties.push({label: 'SMILES', value: molecule.smiles});
     }
 
     const moleculeSection = {

diff --git a/src/components/notebook.js b/src/components/notebook.js
@@ -2,15 +2,30 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Iframe from 'react-iframe'
 
-import Typography from '@material-ui/core/Typography';
+import { Typography, withStyles } from '@material-ui/core';
 
 import PageHead from './page-head';
 import PageBody from './page-body';
 
-export default class Notebook extends Component {
+const styles = () => ({
+  iframe: {
+    border: 0,
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width:'100%',
+    height:'100%'
+  },
+  container: {
+    overflow: 'hidden',
+    position: 'relative',
+    paddingTop: '100%'
+  }
+});
 
+class Notebook extends Component {
    render = () => {
-    const {fileId} = this.props;
+    const { fileId, classes } = this.props;
     const baseUrl =  `${window.location.origin}/api/v1`;
     return (
       <div>
@@ -20,10 +35,10 @@ export default class Notebook extends Component {
           </Typography>
         </PageHead>
         <PageBody>
-          <Iframe url={`${baseUrl}/notebooks/${fileId}/html`}
-            width="100%"
-            height="60rem"
-          />
+        <div className={classes.container}>
+          <Iframe id='iframe' url={`${baseUrl}/notebooks/${fileId}/html`}
+          className={classes.iframe}/>
+        </div>
         </PageBody>
       </div>
     );
@@ -39,3 +54,4 @@ Notebook.defaultProps = {
   fileId: null,
 }
 
+export default withStyles(styles)(Notebook)
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
@@ -71,7 +71,7 @@ class SideBar extends Component {
         <MenuItem
           dense
           style={style.menu}
-          onClick={() => pushRoute('/molecules?limit=16&offset=0&sort=_id&sortdir=-1&sortIndex=0') }
+          onClick={() => pushRoute('/molecules') }
         >
           <GroupIcon color="primary" />&nbsp;
           <Typography color="inherit" variant="subheading">Molecules</Typography>
@@ -80,7 +80,7 @@ class SideBar extends Component {
         {userId
           ? <MenuItem
             style={style.submenu}
-            onClick={() => pushRoute('/user/' + userId + '/molecules?limit=16&offset=0&sort=_id&sortdir=-1&sortIndex=0') }
+            onClick={() => pushRoute('/user/' + userId + '/molecules') }
           >
             <GroupIcon style={style.subicon} color="primary" />&nbsp;
             <Typography color="inherit" variant="subtitle2">My Molecules</Typography>

diff --git a/src/containers/calculations.js b/src/containers/calculations.js
@@ -5,7 +5,7 @@ import { push } from 'connected-react-router';
 import { selectors } from '@openchemistry/redux'
 import { calculations, molecules } from '@openchemistry/redux'
 
-import { isNil } from 'lodash-es';
+import { isNil, isUndefined } from 'lodash-es';
 
 import PaginationSort from '../components/pagination-sort';
 import Calculations from '../components/calculations';
@@ -35,31 +35,77 @@ const limitOptions = [
 const searchFields = [
   {name: 'formula', type: 'text', label: 'Formula', initialValue: ''},
   {name: 'name', type: 'text', label: 'Name', initialValue: ''},
-  {name: 'inchi', type: 'text', label: 'Inchi', initialValue: ''},
-  {name: 'inchikey', type: 'text', label: 'Inchi Key', initialValue: ''},
-  {name: 'smiles', type: 'text', label: 'Smiles', initialValue: ''}
+  {name: 'inchi', type: 'text', label: 'InChi', initialValue: ''},
+  {name: 'inchikey', type: 'text', label: 'InChi Key', initialValue: ''},
+  {name: 'smiles', type: 'text', label: 'SMILES', initialValue: ''}
 ];
 
 class CalculationsContainer extends Component {
 
   constructor(props) {
     super(props);
+    const params = new URLSearchParams(props.location.search);
     this.state = {
-      sortIndex: 0,
-      paginationOptions: { limit: 16, offset: 0, sort: '_id', sortdir: -1 },
-      searchOptions: {}
+      sortIndex: params.get('sortIndex') || 0,
+      paginationOptions: {
+        limit: params.get('limit') || 16,
+        offset: params.get('offset') || 0,
+        sort: params.get('sort') ? params.get('sort').toString() : '_id',
+        sortdir: params.get('sortdir') || -1
+      },
+      searchOptions: {
+        formula: params.get('formula') || '',
+        name: params.get('name') || '',
+        inchi: params.get('inchi') || '',
+        inchikey: params.get('inchikey') || '',
+        smiles: params.get('smiles') || ''
+      }
     }
   }
 
   componentDidMount() {
-    const { paginationOptions } = this.state;
+    const { paginationOptions, searchOptions } = this.state;
     var creatorId = null;
     if (this.props.match.params.id) {
       creatorId = this.props.match.params.id;
     }
-    this.props.dispatch(calculations.loadCalculations({options: paginationOptions, loadMolecules: true, creatorId: creatorId}));
+    const options = {...paginationOptions, ...searchOptions}
+    this.props.dispatch(calculations.loadCalculations({options, loadMolecules: true, creatorId: creatorId}));
   }
 
+  componentDidUpdate(prevProps) {
+    const currSearch = this.props.location.search;
+    const prevSearch = prevProps.location.search;
+    const params = new URLSearchParams(currSearch);
+    const reload = (
+      this.props.history.action === 'POP' || params.get('offset') == 0);
+    if (currSearch !== prevSearch && reload) {
+      var offset = params.get('offset')
+      this.setState({
+        sortIndex: params.get('sortIndex') || 0,
+        paginationOptions: {
+          limit: params.get('limit') || 16,
+          offset: params.get('offset') || 0,
+          sort: params.get('sort') ? params.get('sort').toString() : '_id',
+          sortdir: params.get('sortdir') || -1
+        },
+        searchOptions: {
+          formula: params.get('formula') || '',
+          name: params.get('name') || '',
+          inchi: params.get('inchi') || '',
+          inchikey: params.get('inchikey') || '',
+          smiles: params.get('smiles') || ''
+        }
+      }, () => {
+        const options = {...this.state.paginationOptions, ...this.state.searchOptions};
+        var creatorId = null;
+        if (this.props.match.params.id) {
+          creatorId = this.props.match.params.id;
+        }
+        this.props.dispatch(calculations.loadCalculations({options, loadMolecules: true, creatorId}));
+      });
+    }
+  }
   onOpen = (id) => {
     this.props.dispatch(push(`/calculations/${id}?mo=homo`));
   }
@@ -113,7 +159,19 @@ class CalculationsContainer extends Component {
     if (this.props.match.params.id) {
       creatorId = this.props.match.params.id;
     }
+
+    const {sortIndex} = this.state;
+    const {sortdir, sort, limit, offset} = pagination;
+    for (let val in search) {
+      if (isUndefined(search[val])) {
+        search[val] = '';
+      }
+    }
+    const params = {sortIndex, sortdir, sort, limit, offset, ...search};
+    const query = new URLSearchParams(params).toString();
+
     this.props.dispatch(calculations.loadCalculations({options, loadMolecules: true, creatorId}));
+    this.props.dispatch(push({pathname:'/calculations', search:query}));
   }
 
   render() {

diff --git a/src/containers/molecules.js b/src/containers/molecules.js
@@ -5,7 +5,7 @@ import { push } from 'connected-react-router';
 import { selectors } from '@openchemistry/redux'
 import { molecules } from '@openchemistry/redux'
 
-import { has, isNil, isEqual } from 'lodash-es';
+import { has, isNil, isUndefined } from 'lodash-es';
 
 import PaginationSort from '../components/pagination-sort';
 import Molecules from '../components/molecules';
@@ -46,9 +46,9 @@ const limitOptions = [
 const searchFields = [
   {name: 'formula', type: 'text', label: 'Formula', initialValue: ''},
   {name: 'name', type: 'text', label: 'Name', initialValue: ''},
-  {name: 'inchi', type: 'text', label: 'Inchi', initialValue: ''},
-  {name: 'inchikey', type: 'text', label: 'Inchi Key', initialValue: ''},
-  {name: 'smiles', type: 'text', label: 'Smiles', initialValue: ''},
+  {name: 'inchi', type: 'text', label: 'InChi', initialValue: ''},
+  {name: 'inchikey', type: 'text', label: 'InChi Key', initialValue: ''},
+  {name: 'smiles', type: 'text', label: 'SMILES', initialValue: ''},
   {name: 'advanced', type: 'text', label: 'Advanced', initialValue: ''}
 ]
 
@@ -102,23 +102,32 @@ class MoleculesContainer extends Component {
     super(props);
     const params = new URLSearchParams(props.location.search);
     this.state = {
-      sortIndex: params.get('sortIndex'),
+      sortIndex: params.get('sortIndex') || 0,
       paginationOptions: {
-        limit: params.get('limit'),
-        offset: params.get('offset'),
-        sort: params.get('sort').toString(),
-        sortdir: params.get('sortdir')
+        limit: params.get('limit') || 16,
+        offset: params.get('offset') || 0,
+        sort: params.get('sort') ? params.get('sort').toString() : '_id',
+        sortdir: params.get('sortdir') || -1
       },
-      searchOptions: params.get('searchOptions')
+      searchOptions: {
+        formula: params.get('formula') || '',
+        name: params.get('name') || '',
+        inchi: params.get('inchi') || '',
+        inchikey: params.get('inchikey') || '',
+        smiles: params.get('smiles') || ''
+      }
     }
   }
 
   componentDidMount() {
-    const options = this.state.paginationOptions;
+    const { paginationOptions, searchOptions } = this.state;
     var creatorId = null;
     if (this.props.match.params.id) {
       creatorId = this.props.match.params.id;
     }
+    const options = {...paginationOptions, ...searchOptions}
+    Object.keys(options).forEach(
+      (key) => (options[key] == '') && delete options[key]);
     this.props.dispatch(molecules.loadMolecules({options, creatorId}));
   }
 
@@ -131,16 +140,24 @@ class MoleculesContainer extends Component {
     if (currSearch !== prevSearch && reload) {
       var offset = params.get('offset')
       this.setState({
-        sortIndex: params.get('sortIndex'),
+        sortIndex: params.get('sortIndex') || 0,
         paginationOptions: {
-          limit: params.get('limit'),
-          offset: offset,
-          sort: params.get('sort').toString(),
-          sortdir: params.get('sortdir')
+          limit: params.get('limit') || 16,
+          offset: params.get('offset') || 0,
+          sort: params.get('sort') ? params.get('sort').toString() : '_id',
+          sortdir: params.get('sortdir') || -1
         },
-        searchOptions: params.get('searchOptions')
+        searchOptions: {
+          formula: params.get('formula') || '',
+          name: params.get('name') || '',
+          inchi: params.get('inchi') || '',
+          inchikey: params.get('inchikey') || '',
+          smiles: params.get('smiles') || ''
+        }
       }, () => {
-        const options = this.state.paginationOptions;
+        const options = {...this.state.paginationOptions, ...this.state.searchOptions};
+        Object.keys(options).forEach(
+          (key) => (options[key] == '') && delete options[key]);
         var creatorId = null;
         if (this.props.match.params.id) {
           creatorId = this.props.match.params.id;
@@ -208,12 +225,19 @@ class MoleculesContainer extends Component {
     if (this.props.match.params.id) {
       creatorId = this.props.match.params.id;
     }
-    
+
     const {sortIndex} = this.state;
     const {sortdir, sort, limit, offset} = pagination;
-    const params = {sortIndex, sortdir, sort, limit, offset};
+    for (let val in search) {
+      if (isUndefined(search[val])) {
+        search[val] = '';
+      }
+    }
+    const params = {sortIndex, sortdir, sort, limit, offset, ...search};
     const query = new URLSearchParams(params).toString();
 
+    Object.keys(options).forEach(
+      (key) => (options[key] == '') && delete options[key]);
     this.props.dispatch(molecules.loadMolecules({options, creatorId}));
     this.props.dispatch(push({pathname:'/molecules', search:query}));
   }

diff --git a/src/utils/calculations.js b/src/utils/calculations.js
@@ -38,6 +38,9 @@ export const getCalculationProperties = (calculation) => {
   if (has(calculation, 'image.repository')) {
     properties.push({label: 'Code', value: formatCode(calculation.image.repository)});
   }
+  if (has(calculation, 'code.version')) {
+    properties.push({label: 'Version', value: calculation.code.version});
+  }
   if (has(calculation, 'input.parameters.task')) {
     properties.push({label: 'Type', value: formatTask(calculation.input.parameters.task)});
   }