Added material id, material name, and button to enc in EntryView.

gui/src/components/Quantity.js

@@ -17,7 +17,10 @@ class Quantity extends React.Component {
     row: PropTypes.bool,
     column: PropTypes.bool,
     data: PropTypes.object,
-    quantity: PropTypes.string,
+    quantity: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func
+    ]),
     withClipboard: PropTypes.bool,
     ellipsisFront: PropTypes.bool
   }
@@ -79,8 +82,18 @@ class Quantity extends React.Component {
       valueClassName = `${valueClassName} ${classes.ellipsisFront}`
     }
 
+    let value
     if (!loading) {
-      const value = data && quantity && _.get(data, quantity)
+      if (typeof quantity === 'string') {
+        value = data && quantity && _.get(data, quantity)
+      } else {
+        try {
+          value = quantity(data)
+        } catch {
+          value = undefined
+        }
+      }
+
       if (children && children.length !== 0) {
         content = children
       } else if (value) {
@@ -95,12 +108,14 @@ class Quantity extends React.Component {
       }
     }
 
+    const useLabel = label || (typeof quantity === 'string' ? quantity : 'MISSING LABEL')
+
     if (row || column) {
       return <div className={row ? classes.row : classes.column}>{children}</div>
     } else {
       return (
         <div className={classes.root}>
-          <Typography noWrap classes={{root: classes.label}} variant="caption">{label || quantity}</Typography>
+          <Typography noWrap classes={{root: classes.label}} variant="caption">{useLabel}</Typography>
           <div className={classes.valueContainer}>
             {loading
               ? <Typography noWrap={noWrap} variant={typography} className={valueClassName}>
@@ -108,7 +123,7 @@ class Quantity extends React.Component {
               </Typography> : content}
             {withClipboard
               ? <CopyToClipboard className={classes.valueAction} text={clipboardContent} onCopy={() => null}>
-                <Tooltip title={`Copy ${label || quantity} to clipboard`}>
+                <Tooltip title={`Copy ${useLabel} to clipboard`}>
                   <div>
                     <IconButton disabled={!clipboardContent} classes={{root: classes.valueActionButton}} >
                       <ClipboardIcon classes={{root: classes.valueActionIcon}}/>

gui/src/components/dft/DFTEntryOverview.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { Typography } from '@material-ui/core'
+import { Typography, Button, makeStyles, Tooltip } from '@material-ui/core'
 import Quantity from '../Quantity'
 import _ from 'lodash'
+import {appBase} from '../../config'
 
-export default class DFTEntryOverview extends React.Component {
-  static propTypes = {
-    data: PropTypes.object.isRequired,
-    loading: PropTypes.bool
+const useStyles = makeStyles(theme => ({
+  actions: {
+    marginTop: theme.spacing(1),
+    textAlign: 'right',
+    margin: -theme.spacing(1)
   }
+}))
 
-  render() {
-    const { data } = this.props
+export default function DFTEntryOverview(props) {
+  const classes = useStyles()
+  const {data} = props
+  if (!data.dft) {
+    return <Typography color="error">No metadata available</Typography>
+  }
 
-    if (!data.dft) {
-      return <Typography color="error">No metadata available</Typography>
-    }
+  const material_name = entry => entry.encyclopedia.material.material_name
 
-    return (
-      <Quantity column>
-        <Quantity row>
-          <Quantity quantity="formula" label='formula' noWrap {...this.props} />
-        </Quantity>
-        <Quantity row>
-          <Quantity quantity="dft.code_name" label='dft code' noWrap {...this.props} />
-          <Quantity quantity="dft.code_version" label='dft code version' noWrap {...this.props} />
-        </Quantity>
-        <Quantity row>
-          <Quantity quantity="dft.basis_set" label='basis set' noWrap {...this.props} />
-          <Quantity quantity="dft.xc_functional" label='xc functional' noWrap {...this.props} />
-        </Quantity>
-        <Quantity row>
-          <Quantity quantity="dft.system" label='system type' noWrap {...this.props} />
-          <Quantity quantity="dft.crystal_system" label='crystal system' noWrap {...this.props} />
-          <Quantity quantity="dft.spacegroup_symbol" label="spacegroup" noWrap {...this.props}>
-            <Typography noWrap>
-              {_.get(data, 'dft.spacegroup_symbol')} ({_.get(data, 'dft.spacegroup')})
-            </Typography>
-          </Quantity>
+  return <div>
+    <Quantity column>
+      <Quantity row>
+        <Quantity quantity="formula" label='formula' noWrap {...props} />
+        <Quantity quantity={material_name} label='material name' noWrap {...props} />
+      </Quantity>
+      <Quantity row>
+        <Quantity quantity="dft.code_name" label='dft code' noWrap {...props} />
+        <Quantity quantity="dft.code_version" label='dft code version' noWrap {...props} />
+      </Quantity>
+      <Quantity row>
+        <Quantity quantity="dft.basis_set" label='basis set' noWrap {...props} />
+        <Quantity quantity="dft.xc_functional" label='xc functional' noWrap {...props} />
+      </Quantity>
+      <Quantity row>
+        <Quantity quantity="dft.system" label='system type' noWrap {...props} />
+        <Quantity quantity="dft.crystal_system" label='crystal system' noWrap {...props} />
+        <Quantity quantity="dft.spacegroup_symbol" label="spacegroup" noWrap {...props}>
+          <Typography noWrap>
+            {_.get(data, 'dft.spacegroup_symbol')} ({_.get(data, 'dft.spacegroup')})
+          </Typography>
         </Quantity>
       </Quantity>
-    )
-  }
+    </Quantity>
+    {data.encyclopedia && data.encyclopedia.material &&
+      <div className={classes.actions}>
+        <Tooltip title="Show the material of this entry in the NOMAD Encyclopedia.">
+          <Button color="primary" href={`${appBase}/encyclopedia/#/material/${data.encyclopedia.material.material_id}`}>
+            material
+          </Button>
+        </Tooltip>
+      </div>
+    }
+  </div>
+}
+
+DFTEntryOverview.propTypes = {
+  data: PropTypes.object.isRequired
 }

gui/src/components/entry/RepoEntryView.js

@@ -138,11 +138,10 @@ class RepoEntryView extends React.Component {
               <CardContent classes={{root: classes.cardContent}}>
                 <Quantity column style={{maxWidth: 350}}>
                   <Quantity quantity="calc_id" label={`${domain ? domain.entryLabel : 'entry'} id`} noWrap withClipboard {...quantityProps} />
-                  <Quantity quantity="pid" label='PID' loading={loading} placeholder="not yet assigned" noWrap {...quantityProps} withClipboard />
+                  <Quantity quantity={entry => entry.encyclopedia.material.material_id} label='material id' loading={loading} noWrap {...quantityProps} withClipboard />
                   <Quantity quantity="raw_id" label='raw id' loading={loading} noWrap {...quantityProps} withClipboard />
                   <Quantity quantity="external_id" label='external id' loading={loading} noWrap {...quantityProps} withClipboard />
                   <Quantity quantity="mainfile" loading={loading} noWrap ellipsisFront {...quantityProps} withClipboard />
-                  <Quantity quantity="calc_hash" label={`${domain ? domain.entryLabel : 'entry'} hash`} loading={loading} noWrap {...quantityProps} />
                   <Quantity quantity="upload_id" label='upload id' {...quantityProps} noWrap withClipboard />
                   <Quantity quantity="upload_time" label='upload time' noWrap {...quantityProps} >
                     <Typography noWrap>