Commit 1268d3ea authored by Markus Scheidgen's avatar Markus Scheidgen Committed by Lauri Himanen
Browse files

Alternative Overview layout.

parent 1b65d561
......@@ -17,9 +17,9 @@
*/
import React, { useContext, useState, useEffect, useMemo } from 'react'
import PropTypes from 'prop-types'
import { IconButton, Tooltip, Box, Card, CardContent, Grid, CardHeader, Typography, Link, makeStyles } from '@material-ui/core'
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
import {Box, Card, CardContent, Grid, Typography, Link, makeStyles, Divider, IconButton, Tooltip} from '@material-ui/core'
import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
import { apiContext } from '../api'
import ElectronicStructureOverview from '../visualization/ElectronicStructureOverview'
import VibrationalOverview from '../visualization/VibrationalOverview'
......@@ -32,13 +32,44 @@ import { DOI } from '../search/DatasetList'
import { domains } from '../domains'
import { errorContext } from '../errors'
import { authorList, convertSI, mergeObjects } from '../../utils'
import CollapsibleCard from '../CollapsibleCard'
import { resolveRef } from '../archive/metainfo'
import _ from 'lodash'
import {appBase, encyclopediaEnabled, normalizeDisplayValue} from '../../config'
import GeoOptOverview from '../visualization/GeoOptOverview'
const usePropertyCardStyles = makeStyles(theme => ({
root: {
marginBottom: theme.spacing(2)
},
title: {
fontSize: '1.25rem'
}
}))
function PropertyCard({title, children, actions}) {
const classes = usePropertyCardStyles()
return <Card className={classes.root}>
<CardContent>
<Box display="flex" flexDirection="row" alignContent="flex-start">
<Box flexGrow={1}>
<Typography className={classes.title}>
{title}
</Typography>
</Box>
{actions}
</Box>
{children}
</CardContent>
</Card>
}
PropertyCard.propTypes = {
children: PropTypes.any,
actions: PropTypes.any,
title: PropTypes.string
}
const useStyles = makeStyles(theme => ({
root: {
marginBottom: theme.spacing(4)
......@@ -46,26 +77,12 @@ const useStyles = makeStyles(theme => ({
error: {
marginTop: theme.spacing(2)
},
toggle: {
marginBottom: theme.spacing(1)
},
structure: {
marginTop: theme.spacing(0.5),
width: '100%',
height: '19.5rem'
},
cardHeader: {
paddingBottom: 0
},
quantities: {
display: 'flex',
flexWrap: 'wrap',
'& > *': {
marginRight: theme.spacing(3)
},
'&:last-child': {
marginRight: 0
}
divider: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1)
}
}))
......@@ -314,223 +331,164 @@ export default function DFTEntryOverview({data}) {
}
}
let eSize
if (electronicStructure) {
if (electronicStructure.bs && electronicStructure.dos) {
eSize = 12
} else if (electronicStructure.bs) {
eSize = 9
} else if (electronicStructure.dos) {
eSize = 4
}
}
return (
<Grid container spacing={2} className={classes.root}>
<Grid container spacing={3} className={classes.root}>
<Grid item xs={4}>
<CollapsibleCard
height={'33rem'}
title='Material'
action={encyclopediaEnabled && data?.encyclopedia?.material?.material_id
? <Tooltip title="Show the material of this entry in the NOMAD Encyclopedia.">
<IconButton href={`${appBase}/encyclopedia/#/material/${data.encyclopedia.material.material_id}`}><ArrowForwardIcon/></IconButton>
<Box display="flex" flexDirection="row" alignItems="flex-start">
<Box flexGrow={1}>
<Typography className={classes.title} color="textSecondary" gutterBottom>
{domain.entryHeader || 'NOMAD Entry'}
</Typography>
<Box marginBottom={3}>
<Typography variant="h5" component="h2">
{data.formula}
</Typography>
</Box>
</Box>
<ApiDialogButton size="small" title="Repository JSON" data={calcData} />
</Box>
<Quantity flex>
<Quantity quantity="dft.code_name" label='code name' noWrap data={data}/>
<Quantity quantity="dft.code_version" label='code version' noWrap data={data}/>
<Quantity quantity="electronic_structure_method" label='electronic structure method' loading={loading} description="The used electronic structure method." noWrap data={method}/>
{/* <Quantity row>
<Quantity quantity="dft.restricted" label='restricted' noWrap data={data}/>
<Quantity quantity="dft.closed_shell" label='closed shell' noWrap data={data}/>
</Quantity> */}
<Quantity quantity="dft.xc_functional" label='xc functional family' noWrap data={data}/>
<Quantity quantity="dft.xc_functional_names" label='xc functional names' noWrap data={data}/>
<Quantity quantity="dft.basis_set" label='basis set type' noWrap data={data}/>
<Quantity quantity="basis_set" label='basis set name' noWrap hideIfUnavailable data={method}/>
{method?.van_der_Waals_method && <Quantity quantity="van_der_Waals_method" label='van der Waals method' noWrap data={method}/>}
{method?.relativity_method && <Quantity quantity="relativity_method" label='relativity method' noWrap data={method}/>}
</Quantity>
<Divider className={classes.divider} />
<Quantity flex>
<Quantity quantity='comment' placeholder='no comment' {...quantityProps} />
<Quantity quantity='references' placeholder='no references' {...quantityProps}>
{calcData.references &&
<div style={{display: 'inline-grid'}}>
{calcData.references.map(ref => <Typography key={ref} noWrap>
<Link href={ref}>{ref}</Link>
</Typography>)}
</div>}
</Quantity>
<Quantity quantity='authors' {...quantityProps}>
<Typography>
{authorList(calcData || [])}
</Typography>
</Quantity>
<Quantity quantity='datasets' placeholder='no datasets' {...quantityProps}>
{calcData.datasets &&
<div>
{calcData.datasets.map(ds => (
<Typography key={ds.dataset_id}>
<Link component={RouterLink} to={`/dataset/id/${ds.dataset_id}`}>{ds.name}</Link>
{ds.doi ? <span>&nbsp; (<DOI doi={ds.doi}/>)</span> : ''}
</Typography>))}
</div>}
</Quantity>
</Quantity>
<Divider className={classes.divider}/>
<Quantity column style={{maxWidth: 350}}>
<Quantity quantity="mainfile" noWrap ellipsisFront data={data} withClipboard />
<Quantity quantity="calc_id" label={`${domain ? domain.entryLabel : 'entry'} id`} noWrap withClipboard data={data} />
<Quantity quantity="encyclopedia.material.material_id" label='material id' noWrap data={data} withClipboard />
<Quantity quantity="upload_id" label='upload id' data={data} noWrap withClipboard />
<Quantity quantity="upload_time" label='upload time' noWrap data={data}>
<Typography noWrap>
{new Date(data.upload_time).toLocaleString()}
</Typography>
</Quantity>
<Quantity quantity="raw_id" label='raw id' noWrap hideIfUnavailable data={data} withClipboard />
<Quantity quantity="external_id" label='external id' hideIfUnavailable noWrap data={data} withClipboard />
<Quantity quantity="last_processing" label='last processing' placeholder="not processed" noWrap data={data}>
<Typography noWrap>
{new Date(data.last_processing).toLocaleString()}
</Typography>
</Quantity>
<Quantity quantity="last_processing" label='processing version' noWrap placeholder="not processed" data={data}>
<Typography noWrap>
{data.nomad_version}/{data.nomad_commit}
</Typography>
</Quantity>
</Quantity>
</Grid>
<Grid item xs={8}>
<PropertyCard
title="Material"
actions={encyclopediaEnabled && data?.encyclopedia?.material?.material_id &&
<Tooltip title="Show the material of this entry in the NOMAD Encyclopedia.">
<IconButton
size="small"
href={`${appBase}/encyclopedia/#/material/${data.encyclopedia.material.material_id}`}
>
<ArrowForwardIcon/>
</IconButton>
</Tooltip>
: null
}
content={
<>
<Quantity column>
<Quantity row>
>
<Grid container spacing={1}>
<Grid item xs={4}>
<Box marginTop={1}>
<Quantity column>
<Quantity quantity="formula" label='formula' noWrap data={data}/>
<Quantity quantity="dft.system" label='material type' noWrap data={data}/>
<Quantity quantity="encyclopedia.material.material_name" label='material name' noWrap data={data}/>
{materialType === 'bulk' && <Quantity quantity="dft.crystal_system" label='crystal system' noWrap data={data}/>}
{materialType === 'bulk' && <Quantity quantity="dft.spacegroup_symbol" label="spacegroup" noWrap data={data}>
<Typography noWrap>
{normalizeDisplayValue(_.get(data, 'dft.spacegroup_symbol'))} ({normalizeDisplayValue(_.get(data, 'dft.spacegroup'))})
</Typography>
</Quantity>}
</Quantity>
{materialType === 'bulk'
? <Quantity row>
<Quantity quantity="dft.crystal_system" label='crystal system' noWrap data={data}/>
<Quantity quantity="dft.spacegroup_symbol" label="spacegroup" noWrap data={data}>
<Typography noWrap>
{normalizeDisplayValue(_.get(data, 'dft.spacegroup_symbol'))} ({normalizeDisplayValue(_.get(data, 'dft.spacegroup'))})
</Typography>
</Quantity>
</Quantity>
: null
}
</Quantity>
</>
}
fixedContent={loading
? <Placeholder className={classes.structure} variant="rect"></Placeholder>
: <>
{structures
? <Box className={classes.structure}>
<ToggleButtonGroup className={classes.toggle} size="small" exclusive value={shownSystem} onChange={handleStructureChange} aria-label="text formatting">
{structureToggles}
</ToggleButtonGroup>
<Structure system={structures.get(shownSystem)} aspectRatio={7 / 6} options={{view: {fitMargin: 0.75}}}></Structure>
</Box>
: null
</Box>
</Grid>
<Grid item xs={8}>
{loading
? <Placeholder className={classes.structure} variant="rect"></Placeholder>
: structures &&
<>
{structureToggles.length > 1 &&
<ToggleButtonGroup
size="small"
exclusive
value={shownSystem}
onChange={handleStructureChange}
aria-label="text formatting"
>
{structureToggles}
</ToggleButtonGroup>
}
<Structure system={structures.get(shownSystem)} aspectRatio={1.5} />
</>
}
</>
}
></CollapsibleCard>
</Grid>
</Grid>
</Grid>
</PropertyCard>
<Grid item xs={4}>
<CollapsibleCard
height={'33rem'}
title='Method'
content={
<Quantity column>
<Quantity row>
<Quantity quantity="dft.code_name" label='code name' noWrap data={data}/>
<Quantity quantity="dft.code_version" label='code version' noWrap data={data}/>
</Quantity>
<Quantity row>
<Quantity quantity="electronic_structure_method" label='electronic structure method' loading={loading} description="The used electronic structure method." noWrap data={method}/>
</Quantity>
{/* <Quantity row>
<Quantity quantity="dft.restricted" label='restricted' noWrap data={data}/>
<Quantity quantity="dft.closed_shell" label='closed shell' noWrap data={data}/>
</Quantity> */}
<Quantity row>
<Quantity quantity="dft.xc_functional" label='xc functional family' noWrap data={data}/>
</Quantity>
<Quantity row>
<Quantity quantity="dft.xc_functional_names" label='xc functional names' noWrap data={data}/>
</Quantity>
<Quantity row>
<Quantity quantity="dft.basis_set" label='basis set type' noWrap data={data}/>
<Quantity quantity="basis_set" label='basis set name' noWrap hideIfUnavailable data={method}/>
</Quantity>
{method?.van_der_Waals_method
? <Quantity row>
<Quantity quantity="van_der_Waals_method" label='van der Waals method' noWrap data={method}/>
</Quantity>
: null
}
{method?.relativity_method
? <Quantity row>
<Quantity quantity="relativity_method" label='relativity method' noWrap data={method}/>
</Quantity>
: null
}
</Quantity>
}
></CollapsibleCard>
</Grid>
{electronicStructure &&
<PropertyCard title="Electronic properties">
<ElectronicStructureOverview
data={electronicStructure}>
</ElectronicStructureOverview>
</PropertyCard>
}
<Grid item xs={4}>
<CollapsibleCard
height={'33rem'}
title={'Entry'}
action={<ApiDialogButton title="Repository JSON" data={calcData} />}
content={
<>
<Quantity column>
<Quantity quantity='comment' placeholder='no comment' {...quantityProps} />
<Quantity quantity='references' placeholder='no references' {...quantityProps}>
{calcData.references &&
<div style={{display: 'inline-grid'}}>
{calcData.references.map(ref => <Typography key={ref} noWrap>
<Link href={ref}>{ref}</Link>
</Typography>)}
</div>}
</Quantity>
<Quantity quantity='authors' {...quantityProps}>
<Typography>
{authorList(calcData || [])}
</Typography>
</Quantity>
<Quantity quantity='datasets' placeholder='no datasets' {...quantityProps}>
{calcData.datasets &&
<div>
{calcData.datasets.map(ds => (
<Typography key={ds.dataset_id}>
<Link component={RouterLink} to={`/dataset/id/${ds.dataset_id}`}>{ds.name}</Link>
{ds.doi ? <span>&nbsp; (<DOI doi={ds.doi}/>)</span> : ''}
</Typography>))}
</div>}
</Quantity>
</Quantity>
<Quantity column style={{maxWidth: 350}}>
<Quantity quantity="mainfile" noWrap ellipsisFront data={data} withClipboard />
<Quantity quantity="calc_id" label={`${domain ? domain.entryLabel : 'entry'} id`} noWrap withClipboard data={data} />
<Quantity quantity="encyclopedia.material.material_id" label='material id' noWrap data={data} withClipboard />
<Quantity quantity="upload_id" label='upload id' data={data} noWrap withClipboard />
<Quantity quantity="upload_time" label='upload time' noWrap data={data}>
<Typography noWrap>
{new Date(data.upload_time).toLocaleString()}
</Typography>
</Quantity>
<Quantity quantity="raw_id" label='raw id' noWrap hideIfUnavailable data={data} withClipboard />
<Quantity quantity="external_id" label='external id' hideIfUnavailable noWrap data={data} withClipboard />
<Quantity quantity="last_processing" label='last processing' placeholder="not processed" noWrap data={data}>
<Typography noWrap>
{new Date(data.last_processing).toLocaleString()}
</Typography>
</Quantity>
<Quantity quantity="last_processing" label='processing version' noWrap placeholder="not processed" data={data}>
<Typography noWrap>
{data.nomad_version}/{data.nomad_commit}
</Typography>
</Quantity>
</Quantity>
</>
}
></CollapsibleCard>
</Grid>
{geoOpt && structures &&
<PropertyCard title="Geometry optimization">
<GeoOptOverview data={geoOpt}></GeoOptOverview>
</PropertyCard>
}
{electronicStructure
? <Grid item xs={eSize}>
<Card>
<CardHeader
classes={{root: classes.cardHeader}}
title="Electronic properties"
/>
<CardContent>
<Box style={{margin: '0 auto 0 auto', width: '100%', height: '36rem'}}>
<ElectronicStructureOverview
data={electronicStructure}>
</ElectronicStructureOverview>
</Box>
</CardContent>
</Card>
</Grid>
: null
}
{geoOpt && structures
? <Grid item xs={12}>
<Card>
<CardHeader
classes={{root: classes.cardHeader}}
title="Geometry optimization"
/>
<CardContent>
<GeoOptOverview data={geoOpt}></GeoOptOverview>
</CardContent>
</Card>
</Grid>
: null
}
{vibrationalData
? <Grid item xs={12}>
<Card>
<CardHeader
classes={{root: classes.cardHeader}}
title="Vibrational properties"
/>
<CardContent>
<Box style={{margin: '0 auto 0 auto', width: '95%', minHeight: '36rem'}}>
<VibrationalOverview
data={vibrationalData}>
</VibrationalOverview>
</Box>
</CardContent>
</Card>
</Grid>
: null
}
{vibrationalData &&
<PropertyCard title="Vibrational properties">
<VibrationalOverview
data={vibrationalData}>
</VibrationalOverview>
</PropertyCard>
}
</Grid>
</Grid>
)
}
......
......@@ -45,6 +45,7 @@ export const domains = ({
</Typography>,
entryLabel: 'entry',
entryLabelPlural: 'entries',
entryHeader: 'DFT Calculation',
entryTitle: data =>
data.dft && data.dft.code_name
? data.dft.code_name.charAt(0).toUpperCase() + data.dft.code_name.slice(1) + ' run'
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment