diff --git a/gui-design/public/index.html b/gui-design/public/index.html
index a9f70a47b546f1719b8c5346bfc203adb693246f..f5cad98b2f72aeef18fb327708462b5f6341bc52 100644
--- a/gui-design/public/index.html
+++ b/gui-design/public/index.html
@@ -28,7 +28,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
- <title>nomad</title>
+ <title>NOMAD</title>
</head>
<body style="margin: 0; background: #fafafa;">
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/gui-design/src/AppBar.js b/gui-design/src/AppBar.js
index 2b5740d68ed6c525b08c86c6d5531eae4a89a5c6..9811aa038222f7246fc902baf63e900176107770 100644
--- a/gui-design/src/AppBar.js
+++ b/gui-design/src/AppBar.js
@@ -57,7 +57,7 @@ export default function AppBar({page, onPageChange}) {
<img alt="The NOMAD logo" className={classes.logo} src={`nomad.png`}></img>
</Link>
<Typography variant="h6" className={classes.title}>
- NOMAD Laboratory / FAIRmat Portal
+ NOMAD Laboratory
</Typography>
<IconButton color="inherit">
diff --git a/gui-design/src/DemoContent.js b/gui-design/src/DemoContent.js
index d6e96b1ac2124f13a748016dedf31076fde3dee7..073b9f349ebcb8f50ff4db4b918c5762226dbd62 100644
--- a/gui-design/src/DemoContent.js
+++ b/gui-design/src/DemoContent.js
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
import PropTypes from 'prop-types'
-import { Box, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, makeStyles, Paper, Typography } from '@material-ui/core'
+import { Box, Checkbox, Divider, FormControl, FormControlLabel, FormGroup, FormLabel, IconButton, InputLabel, makeStyles, MenuItem, Paper, Select, TextField, Typography } from '@material-ui/core'
import DemoTable from './DemoTable'
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
+import OpenIcon from '@material-ui/icons/KeyboardArrowDown';
+import ClosedIcon from '@material-ui/icons/KeyboardArrowRight';
const useFilterStyles = makeStyles(theme => ({
header: {
@@ -17,36 +19,33 @@ const useFilterStyles = makeStyles(theme => ({
},
content: {
+ marginLeft: theme.spacing(2),
+ marginTop: theme.spacing(1),
marginBottom: theme.spacing(2)
}
}))
-function Filter({label, open}) {
+function Filter({label, children}) {
const classes = useFilterStyles()
+ const [open, setOpen] = useState(false)
return <div>
<div className={classes.header}>
<Typography color="primary" variant="overline" className={classes.label} classes={{root: classes.labelTypography}}>{label}</Typography>
- <IconButton size="small" color="primary">
+ <IconButton size="small" color="primary" onClick={() => setOpen(!open)}>
{open
? <DeleteIcon fontSize="inherit" />
: <AddIcon fontSize="inherit" />}
</IconButton>
</div>
- {open && (
- <FormGroup className={classes.content}>
- <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Bulk" />
- <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="2D" />
- <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="1D" />
- <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Atom/Molecule" />
- <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Surface" />
- </FormGroup>
- )}
+ {open && <div className={classes.content}>{children}</div>}
</div>
}
Filter.propTypes = {
label: PropTypes.string,
- open: PropTypes.bool
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node])
}
function FilterGroup({children}) {
@@ -62,6 +61,52 @@ FilterGroup.propTypes = {
])
}
+const useFilterParentStyles = makeStyles(theme => ({
+ root: {
+ marginLeft: -theme.spacing(2)
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'center'
+ },
+ label: {
+ flexGrow: 1
+ },
+ labelTypography: {
+
+ },
+ content: {
+ marginLeft: theme.spacing(4)
+ }
+}))
+
+function FilterParent({label, children}) {
+ const classes = useFilterParentStyles()
+ const [open, setOpen] = useState(false)
+ return <div className={classes.root}>
+ <div className={classes.header} onClick={() => setOpen(!open)} >
+ {open
+ ? <OpenIcon color="primary" fontSize="inherit" />
+ : <ClosedIcon color="primary" fontSize="inherit" />}
+ <Typography color="primary" variant="overline" className={classes.label} classes={{root: classes.labelTypography}}>
+ {label}
+ </Typography>
+ </div>
+ {open && <div className={classes.content}>
+ {children}
+ </div>}
+ </div>
+}
+
+FilterParent.propTypes = {
+ label: PropTypes.string,
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node
+])
+}
+
+
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
@@ -83,6 +128,13 @@ const useStyles = makeStyles(theme => ({
padding: theme.spacing(2),
overflow: 'scroll',
width: '100%'
+ },
+ formElement: {
+ width: '100%',
+ marginBottom: theme.spacing(1),
+ '&:last-child': {
+ marginBttom: 0
+ }
}
}))
@@ -96,25 +148,71 @@ export default function DemoContent() {
<Filter label="elements" />
<Filter label="formula" />
<Filter label="chemical classification" />
- </FilterGroup>
-
- <FilterGroup>
- <Filter label="system type" open/>
- <Filter label="symmetry" />
- <Filter label="space group" />
- <Filter label="aflow prototypes" />
+ <FilterParent label="system">
+ <Filter label="system type">
+ <FormGroup>
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Bulk" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="2D" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="1D" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Atom/Molecule" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Surface" />
+ </FormGroup>
+ </Filter>
+ <Filter label="symmetry">
+ <FormControl className={classes.formElement}>
+ <FormLabel component="legend">Crystal System</FormLabel>
+ <FormGroup >
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Cubic" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Hexagonal" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Trigonal" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Tetragonal" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Orthorhombic" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Monoclinic" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Triclinic" />
+ </FormGroup>
+ </FormControl>
+ <TextField className={classes.formElement} label="Space group number" />
+ <FormControl className={classes.formElement}>
+ <InputLabel id="spacegroup">Space group short symbol</InputLabel>
+ <Select
+ labelId="spacegroup"
+ value={null}
+ >
+ <MenuItem value={1}>Fm3</MenuItem>
+ <MenuItem value={2}>P4/mmm</MenuItem>
+ <MenuItem value={3}>Pmmm</MenuItem>
+ </Select>
+ </FormControl>
+ </Filter>
+ <Filter label="structure type">
+ <FormGroup>
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Bulk" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="2D" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="1D" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Atom/Molecule" />
+ <FormControlLabel control={<Checkbox size="small" name="checkedC" />} label="Surface" />
+ </FormGroup>
+ </Filter>
+ <Filter label="aflow prototypes" />
+ </FilterParent>
</FilterGroup>
<Divider />
+
<Box paddingTop={1} paddingBottom={1}>
<Typography color="primary" variant="button">method</Typography>
</Box>
- <FilterGroup>
+ <FilterParent label="simulation">
<Filter label="code" />
- <Filter label="basis set" />
- <Filter label="functional class" />
- <Filter label="functional name" />
- </FilterGroup>
+ <FilterParent label="dft">
+ <Filter label="basis set" />
+ <Filter label="functional class" />
+ <Filter label="functional name" />
+ </FilterParent>
+ <FilterParent label="molecular dynamics"></FilterParent>
+ </FilterParent>
+ <FilterParent label="synthesis" />
+ <FilterParent label="experiment" />
<Divider />
@@ -125,10 +223,11 @@ export default function DemoContent() {
<Divider />
<FilterGroup>
- <Filter label="authors" />
- <Filter label="date" />
+ <Filter label="author" />
+ <Filter label="time" />
<Filter label="dataset" />
- <Filter label="oasis/database" />
+ <Filter label="sample" />
+ <Filter label="workflow" />
</FilterGroup>
</div>
</Box>