Show additional calc info and improve loading speed

app/components/About/index.js

@@ -47,17 +47,18 @@ class About extends React.Component { // eslint-disable-line react/prefer-statel
 
         <Paper className={this.props.classes.paper}>
           <h2>License</h2>
-          <img src={ccLogoBig} alt="ccLogoBig" />
           <div className={this.props.classes.text}>
             Except where otherwise noted, content on Catalysis-Hub is licensed under a
             {' '}
             <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>
 .
           </div>
+          <img src={ccLogoBig} alt="ccLogoBig" />
         </Paper>
 
         <Paper className={this.props.classes.paper}>
-          <h2>People</h2>
+          <h2>People and Contact</h2>
+          <div>The platform is developed at the SUNCAT Center for Interface Science and Catalysis, SLAC National Accelerator Laboratory, Stanford University. Contact information for the primary people involved is provided below. For technical support please contact postdoc Kirsten Winther at winther@stanford.edu.</div>
           <ul className={this.props.classes.peopleList}>
             {Object.keys(people).map((name, i) => (
               <li key={`person_${i}`}>

app/components/Apps/filteredApps.js

@@ -44,9 +44,17 @@ class FilteredApps extends React.Component { // eslint-disable-line react/prefer
                     elevation={0}
                   >
                     <Tooltip title={app.tooltip} placement="top">
-                      <h3>
-                        {getAppIcon(app.title)}
-                        {'\u00A0'}{app.title}</h3>
+                      {(app.title === 'Activity Maps' || app.title === 'Scaling Relations' || app.title === 'Pourbaix Diagrams') ?
+                        <h3>
+                          {getAppIcon(app.title)}
+                          {'\u00A0'}{app.title}{' (Beta) '}
+                        </h3>
+                        :
+                        <h3>
+                          {getAppIcon(app.title)}
+                          {'\u00A0'}{app.title}
+                        </h3>
+                      }
                     </Tooltip>
                     <div className={this.props.classes.appHint}>{app.tooltip} <MdChevronRight /></div>
                   </Paper>

app/components/Publications/index.js

@@ -82,115 +82,48 @@ class Publications extends React.Component { // eslint-disable-line react/prefer
     this.clickPublication = this.clickPublication.bind(this);
     this.loadPreviewCif = this.loadPreviewCif.bind(this);
     this.backToList = this.backToList.bind(this);
-
-    if (_.get(props, 'routeParams.pubId', '') !== '') {
-      const publicationQuery = {
-        ttl: 300,
-        query: `{publications(pubId: "${this.state.pubId}") {
-  edges {
-    node {
-      id
-      pubId
-      title
-      authors
-      pages
-      volume
-      journal
-      doi
-      pubtextsearch
-    }
-  }
-}}` };
-
-      axios(newGraphQLRoot,
-        {
-          method: 'post',
-          data: publicationQuery,
-        }).then((response) => {
-          this.setState({
-            reference: _.get(response,
-              'data.data.publications.edges[0].node',
-              {}),
-          });
-        });
-    }
   }
   componentDidMount() {
-    const mtimeQuery = `{systems(first:50, keyValuePairs: "~", jsonkey: "pub_id", distinct: true) {
-totalCount
-  edges {
-    node {
-      keyValuePairs
-      mtime
-    }
-  }
-}}`;
+    const yearQuery = '{publications { edges { node { year } } }}';
     axios.post(newGraphQLRoot, {
-      query: mtimeQuery,
+      query: yearQuery,
     })
-    .then((mtimeResponse) => {
-      const mtimes = mtimeResponse.data.data.systems.edges.map((n) => (n.node.mtime));
-      const sortedMtimes = mtimes.slice().sort((a, b) => b - a);
-      const systemPubIds = mtimeResponse.data.data.systems.edges.map((n) => (JSON.parse(n.node.keyValuePairs).pub_id));
-      let orderedPubIds = sortedMtimes.map((sortedMtime) => systemPubIds[mtimes.indexOf(sortedMtime)]);
-      orderedPubIds = Array.from(new Set(orderedPubIds));
-      const yearQuery = '{publications { edges { node { year } } }}';
-      axios.post(newGraphQLRoot, {
-        query: yearQuery,
-      })
-        .then((response) => {
-          let years = response.data.data.publications.edges.map((n) => n.node.year);
-          years = [...new Set(years)].sort().reverse().filter((x) => x !== null);
-          this.setState({
-            years,
-          });
-          years.map((year) => {
-            const query = `{publications (year: ${year}) { edges { node {  doi title year authors journal pages pubId pubtextsearch  } } }}`;
-            return axios.post(newGraphQLRoot, {
-              query,
-            })
-              .then((yearResponse) => {
-                let references = yearResponse.data.data.publications.edges
+      .then((response) => {
+        let years = response.data.data.publications.edges.map((n) => n.node.year);
+        years = [...new Set(years)].sort().reverse().filter((x) => x !== null);
+        this.setState({
+          years,
+        });
+        years.map((year) => {
+          const query = `{publications (year: ${year}, order: "-stime") { edges { node {  doi title year authors journal volume number pages pubId pubtextsearch  } } }}`;
+          return axios.post(newGraphQLRoot, {
+            query,
+          })
+            .then((yearResponse) => {
+              let references = yearResponse.data.data.publications.edges
                   .map((n) => (n.node));
-                references = [...new Set(references)];
-                const dois = yearResponse.data.data.publications.edges.map((n) => (n.node.doi));
-                const titles = yearResponse.data.data.publications.edges.map((n) => (n.node.title));
-                const pubIds = yearResponse.data.data.publications.edges.map((n) => (n.node.pubId));
-                const pubIndices = [];
-                orderedPubIds.map((orderedPubId) => {
-                  if (pubIds.includes(orderedPubId)) {
-                    pubIndices.push(pubIds.indexOf(orderedPubId));
-                  }
-                  return pubIndices;
-                });
-                pubIds.map((pubId, index) => {
-                  if (!orderedPubIds.includes(pubId)) {
-                    pubIndices.push(index);
-                  }
-                  return pubIndices;
-                });
-                const allReferences = this.state.references;
-                const allDois = this.state.dois;
-                const allTitles = this.state.titles;
-                const allPubIds = this.state.pubIds;
+              references = [...new Set(references)];
+              const dois = yearResponse.data.data.publications.edges.map((n) => (n.node.doi));
+              const titles = yearResponse.data.data.publications.edges.map((n) => (n.node.title));
 
-                allReferences[year] = pubIndices.map((p) => references[p]);
-                allDois[year] = pubIndices.map((p) => dois[p]);
-                allTitles[year] = pubIndices.map((p) => titles[p]);
-                allPubIds[year] = pubIndices.map((p) => pubIds[p]);
+              const allReferences = this.state.references;
+              const allDois = this.state.dois;
+              const allTitles = this.state.titles;
 
-                this.setState({
-                  references: allReferences,
-                  dois: allDois,
-                  titles: allTitles,
-                });
-              })
-              .catch(() => {
-              })
-            ;
-          });
+              allReferences[year] = references;
+              allDois[year] = dois;
+              allTitles[year] = titles;
+
+              this.setState({
+                references: allReferences,
+                dois: allDois,
+                titles: allTitles,
+              });
+            })
+            .catch(() => {
+            });
         });
-    });
+      });
   }
   backToList() {
     this.setState({
@@ -391,7 +324,6 @@ totalCount
                         if (!notFound.every((x) => x)) {
                           return null;
                         }
-
                         if (this.state.titles[year][j] !== null) {
                           return (
 

app/components/SingleStructureView/index.js

@@ -17,6 +17,7 @@ import {
 } from 'utils/functions';
 
 import GeometryCanvasWithOptions from 'components/GeometryCanvasWithOptions';
+import GraphQlbutton from 'components/GraphQlbutton';
 
 const initialState = {
   Formula: '',
@@ -39,10 +40,31 @@ class SingleStructureView extends React.Component { // eslint-disable-line react
   constructor(props) {
     super(props);
     this.state = initialState;
+    this.state.printquery = `query{systems( uniqueId: "${this.props.selectedSystem.aseId}" ) {
+  edges {
+    node {
+      Formula
+      energy
+      numbers
+      initialMagmoms
+      magmoms
+      magmom
+      charges
+      momenta
+      calculator
+      keyValuePairs
+      calculatorParameters
+      publication {
+        title
+        authors
+        doi
+      }
+    }
+  }
+}}`;
   }
   render() {
     const energy = this.props.selectedSystem.energy || this.state.energy || 0.0;
-
     let x;
     let y;
     let z;
@@ -72,11 +94,11 @@ class SingleStructureView extends React.Component { // eslint-disable-line react
           <ul style={{ width: '50%' }}>
             <li>Formula: {this.props.selectedSystem.Formula}</li>
             <li>DFT Total Energy: {energy.toFixed(2)} eV</li>
+            {this.props.selectedSystem.energyCorrection !== 0 &&
+              <li> Energy correction: {this.props.selectedSystem.energyCorrection}</li>
+            }
             <li>DFT Code: {this.props.selectedSystem.DFTCode}</li>
             <li>DFT Functional: {this.props.selectedSystem.DFTFunctional}</li>
-            {_.isEmpty(this.props.selectedSystem.calculatorParameters) ? null :
-            <li> DFT parameters: {this.props.selectedSystem.calculatorParameters}</li>
-            }
             <li>Publication: {prettyPrintReference(this.props.selectedPublication)}</li>
             <div>
               {_.isEmpty(this.props.selectedPublication.doi) ? null :
@@ -98,6 +120,9 @@ class SingleStructureView extends React.Component { // eslint-disable-line react
                 View all reactions in dataset
                 </a>
             </li>
+            <li>
+               Open <GraphQlbutton query={this.state.printquery} newSchema /> to view calculational details.
+            </li>
           </ul>
         </div>
         }

app/containers/EnergiesPage/Input.js

@@ -191,6 +191,7 @@ class EnergiesPageInput extends React.Component { // eslint-disable-line react/p
         chemicalComposition
         reactionSystems {
           name
+          energyCorrection
           aseId
         }
       }
@@ -273,7 +274,7 @@ class EnergiesPageInput extends React.Component { // eslint-disable-line react/p
           <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> For the <b>Reactants</b> and <b>Products</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>

app/containers/EnergiesPage/MatchingReactions.js

@@ -129,13 +129,15 @@ class MatchingReactions extends React.Component { // eslint-disable-line react/p
       loading: true,
     });
     this.props.saveLoading(true);
-    let catappIds;
-    let catappNames;
+    let cathubIds;
+    let cathubNames;
+    let catenergyCorrections;
     if (typeof reaction.reactionSystems !== 'undefined' && reaction.reactionSystems !== null) {
-      catappIds = (reaction.reactionSystems.map((x) => x.aseId));
-      catappNames = (reaction.reactionSystems.map((x) => x.name));
+      cathubIds = (reaction.reactionSystems.map((x) => x.aseId));
+      cathubNames = (reaction.reactionSystems.map((x) => x.name));
+      catenergyCorrections = (reaction.reactionSystems.map((x) => x.energyCorrection));
     } else {
-      catappIds = {};
+      cathubIds = {};
       snackbarActions.open('Scroll down for detailed structure.');
     }
 
@@ -160,9 +162,10 @@ class MatchingReactions extends React.Component { // eslint-disable-line react/p
     });
 
     this.props.clearSystems();
-    catappIds.map((key, index) => {
+    cathubIds.map((key, index) => {
       let aseId = key;
-      const name = catappNames[index];
+      const name = cathubNames[index];
+      const energyCorrection = catenergyCorrections[index];
       if (typeof aseId === 'object') {
         aseId = aseId[1];
       }
@@ -189,6 +192,7 @@ class MatchingReactions extends React.Component { // eslint-disable-line react/p
         node.Facet = reaction.facet;
         node.publication = this.props.publication;
         node.aseId = aseId;
+        node.energyCorrection = energyCorrection;
         node.key = name;
         node.full_key = node.Formula;
         const ads = name.replace('star', ' @');