Merge pull request #48 from kirstenwinther/master

Explain reaction search
SUNCAT-Center · Mar 21, 2019 · c6d8923 · c6d8923
2 parents 2310a39 + fb2aa9c
commit c6d8923
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 27 deletions.
diff --git a/app/components/About/styles.js b/app/components/About/styles.js
@@ -4,7 +4,6 @@ export const styles = (theme) => ({
     height: '150px',
   },
   paragraph: {
-    textIndent: '1em',
     marginBottom: 2 * theme.spacing.unit,
   },
   peopleList: {

diff --git a/app/containers/EnergiesPage/Input.js b/app/containers/EnergiesPage/Input.js
@@ -18,11 +18,10 @@ import Paper from 'material-ui/Paper';
 import { withStyles } from 'material-ui/styles';
 import Grid from 'material-ui/Grid';
 import { FormGroup } from 'material-ui/Form';
-import Tooltip from 'material-ui/Tooltip';
 
 import * as Scroll from 'react-scroll';
 
-import { MdSearch, MdChevronLeft, MdWarning } from 'react-icons/lib/md';
+import { MdSearch, MdWarning } from 'react-icons/lib/md';
 
 import cachios from 'cachios';
 import { newGraphQLRoot } from 'utils/constants';
@@ -267,20 +266,17 @@ class EnergiesPageInput extends React.Component { // eslint-disable-line react/p
   render() {
     return (
       <Paper className={this.props.classes.paper}>
-        <Grid container justify="flex-end" direction="row">
-          <Grid item>
-            <Tooltip title="Try free text search.">
-              <Button
-                onClick={this.props.toggleSimpleSearch}
-                className={this.props.classes.button}
-              >
-                <MdChevronLeft /> Simple Search
-            </Button>
-            </Tooltip>
-          </Grid>
-        </Grid>
         {this.props.dbError ? <div><MdWarning />Failed to contact database. </div> : null }
         <h2>Surface Reactions</h2>
+        <h3>Search for chemical reactions across all publications and datasets!</h3>
+        <div style={{ width: '55%', textAlign: 'justify' }}>
+          <div> A quick guide: </div>
+          <ul>
+            <li> Leave fields blank if you {"don't"} want to impose any restrictions. </li>
+            <li> For the <b>Reactants</b> and <b>Product</b> fields, choose the chemical species taking part in the left- and/or right hand side of the chemical reaction respectively. The phase of the molecules and elements can also be specified, such that {"'CO2gas'"} refers to CO<sub>2</sub> in the gas phase, whereas {"'CO2*'"} refers to CO<sub>2</sub> adsorbed on the surface. </li>
+            <li> In the <b>Surface</b> field, enter the (reduced) chemical composition of the surface, or a sum of elements that must be present, such as {"'Ag+'"} or {"'Ag+Sr'"}. </li>
+          </ul>
+        </div>
         <div className={this.props.classes.hint}>{this.state.resultCount}</div>
 
         <FormGroup row>
@@ -318,7 +314,6 @@ EnergiesPageInput.propTypes = {
   saveResultSize: PropTypes.func,
   saveSearch: PropTypes.func,
   submitSearch: PropTypes.func.isRequired,
-  toggleSimpleSearch: PropTypes.func,
   setDbError: PropTypes.func,
   saveSearchQuery: PropTypes.func,
 };

diff --git a/app/containers/EnergiesPage/MatchingReactions.js b/app/containers/EnergiesPage/MatchingReactions.js
@@ -232,9 +232,8 @@ class MatchingReactions extends React.Component { // eslint-disable-line react/p
             <Paper className={this.props.classes.paper}>
               <Grid container direction="row" justify="center">
                 <Grid item>
-                  <h2>Ooops! :-(</h2>
+                  <h2>No reaction energies found!</h2>
                   <div className={this.props.classes.emptyText}>
-                    No reaction energies found.
                     Here are a couple of things you could try.
                     <ul>
                       <li className={this.props.classes.li}>

diff --git a/app/containers/EnergiesPage/index.js b/app/containers/EnergiesPage/index.js
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { connect } from 'react-redux';
 import Script from 'react-load-script';
@@ -15,7 +14,6 @@ import Slide from 'material-ui/transitions/Slide';
 
 import * as actions from './actions';
 import EnergiesPageInput from './Input';
-import EnergiesPageSimpleInput from './SimpleInput';
 import MatchingReactions from './MatchingReactions';
 import { ReactionStructures } from './ReactionStructures';
 
@@ -38,11 +36,8 @@ export class EnergiesPage extends React.Component { // eslint-disable-line react
           <Script url="https://code.jquery.com/jquery-3.2.1.min.js" />
           <Script url="/static/ChemDoodleWeb.js" />
 
-          {this.props.simpleSearch ?
-            <EnergiesPageSimpleInput />
-            :
-            <EnergiesPageInput {...this.props} />
-        }
+          <EnergiesPageInput {...this.props} />
+
           <MatchingReactions />
           <ReactionStructures {...this.props} />
         </div>
@@ -52,8 +47,6 @@ export class EnergiesPage extends React.Component { // eslint-disable-line react
 }
 
 EnergiesPage.propTypes = {
-  simpleSearch: PropTypes.bool,
-
 };
 
 const mapStateToProps = (state) => ({