Normalized some display value in highlevel GUI components.

gui/src/components/DataTable.js

@@ -17,6 +17,7 @@ import ViewColumnIcon from '@material-ui/icons/ViewColumn'
 import { Popover, List, ListItemText, ListItem, Collapse } from '@material-ui/core'
 import { compose } from 'recompose'
 import _ from 'lodash'
+import { normalizeDisplayValue } from '../config'
 
 const globalSelectedColumns = {}
 
@@ -509,7 +510,7 @@ class DataTableUnStyled extends React.Component {
                             key={key}
                             align={column.align || 'left'}
                           >
-                            {column.render ? column.render(row) : _.get(row, key)}
+                            {normalizeDisplayValue(column.render ? column.render(row) : _.get(row, key))}
                           </TableCell>
                         )
                       })}

gui/src/components/Histogram.js

@@ -79,6 +79,16 @@ export default function Histogram({
   }
 
   useEffect(() => {
+    // TODO add proper treatment of not processed on server side and processing
+    console.log('###', data)
+    if (data[data.length - 1] && data[data.length - 1].key === 'not processed') {
+      if (data[data.length -2].key === 'unavailable') {
+        data[data.length - 2].value = data[data.length - 1].value
+        data = data.slice(0, data.length - 1)
+        numberOfValues -= 1
+      }
+    }
+
     for (let i = data.length; i < numberOfValues; i++) {
       data.push({key: `empty${i}`, name: '', value: 0})
     }

gui/src/components/Quantity.js

@@ -94,6 +94,10 @@ class Quantity extends React.Component {
         }
       }
 
+      if (value === 'not processed') {
+        value = 'unavailable'
+      }
+
       if (children && children.length !== 0) {
         content = children
       } else if (value) {

gui/src/components/dft/DFTEntryOverview.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Typography, Tooltip, Link } from '@material-ui/core'
 import Quantity from '../Quantity'
 import _ from 'lodash'
-import {appBase, encyclopediaEnabled} from '../../config'
+import {appBase, encyclopediaEnabled, normalizeDisplayValue} from '../../config'
 
 export default function DFTEntryOverview(props) {
   const {data} = props
@@ -49,7 +49,7 @@ export default function DFTEntryOverview(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')})
+            {normalizeDisplayValue(_.get(data, 'dft.spacegroup_symbol'))} ({normalizeDisplayValue(_.get(data, 'dft.spacegroup'))})
           </Typography>
         </Quantity>
       </Quantity>

gui/src/components/entry/RepoEntryView.js

@@ -10,6 +10,7 @@ import { DOI } from '../search/DatasetList'
 import { domains } from '../domains'
 import { EntryPageContent } from './EntryPage'
 import { errorContext } from '../errors'
+import { titleCase } from '../../utils'
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -99,7 +100,7 @@ export default function RepoEntryView({uploadId, calcId}) {
                 </Quantity>
                 <Quantity quantity='authors' {...quantityProps}>
                   <Typography>
-                    {(authors || []).map(author => author.name).join('; ')}
+                    {(authors || []).map(author => titleCase(author.name)).join('; ')}
                   </Typography>
                 </Quantity>
                 <Quantity quantity='datasets' placeholder='no datasets' {...quantityProps}>

gui/src/components/search/EntryList.js

@@ -15,6 +15,7 @@ import SharedIcon from '@material-ui/icons/SupervisedUserCircle'
 import PrivateIcon from '@material-ui/icons/VisibilityOff'
 import { domains } from '../domains'
 import { apiContext, withApi } from '../api'
+import { titleCase } from '../../utils'
 
 export function Published(props) {
   const api = useContext(apiContext)
@@ -129,7 +130,7 @@ export class EntryListUnstyled extends React.Component {
     },
     authors: {
       label: 'Authors',
-      render: entry => entry.authors.map(author => author.name).join('; '),
+      render: entry => entry.authors.map(author => titleCase(author.name)).join('; '),
       supportsSort: true,
       description: 'The authors of this entry. This includes the uploader and its co-authors.'
     },
@@ -262,7 +263,7 @@ export class EntryListUnstyled extends React.Component {
             </Quantity>
             <Quantity quantity='authors' data={row}>
               <Typography>
-                {(row.authors || []).map(author => author.name).join('; ')}
+                {(row.authors || []).map(author => titleCase(author.name)).join('; ')}
               </Typography>
             </Quantity>
             <Quantity quantity='datasets' placeholder='no datasets' data={row}>

gui/src/config.js

@@ -73,3 +73,10 @@ export const formatQuantity = (x) => {
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
   return parts.join('.')
 }
+
+export function normalizeDisplayValue(value) {
+  if (value === 'not processed') {
+    return 'unavailable'
+  }
+  return value
+}

gui/src/utils.js

@@ -135,3 +135,14 @@ export function objectFilter(obj, predicate) {
       return res
     }, {})
 }
+
+export function titleCase(str) {
+  var splitStr = str.toLowerCase().split(' ')
+  for (var i = 0; i < splitStr.length; i++) {
+    // You do not need to check if i is larger than splitStr length, as your for does that for you
+    // Assign it back to the array
+    splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1)
+  }
+  // Directly return the joined string
+  return splitStr.join(' ')
+}