diff --git a/Dockerfile b/Dockerfile
index bf76279d9123325d69630bd58855838e681344eb..5d65026e62451873e50e64faaa9ae0a72bf7f4bf 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -108,7 +108,7 @@ RUN rm -f /encyclopedia/.babelrc
# Third, create a slim final image
FROM final
-RUN apt-get update && apt-get install -y --no-install-recommends libgomp1 && apt-get install -y libmagic-dev curl vim
+RUN apt-get update && apt-get install -y --no-install-recommends libgomp1 && apt-get install -y libmagic-dev curl vim zip unzip
# copy the sources for tests, coverage, qa, etc.
COPY . /app
diff --git a/README.md b/README.md
index 12436825b2f18e34affffa7034d877b00be8fa3f..2e7f0cbb0fefccf4f5c77e129ddc6045f1be77b6 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,10 @@ Omitted versions are plain bugfix releases with only minor changes and fixes.
- refactored metainfo and parsers
- new upload UI and incremental uploads
+### v0.10.9
+- new AI Toolkit GUI page
+- many minor parser fixes and improvements
+
### v0.10.7
- adding OpenMX parser
diff --git a/docs/developers.md b/docs/developers.md
index 73faec0d9e8de805babcaed1e53b66e9f43fedb4..364475c40d88ff78348dc61ed0239f3a88c27496 100644
--- a/docs/developers.md
+++ b/docs/developers.md
@@ -3,12 +3,35 @@
## Getting started
### Clone the sources
-If not already done, you should clone nomad. To clone the main NOMAD repository:
+If not already done, you should clone nomad. If you have a gitlab@MPCDF account, you can clone with git URL:
+
```
git clone git@gitlab.mpcdf.mpg.de:nomad-lab/nomad-FAIR.git nomad
+```
+
+Otherwise, clone using HTTPS URL:
+
+```
+git clone https://gitlab.mpcdf.mpg.de/nomad-lab/nomad-FAIR.git nomad
+```
+
+then change directory to nomad
+
+```
cd nomad
```
+There are several branches in the repository. The master branch contains the latest released version, but there are also
+develop branches for each version called vX.X.X. Checkout the branch you want to work on it
+```
+git checkout vX.X.X
+```
+The development branches are protected and you should create a new branch including your changes.
+```
+git checkout -b <my-branch-name>
+```
+This branch can be pushed to the repo, and then later may be merged to the relevant branch.
+
### Prepare your Python environment
You work in a Python virtual environment.
@@ -47,7 +70,15 @@ To install libmagick for conda, you can use (other channels might also work):
conda install -c conda-forge --name nomad_env libmagic
```
-#### pip
+## Setup
+Using the following command one can install all the dependencies, and the sub-modules from the NOMAD-coe project
+```
+bash setup.sh
+```
+
+The script includes the following steps:
+
+### 1. pip
Make sure you have the most recent version of pip:
```sh
pip install --upgrade pip
@@ -65,7 +96,7 @@ unix/linux systems. It can be installed on MacOS with homebrew:
brew install libmagic
```
-### Install sub-modules.
+### 2. Install sub-modules
Nomad is based on python modules from the NOMAD-coe project.
This includes parsers, python-common and the meta-info. These modules are maintained as
their own GITLab/git repositories. To clone and initialize them run:
@@ -88,7 +119,7 @@ to install set package manually.
The `-e` option will install the NOMAD-coe dependencies with symbolic links allowing you
to change the downloaded dependency code without having to reinstall after.
-### Install nomad
+### 3. Install nomad
Finally, you can add nomad to the environment itself (including all extras)
```sh
pip install -e .[all]
@@ -100,7 +131,7 @@ If pip tries to use and compile sources and this creates errors, it can be told
pip install -e .[all] --prefer-binary
```
-### Generate GUI artifacts
+### 4. Generate GUI artifacts
The NOMAD GUI requires static artifacts that are generated from the NOMAD Python codes.
```sh
nomad.cli dev metainfo > gui/src/metainfo.json
@@ -121,9 +152,12 @@ might not match the expected data in outdated files. If there are changes to uni
In additional, you have to do some more steps to prepare your working copy to run all
the tests. See below.
+## Install docker
+One needs to install [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
+
## Running the infrastructure
-To run NOMAD, some 3-rd party services are neeed
+To run NOMAD, some 3-rd party services are needed
- elastic search: nomad's search and analytics engine
- mongodb: used to store processing state
- rabbitmq: a task queue used to distribute work in a cluster
@@ -133,10 +167,23 @@ Keep in mind the *docker-compose* configures all services in a way that mirror
the configuration of the python code in `nomad/config.py` and the gui config in
`gui/.env.development`.
-You can run all services with:
+The default virtual memory for Elasticsearch is likely to be too low. On Linux, you can run the following command as root:
+```sh
+sysctl -w vm.max_map_count=262144
+```
+
+To set this value permanently, see [here](https://www.elastic.co/guide/en/elasticsearch/reference/current/vm-max-map-count.html). Then, you can run all services with:
```sh
cd ops/docker-compose/infrastructure
docker-compose up -d mongo elastic rabbitmq
+cd ../../..
+```
+
+If your system almost ran out of disk space the elasticsearch enforces a read-only index block ([read more](https://www.elastic.co/guide/en/elasticsearch/reference/6.2/disk-allocator.html)), but
+after clearing up the disk space you need to reset it manually using the following command:
+
+```sh
+curl -XPUT -H "Content-Type: application/json" http://localhost:9200/_all/_settings -d '{"index.blocks.read_only_allow_delete": false}'
```
Note that the ElasticSearch service has a known problem in quickly hitting the
@@ -157,7 +204,7 @@ via your preferred tools. Just make sure to use the right ports.
## Running NOMAD
Before you run NOMAD for development purposes, you should configure it to use the `test`
-realm of our user management system. By default, NOMAD will use the `prod` realm.
+realm of our user management system. By default, NOMAD will use the `fairdi_nomad_prod` realm.
Create a `nomad.yaml` file in the root folder:
```
@@ -215,11 +262,7 @@ yarn start
To run the tests some additional settings and files are necessary that are not part
of the code base.
-First, you need to provide the `springer.msg` Springer materials database. It can
-be copied from `/nomad/fairdi/db/data/springer.msg` on our servers and should
-be placed at `nomad/normalizing/data/springer.msg`.
-
-Second, you have to provide static files to serve the docs and NOMAD distribution:
+You have to provide static files to serve the docs and NOMAD distribution:
```sh
cd docs
make html
@@ -629,4 +672,4 @@ availability of individual commit hashes, could be replaces with hashes of sourc
files.
We use the `master` branch on all dependencies. Of course feature branches can be used on
-dependencies to manage work in progress.
+dependencies to manage work in progress.
\ No newline at end of file
diff --git a/gui/.gitignore b/gui/.gitignore
index dfa47e48416cf605a28eb39000507437496a74e9..38049dcc5bed9444ede700201dd4dbff18a626ec 100644
--- a/gui/.gitignore
+++ b/gui/.gitignore
@@ -13,6 +13,8 @@
public/metainfo/
public/meta.json
+src/toolkitMetadata.json
+
# misc
.DS_Store
.env.local
diff --git a/gui/package.json b/gui/package.json
index 2a4ecad25b11b6ac9455aff2ea37a9119cce6a39..4f036fcaee0d88c3d65d75361b5cd9efc3345046 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -38,7 +38,6 @@
"object-hash": "^2.0.3",
"pace": "^0.0.4",
"pace-js": "^1.0.2",
- "piwik-react-router": "^0.12.1",
"plotly.js-cartesian-dist-min": "^1.54.7",
"qs": "^6.8.0",
"react": "^16.13.1",
diff --git a/gui/public/env.js b/gui/public/env.js
index 8cf8042d9189c9261848db3b36f515bea4310b79..ab713542f091b5c42df048dcd08dad9c1faa8489 100644
--- a/gui/public/env.js
+++ b/gui/public/env.js
@@ -4,9 +4,6 @@ window.nomadEnv = {
'keycloakClientId': 'nomad_gui_dev',
'appBase': 'http://localhost:8000/fairdi/nomad/latest',
'debug': false,
- 'matomoEnabled': false,
- 'matomoUrl': 'https://nomad-lab.eu/fairdi/stat',
- 'matomoSiteId': '2',
'version': {
'label': '1.0.0',
'isBeta': false,
@@ -14,7 +11,7 @@ window.nomadEnv = {
'usesBetaData': true,
'officialUrl': 'https://nomad-lab.eu/prod/rae/gui'
},
- 'encyclopediaEnabled': true,
+ 'encyclopediaEnabled': false,
'aitoolkitEnabled': false,
'oasis': false,
'servicesUploadLimit': 10
diff --git a/gui/src/components/About.js b/gui/src/components/About.js
index 445f527e8a771c61a607d2f637b8cecc7e752536..41948d205a143ab67d2d584d20294898b17d5083 100644
--- a/gui/src/components/About.js
+++ b/gui/src/components/About.js
@@ -16,10 +16,10 @@
* limitations under the License.
*/
import React, { useLayoutEffect, useRef, useCallback, useEffect, useState } from 'react'
-import {ReactComponent as AboutSvg} from './about.svg'
+import { ReactComponent as AboutSvg } from '../images/about.svg'
import PropTypes from 'prop-types'
import Markdown from './Markdown'
-import { appBase, debug, consent, aitoolkitEnabled, encyclopediaEnabled } from '../config'
+import { appBase, debug, aitoolkitEnabled, encyclopediaEnabled } from '../config'
import packageJson from '../../package.json'
import { Grid, Card, CardContent, Typography, makeStyles, Link, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core'
import { Link as RouterLink, useHistory } from 'react-router-dom'
@@ -196,7 +196,7 @@ export default function About() {
})
makeClickable('toolkit', () => {
if (aitoolkitEnabled) {
- history.push('/aitoolkit')
+ history.push('/aitoolkit/main')
} else {
window.location.href = 'https://nomad-lab.eu/tools/AItutorials'
}
@@ -247,7 +247,7 @@ export default function About() {
<Grid className={classes.container} container spacing={2}>
<Grid item xs={12}>
<Markdown>{`
- # The NOMAD Repository and Archive
+ # **NOMAD** – Manage and Publish Materials Data
This is the *graphical user interface* (GUI) for the NOMAD Repository and
Archive. It allows you to **search, access, and download all NOMAD data** in its
@@ -372,9 +372,6 @@ export default function About() {
used for data that has no provenance with the original NOMAD CoE database.
` : ''}
- ### Terms of use and licenses
- ${consent}
-
### About this version
- version (API): \`${info ? info.version : 'loading'}/${info ? info.git.commit : 'loading'}\`
- version (GUI): \`${packageJson.version}/${packageJson.commit}\`
diff --git a/gui/src/components/App.js b/gui/src/components/App.js
index f6afa2d776afb1f5b429c779815120186b74e1a3..e82d737e42f66ef1cd6d114a94406172b4c90607 100644
--- a/gui/src/components/App.js
+++ b/gui/src/components/App.js
@@ -20,11 +20,9 @@ import { Router, Route } from 'react-router-dom'
import { QueryParamProvider } from 'use-query-params'
import { RecoilRoot } from 'recoil'
import history from '../history'
-import PiwikReactRouter from 'piwik-react-router'
import DateFnsUtils from '@date-io/date-fns'
import { MuiPickersUtilsProvider } from '@material-ui/pickers'
-import { nomadTheme, matomoEnabled, matomoUrl, matomoSiteId, keycloakBase, keycloakRealm,
- keycloakClientId } from '../config'
+import { nomadTheme, keycloakBase, keycloakRealm, keycloakClientId } from '../config'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from 'react-keycloak'
import { MuiThemeProvider } from '@material-ui/core/styles'
@@ -32,15 +30,6 @@ import { ErrorSnacks, ErrorBoundary } from './errors'
import Navigation from './nav/Navigation'
import { APIProvider } from './api'
-export const matomo = matomoEnabled ? PiwikReactRouter({
- url: matomoUrl,
- siteId: matomoSiteId,
- clientTrackerName: 'stat.js',
- serverTrackerName: 'stat'
-}) : []
-
-// matomo.push('requireConsent')
-
const keycloak = Keycloak({
url: keycloakBase,
realm: keycloakRealm,
@@ -53,7 +42,7 @@ export default function App() {
<RecoilRoot>
<APIProvider>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
- <Router history={matomoEnabled ? matomo.connectToHistory(history) : history}>
+ <Router history={history}>
<QueryParamProvider ReactRouterRoute={Route}>
<MuiThemeProvider theme={nomadTheme}>
<ErrorSnacks>
diff --git a/gui/src/components/ScrollButton.js b/gui/src/components/ScrollButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..a31ee3d872d2bdc2dae7ea797f28cba5d882ecc0
--- /dev/null
+++ b/gui/src/components/ScrollButton.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright The NOMAD Authors.
+ *
+ * This file is part of NOMAD. See https://nomad-lab.eu for further info.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useCallback, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { IconButton } from '@material-ui/core'
+import { ScrollContext } from './nav/Navigation'
+
+/**
+ * Button used for manually scrolling the current page.
+ */
+export default function ScrollButton({scrollAmount, relative, instant, onClick, children, ...other}) {
+ const scrollContext = useContext(ScrollContext)
+
+ // Handle click action
+ const handleClick = useCallback(() => {
+ const container = scrollContext.scrollParentRef.current
+ const options = {
+ top: scrollAmount,
+ behavior: instant ? 'instant' : 'smooth'
+ }
+ relative
+ ? container.scrollBy(options)
+ : container.scrollTo(options)
+ onClick && onClick()
+ }, [scrollContext, scrollAmount, instant, relative, onClick])
+
+ return <IconButton
+ onClick={handleClick}
+ {...other}
+ >
+ {children}
+ </IconButton>
+}
+
+ScrollButton.propTypes = {
+ /* Defines the scroll amount. */
+ scrollAmount: PropTypes.number.isRequired,
+ /* Whether the scrollAmount is relative to current position. If false,
+ * scrollAmount is absolute. */
+ relative: PropTypes.bool,
+ /* Use to disable smoothing. */
+ instant: PropTypes.bool,
+ /* Callback function for clicks. */
+ onClick: PropTypes.func,
+ children: PropTypes.node
+}
diff --git a/gui/src/components/YouTubeEmbed.js b/gui/src/components/YouTubeEmbed.js
new file mode 100644
index 0000000000000000000000000000000000000000..b23f21d9df19476bec4d0f23a501dbdbf404b546
--- /dev/null
+++ b/gui/src/components/YouTubeEmbed.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * For embedding YouTube videos.
+ */
+const YouTubeEmbed = ({ embedId }) => (
+ <div className="video-responsive">
+ <iframe
+ title= 'Youtube iframe'
+ width="607"
+ height="340"
+ src={`https://www.youtube.com/embed/${embedId}`}
+ frameBorder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ />
+ </div>
+)
+
+YouTubeEmbed.propTypes = {
+ embedId: PropTypes.string.isRequired
+}
+
+export default YouTubeEmbed
diff --git a/gui/src/components/aitoolkit/AIToolkitPage.js b/gui/src/components/aitoolkit/AIToolkitPage.js
index c317e88fbd7cea7d0ed9e1f9cc6239f2606a58b7..c60c78a20aedf787775c8242266fef1b71c327f9 100644
--- a/gui/src/components/aitoolkit/AIToolkitPage.js
+++ b/gui/src/components/aitoolkit/AIToolkitPage.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
/*
* Copyright The NOMAD Authors.
*
@@ -15,24 +16,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useMemo } from 'react'
+import React from 'react'
import {
- Typography,
- Accordion,
- AccordionSummary,
- AccordionDetails,
- AccordionActions,
- makeStyles,
- Link,
- Button,
Grid,
- TextField
+ Box,
+ Button,
+ Typography,
+ Popover,
+ IconButton,
+ makeStyles
} from '@material-ui/core'
-import tutorials from '../../toolkitMetadata'
+import { Link } from 'react-router-dom'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import Markdown from '../Markdown'
-import { StringParam, useQueryParams, useQueryParam } from 'use-query-params'
-import Autocomplete from '@material-ui/lab/Autocomplete'
+import IconQuery from '../../images/AIT_ico_bb_query.svg'
+import IconReplicate from '../../images/AIT_ico_bb_replicate.svg'
+import IconTutorial from '../../images/AIT_ico_bb_tutorial.svg'
+import IconWork from '../../images/AIT_ico_bb_work.svg'
+import IconQuery2 from '../../images/AIT_ico_bp_query.svg'
+import IconReplicate2 from '../../images/AIT_ico_bp_replicate.svg'
+import IconTutorial2 from '../../images/AIT_ico_bp_tutorial.svg'
+import IconWork2 from '../../images/AIT_ico_bp_work.svg'
+import ArrowIcon from '../../images/AIT_ico_bd_link_go_to.svg'
+import FigureAI from '../../images/AIT_illu_AIT.svg'
+import YouTubeEmbed from '../YouTubeEmbed'
+import ScrollButton from '../ScrollButton'
+import InfoIcon from '../../images/AIT_ico_bd_info_circle.svg'
+import Background from '../../images/AIT_bg_title.jpg'
+import ImgNatRev from '../../images/AIT_slide_nature.png'
const useStyles = makeStyles(theme => ({
root: {
@@ -40,217 +50,458 @@ const useStyles = makeStyles(theme => ({
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
- maxWidth: 1024
+ maxWidth: '1920px',
+ marginBottom: '150px'
},
- section: {
- marginTop: theme.spacing(3)
+ background: {
+ position: 'relative',
+ backgroundImage: `url(${Background})`,
+ height: '840px',
+ marginTop: '-50px',
+ zIndex: 0
},
- sectionTitle: {
- marginBottom: theme.spacing(1),
- marginLeft: theme.spacing(2)
+ boxIcons: {
+ width: '1000px',
+ margin: 'auto',
+ marginTop: '-150px'
},
- tutorial: {
-
+ title: {
+ fontWeight: theme.typography.fontWeightMedium,
+ fontSize: '55px',
+ margin: 'auto',
+ textAlign: 'center',
+ align: 'center',
+ marginTop: '100px',
+ width: '650px',
+ height: '140px',
+ letterSpacing: 0,
+ lineHeight: '62px',
+ color: 'white'
},
- tutorialTitle: {
- fontWeight: 'bold'
+ deck: {
+ letterSpacing: 0,
+ marginTop: '-170px',
+ wordSpacing: '5px',
+ lineHeight: '42px',
+ color: 'white',
+ fontSize: '35px',
+ margin: 'auto',
+ textAlign: 'center',
+ align: 'center',
+ left: '736px',
+ top: '270px',
+ width: '550px',
+ height: '140px'
},
- tutorialDetails: {
- flexDirection: 'column',
- '& *': {
- marginTop: theme.spacing(1)
- },
- '& :first-child': {
- marginTop: -theme.spacing(2)
+ topIcon: {
+ width: '180px',
+ marginBottom: '-10px'
+ },
+ topButton: {
+ fontWeight: theme.typography.fontWeightMedium,
+ backgroundColor: 'white',
+ borderRadius: '30px',
+ textTransform: 'none',
+ marginTop: '-38px',
+ fontSize: '20px',
+ lineHeight: '20px',
+ color: '#2A3C67',
+ textAlign: 'center',
+ align: 'center',
+ paddingTop: '15px',
+ paddingBottom: '15px',
+ paddingRight: '35px',
+ paddingLeft: '15px'
+ },
+ arrowGrid: {
+ marginTop: '-32px',
+ marginLeft: '-45px'
+ },
+ scrollButton: {
+ position: 'absolute',
+ bottom: '70px',
+ left: theme.spacing(2),
+ color: '#2A3C67',
+ backgroundColor: theme.palette.background.paper,
+ '&:hover, &.Mui-focusVisible': {
+ color: '#2A3C67',
+ backgroundColor: theme.palette.background.paper
}
},
- link: {
- cursor: 'pointer'
+ body: {
+ width: '1052px',
+ margin: theme.spacing(3),
+ marginLeft: 'auto',
+ marginRight: 'auto'
+ },
+ highlightedText: {
+ fontWeight: theme.typography.fontWeightMedium,
+ color: '#00DFE0',
+ fontSize: '35px',
+ width: '518px',
+ lineHeight: '42px',
+ marginTop: '80px'
+ },
+ bodyText: {
+ color: '#2A3C67',
+ lineHeight: '30px',
+ fontSize: '22px',
+ width: '607px',
+ marginTop: '40px'
+ },
+ boxIconsBottom: {
+ width: '1000px',
+ margin: 'auto',
+ marginTop: '50px'
+ },
+ buttonBottom: {
+ fontWeight: theme.typography.fontWeightMedium,
+ backgroundColor: '#F3F2F5',
+ fontSize: '20px',
+ lineHeight: '20px',
+ color: '#2A3C67',
+ textAlign: 'center',
+ align: 'center',
+ borderRadius: '30px',
+ width: '207px',
+ height: '70px',
+ textTransform: 'none'
+ },
+ iconsBottom: {
+ width: '200px'
+ },
+ toolTipText: {
+ width: '400px',
+ height: '520px',
+ marginRight: '15px',
+ marginLeft: '15px',
+ marginTop: '10px'
}
}))
export default function AIToolkitPage() {
- const classes = useStyles()
- const [expanded, setExpanded] = useQueryParam('expanded', StringParam)
- const [queryParameters, setQueryParameters] = useQueryParams({
- author: StringParam, keyword: StringParam, method: StringParam, filterString: StringParam
- })
- const emptyQuery = {
- author: null,
- keyword: null,
- method: null,
- filterString: null
- }
+ const styles = useStyles()
- const filter = tutorial => {
- const {author, keyword, method} = queryParameters
- if (author && tutorial.authors.indexOf(author) === -1) {
- return false
- }
- if (keyword && tutorial.labels.application_keyword.indexOf(keyword) === -1) {
- return false
- }
- if (method && tutorial.labels.data_analytics_method.indexOf(method) === -1) {
- return false
- }
- return true
+ const [anchorEl, setAnchorEl] = React.useState(null)
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget)
}
+ const handleClose = () => {
+ setAnchorEl(null)
+ }
+ const open = Boolean(anchorEl)
+ const id = open ? 'simple-popover' : undefined
- const {sections, authors, keywords, methods} = useMemo(() => {
- const authors = {}
- const keywords = {}
- const methods = {}
- const sectionMap = tutorials.tutorials.reduce((sections, tutorial) => {
- tutorial.labels.application_section.forEach(sectionTitle => {
- sections[sectionTitle] = sections[sectionTitle] || {title: sectionTitle, tutorials: []}
- tutorial.key = tutorial.title.replace(/\W/gm, '_').toLowerCase()
- sections[sectionTitle].tutorials.push(tutorial)
- tutorial.authors.forEach(i => { authors[i] = i })
- tutorial.labels.application_keyword.forEach(i => { keywords[i] = i })
- tutorial.labels.data_analytics_method.forEach(i => { methods[i] = i })
- })
- return sections
- }, {})
- return {
- sections: Object.keys(sectionMap).map(key => sectionMap[key]).sort((a, b) => a.title.localeCompare(b.title)),
- authors: Object.keys(authors).sort(),
- keywords: Object.keys(keywords).sort(),
- methods: Object.keys(methods).sort()
- }
- }, [])
-
- return <Grid container spacing={2} className={classes.root}>
- <Grid item xs={12}>
- <Markdown>{`
- # NOMAD Artificial Intelligence Toolkit
-
- We develop and implement methods that identify correlations and structure in big data
- of materials. This will enable scientists and engineers to decide which materials are
- useful for specific applications or which new materials should be the focus of future studies.
- The following tutorials are designed to get started with the AI Toolkit.
-
- To log in directly, click [here](https://analytics-toolkit.nomad-coe.eu/hub).
- `}</Markdown>
- </Grid>
- <Grid item xs={8}>
- {sections.map(section => (
- <div key={section.title} className={classes.section}>
- <Typography className={classes.sectionTitle}>{section.title}</Typography>
- <div>
- {section.tutorials.map(tutorial => {
- const key = tutorial.key
- return <Accordion
- key={key}
- disabled={!filter(tutorial)}
- expanded={expanded === key}
- onChange={() => setExpanded(expanded === key ? null : key)}
- className={classes.tutorial}
+ return <Grid container spacing={2} className={styles.root}>
+ <Grid container className={styles.background}>
+ <ScrollButton scrollAmount={840} className={styles.scrollButton}>
+ <ExpandMoreIcon/>
+ </ScrollButton>
+ <Grid item xs={12} >
+ <Typography className={styles.title}>
+ Artificial-Intelligence Tools for Materials Science
+ </Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <Typography className={styles.deck}>
+ Find new Patterns and Trends in Materials Science Big Data
+ </Typography>
+ </Grid>
+ <Grid container spacing={1} className={styles.boxIcons}>
+ <Grid item xs={3} >
+ <IconButton href='https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/query_nomad_archive.ipynb'>
+ <img
+ src={IconQuery}
+ className={styles.topIcon}
+ style={{zIndex: 2, position: 'relative'}}
+ alt='Query Archive icon'
+ />
+ </IconButton>
+ <Grid container spacing={0}>
+ <Grid item xs={11}>
+ <Typography
+ className={styles.topButton}
+ style={{zIndex: 1, position: 'relative'}}
>
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography className={classes.tutorialTitle}>{tutorial.title}</Typography>
- </AccordionSummary>
- <AccordionDetails className={classes.tutorialDetails}>
- <Typography>
- {tutorial.authors
- .map(name => {
- const label = name.split(',').reverse().join(' ')
- return <Link
- className={classes.link}
- key={name}
- onClick={() => setQueryParameters({
- ...emptyQuery,
- author: queryParameters.author === name ? null : name
- })}
- >
- <i>{label}</i>
- </Link>
- }).reduce((prev, curr) => [prev, ', ', curr])
- }
- </Typography>
- <Markdown>
- {tutorial.description}
- </Markdown>
- <Typography>
- <b>keywords</b>: {tutorial.labels.application_keyword
- .map(keyword => (
- <Link
- className={classes.link}
- key={keyword}
- onClick={() => setQueryParameters({
- ...emptyQuery,
- keyword: queryParameters.keyword === keyword ? null : keyword
- })}
- >
- {keyword}
- </Link>
- )).reduce((prev, curr) => [prev, ', ', curr])
- }
- </Typography>
- <Typography>
- <b>method</b>: {tutorial.labels.data_analytics_method
- .map(method => (
- <Link
- className={classes.link}
- key={method}
- onClick={() => setQueryParameters({
- ...emptyQuery,
- method: queryParameters.method === method ? null : method
- })}
- >
- {method}
- </Link>
- )).reduce((prev, curr) => [prev, ', ', curr])
- }
+ Query the Archive
+ </Typography>
+ </Grid>
+ <Grid item xs={1} className={styles.arrowGrid}>
+ <IconButton href='https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/query_nomad_archive.ipynb'>
+ <img
+ src={ArrowIcon}
+ style={{width: '20px', zIndex: 4, position: 'relative'}}
+ alt = 'Arrow Icon'
+ />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={3} >
+ <IconButton to="tutorials" component={Link}>
+ <img
+ alt='Tutorials icon'
+ src={IconTutorial}
+ className={styles.topIcon}
+ style={{zIndex: 2, position: 'relative'}}
+ />
+ </IconButton>
+ <Grid container spacing={0}>
+ <Grid item xs={11}>
+ <Typography
+ className={styles.topButton}
+ style={{zIndex: 1, position: 'relative'}}
+ >
+ View tutorials
+ </Typography>
+ </Grid>
+ <Grid item xs={1} className={styles.arrowGrid}>
+ <IconButton to="tutorials" component={Link}>
+ <img
+ alt='Arrow Icon'
+ src={ArrowIcon}
+ style={{width: '20px', zIndex: 4, position: 'relative'}}
+ />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={3} >
+ <IconButton to="reproduce" component={Link}>
+ <img
+ alt='Reproduce icon'
+ src={IconReplicate}
+ className={styles.topIcon}
+ style={{zIndex: 2, position: 'relative'}}
+ />
+ </IconButton>
+ <Grid container spacing={0}>
+ <Grid item xs={11}>
+ <Typography
+ className={styles.topButton}
+ style={{zIndex: 1, position: 'relative'}}
+ >
+ Published results
+ </Typography>
+ </Grid>
+ <Grid item xs={1} className={styles.arrowGrid}>
+ <IconButton to="reproduce" component={Link}>
+ <img
+ alt='Arrow icon'
+ src={ArrowIcon}
+ style={{width: '20px', zIndex: 4, position: 'relative'}}
+ />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={3} >
+ <Grid container >
+ <Grid item xs={11}>
+ <IconButton href="https://analytics-toolkit.nomad-coe.eu/hub/user-redirect/notebooks">
+ <img
+ alt='Get to work icon'
+ src={IconWork}
+ className={styles.topIcon}
+ style={{zIndex: 2, position: 'relative'}}
+ />
+ </IconButton>
+ <Grid container spacing={0}>
+ <Grid item xs={11}>
+ <Typography
+ className={styles.topButton}
+ style={{zIndex: 1, position: 'relative'}}
+ >
+ Get to work
</Typography>
- </AccordionDetails>
- <AccordionActions>
- <Button color="primary" href={tutorial.link} target="tutorial">
- open with login
- </Button>
- <Button color="primary" href={tutorial.link_public} target="tutorial">
- open as guest
- </Button>
- </AccordionActions>
- </Accordion>
- })}
- </div>
+ </Grid>
+ <Grid item xs={1} className={styles.arrowGrid}>
+ <IconButton href="https://analytics-toolkit.nomad-coe.eu/hub/user-redirect/notebooks">
+ <img
+ alt='Arrow cion'
+ src={ArrowIcon}
+ style={{width: '20px', zIndex: 4, position: 'relative'}} />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={1} style={{marginTop: '161px', marginLeft: '-20px'}}>
+ <IconButton aria-describedby={id} variant="contained" onClick={handleClick}>
+ <img alt='Info icon' src={InfoIcon} />
+ </IconButton>
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left'
+ }}
+ >
+ <Typography className={styles.toolTipText}>
+ By clicking on the 'Get to work' button you will access a
+ personal space that is available to each NOMAD user. After
+ logging in, you will see a 'tutorials' and 'work' directory.
+ The 'tutorials' directory contains all notebooks available in
+ the AI toolkit, while the 'work' directory offers some space
+ to save personal work. When you are in the 'work' directory,
+ click on the 'new' icon on the top right and then select
+ 'Python 3'. This will create a Jupyter notebook that is
+ stored in the AI toolkit and can be reaccessed and iteratively
+ modified by the user. All packages and software installed in the AI
+ toolkit are also available in the 'work' directory, that
+ makes it possible to employ the same code syntax used in
+ each tutorial contained in the AI toolkit for your own project.
+ For example, you can deploy any of the methodologies described in
+ tutorials on a different dataset. You can also upload your own data with
+ the 'Upload' button (via the menu bar on top, under the 'Publish' menu),
+ or directly access datasets in the NOMAD Archive. Make sure to learn
+ how to access the data in the NOMAD Archive, which is explained in the
+ tutorial accessible from the 'Query the Archive' button.
+ </Typography>
+ </Popover>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid container spacing={1} className={styles.body}>
+ <Grid item xs={8} >
+ <Typography className={styles.highlightedText}>
+ What is the NOMAD Artificial-Intelligence Toolkit?
+ </Typography>
+ <Typography className={styles.bodyText}>
+ The preparation, synthesis, and characterization of new materials is a
+ complex and costly aspect of materials design. The number of possible
+ materials is practically infinite, about 200,000 materials are “known”
+ to exist. But the basic properties (e.g., optical gap, elasticity
+ constants, plasticity, piezoelectric tensors, conductivity, etc.) have
+ been determined for very few of them. NOMAD develops and provides a
+ big set of tools - the Artificial-Intelligence Toolkit - using the
+ latest artificial-intelligence approaches (including machine-learning,
+ compressed sensing, and data mining) that make it possible to sort all
+ available material data, to identify correlations and structures, and
+ to detect trends and anomalies. Thus, the Artificial Intelligence Toolkit
+ enables scientists and engineers to decide which materials are useful for
+ specific applications or which new materials should be the focus of future
+ studies.
+ </Typography>
+ </Grid>
+ <Grid item xs={4}>
+ <img alt='AI toolkit logo' src={FigureAI} style={{marginTop: '150px'}}/>
+
+ </Grid>
+ <Grid item xs={8} >
+ <Typography className={styles.highlightedText}>
+ How to get started
+ </Typography>
+ <Typography className={styles.bodyText}>
+ Introduction to the scope of the NOMAD Artificial-Intelligence toolkit.
+ </Typography>
+ <div className="App" style={{marginTop: '30px'}}>
+ <YouTubeEmbed embedId="v_Ie5TPXrd0" />
</div>
- ))}
+ <Grid item xs={8}>
+ <Typography className={styles.bodyText}>
+ The NOMAD Artificial-Intelligence Toolkit is very accessible. Watch this video and
+ learn more about its features.
+ </Typography>
+ </Grid>
+ </Grid>
+ <div className="App" style={{marginTop: '30px'}}>
+ <YouTubeEmbed embedId="7R4EHsSRork" />
+ </div>
+ <Grid item xs={8} >
+ <Typography className={styles.highlightedText}>
+ Read about us!
+ </Typography>
+ <Typography className={styles.bodyText}>
+ By clicking on the image below, you will access a Nature Reviews paper
+ which gives an introduction to the NOMAD Artificial-Intelligence Toolkit.
+ </Typography>
+ <IconButton
+ href='https://www.nature.com/articles/s42254-021-00373-8'
+ style={{marginRight: '0px', marginTop: '20px'}}
+ >
+ <img alt='Nature logo' src={ImgNatRev}
+ style={{width: '550px',
+ marginTop: '15px',
+ marginLeft: '-10px' }}
+ />
+ </IconButton>
+ </Grid>
+
+ <Grid item xs={8} >
+ <Typography className={styles.highlightedText}>Access the tutorials </Typography>
+ <Typography className={styles.bodyText}>
+ Ready to start? Click on one of the options below. If you're new, we
+ suggest starting with the tutorials.
+ </Typography>
+ </Grid>
</Grid>
- <Grid item xs={4}>
- <Autocomplete
- id="combo-box-demo"
- options={authors}
- getOptionLabel={option => option}
- style={{ width: '100%', marginBottom: 8 }}
- renderInput={params => (
- <TextField {...params} label="author" fullWidth />
- )}
- value={queryParameters.author}
- onChange={(_, value) => setQueryParameters({...emptyQuery, author: value})}
- />
- <Autocomplete
- id="combo-box-demo"
- options={keywords}
- getOptionLabel={option => option}
- style={{ width: '100%', marginBottom: 8 }}
- renderInput={params => (
- <TextField {...params} label="keyword" fullWidth />
- )}
- value={queryParameters.keyword}
- onChange={(_, value) => setQueryParameters({...emptyQuery, keyword: value})}
- />
- <Autocomplete
- id="combo-box-demo"
- options={methods}
- style={{ width: '100%', marginBottom: 8 }}
- renderInput={params => (
- <TextField {...params} label="method" fullWidth />
- )}
- value={queryParameters.method}
- onChange={(_, value) => setQueryParameters({...emptyQuery, method: value})}
- />
- {/* <TextField label="text filter" fullWidth /> */}
+
+ <Grid container spacing={1} className={styles.boxIconsBottom}>
+ <Grid item xs={3}>
+ <IconButton href='https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/query_nomad_archive.ipynb'>
+ <img alt='Query the Archive logo' src={IconQuery2} className={styles.iconsBottom}/>
+ </IconButton>
+ </Grid>
+ <Grid item xs={3}>
+ <img alt='Tutorials logo' src={IconTutorial2} className={styles.iconsBottom}/>
+ </Grid>
+ <Grid item xs={3}>
+ <img alt='Reroduce logo' src={IconReplicate2} className={styles.iconsBottom}/>
+ </Grid>
+ <Grid item xs={3}>
+ <img alt='Get to work log' src={IconWork2} className={styles.iconsBottom}/>
+ </Grid>
+ <Grid item xs={3}>
+ <Button
+ href='https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/query_nomad_archive.ipynb'
+ className={styles.buttonBottom}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Box className={styles.fieldText} >
+ Query the Archive
+ </Box>
+ </Button>
+ </Grid>
+ <Grid item xs={3} >
+ <Button
+ component={Link}
+ to="tutorials"
+ className={styles.buttonBottom}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Box className={styles.fieldText} >
+ View tutorials
+ </Box>
+ </Button>
+ </Grid>
+ <Grid item xs={3}>
+ <Button
+ component={Link}
+ to="reproduce"
+ className={styles.buttonBottom}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Box className={styles.fieldText}>
+ Published results
+ </Box>
+ </Button>
+ </Grid>
+ <Grid item xs={3}>
+ <Button
+ href='https://analytics-toolkit.nomad-coe.eu/hub/user-redirect/notebooks'
+ className={styles.buttonBottom}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Box className={styles.fieldText}>
+ Get to work
+ </Box>
+ </Button>
+ </Grid>
</Grid>
</Grid>
}
diff --git a/gui/src/components/aitoolkit/AccordionsList.js b/gui/src/components/aitoolkit/AccordionsList.js
new file mode 100644
index 0000000000000000000000000000000000000000..381468e03b96f03f2d23bf14d40a6e9487fab1db
--- /dev/null
+++ b/gui/src/components/aitoolkit/AccordionsList.js
@@ -0,0 +1,287 @@
+/*
+ * Copyright The NOMAD Authors.
+ *
+ * This file is part of NOMAD. See https://nomad-lab.eu for further info.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import {
+ Divider,
+ Typography,
+ Link,
+ AccordionActions,
+ Button,
+ Grid,
+ makeStyles
+} from '@material-ui/core'
+import MuiAccordion from '@material-ui/core/Accordion'
+import MuiAccordionSummary from '@material-ui/core/AccordionSummary'
+import MuiAccordionDetails from '@material-ui/core/AccordionDetails'
+import { styled } from '@material-ui/core/styles'
+import ArrowForwardIosSharpIcon from '@material-ui/icons/ArrowForwardIosSharp'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import Markdown from '../Markdown'
+import { StringParam, useQueryParam } from 'use-query-params'
+import AccessIcon from '../../images/AIT_ico_bd_link_external_big.svg'
+import WatchIcon from '../../images/AIT_ico_bd_youtube.svg'
+import PdfIcon from '../../images/AIT_ico_bd_link_pdf.svg'
+import DoiIcon from '../../images/AIT_ico_bd_link_doi.svg'
+
+const useStyles = makeStyles(theme => ({
+ tutorialTitleGrid: {
+ marginRight: '40px'
+ },
+ tutorialTitleText: {
+ fontWeight: theme.typography.fontWeightMedium,
+ fontSize: '28px',
+ color: '#2A3C67',
+ lineHeight: '30px'
+ },
+ fieldText: {
+ color: '#2A3C67'
+ },
+ linkAuthors: {
+ color: '#2A3C67',
+ cursor: 'pointer',
+ lineHeight: '20px',
+ fontSize: '16px'
+ },
+ tutorialDescriptionGrid: {
+ marginLeft: '50px'
+ },
+ tutorialDescriptionText: {
+ color: '#2A3C67',
+ fontSize: '18px'
+ },
+ keywordsGrid: {
+ marginLeft: '80px'
+ },
+ linkKeywords: {
+ border: '1.5px solid #00DFE0',
+ lineHeight: '35px',
+ color: '#2A3C67',
+ cursor: 'pointer',
+ fontStyle: 'normal',
+ fontSize: '16px'
+ },
+ tutorialActions: {
+ marginLeft: '50px'
+ },
+ tutorialResources: {
+ marginTop: '-17px',
+ marginLeft: '-6px'
+ }
+}))
+
+const Accordion = styled((props) => (
+ <MuiAccordion {...props} />
+))(({ theme }) => ({
+ backgroundColor: theme.palette.background.default,
+ borderBottom: '13px solid #7FEFEF'
+}))
+
+const AccordionSummary = styled((props) => (
+ <MuiAccordionSummary
+ expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+ {...props}
+ />
+))(({ theme }) => ({
+ flexDirection: 'row-reverse',
+ '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+ transform: 'rotate(90deg)'
+ },
+ '& .MuiAccordionSummary-content': {
+ marginLeft: theme.spacing(1),
+ marginTop: '20px',
+ marginBottom: '20px'
+ }
+}))
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+ padding: theme.spacing(2)
+}))
+
+function AccordionsList(props) {
+ const styles = useStyles()
+ const [expanded, setExpanded] = useQueryParam('expanded', StringParam)
+ return (
+ props.tutorials_list.map(tutorial => (
+ props.filter(tutorial) &&
+ <div key={tutorial.title} >
+ <Accordion
+ key={tutorial.key}
+ expanded={expanded === tutorial.key}
+ onChange={() => setExpanded(expanded === tutorial.key ? null : tutorial.key)}
+ elevation={0}
+ >
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Grid container spacing={1} >
+ <Grid item xs={7} className={styles.tutorialTitleGrid} >
+ <Typography className={styles.tutorialTitleText}>
+ {tutorial.title}
+ </Typography>
+ </Grid>
+ <Grid item xs={4}>
+ <Typography className={styles.fieldText}>
+ {<b>Authors: </b> }
+ {tutorial.authors
+ .map(name => {
+ const label = name.split(',').reverse().join(' ')
+ return <Link
+ className={styles.linkAuthors}
+ key={name}
+ onClick={() => {
+ props.setQueryParameters({
+ ...props.emptyQuery,
+ author: props.queryParameters.author === name ? null : name
+ })
+ props.setAuthor(name)
+ }}
+ >
+ {label}
+ </Link>
+ }).reduce((prev, curr) => [prev, ' | ', curr])
+ }
+ </Typography>
+ </Grid>
+ </Grid>
+ </AccordionSummary>
+ <AccordionDetails >
+ <Grid container spacing={4}>
+ <Grid item xs={6} className={styles.tutorialDescriptionGrid}>
+ <Markdown className={styles.tutorialDescriptionText}>
+ {tutorial.description}
+ </Markdown>
+ </Grid>
+ <Grid item xs={4} className={styles.keywordsGrid}>
+ <Typography className={styles.fieldText}>
+ <b>AI methods</b>:
+ </Typography>
+ <Typography>
+ {tutorial.labels.ai_methods
+ .map(method => (
+ <Link
+ className={styles.linkKeywords}
+ key={method}
+ onClick={() => {
+ props.setQueryParameters({
+ ...props.emptyQuery,
+ method: props.queryParameters.method === method ? null : method
+ })
+ props.setMethod(method)
+ }}
+ >
+ {method}
+ </Link>
+ )).reduce((prev, curr) => [prev, ' ', curr])
+ }
+ </Typography>
+ <Typography className={styles.fieldText}>
+ <b>System</b>:
+ </Typography>
+ <Typography>
+ {tutorial.labels.application_system
+ .map(system => (
+ <Link
+ className={styles.linkKeywords}
+ key={system}
+ onClick={() => {
+ props.setQueryParameters({
+ ...props.emptyQuery,
+ system: props.queryParameters.system === system ? null : system
+ })
+ props.setSystem(system)
+ }}
+ >
+ {system}
+ </Link>
+ )).reduce((prev, curr) => [prev, ' ', curr])
+ }
+ </Typography>
+ </Grid>
+ </Grid>
+ </AccordionDetails>
+ <AccordionActions>
+ <Grid container spacing={4}>
+ <Grid item xs={7} className={styles.tutorialActions}>
+ <Grid container spacing={0}>
+ <Grid item xs={5}>
+ <Button
+ href={tutorial.link_public}
+ target="tutorial"
+ startIcon={<img alt='Access icon' src={AccessIcon}></img>}
+ >
+ <Typography className={styles.fieldText} >
+ <b>Access tutorial</b>
+ </Typography>
+ </Button>
+ </Grid>
+ <Grid item xs={5} >
+ <div>
+ { tutorial.link_video && <Button
+ width='10px'
+ color='#2A3C67'
+ href={tutorial.link_video}
+ target="tutorial"
+ startIcon={<img alt='Watch icon' src={WatchIcon}></img>}
+ >
+ <Typography className={styles.fieldText} >
+ <b>Watch video</b>
+ </Typography>
+ </Button>}
+ </div>
+ </Grid>
+ </Grid>
+ </Grid>
+ {tutorial.link_paper &&
+ <Grid item xs={4} className={styles.tutorialResources}>
+ <Grid item xs={12}>
+ <Typography className={styles.fieldText}>
+ <b>Additional Resources</b>:
+ </Typography>
+ </Grid>
+ <Grid container spacing={0}>
+ <Grid item xs={2} >
+ <div>
+ {tutorial.link_paper && <Button
+ color='#2A3C67'
+ href={tutorial.link_paper}
+ target="tutorial"
+ startIcon={<img alt='DOI icon' src={DoiIcon}></img>}>
+ </Button>}
+ </div>
+ </Grid>
+ <Grid item xs={2}>
+ <div>
+ {tutorial.link_paper && <Button
+ color='#2A3C67'
+ href={tutorial.link_paper}
+ target="tutorial"
+ startIcon={<img alt='PDF icon' src={PdfIcon}/>}>
+ </Button>}
+ </div>
+ </Grid>
+ </Grid>
+ </Grid>
+ }
+ </Grid>
+ </AccordionActions>
+ <Divider />
+ </Accordion>
+ </div>
+ )))
+}
+
+export default AccordionsList
diff --git a/gui/src/components/aitoolkit/ReproducePage.js b/gui/src/components/aitoolkit/ReproducePage.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0b9d8f492c35ec7c4eff7f755c49478d7ddfe5b
--- /dev/null
+++ b/gui/src/components/aitoolkit/ReproducePage.js
@@ -0,0 +1,254 @@
+/*
+ * Copyright The NOMAD Authors.
+ *
+ * This file is part of NOMAD. See https://nomad-lab.eu for further info.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo, useState } from 'react'
+import { useStyles } from './TutorialsPage'
+import {
+ Button,
+ Grid,
+ TextField,
+ Typography,
+ Divider,
+ IconButton
+} from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import tutorials from '../../toolkitMetadata'
+import { StringParam, useQueryParams } from 'use-query-params'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import TutorialsIcon from '../../images/AIT_ico_bb_tutorial.svg'
+import ArrowIcon from '../../images/AIT_ico_bd_link_go_to.svg'
+import ReproduceIcon from '../../images/AIT_ico_bp_replicate.svg'
+import AccordionsList from './AccordionsList'
+import FigureAI from '../../images/AIT_illu_AIT.svg'
+import { aitoolkitEnabled } from '../../config'
+
+export default function ReproducePage() {
+ const styles = useStyles()
+ const [queryParameters, setQueryParameters] = useQueryParams({
+ author: StringParam, system: StringParam, method: StringParam, filterString: StringParam
+ })
+
+ const filter = tutorial => {
+ const {author, system, method} = queryParameters
+ if (author && tutorial.authors.indexOf(author) === -1) {
+ return false
+ }
+ if (system && tutorial.labels.application_system.indexOf(system) === -1) {
+ return false
+ }
+ if (method && tutorial.labels.ai_methods.indexOf(method) === -1) {
+ return false
+ }
+ return true
+ }
+
+ const tutorials_list_advanced = tutorials.tutorials.filter(tutorial => tutorial.labels.category[0] === 'advanced_tutorial')
+
+ const {authors, systems, methods} = useMemo(() => {
+ const authors = {}
+ const systems = {}
+ const methods = {}
+ tutorials_list_advanced.forEach(tutorial => {
+ tutorial.key = tutorial.title.replace(/\W/gm, '_').toLowerCase()
+ tutorial.authors.forEach(i => { authors[i] = i })
+ tutorial.labels.application_system.forEach(i => { systems[i] = i })
+ tutorial.labels.ai_methods.forEach(i => { methods[i] = i })
+ }
+ )
+ return {
+ authors: Object.keys(authors).sort(),
+ systems: Object.keys(systems).sort(),
+ methods: Object.keys(methods).sort()
+ }
+ }, [tutorials_list_advanced])
+
+ const [valAuthor, setAuthor] = useState({})
+ const [valSystem, setSystem] = useState({})
+ const [valMethod, setMethod] = useState({})
+
+ return <Grid container spacing={1} className={styles.root}>
+ <Grid container spacing={0} className={styles.Heading}>
+ <Grid item xs={6} className={styles.sectionTitle} >
+ <Grid container spacing={0}>
+ <Grid item xs={4} style={{marginTop: '-100px', marginLeft: '-20px'}}>
+ <IconButton
+ component={Link}
+ {...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
+ >
+ <img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
+ </IconButton>
+ </Grid>
+ <Grid item xs={8}>
+ <Typography className={styles.title}>
+ Reproduce published results
+ </Typography>
+ </Grid>
+ </Grid>
+ <Typography className={styles.deck}>
+ Reproducibility is key in scientific research. The advent of AI-driven big-data analytics has
+ introduced a new possible source of uncertainty in scientific communication: The AI workflow are
+ typically complex and there is no standard way to describe them. A solution is offered by the
+ NOMAD AI toolkit, which hosts open-access notebooks that allow to reproduce result published in
+ scientific journals. Explore them below
+ </Typography>
+ </Grid>
+ <Grid item xs={4} className={styles.sectionIcon}>
+ <img alt='Reproduce icon' src={ReproduceIcon} className={styles.icon}/>
+ </Grid>
+ </Grid>
+ <Grid container spacing={0}>
+ <Grid item xs={12} >
+ <Typography className={styles.filter} >
+ Filter Tutorials
+ </Typography>
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={authors}
+ className={styles.autocomplete}
+ getOptionLabel={option => option}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="Author"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valAuthor}
+ onChange={(_, value) => {
+ setQueryParameters({author: value})
+ setAuthor(value)
+ }}
+ />
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={methods}
+ className={styles.autocomplete}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="AI Method"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valMethod}
+ onChange={(_, value) => {
+ setQueryParameters({method: value})
+ setMethod(value)
+ }}
+ />
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={systems}
+ className={styles.autocomplete}
+ getOptionLabel={option => option}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="System"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valSystem}
+ onChange={(_, value) => {
+ setQueryParameters({system: value})
+ setSystem(value)
+ }}
+ />
+ </Grid>
+ </Grid>
+ <Grid container spacing={1} className={styles.tutorialsList}>
+
+ <Grid item xs={12}>
+ <Divider
+ style={{
+ backgroundColor: '#7FEFEF',
+ height: '13px',
+ borderRadius: '4px',
+ marginBottom: '-8px'
+ }}
+ />
+ </Grid>
+ <Grid item xs={12}>
+ <AccordionsList tutorials_list={tutorials_list_advanced}
+ setAuthor = {setAuthor}
+ setSystem={setSystem}
+ setMethod={setMethod}
+ filter={filter}
+ setQueryParameters={setQueryParameters}
+ queryParameters={queryParameters}
+ emptyQuery={queryParameters} />
+ </Grid>
+
+ </Grid>
+ <Grid item xs={6} className={styles.sectionTitle} >
+ <Typography className={styles.titleSecondary}>
+ Explore the basics of AI
+ </Typography>
+ <Typography className={styles.deck}>
+ Recent applications of artificial intelligence in science build on top
+ of solid methodologies that have been being developed over the last decades.
+ Exploring the following tutorials, you can learn the basics of AI to
+ better understand their latest applications in materials science.
+ </Typography>
+ <Grid container spacing={1}>
+ <Grid item xs={4}>
+ <IconButton
+ component={Link}
+ {...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
+ style={{marginRight: '0px', marginTop: '20px'}}
+ >
+ <img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
+ </IconButton>
+ </Grid>
+ <Grid item xs={8}>
+ <Button
+ width='10px'
+ color='#2A3C67'
+ component={Link}
+ to="tutorials"
+ className={styles.bottomButton}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Typography className={styles.bottomButtonText} >
+ AI tutorials
+ </Typography>
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={4} className={styles.sectionIcon}>
+ <IconButton
+ component={Link}
+ to="tutorials"
+ className={styles.bottomIcon}
+ >
+ <img alt='Tutorials icon' src={TutorialsIcon} style={{width: '300px'}}/>
+ </IconButton>
+
+ </Grid>
+ </Grid>
+}
diff --git a/gui/src/components/aitoolkit/TutorialsPage.js b/gui/src/components/aitoolkit/TutorialsPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..5de74e613fac43087ea853861aef14b095a1d55a
--- /dev/null
+++ b/gui/src/components/aitoolkit/TutorialsPage.js
@@ -0,0 +1,416 @@
+/*
+ * Copyright The NOMAD Authors.
+ *
+ * This file is part of NOMAD. See https://nomad-lab.eu for further info.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useMemo, useState } from 'react'
+import {
+ Box,
+ Button,
+ Grid,
+ TextField,
+ Typography,
+ Divider,
+ IconButton,
+ makeStyles
+} from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import { StringParam, useQueryParams } from 'use-query-params'
+import TutorialsIcon from '../../images/AIT_ico_bp_tutorial.svg'
+import ArrowIcon from '../../images/AIT_ico_bd_link_go_to.svg'
+import ReproduceIcon from '../../images/AIT_ico_bb_replicate.svg'
+import AccordionsList from './AccordionsList'
+import FigureAI from '../../images/AIT_illu_AIT.svg'
+import tutorials from '../../toolkitMetadata'
+import { aitoolkitEnabled } from '../../config'
+
+export const useStyles = makeStyles(theme => ({
+ root: {
+ margin: theme.spacing(3),
+ width: '100%',
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ maxWidth: '1052px',
+ marginBottom: '150px'
+ },
+ sectionIcon: {
+ marginTop: theme.spacing(3)
+ },
+ sectionTitle: {
+ marginBottom: theme.spacing(1),
+ marginLeft: theme.spacing(2),
+ marginTop: '105px'
+ },
+ title: {
+ color: '#2A3C67',
+ fontSize: '35px',
+ marginLeft: '-10px',
+ fontWeight: theme.typography.fontWeightMedium,
+ marginTop: '-70px'
+ },
+ deck: {
+ color: '#2A3C67',
+ fontSize: '22px',
+ marginTop: '20px',
+ lineHeight: '30px',
+ marginLeft: '-10px',
+ width: '518px'
+ },
+ icon: {
+ height: '371px',
+ marginTop: '-20px',
+ marginLeft: '100px'
+ },
+ filter: {
+ fontWeight: theme.typography.fontWeightMedium,
+ color: '#2A3C67',
+ fontSize: '20px',
+ marginTop: '60px',
+ marginLeft: '0px'
+ },
+ autocomplete: {
+ height: 'auto',
+ color: '#2A3C67',
+ border: '3px solid #00DFE0',
+ borderRadius: '10px 10px 10px 10px',
+ marginTop: '10px',
+ marginLeft: '0px',
+ width: '240px'
+ },
+ tutorialsList: {
+ marginTop: '50px'
+ },
+ textLevel: {
+ textAlign: 'left',
+ color: '#2A3C67',
+ fontSize: '22px',
+ height: '22px',
+ marginTop: '-16px'
+ },
+ titleSecondary: {
+ fontWeight: 'bold',
+ color: '#00DFE0',
+ fontSize: '35px',
+ marginLeft: '-10px'
+ },
+ bottomButton: {
+ color: '#F3F2F5',
+ backgroundColor: '#F3F2F5',
+ borderRadius: '30px',
+ width: '242px',
+ height: '70px',
+ textAlign: 'center',
+ align: 'center',
+ marginTop: '40px',
+ textTransform: 'none',
+ fontSize: '12pt',
+ lineHeight: '20px'
+ },
+ bottomButtonText: {
+ color: '#2A3C67',
+ fontWeight: theme.typography.fontWeightMedium
+ },
+ bottomIcon: {
+ marginTop: '80px',
+ marginLeft: '120px'
+ }
+}))
+
+export default function TutorialsPage() {
+ const styles = useStyles()
+ const [queryParameters, setQueryParameters] = useQueryParams({
+ author: StringParam, system: StringParam, method: StringParam, filterString: StringParam
+ })
+
+ const filter = tutorial => {
+ const {author, system, method} = queryParameters
+ if (author && tutorial.authors.indexOf(author) === -1) {
+ return false
+ }
+ if (system && tutorial.labels.application_system.indexOf(system) === -1) {
+ return false
+ }
+ if (method && tutorial.labels.ai_methods.indexOf(method) === -1) {
+ return false
+ }
+ return true
+ }
+
+ const tutorials_list = tutorials.tutorials.filter(tutorial => tutorial.labels.category[0] === 'beginner_tutorial' ||
+ tutorial.labels.category[0] === 'intermediate_tutorial' || tutorial.labels.category[0] === 'query_tutorial')
+
+ const tutorials_list_beginner = tutorials_list.filter(tutorial => tutorial.labels.category[0] === 'beginner_tutorial')
+
+ const tutorials_list_intermediate = tutorials_list.filter(tutorial => tutorial.labels.category[0] === 'intermediate_tutorial')
+
+ const tutorials_list_query = tutorials_list.filter(tutorial => tutorial.labels.category[0] === 'query_tutorial')
+
+ const {authors, systems, methods} = useMemo(() => {
+ const authors = {}
+ const systems = {}
+ const methods = {}
+ tutorials_list.forEach(tutorial => {
+ tutorial.key = tutorial.title.replace(/\W/gm, '_').toLowerCase()
+ tutorial.authors.forEach(i => { authors[i] = i })
+ tutorial.labels.application_system.forEach(i => { systems[i] = i })
+ tutorial.labels.ai_methods.forEach(i => { methods[i] = i })
+ }
+ )
+ return {
+ authors: Object.keys(authors).sort(),
+ systems: Object.keys(systems).sort(),
+ methods: Object.keys(methods).sort()
+ }
+ }, [tutorials_list])
+
+ const [valAuthor, setAuthor] = useState({})
+ const [valSystem, setSystem] = useState({})
+ const [valMethod, setMethod] = useState({})
+
+ return <Grid container spacing={1} className={styles.root}>
+ <Grid container spacing={0} className={styles.Heading}>
+ <Grid item xs={6} className={styles.sectionTitle}>
+ <Grid container spacing={0}>
+ <Grid item xs={4} style={{marginTop: '-100px', marginLeft: '-20px'}}>
+ <IconButton
+ {...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
+ >
+ <img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
+ </IconButton>
+ </Grid>
+ <Grid item xs={8}>
+ <Typography className={styles.title}>
+ Learn from tutorials
+ </Typography>
+ </Grid>
+ </Grid>
+ <Typography className={styles.deck}>
+ We develop and implement methods that identify correlations and
+ structure in big data of materials. This will enable scientists and
+ engineers to decide which materials are useful for specific
+ applications or which new materials should be the focus of future
+ studies. The following BEGINNER and INTERMEDIATE LEVEL tutorials are designed to get started with the
+ AI Toolkit.
+ </Typography>
+ </Grid>
+ <Grid item xs={4} className={styles.sectionIcon}>
+ <img alt='Tutorials icon' src={TutorialsIcon} className={styles.icon}/>
+ </Grid>
+ </Grid>
+ <Grid container spacing={0}>
+ <Grid item xs={12} >
+ <Typography className={styles.filter}>
+ Filter Tutorials
+ </Typography>
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={authors}
+ className={styles.autocomplete}
+ getOptionLabel={option => option}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="Author"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valAuthor}
+ onChange={(_, value) => {
+ setQueryParameters({author: value})
+ setAuthor(value)
+ }}
+ />
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={methods}
+ className={styles.autocomplete}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="AI Method"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valMethod}
+ onChange={(_, value) => {
+ setQueryParameters({method: value})
+ setMethod(value)
+ }}
+ />
+ </Grid>
+ <Grid item xs={3}>
+ <Autocomplete
+ id="combo-box-demo"
+ options={systems}
+ className={styles.autocomplete}
+ getOptionLabel={option => option}
+ renderInput={params => (
+ <TextField
+ {...params}
+ label="System"
+ InputProps={{...params.InputProps, disableUnderline: true}}
+ fullWidth
+ />
+ )}
+ value={valSystem}
+ onChange={(_, value) => {
+ setQueryParameters({system: value})
+ setSystem(value)
+ }}
+ />
+ </Grid>
+ </Grid>
+ <Grid container spacing={1} className={styles.tutorialsList}>
+ <Grid item xs={12}>
+ {tutorials_list_beginner.some(tutorial => filter(tutorial)) &&
+ <Grid container spacing={1}>
+ <Grid item xs={3}>
+ <Typography className={styles.textLevel}>
+ BEGINNER LEVEL
+ </Typography>
+ </Grid>
+ <Grid item xs={9}>
+ <Divider disableGutters
+ style={{
+ backgroundColor: '#7FEFEF',
+ height: '13px',
+ borderRadius: '4px'
+ }}/>
+ </Grid>
+ </Grid>
+ }
+ <AccordionsList tutorials_list={tutorials_list_beginner}
+ setAuthor = {setAuthor}
+ setSystem={setSystem}
+ setMethod={setMethod}
+ filter={filter}
+ setQueryParameters={setQueryParameters}
+ queryParameters={queryParameters}
+ emptyQuery={queryParameters} />
+ </Grid>
+ <Box mt={'100px'}>
+ {tutorials_list_intermediate.some(tutorial => filter(tutorial)) &&
+ <Grid container spacing={1}>
+ <Grid item xs={3}>
+ <Typography className={styles.textLevel}>
+ INTERMEDIATE LEVEL
+ </Typography>
+ </Grid>
+ <Grid item xs={9}>
+ <Divider disableGutters
+ style={{
+ backgroundColor: 'rgba(127, 239, 239, 1)',
+ height: '13px',
+ borderRadius: '4px'
+ }}/>
+ </Grid>
+ </Grid>
+ }
+ <Grid item xs={12}>
+ <AccordionsList tutorials_list={tutorials_list_intermediate}
+ setAuthor = {setAuthor}
+ setSystem={setSystem}
+ setMethod={setMethod}
+ filter={filter}
+ setQueryParameters={setQueryParameters}
+ queryParameters={queryParameters}
+ emptyQuery={queryParameters} />
+ </Grid>
+ </Box>
+ <Box mt={'100px'}>
+ {tutorials_list_query.some(tutorial => filter(tutorial)) &&
+ <Grid container spacing={1}>
+ <Grid item xs={3}>
+ <Typography className={styles.textLevel}>
+ TOOLKIT INFRASTRUCTURE
+ </Typography>
+ </Grid>
+ <Grid item xs={9}>
+ <Divider disableGutters
+ style={{
+ backgroundColor: 'rgba(127, 239, 239, 1)',
+ height: '13px',
+ borderRadius: '4px'
+ }}/>
+ </Grid>
+ </Grid>
+ }
+ <Grid item xs={12}>
+ <AccordionsList tutorials_list={tutorials_list_query}
+ setAuthor = {setAuthor}
+ setSystem={setSystem}
+ setMethod={setMethod}
+ filter={filter}
+ setQueryParameters={setQueryParameters}
+ queryParameters={queryParameters}
+ emptyQuery={queryParameters} />
+ </Grid>
+ </Box>
+
+ </Grid>
+ <Grid item xs={6} className={styles.sectionTitle}>
+ <Typography className={styles.titleSecondary}>
+ Next advanced level
+ </Typography>
+ <Typography className={styles.deck}>
+ After learning the basics of artificial-intelligence tools, you can apply the latest
+ AI developments to timely problems in materials science. These
+ outstanding applications allow to reproduce results that have been
+ published recently in scientific journals.
+ </Typography>
+ <Grid container spacing={1}>
+ <Grid item xs={4}>
+ <IconButton
+ component={Link}
+ {...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
+ style={{marginRight: '0px', marginTop: '20px'}}
+ >
+ <img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
+ </IconButton>
+ </Grid>
+ <Grid item xs={8}>
+ <Button
+ width='10px'
+ color='#2A3C67'
+ component={Link}
+ to="reproduce"
+ className={styles.bottomButton}
+ endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
+ >
+ <Typography className={styles.bottomButtonText}>
+ Advanced applications
+ </Typography>
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={4} className={styles.sectionIcon}>
+ <IconButton
+ component={Link}
+ to="reproduce"
+ className={styles.bottomIcon}
+ >
+ <img alt='Reproduce icon' src={ReproduceIcon} style={{width: '300px'}}/>
+ </IconButton>
+ </Grid>
+ </Grid>
+}
diff --git a/gui/src/components/nav/Consent.js b/gui/src/components/nav/Consent.js
deleted file mode 100644
index 808fd1289e2f9a50fe9721e9c0375b9a12f2cacd..0000000000000000000000000000000000000000
--- a/gui/src/components/nav/Consent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-
-import React, { useEffect, useMemo, useState } from 'react'
-import {
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- FormControlLabel,
- FormGroup,
- Switch
-} from '@material-ui/core'
-import PropTypes from 'prop-types'
-import Markdown from '../Markdown'
-import { matomo } from '../App'
-import { useCookies } from 'react-cookie'
-import { guiBase, consent } from '../../config'
-
-/**
- * Consent form.
- */
-function Consent({open, onAccept}) {
- const [cookies, setCookie] = useCookies()
- const [optOut, setOptOut] = useState(cookies['tracking-enabled'] === 'false')
- const cookieOptions = useMemo(() => ({
- expires: new Date(2147483647 * 1000),
- path: '/' + guiBase.split('/').slice(1).join('/')
- }), [])
-
- useEffect(() => {
- if (!optOut) {
- matomo.push(['setConsentGiven'])
- } else {
- matomo.push(['requireConsent'])
- }
- })
-
- // Write again on initial render to push forwards Safari's hard-coded 7 days
- // ITP window
- useEffect(() => {
- setCookie('terms-accepted', cookies['terms-accepted'], cookieOptions)
- setCookie('tracking-enabled', cookies['tracking-enabled'], cookieOptions)
- },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [])
-
- // Write cookies when form accepted.
- const handleAccept = () => {
- setCookie('terms-accepted', true, cookieOptions)
- setCookie('tracking-enabled', !optOut, cookieOptions)
- onAccept()
- }
-
- // When the form is opened, the cookies are by default rejected until the user
- // accepts the terms.
- useEffect(() => {
- if (open) {
- setCookie('terms-accepted', false, cookieOptions)
- setCookie('tracking-enabled', false, cookieOptions)
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [cookieOptions, open])
-
- return <Dialog
- disableBackdropClick
- disableEscapeKeyDown
- open={open}
- >
- <DialogTitle>Terms of Use</DialogTitle>
- <DialogContent>
- <Markdown>{consent}</Markdown>
- <FormGroup>
- <FormControlLabel
- control={<Switch
- checked={optOut}
- onChange={(e) => {
- setOptOut(old => !old)
- }}
- color="primary"
- />}
- label="Do not provide information about your use of NOMAD (opt-out)."
- />
- </FormGroup>
- </DialogContent>
- <DialogActions>
- <Button onClick={handleAccept} color="primary">
- Accept
- </Button>
- </DialogActions>
- </Dialog>
-}
-
-Consent.propTypes = {
- open: PropTypes.bool,
- onAccept: PropTypes.func
-}
-
-export default Consent
diff --git a/gui/src/components/nav/MainMenu.js b/gui/src/components/nav/MainMenu.js
index 21d0dd4309ae762984ae295cf243abdf93da76cc..adc585dd2fdbe3180d3cfe21702842b1467fdbd6 100644
--- a/gui/src/components/nav/MainMenu.js
+++ b/gui/src/components/nav/MainMenu.js
@@ -16,20 +16,11 @@
* limitations under the License.
*/
-import React, { useState, useCallback } from 'react'
+import React from 'react'
import { MenuBar, MenuBarItem, MenuBarMenu } from './MenuBar'
-import { useCookies } from 'react-cookie'
-import Consent from './Consent'
import { routes } from './Routes'
const MainMenu = React.memo(function MainMenu() {
- const cookies = useCookies()[0]
- const [consentOpen, setConsentOpen] = useState(cookies['terms-accepted'] !== 'true')
-
- const handleConsentAccept = useCallback(() => {
- setConsentOpen(false)
- }, [])
-
return <MenuBar>
{routes.filter(route => route.menu).map((menuRoute, i) => (
<MenuBarMenu key={i} label={menuRoute.menu} route={'/' + menuRoute.path}>
@@ -37,12 +28,11 @@ const MainMenu = React.memo(function MainMenu() {
<MenuBarItem
key={i} label={itemRoute.menu} tooltip={itemRoute.tooltip}
route={itemRoute.path && `/${menuRoute.path}/${itemRoute.path}`}
- href={itemRoute.href} onClick={itemRoute.consent && (() => setConsentOpen(true))}
+ href={itemRoute.href}
/>
))}
</MenuBarMenu>
))}
- <Consent open={consentOpen} onAccept={handleConsentAccept}/>
</MenuBar>
})
diff --git a/gui/src/components/nav/MainMenu.spec.js b/gui/src/components/nav/MainMenu.spec.js
index 780f348911a8ea1c892c92752c97ae47473cc94f..c6af06030a3205bf2e683ea229067cb53d3da32e 100644
--- a/gui/src/components/nav/MainMenu.spec.js
+++ b/gui/src/components/nav/MainMenu.spec.js
@@ -32,8 +32,10 @@ describe('<MainMenu />', () => {
expect(menu).toBeInTheDocument()
if (route.routes) {
route.routes.forEach(route => {
- const item = within(menu).getByTestId(route.menu)
- expect(item).toBeInTheDocument()
+ if (route.menu) {
+ const item = within(menu).getByTestId(route.menu)
+ expect(item).toBeInTheDocument()
+ }
})
}
}
diff --git a/gui/src/components/nav/Navigation.js b/gui/src/components/nav/Navigation.js
index 21ce0fe6f8b4cfcf9a19e5ff849c2a7addb6c037..639f995bdc741f589bfc2ba89bddc58186da1bc7 100644
--- a/gui/src/components/nav/Navigation.js
+++ b/gui/src/components/nav/Navigation.js
@@ -16,17 +16,19 @@
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
-import { Snackbar, SnackbarContent, IconButton, Link as MuiLink, Button } from '@material-ui/core'
+import { useLocation } from 'react-router-dom'
+import { Snackbar, SnackbarContent, IconButton, Link as MuiLink, Button, Link } from '@material-ui/core'
import UnderstoodIcon from '@material-ui/icons/Check'
import ReloadIcon from '@material-ui/icons/Replay'
import { amber } from '@material-ui/core/colors'
import AppBar, { appBarHeight } from './AppBar'
-import { version } from '../../config'
+import { guiBase, version } from '../../config'
import { Routes } from './Routes'
import { serviceWorkerUpdateHandlerRef } from '../../serviceWorker'
import { ErrorBoundary } from '../errors'
+import { useCookies } from 'react-cookie'
export const ScrollContext = React.createContext({scrollParentRef: null})
@@ -70,6 +72,43 @@ function ReloadSnack() {
</Snackbar>
}
+function TermsSnack() {
+ const [cookies, setCookie] = useCookies()
+ const [accepted, setAccepted] = useState(cookies['terms-accepted'])
+
+ const cookieOptions = useMemo(() => ({
+ expires: new Date(2147483647 * 1000),
+ path: '/' + guiBase.split('/').slice(1).join('/')
+ }), [])
+
+ return <Snackbar
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left'
+ }}
+ open={!accepted}
+ >
+ <SnackbarContent
+ message={<span>
+ NOMAD only uses cookies that are strictly necessary for this site's functionality.
+ No tracking or marketing cookies are used. By using this site you agree to
+ our <Link href="https://nomad-lab.eu/terms" title="terms of service">terms of service</Link>.
+ </span>}
+ action={[
+ <IconButton
+ size="small" key={0} color="inherit"
+ onClick={() => {
+ setCookie('terms-accepted', true, cookieOptions)
+ setAccepted(true)
+ }}
+ >
+ <UnderstoodIcon />
+ </IconButton>
+ ]}
+ />
+ </Snackbar>
+}
+
const useBetaSnackStyles = makeStyles(theme => ({
root: {},
snack: {
@@ -135,14 +174,23 @@ const useStyles = makeStyles(theme => ({
export default function Navigation() {
const classes = useStyles()
+ const { pathname } = useLocation()
const scrollParentRef = useRef(null)
+ // Scroll to top upon changing page
+ useEffect(() => {
+ if (scrollParentRef.current) {
+ scrollParentRef.current.scrollTo(0, 0)
+ }
+ }, [pathname])
+
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<ReloadSnack/>
<ErrorBoundary>
<BetaSnack />
+ <TermsSnack />
<AppBar />
<main className={classes.content} ref={scrollParentRef}>
<ScrollContext.Provider value={{scrollParentRef: scrollParentRef}}>
diff --git a/gui/src/components/nav/Routes.js b/gui/src/components/nav/Routes.js
index d56307a795c64fb9dfa15421335d4ded68b9e7d1..8c15246516b08be2cef5d56a68e04411e58dc971 100644
--- a/gui/src/components/nav/Routes.js
+++ b/gui/src/components/nav/Routes.js
@@ -23,6 +23,8 @@ import { matchPath, useLocation, Redirect, useHistory } from 'react-router-dom'
import { Button, Tooltip } from '@material-ui/core'
import About from '../About'
import AIToolkitPage from '../aitoolkit/AIToolkitPage'
+import TutorialsPage from '../aitoolkit/TutorialsPage'
+import ReproducePage from '../aitoolkit/ReproducePage'
import { MetainfoPage, help as metainfoHelp } from '../archive/MetainfoBrowser'
import EntryPage, { help as entryHelp } from '../entry/EntryPage'
import UploadPage from '../uploads/UploadPage'
@@ -274,7 +276,17 @@ export const routes = [
},
component: MetainfoPage
},
- toolkitRoute
+ toolkitRoute,
+ {
+ path: 'tutorials',
+ title: 'Artificial Intelligence Toolkit',
+ component: TutorialsPage
+ },
+ {
+ path: 'reproduce',
+ title: 'Artificial Intelligence Toolkit',
+ component: ReproducePage
+ }
]
},
{
diff --git a/gui/src/config.js b/gui/src/config.js
index 87780662fbdb7bd56d06554b15a5b8a621b54428..3afd1e99742bfe56bad05acff1b206b3aa05069e 100644
--- a/gui/src/config.js
+++ b/gui/src/config.js
@@ -23,36 +23,17 @@ export const appBase = window.nomadEnv.appBase.replace(/\/$/, '')
// export const apiBase = 'http://nomad-lab.eu/prod/rae/api'
export const apiBase = `${appBase}/api`
export const guiBase = process.env.PUBLIC_URL
-export const matomoUrl = window.nomadEnv.matomoUrl
export const servicesUploadLimit = window.nomadEnv.servicesUploadLimit
-export const matomoSiteId = window.nomadEnv.matomoSiteId
export const keycloakBase = window.nomadEnv.keycloakBase
export const keycloakRealm = window.nomadEnv.keycloakRealm
export const keycloakClientId = window.nomadEnv.keycloakClientId
export const debug = window.nomadEnv.debug || false
-export const matomoEnabled = window.nomadEnv.matomoEnabled || false
export const encyclopediaEnabled = window.nomadEnv.encyclopediaEnabled || false
export const aitoolkitEnabled = window.nomadEnv.aitoolkitEnabled || false
export const oasis = window.nomadEnv.oasis || false
export const email = 'support@nomad-lab.eu'
export const maxLogsToShow = 50
-export const consent = `
-By using this web-site and by uploading and downloading data, you agree to the
-[terms of use](https://nomad-lab.eu/terms).
-
-Uploaded data is licensed under the Creative Commons Attribution license
-([CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)). You can publish
-uploaded data with an *embargo*. Data with an *embargo* is only visible to
-you and users you share your data with. The *embargo period* lasts up to 36 months.
-After the *embargo* your published data will be public. **Note that public data
-is visible to others and files become downloadable by everyone.**
-
-This web-site uses *cookies*. We use cookies to track you login status for all NOMAD services
-and optionally to store information about your use of NOMAD. None of this information is
-shared with other parties. By using this web-site you agree to the described use of *cookies*.
-[Learn more](https://www.cookiesandyou.com/).
-`
export const nomadPrimaryColor = {
main: '#008DC3',
light: '#03B9FF',
diff --git a/gui/src/images/AIT_bg_title.jpg b/gui/src/images/AIT_bg_title.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..511cde7740e76186408a15dc766a2fb7c6dff10a
Binary files /dev/null and b/gui/src/images/AIT_bg_title.jpg differ
diff --git a/gui/src/images/AIT_ico_bb_query.svg b/gui/src/images/AIT_ico_bb_query.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f88f33ce3ec0facf0eb9c2713abe653906bb2ac6
--- /dev/null
+++ b/gui/src/images/AIT_ico_bb_query.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193" height="193" viewBox="0 0 193 193"><defs><filter id="a" x="0" y="0" width="193" height="193" filterUnits="userSpaceOnUse"><feOffset dy="10" input="SourceAlpha"/><feGaussianBlur stdDeviation="7.5" result="b"/><feFlood flood-color="#598ebc" flood-opacity="0.671"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(22.5 12.5)"><g transform="matrix(1, 0, 0, 1, -22.5, -12.5)" filter="url(#a)"><circle cx="74" cy="74" r="74" transform="translate(22.5 12.5)" fill="#fff"/></g><g transform="translate(-406 -2953)"><g transform="translate(430 2973.77)"><path d="M2735.69,215.215c1.624-1.011,3.32-2.068,5.123-3.083,1.775-1.021,3.63-2,5.544-2.869,9.255-5.759,22.536-3.784,28.4,6.433,4.732,8.525,7.386,18.665,5.784,28.169a34.883,34.883,0,0,1-2.012,6.985c-4.434,13.4-19.531,24.421-33.789,18.855-14.824-5.894-26.934-15.159-38.493-25.115a25.393,25.393,0,0,1-3.951-5.762c-1.953-4.084-2.165-8.533,1.172-12.676,5.745-7.314,15.413-7.986,24.068-8.437A70.92,70.92,0,0,0,2735.69,215.215Z" transform="translate(-2698.314 -192.834)" fill="#00dfe0" opacity="0.5"/><path d="M2730.646,249.325c-9.4,0-16.741-3.848-16.741-8.76s7.344-8.757,16.741-8.757c9.414,0,16.775,3.848,16.775,8.757S2740.06,249.325,2730.646,249.325Zm0-15.083c-8.421,0-14.3,3.335-14.3,6.323s5.879,6.323,14.3,6.323c8.454,0,14.336-3.33,14.336-6.323S2739.1,234.242,2730.646,234.242Z" transform="translate(-2702.283 -200.656)" fill="#4472db"/><path d="M2778.584,232.929" transform="translate(-2721.943 -200.997)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3.5"/><path d="M2730.646,262.659c-9.4,0-16.741-3.848-16.741-8.757v-9.509h2.441V253.9c0,2.991,5.879,6.323,14.3,6.323,8.454,0,14.336-3.333,14.336-6.323v-9.509h2.439V253.9C2747.42,258.811,2740.06,262.659,2730.646,262.659Z" transform="translate(-2702.283 -204.481)" fill="#4472db"/><path d="M2730.646,276.322c-9.4,0-16.741-3.845-16.741-8.757v-9.512h2.441v9.512c0,2.988,5.879,6.323,14.3,6.323,8.454,0,14.336-3.335,14.336-6.323v-9.512h2.439v9.512C2747.42,272.477,2740.06,276.322,2730.646,276.322Z" transform="translate(-2702.283 -208.633)" fill="#4472db"/><path d="M2730.646,290.389c-9.4,0-16.741-3.848-16.741-8.76V272.12h2.441v9.509c0,2.991,5.879,6.323,14.3,6.323,8.454,0,14.336-3.333,14.336-6.323V272.12h2.439v9.509C2747.42,286.541,2740.06,290.389,2730.646,290.389Z" transform="translate(-2702.283 -212.91)" fill="#4472db"/><ellipse cx="1.233" cy="1.233" rx="1.233" ry="1.233" transform="translate(38.213 48.767)" fill="#4472db"/><ellipse cx="1.233" cy="1.233" rx="1.233" ry="1.233" transform="translate(38.213 57.979)" fill="#4472db"/><ellipse cx="1.233" cy="1.233" rx="1.233" ry="1.233" transform="translate(38.213 67.736)" fill="#4472db"/><rect width="9.833" height="2.436" transform="translate(51.564 53.833)" fill="#4472db"/><path d="M2782.934,282.915h-7.578V223.37h7.578v2.437H2777.8v54.673h5.137Z" transform="translate(-2720.961 -198.092)" fill="#4472db"/><path d="M2818.554,267h-24.316a2.694,2.694,0,0,1-2.693-2.688v-14.7a2.7,2.7,0,0,1,2.693-2.688H2796l.667-2.876h9.238l.642,2.876h12.012a2.681,2.681,0,0,1,2.678,2.688v14.7A2.68,2.68,0,0,1,2818.554,267Zm-24.316-17.644a.242.242,0,0,0-.251.251v14.7a.244.244,0,0,0,.251.254h24.316a.241.241,0,0,0,.237-.254v-14.7a.239.239,0,0,0-.237-.251h-13.945l-.662-2.878h-5.332l-.667,2.878Z" transform="translate(-2725.871 -204.377)" fill="#4472db"/><rect width="2.437" height="17.767" transform="translate(87.325 43.909) rotate(-6.701)" fill="#4472db"/><g transform="translate(67.218 9.161)"><path d="M2818.66,221.542a1.273,1.273,0,0,1-.879-.356l-7.988-7.982a1.357,1.357,0,0,1-.312-1.177l2.93-10.908a1.226,1.226,0,0,1,2.051-.547l7.969,7.985a1.2,1.2,0,0,1,.315,1.177l-2.913,10.906a1.2,1.2,0,0,1-.879.862A1.048,1.048,0,0,1,2818.66,221.542Zm-6.641-9.564,6.016,5.994,2.188-8.19-6-5.995Z" transform="translate(-2798.536 -200.215)" fill="#4472db"/><path d="M2795.02,216.481a1.3,1.3,0,0,1-.9-.358,1.352,1.352,0,0,1-.31-1.175l2.93-10.906a1.236,1.236,0,0,1,.859-.862l10.918-2.925a1.209,1.209,0,0,1,1.172.316,1.2,1.2,0,0,1,.313,1.177l-2.91,10.908a1.277,1.277,0,0,1-.879.863l-10.921,2.92A.945.945,0,0,1,2795.02,216.481Zm3.906-11.131-2.207,8.19,8.2-2.192,2.207-8.192Z" transform="translate(-2793.777 -200.215)" fill="#4472db"/><path d="M2802.988,229.227a1.322,1.322,0,0,1-.879-.353l-7.991-7.986a1.356,1.356,0,0,1-.31-1.177,1.228,1.228,0,0,1,.879-.861l10.9-2.92a1.234,1.234,0,0,1,1.191.314l7.988,7.983a1.281,1.281,0,0,1,.313,1.175,1.238,1.238,0,0,1-.879.861l-10.9,2.923A1.211,1.211,0,0,1,2802.988,229.227Zm-5.625-8.569,5.979,5.994,8.2-2.2-6.018-5.993Z" transform="translate(-2793.777 -204.978)" fill="#4472db"/></g><path d="M2811.438,313.988h-18.086a1.206,1.206,0,0,1-1.211-1.218V287.247a1.207,1.207,0,0,1,1.211-1.221h12.031a1.3,1.3,0,0,1,.82.3l6.055,5.217a1.262,1.262,0,0,1,.413.92v20.305A1.226,1.226,0,0,1,2811.438,313.988Zm-16.875-2.437h15.664V293.023l-5.273-4.558h-10.391Z" transform="translate(-2726.076 -217.136)" fill="#4472db"/><path d="M2816.695,294.031h-6.055a1.2,1.2,0,0,1-1.189-1.218v-5.566a1.2,1.2,0,0,1,1.189-1.221,1.226,1.226,0,0,1,1.233,1.221V291.6h4.822a1.218,1.218,0,1,1,0,2.436Z" transform="translate(-2731.326 -217.136)" fill="#4472db"/><path d="M2808.532,301.189h-7.015a1.217,1.217,0,0,1,0-2.434h7.015a1.217,1.217,0,1,1,0,2.434Z" transform="translate(-2728.554 -221.005)" fill="#4472db"/><path d="M2808.532,307.627h-7.015a1.217,1.217,0,0,1,0-2.434h7.015a1.217,1.217,0,1,1,0,2.434Z" transform="translate(-2728.554 -222.96)" fill="#4472db"/><path d="M2808.532,314.069h-7.015a1.22,1.22,0,0,1,0-2.439h7.015a1.22,1.22,0,1,1,0,2.439Z" transform="translate(-2728.554 -224.917)" fill="#4472db"/><ellipse cx="50" cy="50" rx="50" ry="50" transform="translate(0 0)" fill="none"/></g></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bb_replicate.svg b/gui/src/images/AIT_ico_bb_replicate.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7970f37dd38672776780545917c2b97e3970dfe2
--- /dev/null
+++ b/gui/src/images/AIT_ico_bb_replicate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193" height="193" viewBox="0 0 193 193"><defs><filter id="a" x="0" y="0" width="193" height="193" filterUnits="userSpaceOnUse"><feOffset dy="10" input="SourceAlpha"/><feGaussianBlur stdDeviation="7.5" result="b"/><feFlood flood-color="#598ebc" flood-opacity="0.671"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(22.5 12.5)"><g transform="matrix(1, 0, 0, 1, -22.5, -12.5)" filter="url(#a)"><circle cx="74" cy="74" r="74" transform="translate(22.5 12.5)" fill="#fff"/></g><g transform="translate(16.885 26.241)"><path d="M2729.309,417.9c.391-1.858.8-3.823,1.289-5.815.508-1.99,1.074-4.009,1.758-5.979,2.266-10.684,12.891-18.909,24.316-16.077,9.395,2.512,18.574,7.6,24.316,15.339a31.659,31.659,0,0,1,3.672,6.274c6.582,12.483,4.121,31.006-9.766,37.441-14.512,6.616-29.57,8.948-44.766,10.415a24.727,24.727,0,0,1-6.895-1.135c-4.277-1.426-7.637-4.338-8.34-9.619-1.309-9.2,4.922-16.66,10.547-23.208A70.418,70.418,0,0,0,2729.309,417.9Z" transform="translate(-2691.989 -374.984)" fill="#00dfe0" opacity="0.5"/><g transform="translate(59.415 20.505)"><path d="M2776.895,406.162a1.274,1.274,0,0,1-.645-.186,1.206,1.206,0,0,1-.371-1.68l3.516-5.605a1.212,1.212,0,0,1,2.051,1.294l-3.516,5.605A1.214,1.214,0,0,1,2776.895,406.162Z" transform="translate(-2769.922 -398.121)" fill="#4472db"/><path d="M2774.379,407.192a1.206,1.206,0,0,1-.586-.161l-5.762-3.25a1.218,1.218,0,1,1,1.191-2.124l5.762,3.254a1.237,1.237,0,0,1,.469,1.66A1.224,1.224,0,0,1,2774.379,407.192Z" transform="translate(-2767.406 -399.148)" fill="#4472db"/></g><path d="M2762.17,400.748a1.208,1.208,0,0,1-1.172-.886,16.811,16.811,0,0,0-16.016-12.651A14.841,14.841,0,0,0,2730.2,397.5a1.229,1.229,0,0,1-1.543.791,1.216,1.216,0,0,1-.781-1.531,17.23,17.23,0,0,1,16.836-11.99h.332c8.652.132,15.84,5.791,18.3,14.424a1.227,1.227,0,0,1-.84,1.5A1.214,1.214,0,0,1,2762.17,400.748Z" transform="translate(-2695.957 -373.559)" fill="#4472db"/><ellipse cx="50" cy="50" rx="50" ry="50" transform="translate(0 0)" fill="none"/><g transform="translate(50.838 32.686)"><path d="M2791.211,445.936a1.208,1.208,0,0,1-.859-.361L2778.574,433.8a1.252,1.252,0,0,1-.332-1.177l4.316-16.1a1.243,1.243,0,0,1,2.07-.547l11.758,11.787a1.19,1.19,0,0,1,.313,1.172l-4.316,16.094a1.211,1.211,0,0,1-.859.864A1.238,1.238,0,0,1,2791.211,445.936Zm-10.43-13.364,9.785,9.79,3.594-13.374-9.785-9.795Z" transform="translate(-2762.12 -415.621)" fill="#4472db"/><path d="M2756.3,438.465a1.145,1.145,0,0,1-.84-.361,1.158,1.158,0,0,1-.332-1.172l4.316-16.094a1.246,1.246,0,0,1,.859-.864l16.094-4.312a1.213,1.213,0,0,1,1.484,1.494l-4.3,16.094a1.265,1.265,0,0,1-.879.859l-16.074,4.312A1.413,1.413,0,0,1,2756.3,438.465Zm5.293-16.318-3.555,13.379,13.379-3.584,3.574-13.379Z" transform="translate(-2755.083 -415.621)" fill="#4472db"/><path d="M2768.1,457.271a1.279,1.279,0,0,1-.879-.352l-11.758-11.782a1.174,1.174,0,0,1-.332-1.182,1.205,1.205,0,0,1,.859-.859l16.094-4.307a1.23,1.23,0,0,1,1.191.313l11.758,11.777a1.163,1.163,0,0,1,.332,1.177,1.205,1.205,0,0,1-.859.859l-16.094,4.316A1.242,1.242,0,0,1,2768.1,457.271Zm-9.453-12.368,9.824,9.795,13.379-3.589-9.824-9.79Z" transform="translate(-2755.083 -422.651)" fill="#4472db"/></g><path d="M2712.734,453.82a21.006,21.006,0,1,1,21.016-21.011A21.023,21.023,0,0,1,2712.734,453.82Zm0-39.575a18.567,18.567,0,1,0,18.574,18.564A18.577,18.577,0,0,0,2712.734,414.244Z" transform="translate(-2685 -381.776)" fill="#4472db"/><g transform="translate(14.233 38.319)"><path d="M2728.643,446.063a1.233,1.233,0,0,1-.859-.352l-8.418-8.418a1.242,1.242,0,0,1-.312-1.177l3.066-11.5a1.258,1.258,0,0,1,.9-.859,1.219,1.219,0,0,1,1.172.313l8.418,8.418a1.233,1.233,0,0,1,.293,1.177l-3.086,11.494a1.172,1.172,0,0,1-.859.864A1.054,1.054,0,0,1,2728.643,446.063Zm-7.051-10,6.426,6.426,2.363-8.779-6.445-6.426Z" transform="translate(-2707.517 -423.714)" fill="#4472db"/><path d="M2703.721,440.73a1.171,1.171,0,0,1-.859-.356,1.154,1.154,0,0,1-.312-1.177l3.066-11.5a1.239,1.239,0,0,1,.859-.859l11.5-3.081a1.2,1.2,0,0,1,1.484,1.489l-3.066,11.5a1.239,1.239,0,0,1-.859.859l-11.5,3.081A1.15,1.15,0,0,1,2703.721,440.73Zm4.082-11.724-2.344,8.779,8.75-2.349,2.383-8.784Z" transform="translate(-2702.496 -423.714)" fill="#4472db"/><path d="M2712.139,454.169a1.238,1.238,0,0,1-.859-.356l-8.418-8.423a1.143,1.143,0,0,1-.312-1.172,1.18,1.18,0,0,1,.84-.859l11.5-3.081a1.206,1.206,0,0,1,1.172.313l8.418,8.413a1.172,1.172,0,0,1,.332,1.182,1.275,1.275,0,0,1-.859.859l-11.5,3.081A1.264,1.264,0,0,1,2712.139,454.169Zm-6.074-9,6.445,6.426,8.77-2.354-6.426-6.426Z" transform="translate(-2702.496 -428.737)" fill="#4472db"/></g></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bb_tutorial.svg b/gui/src/images/AIT_ico_bb_tutorial.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cd40c353bd07e896cc58ef701801ddb39691e8f7
--- /dev/null
+++ b/gui/src/images/AIT_ico_bb_tutorial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193" height="193" viewBox="0 0 193 193"><defs><filter id="a" x="0" y="0" width="193" height="193" filterUnits="userSpaceOnUse"><feOffset dy="10" input="SourceAlpha"/><feGaussianBlur stdDeviation="7.5" result="b"/><feFlood flood-color="#598ebc" flood-opacity="0.671"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(22.5 12.5)"><g transform="matrix(1, 0, 0, 1, -22.5, -12.5)" filter="url(#a)"><circle cx="74" cy="74" r="74" transform="translate(22.5 12.5)" fill="#fff"/></g><g transform="translate(24 24)"><g transform="translate(51.194 39.1)" opacity="0.49" style="mix-blend-mode:multiply;isolation:isolate"><rect width="39.135" height="29.586" rx="5.063" transform="translate(1.214 1.214)" fill="#00dfe0"/><path d="M2805.209,655.741h-32.09a4.74,4.74,0,0,1-4.746-4.722V628.456a4.741,4.741,0,0,1,4.746-4.727h32.09a4.741,4.741,0,0,1,4.746,4.727v22.563A4.74,4.74,0,0,1,2805.209,655.741Zm-32.09-29.58a2.291,2.291,0,0,0-2.3,2.295v22.563a2.291,2.291,0,0,0,2.3,2.295h32.09a2.3,2.3,0,0,0,2.3-2.295V628.456a2.3,2.3,0,0,0-2.3-2.295Z" transform="translate(-2768.373 -623.729)" fill="#00dfe0"/></g><path d="M2794.043,636.311l9,6.182a1.223,1.223,0,0,1,0,2.051l-9,6.191a1.249,1.249,0,0,1-1.953-1.025V637.331A1.248,1.248,0,0,1,2794.043,636.311Z" transform="translate(-2724.438 -588.415)" fill="#fff"/><path d="M2744.568,667.36a50,50,0,1,1,50-50A50.037,50.037,0,0,1,2744.568,667.36Zm0-99.648a49.651,49.651,0,1,0,49.668,49.648A49.7,49.7,0,0,0,2744.568,567.711Z" transform="translate(-2694.568 -567.36)" fill="none"/><path d="M2792.773,688.014" transform="translate(-2724.658 -604.323)" fill="#4472db"/><g transform="translate(51.194 10.027)"><path d="M2775.684,601.834a1.175,1.175,0,0,1-.859-.361l-6.094-6.074a1.19,1.19,0,0,1-.312-1.172l2.227-8.3a1.215,1.215,0,0,1,2.031-.547l6.074,6.079a1.143,1.143,0,0,1,.313,1.172l-2.207,8.3a1.285,1.285,0,0,1-.859.859A1.758,1.758,0,0,1,2775.684,601.834Zm-4.746-7.656,4.1,4.092,1.5-5.591-4.1-4.1Z" transform="translate(-2768.373 -582.795)" fill="#4472db"/><path d="M2778.338,603.53a1.233,1.233,0,0,1-.859-.352,1.283,1.283,0,0,1-.312-1.172l2.207-8.3a1.264,1.264,0,0,1,.9-.864l8.281-2.222a1.206,1.206,0,0,1,1.172.313,1.249,1.249,0,0,1,.332,1.172l-2.227,8.3a1.223,1.223,0,0,1-.879.859l-8.3,2.227A1.054,1.054,0,0,1,2778.338,603.53Zm3.223-8.521-1.484,5.591,5.586-1.494,1.484-5.6Zm5.1,5.083Z" transform="translate(-2771.053 -584.498)" fill="#4472db"/><path d="M2778.887,592.54a1.257,1.257,0,0,1-.879-.352l-6.074-6.079a1.187,1.187,0,0,1-.312-1.172,1.232,1.232,0,0,1,.859-.854l8.3-2.227a1.21,1.21,0,0,1,1.172.317l6.074,6.069a1.253,1.253,0,0,1,.332,1.172,1.273,1.273,0,0,1-.859.864l-8.32,2.222A1.008,1.008,0,0,1,2778.887,592.54Zm-3.75-6.655,4.082,4.087,5.625-1.494-4.1-4.1Z" transform="translate(-2769.355 -581.815)" fill="#4472db"/></g><path d="M2732.324,633.533a10.222,10.222,0,1,1,10.234-10.22A10.254,10.254,0,0,1,2732.324,633.533Zm0-18.018a7.8,7.8,0,1,0,7.793,7.8A7.79,7.79,0,0,0,2732.324,615.515Z" transform="translate(-2702.998 -581.368)" fill="#4472db"/><path d="M2710.857,675.521a1.219,1.219,0,0,1-1.23-1.216V653.4a8.989,8.989,0,0,1,8.984-8.984h9.258a1.216,1.216,0,0,1,0,2.432h-9.258a6.552,6.552,0,0,0-6.543,6.553v20.908A1.228,1.228,0,0,1,2710.857,675.521Z" transform="translate(-2699.178 -590.965)" fill="#4472db"/><path d="M2758.527,612.6a1.166,1.166,0,0,1-.566-.146,1.214,1.214,0,0,1-.625-1.069v-8.2h-2.617a1.2,1.2,0,0,1-1.211-1.216V576.717a1.2,1.2,0,0,1,1.211-1.216h38.242a1.215,1.215,0,0,1,1.211,1.216v25.254a1.215,1.215,0,0,1-1.211,1.216h-19.414l-14.355,9.219A1.18,1.18,0,0,1,2758.527,612.6Zm-2.617-11.846h2.617a1.222,1.222,0,0,1,1.23,1.216v7.192l12.754-8.213a1.278,1.278,0,0,1,.664-.2h18.555V577.933h-35.82Z" transform="translate(-2712.614 -569.855)" fill="#4472db"/><path d="M2721.381,681.454a1.218,1.218,0,0,1-1.211-1.216V665a1.211,1.211,0,0,1,1.211-1.211,1.228,1.228,0,0,1,1.23,1.211v15.239A1.235,1.235,0,0,1,2721.381,681.454Z" transform="translate(-2702.421 -596.9)" fill="#4472db"/><path d="M2745.051,675.521a1.2,1.2,0,0,1-1.191-1.216V659.066a1.2,1.2,0,0,1,2.266-.571l3.594,6.65a2.646,2.646,0,0,0,3.457,1.133l11.895-8.359a2.259,2.259,0,0,0,.566-3.145l-1.348-1.943-9.434,6.68a1.251,1.251,0,0,1-1.094.166,1.275,1.275,0,0,1-.781-.757l-1.758-5.127c-1.777-5.771-3.926-6.948-6.6-6.948h-9.258a1.216,1.216,0,0,1,0-2.432h9.258c4.395,0,7.051,2.583,8.906,8.623l1.25,3.56,9.121-6.45a1.224,1.224,0,0,1,.918-.21,1.184,1.184,0,0,1,.781.508l2.031,2.954a4.673,4.673,0,0,1-1.172,6.5l-11.953,8.413a.588.588,0,0,1-.156.083,5.084,5.084,0,0,1-6.777-2.1l-1.289-2.407v10.415A1.219,1.219,0,0,1,2745.051,675.521Z" transform="translate(-2706.687 -590.965)" fill="#4472db"/></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bb_work.svg b/gui/src/images/AIT_ico_bb_work.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a3dfc30ca90ce9d33f1773e85918435a2fedea9
--- /dev/null
+++ b/gui/src/images/AIT_ico_bb_work.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193" height="193" viewBox="0 0 193 193"><defs><filter id="a" x="0" y="0" width="193" height="193" filterUnits="userSpaceOnUse"><feOffset dy="10" input="SourceAlpha"/><feGaussianBlur stdDeviation="7.5" result="b"/><feFlood flood-color="#598ebc" flood-opacity="0.671"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(22.5 12.5)"><g transform="matrix(1, 0, 0, 1, -22.5, -12.5)" filter="url(#a)"><circle cx="74" cy="74" r="74" transform="translate(22.5 12.5)" fill="#fff"/></g><g transform="translate(29 24)"><path d="M2762.43,889.712c-.43,1.855-.879,3.809-1.426,5.791-.566,1.982-1.172,3.984-1.895,5.938-2.5,10.635-13.281,18.633-24.648,15.557-9.336-2.715-18.4-8-23.984-15.85a31.046,31.046,0,0,1-3.516-6.348c-6.328-12.627-3.477-31.094,10.547-37.227,14.648-6.309,29.766-8.32,44.961-9.473a25.156,25.156,0,0,1,6.895,1.289c4.238,1.514,7.559,4.5,8.125,9.795,1.113,9.229-5.254,16.553-11.055,22.979A76.272,76.272,0,0,0,2762.43,889.712Z" transform="translate(-2699.958 -832.878)" fill="#00dfe0" opacity="0.5"/><g transform="translate(25.483 32.107)"><path d="M2736.131,889.706a1.124,1.124,0,0,1-.605-.166,1.2,1.2,0,0,1-.625-1.055v-9.941a1.208,1.208,0,0,1,.625-1.055l8.594-4.971a1.231,1.231,0,0,1,1.836,1.055v9.941a1.2,1.2,0,0,1-.625,1.055l-8.594,4.971A1.286,1.286,0,0,1,2736.131,889.706Zm1.23-10.459v7.129l6.172-3.564-.039-7.129Z" transform="translate(-2734.9 -872.357)" fill="#4472db"/><path d="M2744.707,899.018a1.182,1.182,0,0,1-.605-.166l-8.594-4.971a1.221,1.221,0,0,1,0-2.109l8.594-4.971a1.218,1.218,0,0,1,1.211,0l8.613,4.971a1.211,1.211,0,0,1,0,2.119l-8.613,4.961A1.088,1.088,0,0,1,2744.707,899.018Zm-6.172-6.182,6.172,3.555,6.172-3.555-6.172-3.574Z" transform="translate(-2734.902 -876.697)" fill="#4472db"/><path d="M2757.1,889.706a1.329,1.329,0,0,1-.605-.156l-8.613-4.98a1.218,1.218,0,0,1-.605-1.055v-9.941a1.242,1.242,0,0,1,.605-1.055,1.218,1.218,0,0,1,1.211,0l8.613,4.971a1.249,1.249,0,0,1,.625,1.055v9.951a1.262,1.262,0,0,1-.625,1.055A1.4,1.4,0,0,1,2757.1,889.706Zm-7.4-6.895,6.191,3.564v-7.129l-6.191-3.564Z" transform="translate(-2738.653 -872.357)" fill="#4472db"/></g><g transform="translate(16.873 17.195)"><path d="M2723.744,868.282a1.286,1.286,0,0,1-.605-.166,1.218,1.218,0,0,1-.605-1.055l.02-9.941a1.2,1.2,0,0,1,.586-1.055l8.613-4.971a1.255,1.255,0,0,1,1.23,0,1.23,1.23,0,0,1,.605,1.055v9.941a1.23,1.23,0,0,1-.605,1.055l-8.613,4.971A1.194,1.194,0,0,1,2723.744,868.282Zm1.23-10.459v7.129l6.172-3.564v-7.129Z" transform="translate(-2722.533 -850.933)" fill="#4472db"/><path d="M2732.377,877.6a1.361,1.361,0,0,1-.625-.166l-8.613-4.971a1.221,1.221,0,0,1,0-2.109l8.613-4.971a1.231,1.231,0,0,1,1.23,0l8.613,4.971a1.242,1.242,0,0,1,.605,1.055,1.218,1.218,0,0,1-.605,1.055l-8.613,4.971A1.228,1.228,0,0,1,2732.377,877.6Zm-6.191-6.191,6.191,3.564,6.172-3.564-6.172-3.564Z" transform="translate(-2722.533 -855.274)" fill="#4472db"/><path d="M2744.707,868.282a1.286,1.286,0,0,1-.605-.166l-8.594-4.971a1.19,1.19,0,0,1-.605-1.055v-9.941a1.19,1.19,0,0,1,.605-1.055,1.218,1.218,0,0,1,1.211,0l8.594,4.971a1.179,1.179,0,0,1,.605,1.055v9.941a1.22,1.22,0,0,1-1.211,1.221Zm-7.383-6.895,6.172,3.564v-7.129l-6.172-3.564Z" transform="translate(-2726.284 -850.933)" fill="#4472db"/></g><g transform="translate(16.873 47.019)"><path d="M2723.744,911.129a1.182,1.182,0,0,1-.605-.166,1.206,1.206,0,0,1-.605-1.055l.02-9.932a1.2,1.2,0,0,1,.586-1.055l8.613-4.98a1.255,1.255,0,0,1,1.23,0,1.242,1.242,0,0,1,.605,1.055v9.941a1.246,1.246,0,0,1-.605,1.064l-8.613,4.961A1.11,1.11,0,0,1,2723.744,911.129Zm1.23-10.449v7.129l6.172-3.564v-7.129Z" transform="translate(-2722.533 -893.781)" fill="#4472db"/><path d="M2732.377,920.45a1.361,1.361,0,0,1-.625-.166l-8.613-4.971a1.221,1.221,0,0,1,0-2.109l8.613-4.98a1.255,1.255,0,0,1,1.23,0l8.613,4.98a1.221,1.221,0,0,1,0,2.109l-8.613,4.971A1.228,1.228,0,0,1,2732.377,920.45Zm-6.191-6.191,6.191,3.564,6.172-3.564-6.172-3.564Z" transform="translate(-2722.533 -898.12)" fill="#4472db"/><path d="M2744.725,911.129a1.271,1.271,0,0,1-.605-.156L2735.525,906a1.223,1.223,0,0,1-.625-1.064V895a1.231,1.231,0,0,1,1.836-1.055l8.594,4.98a1.2,1.2,0,0,1,.625,1.055v9.941a1.208,1.208,0,0,1-.625,1.055A1.119,1.119,0,0,1,2744.725,911.129Zm-7.363-6.885,6.172,3.564V900.68l-6.172-3.564Z" transform="translate(-2726.282 -893.781)" fill="#4472db"/></g><ellipse cx="50" cy="50" rx="50" ry="50" transform="translate(0 0)" fill="none"/><g transform="translate(47.917 38.84)"><path d="M2797.541,929.061a1.224,1.224,0,0,1-.879-.352l-8.262-8.262-2.93,5.352a1.2,1.2,0,0,1-2.207-.2l-9.355-27.676a1.172,1.172,0,0,1,.293-1.26,1.218,1.218,0,0,1,1.25-.293l27.676,9.365a1.234,1.234,0,0,1,.84,1.045,1.3,1.3,0,0,1-.645,1.172l-5.371,2.93,8.281,8.262a1.245,1.245,0,0,1,.332.859,1.287,1.287,0,0,1-.332.869l-7.852,7.832A1.2,1.2,0,0,1,2797.541,929.061Zm-9.434-11.846a1.22,1.22,0,0,1,.859.352l8.574,8.555,6.094-6.113-8.535-8.545a1.153,1.153,0,0,1-.352-1.035,1.2,1.2,0,0,1,.625-.9l4.336-2.383-22.7-7.666,7.656,22.715,2.363-4.346a1.287,1.287,0,0,1,.918-.625C2787.99,917.225,2788.068,917.215,2788.107,917.215Z" transform="translate(-2769.173 -886.37)" fill="#4472db"/><path d="M2781.15,890.875a1.177,1.177,0,0,1-1.016-.566,1.2,1.2,0,0,1,.391-1.68l10.2-6.406a1.214,1.214,0,0,1,1.68.371,1.235,1.235,0,0,1-.371,1.689l-10.215,6.416A1.255,1.255,0,0,1,2781.15,890.875Z" transform="translate(-2771.029 -882.031)" fill="#4472db"/><path d="M2768.365,921.875a1.061,1.061,0,0,1-.176-.01,1.249,1.249,0,0,1-1.055-1.367l1.5-11.025a1.222,1.222,0,0,1,1.387-1.045,1.21,1.21,0,0,1,1.016,1.377l-1.484,11.016A1.208,1.208,0,0,1,2768.365,921.875Z" transform="translate(-2767.13 -890.051)" fill="#4472db"/><path d="M2795.105,897.024h-6.621a1.221,1.221,0,0,1,0-2.441h6.621a1.221,1.221,0,1,1,0,2.441Z" transform="translate(-2773.26 -885.848)" fill="#4472db"/></g><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(47.833 35.123)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(55.104 27.851)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(60.533 35.123)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(75.859 35.123)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(75.5 20.631)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(43.073 27.851)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(58.216 20.642)" fill="#4472db"/><ellipse cx="2.241" cy="2.241" rx="2.241" ry="2.241" transform="translate(65.426 27.851)" fill="#4472db"/><path d="M2769.678,877.417a1.216,1.216,0,0,1-.859-2.08l7.285-7.266a1.208,1.208,0,0,1,1.7,1.719l-7.246,7.275A1.257,1.257,0,0,1,2769.678,877.417Z" transform="translate(-2719.629 -838.837)" fill="#4472db"/><path d="M2790.451,870.154h-10.312a1.221,1.221,0,0,1,0-2.441h10.313a1.221,1.221,0,0,1,0,2.441Z" transform="translate(-2722.8 -838.837)" fill="#4472db"/><path d="M2791.8,866.971a1.109,1.109,0,0,1-.84-.361l-7.285-7.266a1.191,1.191,0,0,1,0-1.719,1.208,1.208,0,0,1,1.719,0l7.266,7.266a1.191,1.191,0,0,1,0,1.719A1.151,1.151,0,0,1,2791.8,866.971Z" transform="translate(-2724.13 -835.666)" fill="#4472db"/></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bd_info_circle.svg b/gui/src/images/AIT_ico_bd_info_circle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7793cb36dc1bea644ee36110ae91b209be8cb187
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_info_circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" stroke="#fff" stroke-width="2"><circle cx="10" cy="10" r="10" stroke="none"/><circle cx="10" cy="10" r="9" fill="none"/></g><text transform="translate(9.5 14.5)" fill="#fff" font-size="12" font-family="Georgia-BoldItalic, Georgia" font-weight="700" font-style="italic" letter-spacing="0.02em"><tspan x="-2.194" y="0">i</tspan></text></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bd_link_doi.svg b/gui/src/images/AIT_ico_bd_link_doi.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f170ac2f84476e487f4e9bceb422fd1689540b62
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_link_doi.svg
@@ -0,0 +1,7 @@
+<svg id="AIT_ico_bd_link_doi" xmlns="http://www.w3.org/2000/svg" width="43" height="27" viewBox="0 0 43 27">
+ <g id="Rechteck_84" data-name="Rechteck 84" fill="none" stroke="#00dfe0" stroke-width="2">
+ <rect width="43" height="27" rx="7" stroke="none"/>
+ <rect x="1" y="1" width="41" height="25" rx="6" fill="none"/>
+ </g>
+ <path id="Pfad_940" data-name="Pfad 940" d="M13.028,18c3.616,0,4.384-2.192,4.384-5.664,0-3.408-.848-5.3-4.384-5.3H9.236V18Zm2.544-5.664c0,2.4-.336,4.1-2.544,4.1H11.012V8.592h2.016C15.236,8.592,15.572,9.936,15.572,12.336Zm7.9,4.288c-2.128,0-2.624-1.312-2.624-4.048,0-2.72.512-4.16,2.624-4.16s2.608,1.44,2.608,4.16C26.084,15.36,25.6,16.624,23.476,16.624Zm0,1.552c3.424,0,4.448-1.872,4.448-5.6,0-3.68-1.024-5.712-4.448-5.712s-4.464,2.048-4.464,5.712C19.012,16.272,20.036,18.176,23.476,18.176ZM29.988,18h1.776V7.04H29.988Z" transform="translate(1 1)" fill="#00dfe0"/>
+</svg>
diff --git a/gui/src/images/AIT_ico_bd_link_external_big.svg b/gui/src/images/AIT_ico_bd_link_external_big.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b2d331e8252c72296ad70f5b173a2d4a4dd3b71b
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_link_external_big.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.897" height="30.744" viewBox="0 0 35.897 30.744"><g transform="translate(1 1)"><path d="M2073.957,585.323l10.521,10.521,14.374-3.852,3.848-14.37L2092.183,567.1l-14.374,3.852-2.749,10.254" transform="translate(-2068.804 -567.1)" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g transform="translate(0 7.794)"><line x2="23.371" transform="translate(0 6.578)" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g transform="translate(16.247 0)"><line x2="7.124" y2="6.578" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line y1="6.578" x2="7.124" transform="translate(0 6.578)" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bd_link_go_to.svg b/gui/src/images/AIT_ico_bd_link_go_to.svg
new file mode 100644
index 0000000000000000000000000000000000000000..515dbec13d706302e3f7f91fd3e77db35fcce40a
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_link_go_to.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.072" height="15.982" viewBox="0 0 18.072 15.982"><g transform="translate(1 1.413)"><line x2="15.659" transform="translate(0 6.578)" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g transform="translate(8.535)"><line x2="7.124" y2="6.578" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line y1="6.578" x2="7.124" transform="translate(0 6.578)" fill="none" stroke="#00dfe0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bd_link_pdf.svg b/gui/src/images/AIT_ico_bd_link_pdf.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3b7df00b341b0fcd3d36d830f8ff512ebeda34ed
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_link_pdf.svg
@@ -0,0 +1,9 @@
+<svg id="AIT_ico_bd_link_pdf" xmlns="http://www.w3.org/2000/svg" width="43" height="27" viewBox="0 0 43 27">
+ <g id="Gruppe_227" data-name="Gruppe 227" transform="translate(-1265 -1104)">
+ <g id="Rechteck_83" data-name="Rechteck 83" transform="translate(1265 1104)" fill="none" stroke="#00dfe0" stroke-width="2">
+ <rect width="43" height="27" rx="7" stroke="none"/>
+ <rect x="1" y="1" width="41" height="25" rx="6" fill="none"/>
+ </g>
+ <path id="Pfad_939" data-name="Pfad 939" d="M10.692,14.592c2.5,0,3.728-1.392,3.728-3.872,0-2.464-1.232-3.68-3.728-3.68H6.676V18H8.452V14.592Zm-2.24-1.536V8.576h2.224c1.328,0,1.92.64,1.92,2.144,0,1.52-.592,2.336-1.92,2.336ZM19.924,18c3.616,0,4.384-2.192,4.384-5.664,0-3.408-.848-5.3-4.384-5.3H16.132V18Zm2.544-5.664c0,2.4-.336,4.1-2.544,4.1H17.908V8.592h2.016C22.132,8.592,22.468,9.936,22.468,12.336ZM26.388,18h1.776V13.84H32.34V12.288H28.164v-3.7h5.024V7.04h-6.8Z" transform="translate(1267 1105)" fill="#00dfe0"/>
+ </g>
+</svg>
diff --git a/gui/src/images/AIT_ico_bd_youtube.svg b/gui/src/images/AIT_ico_bd_youtube.svg
new file mode 100644
index 0000000000000000000000000000000000000000..60df30297a409ca37f2e067014ad5b70fc0f9a31
--- /dev/null
+++ b/gui/src/images/AIT_ico_bd_youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.897" height="27.626" viewBox="0 0 35.897 27.626"><g transform="translate(1 1)"><g style="mix-blend-mode:multiply;isolation:isolate"><rect width="33.897" height="25.627" rx="5.063" transform="translate(0 0)" fill="none" stroke="#00dfe0" stroke-width="2"/></g><path d="M2793.774,636.28l7.818,5.36a1.076,1.076,0,0,1,0,1.774l-7.818,5.361a1.076,1.076,0,0,1-1.684-.887V637.167A1.075,1.075,0,0,1,2793.774,636.28Z" transform="translate(-2778.893 -629.715)" fill="none" stroke="#00dfe0" stroke-width="2"/></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bp_query.svg b/gui/src/images/AIT_ico_bp_query.svg
new file mode 100644
index 0000000000000000000000000000000000000000..474547487c052fbea176cc33f0e1f65be797e123
--- /dev/null
+++ b/gui/src/images/AIT_ico_bp_query.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="248.23" height="248.23" viewBox="0 0 248.23 248.23"><path d="M2787.325,228.77c3.986-2.511,8.229-5.133,12.651-7.661s9.031-4.969,13.742-7.115c23.035-14.294,56-9.4,70.569,15.965,11.647,21.166,18.263,46.335,14.278,69.923a81.461,81.461,0,0,1-4.954,17.34c-11.058,33.252-48.517,60.617-83.875,46.8-36.773-14.629-66.831-37.628-95.556-62.338a61.327,61.327,0,0,1-9.809-14.308c-4.807-10.134-5.378-21.18,2.913-31.465,14.245-18.154,38.285-19.822,59.728-20.939A182.572,182.572,0,0,0,2787.325,228.77Z" transform="translate(-2694.542 -163.21)" fill="#00dfe0" opacity="0.5"/><path d="M2755.515,275.292c-23.334,0-41.611-9.55-41.611-21.741s18.277-21.743,41.611-21.743,41.613,9.55,41.613,21.743S2778.849,275.292,2755.515,275.292Zm0-37.437c-20.959,0-35.564,8.271-35.564,15.7s14.6,15.694,35.564,15.694,35.565-8.271,35.565-15.694S2776.475,237.855,2755.515,237.855Z" transform="translate(-2685.061 -154.48)" fill="#4472db"/><path d="M2778.584,232.929" transform="translate(-2637.985 -153.664)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3.5"/><path d="M2755.515,289.739c-23.334,0-41.611-9.551-41.611-21.743v-23.6h6.047V268c0,7.424,14.6,15.7,35.564,15.7s35.565-8.271,35.565-15.7v-23.6h6.047V268C2797.128,280.187,2778.849,289.739,2755.515,289.739Z" transform="translate(-2685.061 -145.321)" fill="#4472db"/><path d="M2755.515,303.4c-23.334,0-41.611-9.55-41.611-21.741V258.053h6.047v23.605c0,7.423,14.6,15.694,35.564,15.694s35.565-8.271,35.565-15.694V258.053h6.047v23.605C2797.128,293.85,2778.849,303.4,2755.515,303.4Z" transform="translate(-2685.061 -135.378)" fill="#4472db"/><path d="M2755.516,317.467c-23.334,0-41.611-9.55-41.611-21.741V272.12h6.047v23.606c0,7.423,14.6,15.694,35.563,15.694s35.564-8.271,35.564-15.694V272.12h6.047v23.606C2797.127,307.917,2778.85,317.467,2755.516,317.467Z" transform="translate(-2685.06 -125.14)" fill="#4472db"/><ellipse cx="3.06" cy="3.06" rx="3.06" ry="3.06" transform="translate(94.855 121.055)" fill="#4472db"/><ellipse cx="3.06" cy="3.06" rx="3.06" ry="3.06" transform="translate(94.855 143.92)" fill="#4472db"/><ellipse cx="3.06" cy="3.06" rx="3.06" ry="3.06" transform="translate(94.855 168.142)" fill="#4472db"/><rect width="24.409" height="6.047" transform="translate(127.996 133.63)" fill="#4472db"/><path d="M2794.156,371.181h-18.8V223.37h18.8v6.047H2781.4V365.134h12.752Z" transform="translate(-2640.335 -160.621)" fill="#4472db"/><path d="M2858.584,301.04H2798.22a6.682,6.682,0,0,1-6.674-6.675v-36.5a6.682,6.682,0,0,1,6.674-6.675h4.375l1.636-7.141h22.928l1.635,7.141h29.789a6.682,6.682,0,0,1,6.675,6.675v36.5A6.682,6.682,0,0,1,2858.584,301.04Zm-60.363-43.8a.628.628,0,0,0-.627.627v36.5a.628.628,0,0,0,.627.627h60.363a.628.628,0,0,0,.627-.627v-36.5a.628.628,0,0,0-.627-.627h-34.608l-1.634-7.141h-13.291l-1.636,7.141Z" transform="translate(-2628.552 -145.571)" fill="#4472db"/><rect width="6.048" height="44.104" transform="translate(216.766 108.995) rotate(-6.701)" fill="#4472db"/><g transform="translate(166.855 22.741)"><path d="M2832.3,253.154a3.025,3.025,0,0,1-2.137-.885l-19.822-19.815a3.021,3.021,0,0,1-.783-2.922l7.257-27.078a3.024,3.024,0,0,1,5.059-1.355l19.813,19.822a3.022,3.022,0,0,1,.785,2.92l-7.252,27.071a3.016,3.016,0,0,1-2.92,2.241Zm-16.449-23.742,14.883,14.878,5.442-20.328L2821.3,209.081Z" transform="translate(-2782.374 -200.215)" fill="#4472db"/><path d="M2796.8,240.591a3.025,3.025,0,0,1-2.92-3.808l7.255-27.071a3.029,3.029,0,0,1,2.137-2.137l27.08-7.257a3.024,3.024,0,0,1,3.7,3.7L2826.8,231.1a3.03,3.03,0,0,1-2.139,2.139l-27.08,7.25A3,3,0,0,1,2796.8,240.591Zm9.724-27.628-5.448,20.328,20.333-5.444,5.449-20.333Z" transform="translate(-2793.781 -200.215)" fill="#4472db"/><path d="M2816.625,249a3.023,3.023,0,0,1-2.137-.885L2794.666,228.3a3.024,3.024,0,0,1,1.356-5.059l27.079-7.25a3.022,3.022,0,0,1,2.918.783l19.822,19.815a3.024,3.024,0,0,1-1.354,5.059l-27.078,7.257A3.027,3.027,0,0,1,2816.625,249Zm-13.98-21.278,14.884,14.883,20.333-5.45-14.883-14.878Z" transform="translate(-2793.781 -188.809)" fill="#4472db"/></g><path d="M2840.087,355.427h-44.923a3.024,3.024,0,0,1-3.023-3.024V289.05a3.024,3.024,0,0,1,3.023-3.024h29.912a3.02,3.02,0,0,1,1.977.736l15.01,12.959a3.024,3.024,0,0,1,1.049,2.288v50.4A3.025,3.025,0,0,1,2840.087,355.427Zm-41.9-6.047h38.876V303.394l-13.112-11.321h-25.764Z" transform="translate(-2628.119 -115.019)" fill="#4472db"/><path d="M2827.487,305.9h-15.011a3.023,3.023,0,0,1-3.023-3.024V289.05a3.024,3.024,0,1,1,6.047,0v10.8h11.987a3.024,3.024,0,1,1,0,6.047Z" transform="translate(-2615.519 -115.019)" fill="#4472db"/><path d="M2820.716,304.8h-17.385a3.024,3.024,0,1,1,0-6.047h17.385a3.024,3.024,0,0,1,0,6.047Z" transform="translate(-2622.175 -105.754)" fill="#4472db"/><path d="M2820.716,311.24h-17.385a3.024,3.024,0,1,1,0-6.047h17.385a3.024,3.024,0,0,1,0,6.047Z" transform="translate(-2622.175 -101.069)" fill="#4472db"/><path d="M2820.716,317.677h-17.385a3.024,3.024,0,1,1,0-6.047h17.385a3.024,3.024,0,0,1,0,6.047Z" transform="translate(-2622.175 -96.384)" fill="#4472db"/><ellipse cx="124.115" cy="124.115" rx="124.115" ry="124.115" fill="none"/></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bp_replicate.svg b/gui/src/images/AIT_ico_bp_replicate.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0a1f1075ea8d07665145b04d47debbdefc6d1b3d
--- /dev/null
+++ b/gui/src/images/AIT_ico_bp_replicate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="248.23" height="248.23" viewBox="0 0 248.23 248.23"><path d="M2750.941,460.045c.945-4.615,1.987-9.493,3.222-14.436s2.661-9.957,4.371-14.844c5.618-26.522,31.965-46.936,60.353-39.9,23.341,6.236,46.09,18.875,60.363,38.071a81.374,81.374,0,0,1,9.092,15.576c16.357,30.99,10.2,76.967-24.241,92.939-36.006,16.428-73.409,22.215-111.123,25.857a61.263,61.263,0,0,1-17.118-2.818c-10.642-3.54-19.013-10.77-20.7-23.873-3.25-22.845,12.18-41.357,26.21-57.611A182.55,182.55,0,0,0,2750.941,460.045Z" transform="translate(-2658.267 -353.524)" fill="#00dfe0" opacity="0.5"/><g transform="translate(147.485 50.899)"><path d="M2778.7,418.081a3.025,3.025,0,0,1-2.559-4.631l8.727-13.914A3.024,3.024,0,0,1,2790,402.75l-8.727,13.914A3.022,3.022,0,0,1,2778.7,418.081Z" transform="translate(-2761.381 -398.121)" fill="#4472db"/><path d="M2784.729,415.621a3.027,3.027,0,0,1-1.484-.391l-14.3-8.072a3.024,3.024,0,1,1,2.974-5.266l14.3,8.072a3.024,3.024,0,0,1-1.49,5.657Z" transform="translate(-2767.406 -395.661)" fill="#4472db"/></g><path d="M2813.1,424.428a3.026,3.026,0,0,1-2.906-2.193c-6.526-22.842-25.48-31.2-39.729-31.414-17.235-.271-31.71,9.767-36.74,25.549a3.023,3.023,0,0,1-5.761-1.835c5.783-18.147,22.156-29.765,41.836-29.765.252,0,.5,0,.758,0,21.489.325,39.331,14.377,45.45,35.8a3.027,3.027,0,0,1-2.908,3.855Z" transform="translate(-2648.734 -356.938)" fill="#4472db"/><ellipse cx="124.115" cy="124.115" rx="124.115" ry="124.115" transform="translate(0 0)" fill="none"/><g transform="translate(126.195 81.136)"><path d="M2810.482,490.861a3.03,3.03,0,0,1-2.139-.885L2779.1,460.738a3.017,3.017,0,0,1-.782-2.922l10.709-39.956a3.024,3.024,0,0,1,5.059-1.355l29.234,29.249a3.016,3.016,0,0,1,.785,2.918l-10.7,39.947a3.025,3.025,0,0,1-2.919,2.241ZM2784.606,457.7l24.309,24.3,8.892-33.2-24.3-24.309Z" transform="translate(-2738.253 -415.621)" fill="#4472db"/><path d="M2758.108,472.322a3.025,3.025,0,0,1-2.92-3.806L2765.9,428.57a3.029,3.029,0,0,1,2.137-2.139l39.956-10.707a3.024,3.024,0,0,1,3.7,3.7l-10.709,39.954a3.024,3.024,0,0,1-2.139,2.139l-39.956,10.7A3.012,3.012,0,0,1,2758.108,472.322Zm13.176-40.5-8.9,33.2,33.21-8.893,8.9-33.209Z" transform="translate(-2755.084 -415.621)" fill="#4472db"/><path d="M2787.356,484.737a3.027,3.027,0,0,1-2.139-.885L2755.971,454.6a3.022,3.022,0,0,1,1.356-5.057l39.956-10.7a3.025,3.025,0,0,1,2.918.783l29.249,29.238a3.025,3.025,0,0,1-1.354,5.059l-39.956,10.707A3.03,3.03,0,0,1,2787.356,484.737Zm-23.407-30.705,24.31,24.31,33.211-8.9-24.311-24.3Z" transform="translate(-2755.084 -398.79)" fill="#4472db"/></g><path d="M2743.88,516.091a52.141,52.141,0,1,1,52.142-52.142A52.2,52.2,0,0,1,2743.88,516.091Zm0-98.235a46.094,46.094,0,1,0,46.095,46.093A46.146,46.146,0,0,0,2743.88,417.855Z" transform="translate(-2674.994 -337.26)" fill="#4472db"/><g transform="translate(35.331 95.119)"><path d="M2742.936,479.2a3.027,3.027,0,0,1-2.138-.885l-20.9-20.889a3.027,3.027,0,0,1-.783-2.922l7.651-28.547a3.024,3.024,0,0,1,5.059-1.355l20.888,20.9a3.024,3.024,0,0,1,.783,2.92l-7.643,28.538a3.028,3.028,0,0,1-2.921,2.243Zm-17.522-24.817,15.957,15.951,5.834-21.795-15.949-15.956Z" transform="translate(-2690.47 -423.714)" fill="#4472db"/><path d="M2705.519,465.951a3.025,3.025,0,0,1-2.92-3.806l7.647-28.54a3.028,3.028,0,0,1,2.139-2.137l28.547-7.651a3.024,3.024,0,0,1,3.7,3.7l-7.65,28.545a3.022,3.022,0,0,1-2.139,2.137l-28.545,7.644A3.038,3.038,0,0,1,2705.519,465.951Zm10.118-29.095-5.842,21.8,21.8-5.838,5.844-21.8Z" transform="translate(-2702.495 -423.714)" fill="#4472db"/><path d="M2726.415,474.82a3.024,3.024,0,0,1-2.138-.885l-20.9-20.9a3.024,3.024,0,0,1,1.356-5.059l28.545-7.642a3.03,3.03,0,0,1,2.92.783l20.9,20.888a3.024,3.024,0,0,1-1.356,5.059l-28.545,7.651A3.021,3.021,0,0,1,2726.415,474.82Zm-15.055-22.353,15.958,15.956,21.8-5.842-15.958-15.951Z" transform="translate(-2702.495 -411.689)" fill="#4472db"/></g></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bp_tutorial.svg b/gui/src/images/AIT_ico_bp_tutorial.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2050512268bd82d2d1b3134448bee1bb4bc585fb
--- /dev/null
+++ b/gui/src/images/AIT_ico_bp_tutorial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="249.093" height="249.095" viewBox="0 0 249.093 249.095"><g transform="translate(127.522 97.396)" opacity="0.49" style="mix-blend-mode:multiply;isolation:isolate"><rect width="97.482" height="73.697" rx="5.063" transform="translate(3.023 3.024)" fill="#00dfe0"/><path d="M2860.132,703.475h-79.986a11.784,11.784,0,0,1-11.772-11.772V635.5a11.784,11.784,0,0,1,11.772-11.772h79.986A11.784,11.784,0,0,1,2871.9,635.5v56.2A11.784,11.784,0,0,1,2860.132,703.475Zm-79.986-73.7a5.732,5.732,0,0,0-5.725,5.724v56.2a5.732,5.732,0,0,0,5.725,5.724h79.986a5.732,5.732,0,0,0,5.724-5.724V635.5a5.732,5.732,0,0,0-5.724-5.724Z" transform="translate(-2768.374 -623.729)" fill="#00dfe0"/></g><path d="M2796.932,636.638l22.484,15.416a3.094,3.094,0,0,1,0,5.1l-22.484,15.417a3.093,3.093,0,0,1-4.842-2.55V639.188A3.092,3.092,0,0,1,2796.932,636.638Z" transform="translate(-2623.591 -517.337)" fill="#fff"/><path d="M2819.116,816.455a124.547,124.547,0,1,1,124.546-124.547A124.687,124.687,0,0,1,2819.116,816.455Zm0-248.231A123.683,123.683,0,1,0,2942.8,691.908,123.825,123.825,0,0,0,2819.116,568.224Z" transform="translate(-2694.569 -567.36)" fill="none"/><path d="M2792.773,688.014" transform="translate(-2623.094 -479.546)" fill="#4472db"/><g transform="translate(127.521 24.976)"><path d="M2786.53,626.886a3.018,3.018,0,0,1-2.138-.886l-15.132-15.137a3.015,3.015,0,0,1-.782-2.92l5.536-20.677a3.022,3.022,0,0,1,5.057-1.356l15.139,15.134a3.018,3.018,0,0,1,.783,2.92l-5.543,20.682a3.027,3.027,0,0,1-2.92,2.241Zm-11.762-19.065,10.2,10.2,3.734-13.933-10.2-10.2Z" transform="translate(-2768.374 -579.48)" fill="#4472db"/><path d="M2780.157,622.844a3.027,3.027,0,0,1-2.922-3.806l5.541-20.682a3.032,3.032,0,0,1,2.139-2.137l20.68-5.538a3.024,3.024,0,0,1,3.7,3.7l-5.541,20.677a3.025,3.025,0,0,1-2.137,2.137l-20.682,5.543A3.027,3.027,0,0,1,2780.157,622.844Zm8.01-21.237-3.736,13.937,13.939-3.735,3.733-13.931Zm12.672,12.67h0Z" transform="translate(-2761.999 -575.438)" fill="#4472db"/><path d="M2789.741,608.539a3.02,3.02,0,0,1-2.138-.885l-15.139-15.134a3.024,3.024,0,0,1,1.354-5.059l20.682-5.543a3.023,3.023,0,0,1,2.92.783l15.14,15.139a3.025,3.025,0,0,1-1.355,5.059l-20.682,5.538A3.034,3.034,0,0,1,2789.741,608.539Zm-9.3-16.592,10.2,10.2,13.937-3.73-10.2-10.2Z" transform="translate(-2766.042 -581.815)" fill="#4472db"/></g><path d="M2747.553,664.016a25.464,25.464,0,1,1,25.463-25.464A25.493,25.493,0,0,1,2747.553,664.016Zm0-44.88a19.416,19.416,0,1,0,19.416,19.416A19.438,19.438,0,0,0,2747.553,619.135Z" transform="translate(-2674.539 -534.078)" fill="#4472db"/><path d="M2712.652,721.9a3.022,3.022,0,0,1-3.023-3.024V666.787A22.4,22.4,0,0,1,2732,644.413h23.025a3.024,3.024,0,0,1,0,6.047H2732a16.343,16.343,0,0,0-16.324,16.326v52.089A3.023,3.023,0,0,1,2712.652,721.9Z" transform="translate(-2683.609 -511.279)" fill="#4472db"/><path d="M2766.075,667.9a3.018,3.018,0,0,1-3.024-3.024V644.458h-6.521a3.022,3.022,0,0,1-3.023-3.024v-62.91a3.022,3.022,0,0,1,3.023-3.024H2851.8a3.024,3.024,0,0,1,3.023,3.024v62.91a3.024,3.024,0,0,1-3.023,3.024h-48.367l-35.721,22.964A3.01,3.01,0,0,1,2766.075,667.9Zm-6.521-29.492h6.521a3.022,3.022,0,0,1,3.023,3.024v17.907l31.811-20.45a3.036,3.036,0,0,1,1.636-.48h46.229V581.548h-89.221Z" transform="translate(-2651.673 -561.435)" fill="#4472db"/><path d="M2723.194,707.8a3.023,3.023,0,0,1-3.024-3.024V666.812a3.024,3.024,0,1,1,6.047,0v37.962A3.022,3.022,0,0,1,2723.194,707.8Z" transform="translate(-2675.936 -497.178)" fill="#4472db"/><path d="M2761.337,721.9a3.022,3.022,0,0,1-3.023-3.024V680.913a3.023,3.023,0,0,1,5.686-1.432l8.917,16.578a6.6,6.6,0,0,0,8.639,2.8l29.634-20.815a5.661,5.661,0,0,0,1.4-7.824l-3.347-4.845L2785.7,682.024a3.022,3.022,0,0,1-4.6-1.484l-4.4-12.767c-4.438-14.386-9.8-17.313-16.49-17.313h-23.026a3.024,3.024,0,1,1,0-6.047H2760.2c10.944,0,17.593,6.426,22.239,21.484l3.056,8.864,22.752-16.083a3.021,3.021,0,0,1,4.231.752l5.085,7.359a11.724,11.724,0,0,1-2.9,16.207L2784.85,703.94a2.769,2.769,0,0,1-.349.213,12.679,12.679,0,0,1-16.908-5.228l-3.231-6.008v25.959A3.023,3.023,0,0,1,2761.337,721.9Z" transform="translate(-2665.76 -511.279)" fill="#4472db"/></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_ico_bp_work.svg b/gui/src/images/AIT_ico_bp_work.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ef95da19a3f7e45da3bcb427da613727a58a96d
--- /dev/null
+++ b/gui/src/images/AIT_ico_bp_work.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="248.23" height="248.23" viewBox="0 0 248.23 248.23"><path d="M2849.374,951.381c-1.042,4.594-2.188,9.448-3.528,14.364s-2.872,9.9-4.686,14.747c-6.179,26.4-32.955,46.245-61.187,38.612-23.2-6.732-45.679-19.851-59.541-39.348a81.447,81.447,0,0,1-8.758-15.765c-15.694-31.331-8.556-77.168,26.214-92.4,36.347-15.657,73.863-20.647,111.647-23.486a61.217,61.217,0,0,1,17.053,3.181c10.565,3.767,18.78,11.172,20.191,24.309,2.763,22.909-13.057,41.089-27.429,57.041A182.625,182.625,0,0,0,2849.374,951.381Z" transform="translate(-2694.304 -810.313)" fill="#00dfe0" opacity="0.5"/><g transform="translate(63.256 79.699)"><path d="M2737.925,915.421a3.022,3.022,0,0,1-3.024-3.024l.005-24.675a3.028,3.028,0,0,1,1.512-2.619l21.368-12.34a3.024,3.024,0,0,1,4.536,2.618l0,24.678a3.023,3.023,0,0,1-1.512,2.618l-21.376,12.34A3.023,3.023,0,0,1,2737.925,915.421Zm3.029-25.952,0,17.691,15.328-8.848,0-17.693Z" transform="translate(-2734.901 -872.357)" fill="#4472db"/><path d="M2759.3,917.368a3.017,3.017,0,0,1-1.512-.406l-21.375-12.339a3.023,3.023,0,0,1,0-5.237l21.375-12.342a3.028,3.028,0,0,1,3.023,0l21.375,12.345a3.023,3.023,0,0,1,0,5.237l-21.375,12.335A3.007,3.007,0,0,1,2759.3,917.368ZM2743.973,902l15.327,8.848,15.328-8.846-15.328-8.852Z" transform="translate(-2734.9 -861.962)" fill="#4472db"/><path d="M2771.673,915.426a3.022,3.022,0,0,1-1.512-.4l-21.375-12.345a3.022,3.022,0,0,1-1.512-2.618l0-24.678a3.023,3.023,0,0,1,4.535-2.618l21.378,12.34a3.028,3.028,0,0,1,1.512,2.619V912.4a3.022,3.022,0,0,1-3.024,3.024Zm-18.351-17.114,15.328,8.853v-17.7l-15.331-8.85Z" transform="translate(-2725.898 -872.357)" fill="#4472db"/></g><g transform="translate(41.885 42.682)"><path d="M2725.556,894a3.022,3.022,0,0,1-3.023-3.024l0-24.675a3.023,3.023,0,0,1,1.512-2.618l21.366-12.342a3.024,3.024,0,0,1,4.536,2.619l.005,24.675a3.019,3.019,0,0,1-1.512,2.618l-21.376,12.342A3.025,3.025,0,0,1,2725.556,894Zm3.029-25.952,0,17.691,15.328-8.85,0-17.691Z" transform="translate(-2722.532 -850.933)" fill="#4472db"/><path d="M2746.933,895.944a3.033,3.033,0,0,1-1.512-.4L2724.044,883.2a3.024,3.024,0,0,1,0-5.237l21.377-12.34a3.028,3.028,0,0,1,3.023,0l21.371,12.345a3.023,3.023,0,0,1,0,5.237l-21.371,12.337A3.023,3.023,0,0,1,2746.933,895.944Zm-15.33-15.365,15.33,8.85,15.324-8.846-15.324-8.852Z" transform="translate(-2722.532 -840.538)" fill="#4472db"/><path d="M2759.3,894a3.027,3.027,0,0,1-1.512-.4l-21.371-12.345a3.019,3.019,0,0,1-1.512-2.618l0-24.675a3.024,3.024,0,0,1,4.536-2.619l21.375,12.342a3.023,3.023,0,0,1,1.512,2.618v24.678A3.022,3.022,0,0,1,2759.3,894Zm-18.348-17.112,15.324,8.85V868.045l-15.328-8.85Z" transform="translate(-2713.529 -850.933)" fill="#4472db"/></g><g transform="translate(41.885 116.716)"><path d="M2725.556,936.847a3.022,3.022,0,0,1-3.023-3.024l0-24.677a3.028,3.028,0,0,1,1.512-2.619l21.368-12.34a3.024,3.024,0,0,1,4.536,2.618l0,24.677a3.023,3.023,0,0,1-1.512,2.619l-21.375,12.342A3.025,3.025,0,0,1,2725.556,936.847Zm3.027-25.954,0,17.693,15.328-8.85,0-17.693Z" transform="translate(-2722.532 -893.781)" fill="#4472db"/><path d="M2746.933,938.794a3.017,3.017,0,0,1-1.512-.406l-21.377-12.34a3.025,3.025,0,0,1,0-5.239l21.377-12.34a3.02,3.02,0,0,1,3.023,0l21.371,12.344a3.025,3.025,0,0,1,0,5.239l-21.371,12.337A3.008,3.008,0,0,1,2746.933,938.794Zm-15.33-15.365,15.33,8.85,15.324-8.846-15.324-8.853Z" transform="translate(-2722.532 -883.387)" fill="#4472db"/><path d="M2759.3,936.85a3.027,3.027,0,0,1-1.512-.4L2736.418,924.1a3.025,3.025,0,0,1-1.512-2.619L2734.9,896.8a3.024,3.024,0,0,1,4.536-2.618l21.376,12.34a3.028,3.028,0,0,1,1.512,2.619v24.68a3.022,3.022,0,0,1-3.024,3.024Zm-18.348-17.114,15.324,8.852V910.893l-15.328-8.85Z" transform="translate(-2713.53 -893.781)" fill="#4472db"/></g><ellipse cx="124.115" cy="124.115" rx="124.115" ry="124.115" fill="none"/><g transform="translate(118.945 96.414)"><path d="M2832.65,977.6a3.017,3.017,0,0,1-2.137-.885L2810,956.2l-7.273,13.3a2.994,2.994,0,0,1-2.917,1.56,3.024,3.024,0,0,1-2.6-2.042l-23.218-68.719a3.025,3.025,0,0,1,3.834-3.834l68.717,23.22a3.024,3.024,0,0,1,.482,5.517l-13.3,7.274,20.511,20.511a3.022,3.022,0,0,1,0,4.276l-19.447,19.445A3.014,3.014,0,0,1,2832.65,977.6Zm-23.365-29.413a3.017,3.017,0,0,1,2.137.886L2832.65,970.3l15.17-15.17L2826.592,933.9a3.022,3.022,0,0,1,.688-4.789l10.792-5.9-56.394-19.054,19.054,56.393,5.9-10.792a3.032,3.032,0,0,1,2.654-1.572Z" transform="translate(-2762.254 -871.636)" fill="#4472db"/><path d="M2782.967,904.007a3.023,3.023,0,0,1-1.612-5.583L2806.7,882.5a3.024,3.024,0,1,1,3.219,5.12l-25.342,15.927A3.01,3.01,0,0,1,2782.967,904.007Z" transform="translate(-2757.809 -882.031)" fill="#4472db"/><path d="M2770.16,941.821a3.026,3.026,0,0,1-3-3.428l3.7-27.357a3.024,3.024,0,0,1,5.994.809l-3.7,27.357A3.026,3.026,0,0,1,2770.16,941.821Z" transform="translate(-2767.131 -862.827)" fill="#4472db"/><path d="M2806.711,900.63H2790.3a3.024,3.024,0,0,1,0-6.047h16.415a3.024,3.024,0,0,1,0,6.047Z" transform="translate(-2752.472 -872.896)" fill="#4472db"/></g><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(118.736 87.185)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(136.785 69.135)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(150.261 87.185)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(188.305 87.185)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(187.415 51.213)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(106.921 69.135)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(144.51 51.239)" fill="#4472db"/><ellipse cx="5.563" cy="5.563" rx="5.563" ry="5.563" transform="translate(162.407 69.135)" fill="#4472db"/><path d="M2771.5,891.809a3.024,3.024,0,0,1-2.138-5.161l18.049-18.049a3.023,3.023,0,0,1,4.277,4.275l-18.049,18.049A3.014,3.014,0,0,1,2771.5,891.809Z" transform="translate(-2647.205 -796.039)" fill="#4472db"/><path d="M2807.476,873.76h-25.525a3.024,3.024,0,0,1,0-6.047h25.525a3.024,3.024,0,0,1,0,6.047Z" transform="translate(-2639.602 -796.039)" fill="#4472db"/><path d="M2804.383,881.363a3.009,3.009,0,0,1-2.137-.886L2784.2,862.428a3.024,3.024,0,0,1,4.277-4.276L2806.52,876.2a3.024,3.024,0,0,1-2.137,5.161Z" transform="translate(-2636.412 -803.642)" fill="#4472db"/></svg>
\ No newline at end of file
diff --git a/gui/src/images/AIT_illu_AIT.svg b/gui/src/images/AIT_illu_AIT.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1e8d3b2651719402d492270e50b775908b44b11f
--- /dev/null
+++ b/gui/src/images/AIT_illu_AIT.svg
@@ -0,0 +1,27 @@
+<svg id="AIT_illu_AIT" xmlns="http://www.w3.org/2000/svg" width="339.541" height="324.5" viewBox="0 0 339.541 324.5">
+ <path id="Pfad_683" data-name="Pfad 683" d="M-242.884,1665.4c2.315,7.482,4.7,15.422,6.857,23.615s4.091,16.64,5.508,25.135c13.038,43.142-9.023,93.977-56.021,106.446-39.006,9.592-82.274,9.379-118.437-7.175A135.394,135.394,0,0,1-430.692,1798c-48.638-32.073-76.453-104.01-39.046-154.845,39.325-52.754,89.2-91.12,141.251-126.608a101.86,101.86,0,0,1,27.2-9.592c18.344-3.357,36.328.479,49.277,18.224,23.02,30.693,15.346,70.018,7.908,104.928A303.386,303.386,0,0,0-242.884,1665.4Z" transform="translate(553.569 -1505.852)" fill="#00dfe0" opacity="0.24"/>
+ <g id="Gruppe_61" data-name="Gruppe 61" transform="translate(0 118.773)">
+ <g id="Gruppe_15" data-name="Gruppe 15" transform="translate(0 17.241)">
+ <path id="Pfad_226" data-name="Pfad 226" d="M324.816,151.649,270.45,97.264l-19.911,74.3,54.385,54.366Z" transform="translate(-176.242 -97.264)" fill="#17a5f7"/>
+ <path id="Pfad_227" data-name="Pfad 227" d="M257.092,117.175l74.3-19.911-19.911,74.3-74.3,19.892Z" transform="translate(-237.18 -97.264)" fill="#00dfe0"/>
+ <path id="Pfad_228" data-name="Pfad 228" d="M291.566,184.9,237.18,130.515l74.3-19.892,54.385,54.366Z" transform="translate(-237.18 -36.326)" fill="#4472db"/>
+ </g>
+ <g id="Gruppe_16" data-name="Gruppe 16" transform="translate(74.296)">
+ <path id="Pfad_229" data-name="Pfad 229" d="M335.707,147.018,282.871,94.164l-19.351,72.2L316.374,219.2Z" transform="translate(-191.316 -94.164)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.71"/>
+ <path id="Pfad_230" data-name="Pfad 230" d="M269.889,113.515l72.2-19.351-19.351,72.2-72.2,19.332Z" transform="translate(-250.538 -94.164)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.71"/>
+ <path id="Pfad_231" data-name="Pfad 231" d="M303.392,179.333l-52.854-52.854,72.2-19.332L375.6,159.982Z" transform="translate(-250.538 -34.942)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.71"/>
+ </g>
+ </g>
+ <g id="Gruppe_62" data-name="Gruppe 62" transform="translate(219.28 99.24)">
+ <g id="Ellipse_4" data-name="Ellipse 4" transform="translate(0.261 0.26)" fill="none" stroke="#17a5f7" stroke-width="4">
+ <ellipse cx="60" cy="60.5" rx="60" ry="60.5" stroke="none"/>
+ <ellipse cx="60" cy="60.5" rx="58" ry="58.5" fill="none"/>
+ </g>
+ <path id="Pfad_684" data-name="Pfad 684" d="M1091.333,1576.073l10.381-34.384s-21.748-6.151-35.807,8.787C1084.359,1568.709,1091.333,1576.073,1091.333,1576.073Z" transform="translate(-1031.656 -1513.359)" fill="none" stroke="#17a5f7" stroke-width="4"/>
+ <path id="Pfad_685" data-name="Pfad 685" d="M1082.941,1570.153l-23.066-22.846s-10.544,7.689-9.446,21.528C1067.124,1570.373,1082.941,1570.153,1082.941,1570.153Z" transform="translate(-1034.851 -1511.947)" fill="#17a5f7"/>
+ <path id="Pfad_686" data-name="Pfad 686" d="M1104.77,1597.07c-5.272-9.227-18.453-26.8-18.453-26.8l30.316,12.3S1113.557,1593.335,1104.77,1597.07Z" transform="translate(-1027.463 -1507.231)" fill="none" stroke="#17a5f7" stroke-width="4"/>
+ <path id="Pfad_687" data-name="Pfad 687" d="M1095.7,1549.312c9.463,4.732,20.954,10.646,17.405,35.994" transform="translate(-1026.742 -1512.741)" fill="none" stroke="#17a5f7" stroke-width="4"/>
+ <path id="Pfad_688" data-name="Pfad 688" d="M1108.006,1594.862c-8.059,3.25-39.448,10.608-44.01-24.541,23.489.676,27.206,0,27.206,0Z" transform="translate(-1032.048 -1507.22)" fill="none" stroke="#17a5f7" stroke-width="4"/>
+ </g>
+ <path id="Pfad_941" data-name="Pfad 941" d="M2.376,0H9.9l4.95-17.622h29.3L49.1,0h7.524L37.818-68.508H21.186ZM26.928-61.974h5.148l10.4,37.521H16.533ZM67.419,0h7.623V-68.508H67.419ZM84.645-61.677h21.087V0h7.524V-61.677h20.889v-6.831h-49.5Z" transform="translate(167.541 324.5)" fill="#fff"/>
+</svg>
diff --git a/gui/src/images/AIT_img_natrev.jpg b/gui/src/images/AIT_img_natrev.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..05c98deb9ba7da3c1b80b5c17f0b784e6c956f17
Binary files /dev/null and b/gui/src/images/AIT_img_natrev.jpg differ
diff --git a/gui/src/images/AIT_slide_nature.png b/gui/src/images/AIT_slide_nature.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c23e07e5ec579c6e73d2be230956f0f2305e8ea
Binary files /dev/null and b/gui/src/images/AIT_slide_nature.png differ
diff --git a/gui/src/components/about.svg b/gui/src/images/about.svg
similarity index 100%
rename from gui/src/components/about.svg
rename to gui/src/images/about.svg
diff --git a/gui/src/index.css b/gui/src/index.css
index b4cc7250b98cb3f1a2dd5bec134296c6942344d9..673b8794313a28b8f03f7374c7ea197cc4320f46 100644
--- a/gui/src/index.css
+++ b/gui/src/index.css
@@ -2,4 +2,4 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
-}
+}
\ No newline at end of file
diff --git a/gui/src/setupTests.js b/gui/src/setupTests.js
index 84bbc29999bdcc2b07cf1ccc91d7816be0db3b1d..8a89f0bf77015c84ee69dcc460538fac2440484b 100644
--- a/gui/src/setupTests.js
+++ b/gui/src/setupTests.js
@@ -10,9 +10,6 @@ global.nomadEnv = {
'keycloakClientId': 'nomad_gui_dev',
'appBase': 'http://nomad-lab.eu/prod/rae/beta',
'debug': false,
- 'matomoEnabled': false,
- 'matomoUrl': 'https://nomad-lab.eu/fairdi/stat',
- 'matomoSiteId': '2',
'version': {
'label': '1.0.0',
'isBeta': false,
diff --git a/gui/yarn.lock b/gui/yarn.lock
index 629a6208c2dfa1e790cddb731317ad83cf7a46fe..897f716263e69fe856fe66eac7ca622f2907a2dc 100644
--- a/gui/yarn.lock
+++ b/gui/yarn.lock
@@ -10390,7 +10390,6 @@ node-releases@^1.1.52, node-releases@^1.1.71:
object-hash "^2.0.3"
pace "^0.0.4"
pace-js "^1.0.2"
- piwik-react-router "^0.12.1"
plotly.js-cartesian-dist-min "^1.54.7"
qs "^6.8.0"
react "^16.13.1"
@@ -11207,14 +11206,6 @@ pirates@^4.0.1:
dependencies:
node-modules-regexp "^1.0.0"
-piwik-react-router@^0.12.1:
- version "0.12.1"
- resolved "https://registry.yarnpkg.com/piwik-react-router/-/piwik-react-router-0.12.1.tgz#0caf984715a5b22c85610e0c02ae372b1ca37c41"
- integrity sha512-Ebi7rBKV/S+YJ3UF/6t6n/wRx1/4yilR1caG/JhdefkYHh8gopqy2kxjaaD++LS9tTmtPNfokEHWbXTbw2W7OA==
- dependencies:
- url-join "^1.1.0"
- warning "^3.0.0"
-
pkg-dir@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
@@ -15262,11 +15253,6 @@ urix@^0.1.0:
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-url-join@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
- integrity sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg=
-
url-loader@2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b"
@@ -15581,13 +15567,6 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
-warning@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
- integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
- dependencies:
- loose-envify "^1.0.0"
-
warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
diff --git a/nomad/app/flask/dcat/api.py b/nomad/app/flask/dcat/api.py
index 0513f925cd238c7238e35f8e38e9a9134b771768..29ddcce9fc54391f4fc1d1349b867ab46bfeb80f 100644
--- a/nomad/app/flask/dcat/api.py
+++ b/nomad/app/flask/dcat/api.py
@@ -91,22 +91,17 @@ response_types = [
def rdf_respose(g: Graph) -> Response:
args = arg_parser.parse_args()
format_ = args.get('format')
- accept_header = None
if format_ is None:
accept_header = request.headers.get('Accept', None)
if accept_header is not None:
format_ = all_repsonse_types.get(accept_header, 'pretty-xml')
else:
- accept_header = None
format_ = 'pretty-xml'
- if accept_header is not None:
- content_type = accept_header
- else:
- try:
- content_type = next(key for key, value in all_repsonse_types.items() if value == format_)
- except StopIteration:
- content_type = 'application/xml' if format in ['xml', 'pretty-xml'] else 'text/%s' % format_
+ try:
+ content_type = next(key for key, value in all_repsonse_types.items() if value == format_)
+ except StopIteration:
+ content_type = 'application/xml' if format in ['xml', 'pretty-xml'] else 'text/%s' % format_
return Response(
g.serialize(format=format_).decode('utf-8'), 200,
diff --git a/nomad/cli/admin/admin.py b/nomad/cli/admin/admin.py
index 629e518b9e60a69ed2de7bf7dfaae8001a155e2f..66f27c9b0225a5ebad15b44e9e784060622ad5f3 100644
--- a/nomad/cli/admin/admin.py
+++ b/nomad/cli/admin/admin.py
@@ -240,6 +240,7 @@ def gui_config():
from nomad import config
import glob
import shutil
+ import json
gui_folder = os.path.abspath(os.path.join(os.path.dirname(__file__), '../../app/flask/static/gui'))
run_gui_folder = os.path.join(gui_folder, '../.gui_configured')
@@ -252,22 +253,18 @@ def gui_config():
env_js_file = os.path.join(run_gui_folder, 'env.js')
if not os.path.exists(env_js_file):
with open(env_js_file, 'wt') as f:
- f.write(('''
-window.nomadEnv = {
- 'appBase': '%s',
+ f.write(f'''
+window.nomadEnv = {{
+ 'appBase': '{config.services.api_base_path}',
'keycloakBase': 'https://nomad-lab.eu/fairdi/keycloak/auth/',
- 'keycloakRealm': '%s',
- 'keycloakClientId': '%s',
+ 'keycloakRealm': '{config.keycloak.realm_name}',
+ 'keycloakClientId': '{config.keycloak.client_id}',
'debug': false,
- 'matomoEnabled': false,
- 'encyclopediaEnabled': true,
- 'oasis': %s
-};''' % (
- config.services.api_base_path,
- config.keycloak.realm_name,
- config.keycloak.client_id,
- 'true' if config.keycloak.oasis else 'false'
- )))
+ 'encyclopediaEnabled': {'true' if config.encyclopedia_enabled else 'false'},
+ 'aitoolkitEnabled': {'true' if config.aitoolkit_enabled else 'false'},
+ 'oasis': {'true' if config.keycloak.oasis else 'false'},
+ 'version': {json.dumps(config.meta.beta) if config.meta.beta else dict()}
+}};''')
# replace base path in all GUI files
source_file_globs = [
diff --git a/nomad/config.py b/nomad/config.py
index 6927f74c421375998a82ae003b25f96f2ad2054c..1071ca492a485ab38e2b7eb6c0b776070286b569 100644
--- a/nomad/config.py
+++ b/nomad/config.py
@@ -314,7 +314,8 @@ meta = NomadConfig(
homepage='https://nomad-lab.eu',
source_url='https://gitlab.mpcdf.mpg.de/nomad-lab/nomad-FAIR',
maintainer_email='markus.scheidgen@physik.hu-berlin.de',
- deployment_id='nomad-lab.eu/prod/v1'
+ deployment_id='nomad-lab.eu/prod/v1',
+ beta=None
)
gitlab = NomadConfig(
@@ -373,6 +374,8 @@ process_reuse_parser = True
metadata_file_name = 'nomad'
metadata_file_extensions = ('json', 'yaml', 'yml')
enable_lazy_import = True
+encyclopedia_enabled = True
+aitoolkit_enabled = False
def normalize_loglevel(value, default_level=logging.INFO):
diff --git a/ops/docker-compose/infrastructure/docker-compose.yml b/ops/docker-compose/infrastructure/docker-compose.yml
index cb934878a4ded9c7d9a825659c29511e5ea4e44b..eea3bdc1220a075ae067f0289e84df1ee12f43e5 100644
--- a/ops/docker-compose/infrastructure/docker-compose.yml
+++ b/ops/docker-compose/infrastructure/docker-compose.yml
@@ -47,6 +47,11 @@ services:
restart: 'no'
image: docker.elastic.co/elasticsearch/elasticsearch:6.8.15
container_name: nomad_elastic
+ environment:
+ - cluster.routing.allocation.disk.threshold_enabled=true
+ - cluster.routing.allocation.disk.watermark.flood_stage=1gb
+ - cluster.routing.allocation.disk.watermark.low=4gb
+ - cluster.routing.allocation.disk.watermark.high=2gb
ports:
- 9200:9200
volumes:
diff --git a/ops/helm/nomad/deployments/prod-beta-values.yaml b/ops/helm/nomad/deployments/prod-beta-values.yaml
index 14264485e30cbaa5c64a732388ad07af9319fff4..c864286830bf5290331fb2229793748c668fedda 100644
--- a/ops/helm/nomad/deployments/prod-beta-values.yaml
+++ b/ops/helm/nomad/deployments/prod-beta-values.yaml
@@ -17,10 +17,6 @@ proxy:
gui:
debug: true
- matomoEnabled: false
- matomoSiteId: 2
- encyclopediaEnabled: true
- aitoolkitEnabled: true
app:
replicas: 2
diff --git a/ops/helm/nomad/deployments/prod-test-values.yaml b/ops/helm/nomad/deployments/prod-test-values.yaml
index 8007eea1aea48780f03230e9741cded5273589bf..d0495430565a7b5637f2de039666ff164c4f54d7 100644
--- a/ops/helm/nomad/deployments/prod-test-values.yaml
+++ b/ops/helm/nomad/deployments/prod-test-values.yaml
@@ -17,10 +17,6 @@ proxy:
gui:
debug: true
- matomoEnabled: false
- matomoSiteId: 2
- encyclopediaEnabled: true
- aitoolkitEnabled: true
app:
replicas: 1
diff --git a/ops/helm/nomad/templates/api-deployment.yaml b/ops/helm/nomad/templates/api-deployment.yaml
index 10809fd6444528916126b799f847471a2deef9ab..86c311b615d51bc63942aaa6fe6ff093989110e9 100644
--- a/ops/helm/nomad/templates/api-deployment.yaml
+++ b/ops/helm/nomad/templates/api-deployment.yaml
@@ -74,56 +74,6 @@ data:
worker_connections = 1000
workers = {{ .Values.app.worker }}
---
-apiVersion: v1
-kind: ConfigMap
-metadata:
- name: {{ include "nomad.fullname" . }}-gui-env-js
- labels:
- app.kubernetes.io/name: {{ include "nomad.name" . }}-gui-env-js
- helm.sh/chart: {{ include "nomad.chart" . }}
- app.kubernetes.io/instance: {{ .Release.Name }}
- app.kubernetes.io/managed-by: {{ .Release.Service }}
-data:
- env.js: |
- window.nomadEnv = {
- "appBase": "{{ .Values.proxy.external.path }}",
- "keycloakBase": "{{ .Values.keycloak.serverExternalUrl }}",
- "keycloakRealm": "{{ .Values.keycloak.realmName }}",
- "keycloakClientId": "{{ .Values.keycloak.guiClientId }}",
- "matomoSiteId": {{ .Values.gui.matomoSiteId }},
- "matomoUrl": "{{ .Values.gui.matomoUrl }}",
- "matomoEnabled": {{ .Values.gui.matomoEnabled }},
- "debug": {{ .Values.gui.debug }},
- "version": {
- "label": "{{ .Values.version.label }}",
- "isBeta": {{ .Values.version.isBeta }},
- "isTest": {{ .Values.version.isTest }},
- "usesBetaData": {{ .Values.version.usesBetaData }},
- "officialUrl": "{{ .Values.version.officialUrl }}"
- },
- "encyclopediaEnabled": {{ .Values.gui.encyclopediaEnabled }},
- "aitoolkitEnabled": {{ .Values.gui.aitoolkitEnabled }},
- "servicesUploadLimit": {{ .Values.api.uploadLimit }}
- };
----
-apiVersion: v1
-kind: ConfigMap
-metadata:
- name: {{ include "nomad.fullname" . }}-enc-conf-js
- labels:
- app.kubernetes.io/name: {{ include "nomad.name" . }}-enc-conf-js
- helm.sh/chart: {{ include "nomad.chart" . }}
- app.kubernetes.io/instance: {{ .Release.Name }}
- app.kubernetes.io/managed-by: {{ .Release.Service }}
-data:
- conf.js: |
- window.nomadEnv = {
- apiRoot: "{{ .Values.proxy.external.path }}/api/encyclopedia/",
- keycloakBase: "{{ .Values.keycloak.serverExternalUrl }}",
- keycloakRealm: "{{ .Values.keycloak.realmName }}",
- keycloakClientId: "{{ .Values.keycloak.guiClientId }}"
- };
----
apiVersion: apps/v1
kind: Deployment
metadata:
@@ -169,14 +119,6 @@ spec:
name: staging-volume
- mountPath: /nomad
name: nomad-volume
- - mountPath: /app/nomad/app/static/gui/env.js
- readOnly: true
- subPath: env.js
- name: gui-env-js
- - mountPath: /app/nomad/app/static/encyclopedia/conf.js
- readOnly: true
- subPath: conf.js
- name: enc-conf-js
env:
- name: NOMAD_META_SERVICE
value: "app"
@@ -253,12 +195,6 @@ spec:
- name: nomad-conf
configMap:
name: {{ include "nomad.fullname" . }}-configmap
- - name: gui-env-js
- configMap:
- name: {{ include "nomad.fullname" . }}-gui-env-js
- - name: enc-conf-js
- configMap:
- name: {{ include "nomad.fullname" . }}-enc-conf-js
- name: public-volume
hostPath:
path: {{ .Values.volumes.public }}
diff --git a/ops/helm/nomad/templates/nomad-configmap.yml b/ops/helm/nomad/templates/nomad-configmap.yml
index f13467eaa139491981fb0c62037d18bcb979e59c..9645114f9ea2a9ab5e57fa4105e095c4fefbb01c 100644
--- a/ops/helm/nomad/templates/nomad-configmap.yml
+++ b/ops/helm/nomad/templates/nomad-configmap.yml
@@ -23,7 +23,15 @@ data:
reparse_published_if_parser_changed: "{{ .Values.reprocess.reparse_published_if_parser_changed }}"
add_newfound_entries_to_published: "{{ .Values.reprocess.add_newfound_entries_to_published }}"
delete_unmatched_published_entries: "{{ .Values.reprocess.delete_unmatched_published_entries }}"
+ beta:
+ label: "{{ .Values.version.label }}"
+ isBeta: {{ .Values.version.isBeta }}
+ isTest: {{ .Values.version.isTest }}
+ usesBetaData: {{ .Values.version.usesBetaData }}
+ officialUrl: "{{ .Values.version.officialUrl }}"
process_reuse_parser: {{ .Values.process_reuse_parser }}
+ encyclopedia_enabled: {{ .Values.encyclopedia.enabled }}
+ aitoolkit_enabled: {{ .Values.aitoolkit.enabled }}
fs:
tmp: ".volumes/fs/staging/tmp"
prefix_size: {{ .Values.volumes.prefixSize }}
diff --git a/ops/helm/nomad/values.yaml b/ops/helm/nomad/values.yaml
index 6c73d8a2048e910c4c1a8b9623ad7f437da6f1a1..32a76bff5577d2ad57159439ac14d5ea52e71a40 100644
--- a/ops/helm/nomad/values.yaml
+++ b/ops/helm/nomad/values.yaml
@@ -77,18 +77,16 @@ gui:
replicas: 1
## This variable is used in the GUI to show or hide additional information
debug: false
- ## URL for matomo(piwik) user tracking
- matomoUrl: 'https://nomad-lab.eu/prod/stat'
- ## site id for matomo(piwik) user tracking
- matomoSiteId: 1
- ## send matomo(piwik) user tracking data
- matomoEnabled: false
## automatically gz based on header
gzip: true
+
+encyclopedia:
## enable links to the 'new' encyclopedia
- encyclopediaEnabled: true
+ enabled: true
+
+aitoolkit:
## enable aitoolkit references
- aitoolkitEnabled: true
+ enabled: false
## Everything concerning the nginx that serves the gui, proxies the api
# It is run via NodePort service
diff --git a/ops/scripts/quarantine-raw-files.sh b/ops/scripts/quarantine-raw-files.sh
new file mode 100755
index 0000000000000000000000000000000000000000..28c72333054c1ac3acc157f39b4ede14765b60bd
--- /dev/null
+++ b/ops/scripts/quarantine-raw-files.sh
@@ -0,0 +1,21 @@
+#!/bin/sh
+dir="quarantined"
+pwd=`pwd`
+
+[ -e raw-restricted.plain.zip ] && unzip -d $dir -o raw-restricted.plain.zip $@ > /dev/null
+[ -e raw-public.plain.zip ] && unzip -d $dir -o raw-public.plain.zip $@ > /dev/null
+
+if [ -e $dir ]
+then
+ cd $dir
+ zip -rq $pwd/raw-quarantined.plain.zip *
+ cd $pwd
+ pwd
+fi
+
+[ -e raw-restricted.plain.zip ] && zip -dq raw-restricted.plain.zip $@
+[ -e raw-public.plain.zip ] && zip -dq raw-public.plain.zip $@
+
+[ -e $dir ] && rm -rf $dir
+
+echo "done"
diff --git a/requirements.txt b/requirements.txt
index 0cf1ce1bd9638ba303c0c80ed70572758f23249b..734a412c4e8af7083eea0c54e31ac46674413158 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -23,6 +23,7 @@ elasticsearch-dsl==6.4.0
pydantic==1.8.2
jmespath==0.10.0
+
# [parsing]
netCDF4==1.5.4
pandas==1.3.2
@@ -87,7 +88,7 @@ a2wsgi==1.4.0
python-multipart==0.0.5
# [dev]
-setuptools
+setuptools==57.5.0
sphinx==2.4.4
sphinxcontrib.httpdomain
sphinx-click==3.0.1
diff --git a/setup.sh b/setup.sh
index f1935cb426fa5afc64237b2637df4943408e52a9..f7f25860f89a539750481d090b81cb04b29dc7a8 100755
--- a/setup.sh
+++ b/setup.sh
@@ -6,8 +6,12 @@ pip install --upgrade pip
git submodule sync
sleep 5
+
+# Install sub-modules
git submodule update --init --jobs=4
./dependencies.sh -e
+
+# Install nomad
pip install -e .[all]
./generate_gui_artifacts.sh