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/public/env.js b/gui/public/env.js index bbe9ed03f1e15229a0fbe34e7a348185b9159500..8b07ebbc8d4f9580726114a67e78d79ea5de1541 100644 --- a/gui/public/env.js +++ b/gui/public/env.js @@ -16,6 +16,6 @@ window.nomadEnv = { 'officialUrl': 'https://nomad-lab.eu/prod/rae/gui' }, 'encyclopediaEnabled': true, - 'aitoolkitEnabled': false, + 'aitoolkitEnabled': true, 'oasis': false } diff --git a/gui/src/components/About.js b/gui/src/components/About.js index 3cfb6541753c968040308fcb9098a88dfecbd2c0..b6b1ddfbb8e6a144621d7a3755f51e0def476b0c 100644 --- a/gui/src/components/About.js +++ b/gui/src/components/About.js @@ -16,7 +16,7 @@ * limitations under the License. */ import React, { useContext, 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' @@ -197,7 +197,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' } 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 + {children} + +} + +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 }) => ( +
+