Commit 3fa3910a authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Minor gui fixes.

parent f8df966d
Pipeline #74438 passed with stages
in 26 minutes and 41 seconds
......@@ -15,7 +15,7 @@ const useCardStyles = makeStyles(theme => ({
function MarkdownCard({title, children, xs, top, bottom}) {
function InfoCard({title, children, xs, top, bottom}) {
const classes = useCardStyles()
const style = {}
if (top) {
......@@ -28,12 +28,12 @@ function MarkdownCard({title, children, xs, top, bottom}) {
<Typography variant="h6" className={classes.title}>{title}</Typography>
<Typography component="div">{children}</Typography>
MarkdownCard.propTypes = {
InfoCard.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.node,
xs: PropTypes.number,
......@@ -125,23 +125,23 @@ export default function About() {
your own data, please login or register for an account.
<MarkdownCard xs={6} title="Interactive Search" top>
<InfoCard xs={6} title="Interactive Search" top>
NOMAD extracts <b>rich metadata</b> from uploaded raw-data. <Link component={RouterLink} to={'/search'}>
Explore NOMAD&apos;s data</Link> by creating complex queries from interactive data visualizations of key
properties, including the simulated composition/system, used method, upload metadata,
as well as material classifications and available quantities. Or use
the <b>Optimade</b> filter language to add arbitrarily nested queries.
<MarkdownCard xs={6} title="A common data format" top>
<InfoCard xs={6} title="A common data format" top>
The <b>NOMAD Archive</b> provides data in processed and normalized form in a machine processable and common hierarchical format.
All data in the NOMAD Archive is organized into nested sections of quantities with well defined units,
data types, shapes, and descriptions. These definitions are called the <b>NOMAD Metainfo</b> and they
can be <Link component={RouterLink} to={'/metainfo'}>browsed here</Link>.
<Grid item xs={12} style={{paddingTop: 0, paddingBottom: 0}}>
<AboutSvg ref={svg}></AboutSvg>
<MarkdownCard xs={4} title="Uploading is simple" bottom>
<InfoCard xs={4} title="Uploading is simple" bottom>
You provide your own data <i>as is</i>. Just zip your code input and out files as they are,
including nested directory structures and potential auxiliary files, and upload
......@@ -162,8 +162,8 @@ export default function About() {
You can provide via GUI or shell command <Link component={RouterLink} to={'/uploads'}>here</Link>.
Manage already uploaded data <Link component={RouterLink} to={'/userdata'}>here</Link>.
<MarkdownCard xs={4} title="Processing" bottom>
<InfoCard xs={4} title="Processing" bottom>
Uploaded data is automatically processed and made available
in the uploaded <b>raw files</b> or in its processed and unified <b>Archive</b> form.
......@@ -177,8 +177,8 @@ export default function About() {
Read <Link href="">here</Link> on how to install
our software and how to use NOMAD processing in your Python environment.
<MarkdownCard xs={4} title="APIs" bottom><Markdown>{`
<InfoCard xs={4} title="APIs" bottom><Markdown>{`
The NOMAD can also be accessed programmatically via ReST APIs.
There is the proprietary NOMAD API and an implementation of the
standardized [OPTiMaDe API (0.10.0)](
......@@ -194,7 +194,7 @@ export default function About() {
Another [tutorial covers how to install and use NOMAD's Python client library](${appBase}/docs/archive_tutorial.html).
The [NOMAD Analytics Toolkit]( allows to use
this without installation and directly on NOMAD servers.
<Grid item xs={12}>
### Getting Help
......@@ -205,14 +205,14 @@ export default function About() {
### Developer Documentation
The [in-depth developer documentation](${appBase}/docs/index.html)
contains a general introduction to NOMAD, the underlying architecture,
is (meta)data, and processing. You will also find some information on how to use
the NOMAD ReST API. It contains information about how to develop NOMAD, how to
operate it, how to contribute parsers, and much more.
The [in-depth documentation](${appBase}/docs/index.html)
contains a general introduction to NOMAD and its underlying architecture,
more information and tutorials, how to prepare uploads, how
to use the API, developer information, how to operate your own NOMAD (a so called
Oasis), how to contribute parsers, and much more.
### Source code
The source-code for this new version of NOMAD (dubbed *nomad@FAIRDI*) is maintained
The source-code for the NOMAD Repository and Archive is maintained
at the MPCDF's [gitlab](
To push code, you need an MPCDF account and you can apply
......@@ -15,6 +15,8 @@ import UserDataIcon from '@material-ui/icons/AccountCircle'
import AboutIcon from '@material-ui/icons/Home'
import FAQIcon from '@material-ui/icons/QuestionAnswer'
import MetainfoIcon from '@material-ui/icons/Info'
import DocIcon from '@material-ui/icons/Help'
import CodeIcon from '@material-ui/icons/Code'
import {help as searchHelp, default as SearchPage} from './search/SearchPage'
import HelpDialog from './Help'
import { ApiProvider, withApi, apiContext } from './api'
......@@ -22,7 +24,7 @@ import { ErrorSnacks, withErrors } from './errors'
import { help as entryHelp, default as EntryPage } from './entry/EntryPage'
import About from './About'
import LoginLogout from './LoginLogout'
import { guiBase, consent, nomadTheme } from '../config'
import { guiBase, consent, nomadTheme, appBase } from '../config'
import {help as metainfoHelp, default as MetaInfoBrowser} from './metaInfoBrowser/MetaInfoBrowser'
import packageJson from '../../package.json'
import { Cookies, withCookies } from 'react-cookie'
......@@ -45,7 +47,7 @@ function LoadingIndicator() {
useEffect(() => {
return () => api.removeOnLoading(handleOnLoading)
}, [])
}, [api, handleOnLoading])
return loading ? <LinearProgress color="secondary" /> : ''
......@@ -78,18 +80,18 @@ const useMainMenuItemStyles = makeStyles(theme => ({
function MainMenuItem({tooltip, title, path, icon}) {
function MainMenuItem({tooltip, title, path, href, icon}) {
const {pathname} = useLocation()
const classes = useMainMenuItemStyles()
const selected = path === pathname || (path !== '/' && pathname.startsWith(path))
const rest = path ? {to: path, component: Link} : {href: href}
return <Tooltip title={tooltip}>
color={selected ? 'primary' : 'default'}
......@@ -99,7 +101,8 @@ function MainMenuItem({tooltip, title, path, icon}) {
MainMenuItem.propTypes = {
'tooltip': PropTypes.string.isRequired,
'title': PropTypes.string.isRequired,
'path': PropTypes.string.isRequired,
'path': PropTypes.string,
'href': PropTypes.string,
'icon': PropTypes.element.isRequired
......@@ -320,6 +323,18 @@ class NavigationUnstyled extends React.Component {
tooltip="Frequently Asked Questions (FAQ)"
tooltip="The NOMAD documentation"
tooltip="NOMAD's Gitlab project"
<LoadingIndicator />
......@@ -441,7 +441,7 @@ class SearchRequest:
'global_statistics:n_entries', A('value_count', field='calc_id'))
'global_statistics:n_uploads', A('value_count', field='upload_id'))
'global_statistics:n_uploads', A('cardinality', field='upload_id'))
'global_statistics:n_calculations', A('sum', field='dft.n_calculations'))
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