{md}
\n )\n}\n\nMarkdown.propTypes = {\n classes: PropTypes.object.isRequired,\n text: PropTypes.string,\n children: PropTypes.string\n}\n\nexport default withStyles(styles)(Markdown)\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { forwardRef, useCallback, useState } from 'react'\nimport { Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'\nimport Markdown from './Markdown'\nimport PropTypes from 'prop-types'\nimport HelpIcon from '@material-ui/icons/Help'\n\nexport const HelpButton = forwardRef(({heading, content, text, maxWidth, IconProps, children, ...IconButtonProps}, ref) => {\n const [open, setOpen] = useState(false)\n const handleToggleOpen = useCallback(() => {\n setOpen(old => !old)\n IconButtonProps?.onClick?.()\n }, [IconButtonProps])\n\n return <>\n \n
\n }\n\n return \n
\n }\n\n return null\n})\nDatatableLoadMorePagination.propTypes = {}\n\nconst useDateatableScollPaginationStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(2),\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n fontWeight: 'bold',\n '& > *': {\n paddingLeft: theme.spacing(1)\n }\n }\n}))\n\n/** The scroll based table pagination. Must be a child of DatatableTable component. */\nexport const DatatableScrollPagination = React.memo(function DatatablePagePagination({loadMessage}) {\n const {pagination} = useDatatableContext()\n const classes = useDateatableScollPaginationStyles()\n if (pagination.next_page_after_value && (pagination.next_page_after_value === pagination.page_after_value)) {\n return \n {loadMessage || 'oading more items ...'} \n
\n } else {\n return null\n }\n})\nDatatableScrollPagination.propTypes = {\n loadMessage: PropTypes.string\n}\n\nconst useDatatableHeaderStyles = makeStyles(theme => ({\n root: {},\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1\n },\n stickyHeader: {\n background: '#fff'\n }\n}))\n\nconst DatatableHeader = React.memo(function DatatableHeader({actions}) {\n const classes = useDatatableHeaderStyles()\n const {withSelectionFeature, multiSelect} = useStaticDatatableContext()\n const {\n selected,\n onSelectedChanged,\n shownColumns,\n sortingColumns,\n pagination,\n onPaginationChanged\n } = useDatatableContext()\n const columns = shownColumns\n const {order, order_by} = pagination\n const withSorting = !!onPaginationChanged\n\n const handleSelectAllChanged = () => {\n if (selected === 'all') {\n onSelectedChanged(new Set())\n } else {\n onSelectedChanged('all')\n }\n }\n\n const createSortHandler = (column) => (event) => {\n const isAsc = order_by === column.key && order === 'asc'\n onPaginationChanged?.({\n ...pagination,\n order: isAsc ? 'desc' : 'asc',\n order_by: column.key\n })\n }\n\n const sortableColumns = useMemo(() => {\n if (sortingColumns) {\n return sortingColumns\n } else {\n return columns.filter(column => column.sortable).map(column => column.key)\n }\n }, [sortingColumns, columns])\n\n return \n {isFunction(actions)\n ? actions(row)\n : React.createElement(actions, {data: row})\n }\n
\n }\n \n {details && - \n {columns.map(column =>
\n {children}\n
\n})\n\nActions.propTypes = {\n justifyContent: PropTypes.string, // The flexbox justification of buttons\n className: PropTypes.string,\n classes: PropTypes.object,\n children: PropTypes.node\n}\n\nActions.defaultProps = {\n justifyContent: 'flex-end'\n}\n\nconst useActionHeaderStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n minWidth: 0,\n marginRight: theme.spacing(0.5)\n },\n spacer: {\n flexGrow: 1,\n minWidth: 0\n }\n}))\nexport const ActionHeader = React.memo(({\n disableSpacer,\n className,\n classes,\n children\n}) => {\n const styles = useActionHeaderStyles({classes: classes})\n return \n {children}\n {!disableSpacer && }\n
\n})\n\nActionHeader.propTypes = {\n disableSpacer: PropTypes.bool, // Used to disable flexbox spacer\n className: PropTypes.string,\n classes: PropTypes.object,\n children: PropTypes.node\n}\n\nconst useActionStyles = makeStyles((theme) => ({\n root: {\n marginRight: theme.spacing(1),\n '&:last-child': {\n marginRight: 0\n }\n }\n}))\nexport const Action = React.memo(({\n color,\n size,\n href,\n disabled,\n onClick,\n onMouseDown,\n onMouseUp,\n tooltip,\n TooltipProps,\n className,\n classes,\n children,\n ButtonComponent,\n ButtonProps,\n 'data-testid': testID\n}) => {\n const styles = useActionStyles({classes: classes})\n\n return \n \n \n
\n})\nconst presetDefault = 'new'\nexport const presetState = atom({\n key: 'preset',\n default: presetDefault\n})\nexport const guiState = atomFamily({\n key: 'guiState',\n default: (name) => presets[presetDefault][name]\n})\n\nexport default GUIMenu\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useMemo, useCallback } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n Radio,\n FormControl,\n FormLabel,\n FormControlLabel,\n RadioGroup,\n Menu\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { useRecoilValue } from 'recoil'\nimport MoreVertIcon from '@material-ui/icons/MoreVert'\nimport FilterTitle from '../FilterTitle'\nimport { Actions, ActionHeader, Action, ActionSelect } from '../../Actions'\nimport WidgetToggle from '../widgets/WidgetToggle'\nimport { scales } from '../../plotting/common'\nimport { guiState } from '../../GUIMenu'\nimport { useBoolState } from '../../../hooks'\n\n/**\n * The quantity label and actions shown by all filter components.\n */\nconst useStyles = makeStyles(theme => ({\n root: {\n marginBottom: theme.spacing(0.5),\n height: '2.5rem',\n width: '100%'\n },\n menuItem: {\n width: '10rem',\n margin: theme.spacing(2),\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n },\n row: {\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n flexGrow: 1,\n minWidth: 0\n },\n spacer: {\n flexGrow: 1,\n minWidth: 0\n }\n}))\nconst InputHeader = React.memo(({\n quantity,\n label,\n description,\n disableWidget,\n disableStatistics,\n scale,\n onChangeScale,\n actions,\n actionsAlign,\n className,\n classes\n}) => {\n const styles = useStyles({classes: classes})\n const [anchorEl, setAnchorEl] = React.useState(null)\n const isSettingsOpen = Boolean(anchorEl)\n const [isDragging, setDragging, setNotDragging] = useBoolState(false)\n const [isTooltipOpen, openTooltip, closeTooltip] = useBoolState(false)\n const menu = useRecoilValue(guiState('menu'))\n\n const openMenu = useCallback((event) => {\n setAnchorEl(event.currentTarget)\n }, [])\n const closeMenu = useCallback(() => {\n setAnchorEl(null)\n }, [])\n const handleMouseDown = useCallback((event) => {\n setDragging()\n closeTooltip()\n }, [closeTooltip, setDragging])\n const handleMouseUp = useCallback(() => {\n setNotDragging()\n }, [setNotDragging])\n const tooltipProps = useMemo(() => ({\n open: isTooltipOpen,\n onClose: closeTooltip,\n onOpen: () => !isDragging && openTooltip()\n }), [isTooltipOpen, closeTooltip, isDragging, openTooltip])\n\n // Dedice the menu component. The tooltip of scale dropdown needs to be\n // controlled, otherwise it won't close as we open the select menu.\n const menuComp = menu === 'hidden'\n ? <>\n \n
\n \n \n
\n \n {!disableHeader && \n {children}\n \n
\n \n Path: {quantity}\n \n )\n }\n\n return
\n \n {finalLabel} \n \n
\n \n
\n \n
\n})\n\nWidget.propTypes = {\n id: PropTypes.string.isRequired,\n quantity: PropTypes.string,\n title: PropTypes.string,\n description: PropTypes.string,\n onEdit: PropTypes.func,\n className: PropTypes.string,\n children: PropTypes.node,\n actions: PropTypes.node\n}\n\nexport const schemaLayout = object({\n x: number().test(\n 'is-integer-or-infinity',\n // eslint-disable-next-line no-template-curly-in-string\n '${path} is not a valid integer number',\n (value, context) => Number.isInteger(value) || value === Infinity || isNil(value)\n ),\n y: number().integer(),\n w: number().integer(),\n h: number().integer(),\n minW: number().integer(),\n minH: number().integer()\n})\nexport const schemaWidget = object({\n type: string().required(),\n title: string(),\n layout: object({\n sm: schemaLayout,\n md: schemaLayout,\n lg: schemaLayout,\n xl: schemaLayout,\n xxl: schemaLayout\n }),\n id: string().strip(),\n editing: string().strip(),\n visible: string().strip()\n})\nexport const schemaAxisBase = object({\n scale: string().nullable()\n})\nexport const schemaAxis = object({\n quantity: string().required(),\n unit: string().nullable(),\n title: string().nullable(),\n scale: string().nullable()\n})\nexport const schemaAxisOptional = object({\n quantity: string().nullable(),\n unit: string().nullable(),\n title: string().nullable(),\n scale: string().nullable()\n})\nexport const schemaMarkers = object({\n color: schemaAxisOptional\n})\n\n/**\n * Transforms a list of widgets into the internal object representation.\n * @param {array} widgetList Array of widget configs.\n */\nexport function getWidgetsObject(widgetList) {\n const widgets = cloneDeep(widgetList)\n return widgets\n ? Object.fromEntries(widgets.map((widget, index) => {\n return [\n index.toString(),\n {...widget, id: index.toString(), editing: false, visible: true}\n ]\n }))\n : {}\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Represents a suggestable option in the search bar. In TypeScript this would\n * be an interface.\n */\nexport class SearchSuggestion {\n input\n type\n history\n\n constructor(param) {\n this.input = param.input\n this.type = param.type\n this.history = param.history\n this.key = `${this.input}-${this.type}`\n }\n}\n\n/**\n * Enum for types of suggestions. In TypeScript this would be an Enum.\n */\nexport const SuggestionType = {\n Freetext: 'free_text',\n Equality: 'equality',\n RangeHalfBounded: 'range_half_bounded',\n RangeBounded: 'range_bounded',\n Existence: 'existence',\n Name: 'name'\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useEffect, useState, useRef, useMemo, useContext } from 'react'\nimport compose from 'compose-function'\nimport jmespath from 'jmespath'\nimport {\n atom,\n atomFamily,\n selector,\n selectorFamily,\n useSetRecoilState,\n useRecoilValue,\n useRecoilState,\n useRecoilCallback\n} from 'recoil'\nimport {\n debounce,\n isBoolean,\n isEmpty,\n isEqual,\n isArray,\n isPlainObject,\n isNil,\n isSet,\n isObject,\n isFunction,\n size,\n cloneDeep,\n flattenDeep\n} from 'lodash'\nimport qs from 'qs'\nimport { useLocation, useHistory } from 'react-router-dom'\nimport { Box, Link, makeStyles } from '@material-ui/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport PropTypes from 'prop-types'\nimport { useApi } from '../api'\nimport {\n authorList,\n entryName,\n entryType,\n formatTimestamp,\n formatNumber,\n formatBoolean,\n parseQuantityName,\n parseJMESPath,\n rsplit,\n parseOperator,\n getSuggestions,\n DType\n} from '../../utils'\nimport { Quantity } from '../units/Quantity'\nimport { Unit } from '../units/Unit'\nimport { useErrors } from '../errors'\nimport { combinePagination, addColumnDefaults } from '../datatable/Datatable'\nimport UploadStatusIcon from '../uploads/UploadStatusIcon'\nimport { getWidgetsObject } from './widgets/Widget'\nimport { inputSectionContext } from './input/InputSection'\nimport { SearchSuggestion } from './SearchSuggestion'\nimport { withFilters } from './FilterRegistry'\nimport { useUnitContext } from '../units/UnitContext'\n\nconst useWidthConstrainedStyles = makeStyles(theme => ({\n root: {\n maxWidth: '500px',\n textOverflow: 'ellipsis',\n overflow: 'hidden'\n }\n}))\n\nfunction WidthConstrained(props) {\n const styles = useWidthConstrainedStyles()\n return \n {refs.map((ref, i) => \n {ref}{(i + 1) < refs.length ? ', ' :
\n )\n } else {\n return no references\n }\n }\n },\n datasets: {\n sortable: false,\n render: entry => {\n const datasets = entry.datasets || []\n if (datasets.length > 0) {\n return datasets.map(dataset => dataset.dataset_name).join(', ')\n } else {\n return no datasets\n }\n }\n },\n published: {\n render: (entry) => \n
\n})\n\nPlaceholder.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n /**\n * Margin with respect to the parent in theme spacing units.\n */\n margin: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),\n 'data-testid': PropTypes.string\n}\n\nPlaceholder.defaultProps = {\n margin: [0, 1, 0, 1]\n}\n\nexport default Placeholder\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState, useMemo, useRef, useEffect } from 'react'\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { CircularProgress, Tooltip, IconButton, TextField } from '@material-ui/core'\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'\nimport CloseIcon from '@material-ui/icons/Close'\nimport { isNil } from 'lodash'\nimport { useSearchContext } from '../SearchContext'\nimport { useSuggestions } from '../../../hooks'\nimport { searchQuantities } from '../../../config'\nimport Placeholder from '../../visualization/Placeholder'\n\n/*\n * Low-level representational component for all text fields used in the search.\n */\nconst useInputTextFieldStyles = makeStyles(theme => ({\n root: {\n height: '3rem'\n }\n}))\nexport const InputTextField = React.memo((props) => {\n const initialLabel = useState(props.label)[0]\n const styles = useInputTextFieldStyles({classes: props.classes})\n\n return props.loading\n ? \n \n
\n \n setOpen(true)}\n onClose={() => setOpen(false)}\n onBlur={handleBlur}\n fullWidth\n disableClearable\n autoHighlight={autoHighlight}\n classes={{\n listbox: styles.listbox,\n option: styles.option\n }}\n ListboxComponent={ListboxComponent}\n PaperComponent={PaperComponent}\n options={suggestions}\n onInputChange={handleInputChange}\n onHighlightChange={handleHighlight}\n getOptionLabel={getOptionLabel}\n getOptionSelected={(option, value) => false}\n groupBy={groupBy}\n renderGroup={renderGroup}\n filterOptions={suggestAll\n ? (opt) => opt\n : filterOptions\n }\n renderOption={renderOption}\n selectOnFocus={true}\n renderInput={(params) => {\n // We need to strip out the styling of the input field that is imposed\n // by Autocomplete. Otherwise the styles enabled by the\n // hiddenLabel-property will be overridden.\n params.InputProps.className = undefined\n return { suggestAllOnFocus && setSuggestAll(true); onFocus?.() } }\n onKeyDown={handleKeyDown}\n InputLabelProps={{shrink}}\n InputProps={{\n ...params.InputProps,\n ...InputProps,\n endAdornment: (
\n})\n\nInputText.propTypes = {\n value: PropTypes.string,\n error: PropTypes.string, // Error shown underneath the text\n shrink: PropTypes.bool, // Whether the label should automatically \"shrink\" on input\n suggestions: PropTypes.array, // Array of suggested values\n loading: PropTypes.bool, // Whether loading icon should be shown\n onChange: PropTypes.func, // Triggered whenever the input text changes\n onSelect: PropTypes.func, // Triggered when an option is selected from suggestions\n onAccept: PropTypes.func, // Triggered when value should be accepted\n onBlur: PropTypes.func, // Triggered when text goes out of focus\n onFocus: PropTypes.func, // Triggered when text is focused\n onHighlight: PropTypes.func, // Triggered when selection is highlighted\n onError: PropTypes.func, // Triggered when any errors should be cleared\n getOptionLabel: PropTypes.func,\n groupBy: PropTypes.func,\n renderOption: PropTypes.func,\n renderGroup: PropTypes.func,\n ListboxComponent: PropTypes.any,\n PaperComponent: PropTypes.any,\n TextFieldProps: PropTypes.object,\n InputProps: PropTypes.object,\n filterOptions: PropTypes.func,\n disableClearable: PropTypes.bool,\n autoHighlight: PropTypes.bool,\n disableAcceptOnBlur: PropTypes.bool,\n validate: PropTypes.func, // Function that can be used to validate the input\n disableValidateOnSelect: PropTypes.bool, // Whether validation on selecting autocompletion value should be disabled\n suggestAllOnFocus: PropTypes.bool, // Whether to provide all suggestion values when input is focused\n showOpenSuggestions: PropTypes.bool, // Whether to show button for opening suggestions\n className: PropTypes.string,\n classes: PropTypes.object\n}\n\nInputText.defaultProps = {\n getOptionLabel: (option) => option.value,\n showOpenSuggestions: false,\n autoHighlight: false\n}\n\n/*\n * Text field that can be used to submit filter values that target a specific\n * quantity. Can also suggest values.\n */\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n boxSizing: 'border-box'\n }\n}))\nexport const InputTextQuantity = React.memo(({\n quantity,\n suggestions,\n loading,\n onChange,\n disableSuggestions,\n className,\n classes,\n ...TextFieldProps\n}) => {\n const theme = useTheme()\n const { filterData, useSetFilter } = useSearchContext()\n const styles = useStyles({classes: classes, theme: theme})\n const [inputValue, setInputValue] = useState('')\n const [suggestionInput, setSuggestionInput] = useState('')\n const [highlighted, setHighlighted] = useState({value: ''})\n const [open, setOpen] = useState(false)\n const [error, setError] = useState(false)\n const [quantitiesSuggestion, quantitiesAll] = useMemo(() => [\n [{name: quantity, size: 5}],\n new Set([quantity])\n ], [quantity])\n const [suggestionsAuto, loadingAuto] = useSuggestions(quantitiesSuggestion, quantitiesAll, suggestionInput, filterData)\n const finalSuggestions = suggestions || suggestionsAuto\n const finalLoading = loading || loadingAuto\n const disableSuggestionsFinal = suggestions\n ? true\n : isNil(disableSuggestions)\n ? !searchQuantities[quantity]?.suggestion\n : disableSuggestions\n\n // Attach the filter hook\n const setFilter = useSetFilter(quantity)\n const disabled = TextFieldProps.disabled\n\n // Sets the input value and calls the callback if given\n const handleChange = useCallback((input) => {\n setInputValue(input)\n onChange && onChange(input)\n }, [onChange])\n\n // Clears the input and suggestions\n const clearInputValue = useCallback(() => {\n handleChange('')\n setSuggestionInput('')\n setOpen(false)\n }, [handleChange])\n\n // Triggered when a value is submitted by pressing enter or clicking the\n // search icon.\n const handleSubmit = useCallback((value) => {\n if (value.trim().length === 0) {\n return\n }\n const valid = true\n if (valid) {\n // Submit to search context on successful validation.\n setFilter(old => {\n const multiple = filterData[quantity].multiple\n return (isNil(old) || !multiple) ? new Set([value]) : new Set([...old, value])\n })\n clearInputValue()\n } else {\n setError(`Invalid query`)\n }\n }, [filterData, quantity, setFilter, clearInputValue])\n\n const handleHighlight = useCallback((event, value, reason) => {\n setHighlighted(value)\n }, [])\n\n // Handles special key presses\n const handleKeyDown = useCallback((event) => {\n // When escape is pressed, close the menu if it is visible and showing some\n // items. Otherwise clear the current text input.\n if (event.key === 'Escape') {\n if (open && suggestions?.length > 0) {\n setOpen(false)\n } else {\n clearInputValue()\n }\n event.stopPropagation()\n event.preventDefault()\n }\n // When enter is pressed, select currently highlighted value and close menu,\n // or if menu is not open submit the value.\n if (event.key === 'Enter') {\n if (open && highlighted?.value) {\n handleSubmit(highlighted.value)\n } else {\n handleSubmit(inputValue)\n }\n event.stopPropagation()\n event.preventDefault()\n }\n }, [open, suggestions, highlighted, handleSubmit, inputValue, clearInputValue])\n\n // Handle typing events.\n const handleInputChange = useCallback((event, value, reason) => {\n setError(error => error ? undefined : null)\n\n // When an option is selected (mouse or keyboard), the filter is immediately\n // submitted and the field value cleared.\n if (reason === 'reset') {\n handleSubmit(value)\n } else {\n handleChange(value)\n }\n\n // Suggestions are only retrieved on user input, or when the value has been\n // cleared (this clears the suggestions)\n if (!disableSuggestionsFinal && (value.trim() === '' || reason === 'input')) {\n setSuggestionInput(value)\n }\n }, [disableSuggestionsFinal, handleSubmit, handleChange])\n\n return \n {loading ? \n \n \n : null\n }\n {(showOpenSuggestions)\n ? setOpen(old => !old)}\n className={clsx(styles.popupIndicator, {\n [styles.popupIndicatorOpen]: open\n })}\n >\n
)\n }}\n {...TextFieldProps}\n />\n }}\n />\n \n setOpen(true)}\n onClose={() => setOpen(false)}\n fullWidth\n disableClearable\n classes={{endAdornment: styles.endAdornment}}\n options={finalSuggestions}\n onInputChange={handleInputChange}\n onHighlightChange={handleHighlight}\n getOptionLabel={option => option.value}\n getOptionSelected={(option, value) => false}\n renderInput={(params) => {\n // We need to strip out the styling of the input field that is imposed\n // by Autocomplete. Otherwise the styles enabled by the\n // hiddenLabel-property will be overridden.\n params.InputProps.className = undefined\n return \n {finalLoading ? \n \n \n }\n )\n }}\n {...TextFieldProps}\n />\n }}\n />\n
\n})\n\nInputTextQuantity.propTypes = {\n /*\n * The quantity targeted by the text field target.\n */\n quantity: PropTypes.string,\n /*\n * A manual array of suggestions.\n */\n suggestions: PropTypes.array,\n /*\n * Whether suggestions are being loaded.\n */\n loading: PropTypes.bool,\n /*\n * Callback for when the input changes.\n */\n onChange: PropTypes.bool,\n /*\n * Whether to enable or disable automatic suggestions. Will be forcefully set\n * to true if manual list of suggestions are provided. If no value is given\n * the suggestions are turned on if they are available for the quantity.\n */\n disableSuggestions: PropTypes.bool,\n className: PropTypes.string,\n classes: PropTypes.object\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {useCallback, useEffect, useMemo, useRef, useContext, createContext} from 'react'\nimport PropTypes from 'prop-types'\nimport {isNil} from 'lodash'\nimport {getSuggestions} from '../../utils'\nimport {unitMap} from './UnitContext'\nimport {parse} from './common'\nimport {List, ListItemText, ListSubheader, makeStyles} from '@material-ui/core'\nimport {VariableSizeList} from 'react-window'\nimport {InputText} from '../search/input/InputText'\n\n/**\n * Wrapper around InputText that is specialized in showing unit options.\n */\nexport const useInputStyles = makeStyles(theme => ({\n optionText: {\n flexGrow: 1,\n overflowX: 'scroll',\n '&::-webkit-scrollbar': {\n display: 'none'\n },\n '-ms-overflow-style': 'none',\n scrollbarWidth: 'none'\n },\n noWrap: {\n whiteSpace: 'nowrap'\n },\n option: {\n width: '100%',\n display: 'flex',\n alignItems: 'stretch'\n }\n}))\nexport const UnitInput = React.memo(({value, error, onChange, onAccept, onSelect, onError, dimension, options, disabled, label, disableGroup, optional}) => {\n const styles = useInputStyles()\n\n // Predefine all option objects, all option paths and also pre-tokenize the\n // options for faster matching.\n const {keys, filter, finalOptions} = useMemo(() => {\n const finalOptions = {}\n Object.entries(unitMap)\n .filter(([key, unit]) => dimension ? unit.dimension === dimension : true)\n .forEach(([key, unit]) => {\n const unitAbbreviation = unit.abbreviation ? ` (${unit.abbreviation})` : ''\n finalOptions[key] = {\n key: key,\n primary: `${unit.label}${unitAbbreviation}`,\n secondary: unit.aliases?.splice(1).join(', '),\n dimension: unit.dimension,\n unit: unit\n }\n })\n const keys = Object.keys(finalOptions)\n const {filter} = getSuggestions(keys, 0)\n return {keys, filter, finalOptions}\n }, [dimension])\n\n const validate = useCallback((value) => {\n if (isNil(value) || value?.trim?.() === '') {\n if (optional) {\n return {valid: true}\n } else {\n return {valid: false, error: 'Please specify a value'}\n }\n }\n const {error, unit} = parse(value, {dimension, requireUnit: true})\n return {valid: !error, error, data: unit}\n }, [optional, dimension])\n\n // Revalidate input when dimension changes\n useEffect(() => {\n if (!value) return\n const {error} = validate(value)\n if (error) {\n onError?.(error)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dimension])\n\n // Used to filter the shown options based on input\n const filterOptions = useCallback((opt, { inputValue }) => {\n let filtered = filter(inputValue)\n if (!disableGroup) filtered = filtered.sort((a, b) => options[a].group > options[b].group ? 1 : -1)\n return filtered\n }, [disableGroup, filter, options])\n\n return \n
\n }}\n />\n})\nUnitInput.propTypes = {\n value: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n dimension: PropTypes.string,\n options: PropTypes.object,\n onChange: PropTypes.func,\n onAccept: PropTypes.func,\n onSelect: PropTypes.func,\n onBlur: PropTypes.func,\n onError: PropTypes.func,\n disabled: PropTypes.bool,\n disableGroup: PropTypes.bool,\n optional: PropTypes.bool\n}\n\nexport default UnitInput\n\n/**\n * Custom virtualized list component for displaying unit values.\n */\nconst ListboxUnit = React.forwardRef((props, ref) => {\n const { children, ...other } = props\n const itemSize = 64\n const headerSize = 40\n const itemData = React.Children.toArray(children)\n const itemCount = itemData.length\n\n // Calculate size of child element.\n const getChildSize = (child) => {\n return React.isValidElement(child) && child.type === ListSubheader\n ? headerSize\n : itemSize\n }\n\n // Calculates the height of the suggestion box\n const getHeight = () => {\n return itemCount > 8\n ? 8 * itemSize\n : itemData.map(getChildSize).reduce((a, b) => a + b, 0)\n }\n\n const gridRef = useResetCache(itemCount)\n\n return \n \n \n
\n})\n\nListboxUnit.propTypes = {\n children: PropTypes.node\n}\n\nconst LISTBOX_PADDING = 8\nconst OuterElementContext = createContext({})\n\nconst OuterElementType = React.forwardRef((props, ref) => {\n const outerProps = useContext(OuterElementContext)\n return \n})\n\nconst renderGroup = (params) => [\n - \n
\n {children}\n
\n}\nMenuBar.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ])\n}\n\nexport const MenuBarList = React.memo(({header, children}) => {\n return \n {icon && \n \n {icon}\n \n }\n {!icon && \n {children}\n \n
\n}\nMenuBarMenu.propTypes = {\n label: PropTypes.string.isRequired,\n route: PropTypes.string.isRequired,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n icon: PropTypes.node\n}\n","var _clipPath, _g, _g2, _g3, _g4, _g5, _tspan, _tspan2, _tspan3, _tspan4;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgAbout(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"100%\",\n height: \"100%\",\n viewBox: \"0 0 1130 643\",\n style: {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeMiterlimit: 1.5\n },\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Artboard1\",\n transform: \"matrix(1.10933,0,0,1.0562,-2.94,0)\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n x: 2.65,\n y: 0,\n width: 1018.16,\n height: 608.36,\n style: {\n fill: \"none\"\n }\n }), _clipPath || (_clipPath = /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"_clip1\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n x: 2.65,\n y: 0,\n width: 1018.16,\n height: 608.36\n }))), /*#__PURE__*/React.createElement(\"g\", {\n clipPath: \"url(#_clip1)\"\n }, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.901444,0,0,0.946793,4.80392,8.02979)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M729.794,14.858L475.275,161.805L472.775,157.475L729.794,9.085L823.721,63.313L821.221,67.644L729.794,14.858Z\"\n }))), _g2 || (_g2 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.901444,0,0,0.946793,2.65025,10.1583)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M727.514,161.143L866.967,241.657L861.984,244.534L717.514,161.143L834.28,93.728L836.78,98.058L727.514,161.143Z\"\n }))), _g3 || (_g3 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.901444,0,0,0.946793,2.64456,9.81211)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M927.126,246.844L960.764,227.423L958.264,223.092L922.126,243.957L927.126,246.844Z\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.907222,0,0,0.948123,0.245885,22.4155)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.993631,0,0,1.02527,2.65025,-10.5415)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M30.051,395.2L9,382.85L9,-9.946\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"0.49px\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.25077,0,0,1.2906,-102.959,-7.90252)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M570.5,154.635L570.5,-9.946\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"0.39px\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.993631,0,0,0.998598,2.65025,0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M173.761,518.483L173.761,615.873\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"0.5px\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.993631,0,0,0.998598,2.65025,0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M476.136,344.02L551.24,386.958L551.24,615.873\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"0.5px\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.993631,0,0,0.998598,2.65025,0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M884.281,286.732L855.686,302.319L855.686,615.873\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"0.5px\"\n }\n }))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-379.833,-86.4269)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M247.871,178.885L278.855,196.774\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"2.07px\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-379.833,-86.4269)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M247.871,214.663L309.839,250.44L371.806,214.663L371.806,207.187L309.839,171.41L247.871,207.187L247.871,214.663Z\",\n style: {\n fill: \"rgb(123,31,162)\"\n }\n })), _g4 || (_g4 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.901444,0,0,0.946793,2.65025,10.1583)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M33.307,410.333L475.711,154.911L554.127,200.185L551.627,204.515L475.711,160.685L38.307,413.22L33.307,410.333Z\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-364.035,-76.847)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M334.92,182.002L350.44,190.782L386.918,169.722L390.144,158.425L371.63,160.807L334.92,182.002Z\",\n style: {\n stroke: \"white\",\n strokeWidth: \"0.83px\",\n strokeLinecap: \"square\",\n strokeLinejoin: \"miter\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-634.471,87.1444)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M332.901,183.168L348.421,191.948L386.918,169.722L390.144,158.425L371.63,160.807L332.901,183.168Z\",\n style: {\n stroke: \"white\",\n strokeWidth: \"0.83px\",\n strokeLinecap: \"square\",\n strokeLinejoin: \"miter\"\n }\n })), _g5 || (_g5 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.901444,0,0,0.946793,2.65025,10.1583)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M858.552,280.292L863.552,283.179L475.711,507.099L397.295,461.826L399.795,457.496L475.711,501.326L858.552,280.292Z\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-379.833,-86.4269)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M453.475,154.483L495.742,178.885\",\n style: {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: \"2.07px\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-379.833,-86.4269)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M371.806,143.108L433.774,178.885L495.742,143.108L495.742,135.633L433.774,99.856L371.806,135.633L371.806,143.108Z\",\n style: {\n fill: \"rgb(0,121,107)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-161.861,-218.406)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M371.806,143.108L420.589,171.187L482.557,135.409L482.557,127.934L433.774,99.856L371.806,135.633L371.806,143.108Z\",\n style: {\n fill: \"rgb(255,179,0)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(2.18207,0,0,2.29185,-32.4192,-139.913)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M371.806,143.108L420.589,171.187L482.557,135.409L482.557,127.934L433.774,99.856L371.806,135.633L371.806,143.108Z\",\n style: {\n fill: \"rgb(124,179,66)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-596.364,363.645)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"344.745px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"repository\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-667.812,320.32)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n id: \"repositoryStats\",\n x: \"280px\",\n y: \"322.821px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"9.5px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"repository stats\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-396.817,155.989)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n id: \"archiveStats\",\n x: \"280px\",\n y: \"322.821px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"9.5px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"archiv\", _tspan || (_tspan = /*#__PURE__*/React.createElement(\"tspan\", {\n x: \"303.76px \",\n y: \"322.821px \"\n }, \"e\")), \" stats\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-177.867,23.2191)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n id: \"encStats\",\n x: \"280px\",\n y: \"322.821px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"9.5px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"encyclopedia stats\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-48.2806,101.8)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n id: \"toolkitStats\",\n x: \"280px\",\n y: \"322.821px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"9.5px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"ai toolkit stats\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-468.236,273.281)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"324.526px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"11.875px\",\n fill: \"white\"\n }\n }, \"pr\", _tspan2 || (_tspan2 = /*#__PURE__*/React.createElement(\"tspan\", {\n x: \"290.248px \",\n y: \"324.526px \"\n }, \"o\")), \"cessing\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-739.332,437.673)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"324.526px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"11.875px\",\n fill: \"white\"\n }\n }, \"upload\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-832.377,317.37)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"324.526px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"11.875px\"\n }\n }, \"explor\", _tspan3 || (_tspan3 = /*#__PURE__*/React.createElement(\"tspan\", {\n x: \"310.578px \",\n y: \"324.526px \"\n }, \"e\")))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-137.471,258.922)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"320.14px\",\n y: \"325.332px\",\n style: {\n fontFamily: \"'TitilliumWeb-Regular', 'Titillium Web'\",\n fontSize: \"11.875px\"\n }\n }, \"API\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-325.553,199.427)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"344.745px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"rgb(235,235,235)\"\n }\n }, \"archive\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-135.371,48.9883)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"344.745px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"white\"\n }\n }, \"ency\", _tspan4 || (_tspan4 = /*#__PURE__*/React.createElement(\"tspan\", {\n x: \"308.514px \",\n y: \"344.745px \"\n }, \"c\")), \"lopedia\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.31481,-0.797294,1.51821,0.920636,-36.3098,109.059)\"\n }, /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"336.589px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"white\"\n }\n }, \"artificial\"), /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"350.839px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"white\"\n }\n }, \"intelligence\"), /*#__PURE__*/React.createElement(\"text\", {\n x: \"280px\",\n y: \"365.089px\",\n style: {\n fontFamily: \"'TitilliumWeb-Bold', 'Titillium Web'\",\n fontWeight: 700,\n fontSize: \"14.25px\",\n fill: \"white\"\n }\n }, \"toolkit\")), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(35.0386,0,0,36.8013,112.044,587.742)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.232,-0.65C0.249,-0.633 0.269,-0.625 0.291,-0.625C0.313,-0.625 0.333,-0.633 0.35,-0.65C0.367,-0.667 0.375,-0.687 0.375,-0.709C0.375,-0.731 0.367,-0.75 0.35,-0.767C0.333,-0.783 0.313,-0.791 0.291,-0.791C0.269,-0.791 0.25,-0.783 0.233,-0.767C0.217,-0.75 0.209,-0.731 0.209,-0.709C0.209,-0.687 0.217,-0.667 0.232,-0.65ZM0.834,-0.875C0.846,-0.875 0.855,-0.871 0.863,-0.863C0.871,-0.855 0.875,-0.846 0.875,-0.834L0.875,-0.584C0.875,-0.572 0.871,-0.562 0.863,-0.554C0.855,-0.545 0.846,-0.541 0.834,-0.541L0.166,-0.541C0.154,-0.541 0.145,-0.545 0.137,-0.554C0.129,-0.562 0.125,-0.572 0.125,-0.584L0.125,-0.834C0.125,-0.846 0.129,-0.855 0.137,-0.863C0.145,-0.871 0.154,-0.875 0.166,-0.875L0.834,-0.875ZM0.232,-0.232C0.249,-0.217 0.269,-0.209 0.291,-0.209C0.313,-0.209 0.333,-0.217 0.35,-0.233C0.367,-0.25 0.375,-0.269 0.375,-0.291C0.375,-0.313 0.367,-0.333 0.35,-0.35C0.333,-0.367 0.313,-0.375 0.291,-0.375C0.269,-0.375 0.25,-0.367 0.233,-0.35C0.217,-0.333 0.209,-0.313 0.209,-0.291C0.209,-0.269 0.217,-0.249 0.232,-0.232ZM0.834,-0.459C0.846,-0.459 0.855,-0.455 0.863,-0.446C0.871,-0.438 0.875,-0.428 0.875,-0.416L0.875,-0.166C0.875,-0.154 0.871,-0.145 0.863,-0.137C0.855,-0.129 0.846,-0.125 0.834,-0.125L0.166,-0.125C0.154,-0.125 0.145,-0.129 0.137,-0.137C0.129,-0.145 0.125,-0.154 0.125,-0.166L0.125,-0.416C0.125,-0.428 0.129,-0.438 0.137,-0.446C0.145,-0.455 0.154,-0.459 0.166,-0.459L0.834,-0.459Z\",\n style: {\n fillRule: \"nonzero\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(38.6852,0,0,40.6314,-1.17035,438.333)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.264,-0.471C0.3,-0.434 0.344,-0.416 0.396,-0.416C0.449,-0.416 0.493,-0.434 0.529,-0.471C0.566,-0.507 0.584,-0.551 0.584,-0.604C0.584,-0.656 0.566,-0.7 0.529,-0.736C0.493,-0.773 0.449,-0.791 0.396,-0.791C0.344,-0.791 0.3,-0.773 0.264,-0.736C0.227,-0.7 0.209,-0.656 0.209,-0.604C0.209,-0.551 0.227,-0.507 0.264,-0.471ZM0.646,-0.416L0.854,-0.209L0.791,-0.146L0.584,-0.354L0.584,-0.387L0.572,-0.398C0.523,-0.355 0.464,-0.334 0.396,-0.334C0.321,-0.334 0.257,-0.36 0.204,-0.412C0.151,-0.464 0.125,-0.528 0.125,-0.604C0.125,-0.679 0.151,-0.743 0.204,-0.796C0.257,-0.849 0.321,-0.875 0.396,-0.875C0.472,-0.875 0.536,-0.849 0.588,-0.796C0.64,-0.743 0.666,-0.679 0.666,-0.604C0.666,-0.536 0.645,-0.477 0.602,-0.428L0.613,-0.416L0.646,-0.416Z\",\n style: {\n fillRule: \"nonzero\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(0.907222,0,0,0.983302,0.245885,10.1583)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"search\",\n transform: \"matrix(0.993631,0,0,0.962871,2.65025,0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0,412.944L17.195,395.308L76.244,360.184L96.747,377.857L34.39,413.859L34.39,448.142L0,448.142L0,412.944Z\",\n style: {\n fill: \"white\",\n fillOpacity: 0\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"upload\",\n transform: \"matrix(2.40523,0,0,2.33077,-698.41,78.9745)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M325.331,178.885L356.547,196.64L395.044,174.413L390.948,158.89L364.06,156.525L325.331,178.885Z\",\n style: {\n fill: \"white\",\n fillOpacity: 0\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"encyclopedia\",\n transform: \"matrix(2.40523,0,0,2.33077,-178.719,-250.269)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M371.806,143.108L420.769,171.377L482.737,135.6L433.774,107.331L371.806,143.108Z\",\n style: {\n fill: \"white\",\n fillOpacity: 0\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"toolkit\",\n transform: \"matrix(2.40523,0,0,2.33077,-20.7432,-162.081)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M365.21,139.3L414.822,167.943L476.79,132.166L427.178,103.523L365.21,139.3Z\",\n style: {\n fill: \"white\",\n fillOpacity: 0\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"api\",\n transform: \"matrix(0.993631,0,0,0.962871,2.65025,0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M858.874,315.909L833.39,301.196L869.409,280.401L869.409,242.554L922.903,242.554L922.903,276.811L887.712,297.128L858.874,315.909Z\",\n style: {\n fill: \"white\",\n fillOpacity: 0\n }\n }))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(35.0386,0,0,36.8013,69.3381,560.079)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.834,-0.375L0.834,-0.791L0.166,-0.791L0.166,-0.375L0.834,-0.375ZM0.584,-0.25L0.584,-0.291L0.416,-0.291L0.416,-0.25L0.584,-0.25ZM0.916,-0.25L1,-0.25L1,-0.166L0,-0.166L0,-0.25L0.084,-0.25L0.084,-0.875L0.916,-0.875L0.916,-0.25Z\",\n style: {\n fillRule: \"nonzero\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(35.0386,0,0,36.8013,792.965,275.883)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.834,-0.375L0.834,-0.791L0.166,-0.791L0.166,-0.375L0.834,-0.375ZM0.584,-0.25L0.584,-0.291L0.416,-0.291L0.416,-0.25L0.584,-0.25ZM0.916,-0.25L1,-0.25L1,-0.166L0,-0.166L0,-0.25L0.084,-0.25L0.084,-0.875L0.916,-0.875L0.916,-0.25Z\",\n style: {\n fillRule: \"nonzero\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(35.0386,0,0,36.8013,29.7411,529.218)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.279,-0.369C0.356,-0.4 0.43,-0.416 0.5,-0.416C0.57,-0.416 0.644,-0.401 0.72,-0.37C0.796,-0.34 0.834,-0.299 0.834,-0.25L0.834,-0.166L0.166,-0.166L0.166,-0.25C0.166,-0.299 0.204,-0.339 0.279,-0.369ZM0.617,-0.549C0.585,-0.516 0.546,-0.5 0.5,-0.5C0.454,-0.5 0.415,-0.516 0.383,-0.549C0.35,-0.581 0.334,-0.62 0.334,-0.666C0.334,-0.712 0.35,-0.751 0.383,-0.784C0.415,-0.817 0.454,-0.834 0.5,-0.834C0.546,-0.834 0.585,-0.817 0.617,-0.784C0.65,-0.751 0.666,-0.712 0.666,-0.666C0.666,-0.62 0.65,-0.581 0.617,-0.549Z\",\n style: {\n fillRule: \"nonzero\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,-137.43,-420.642)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M552.85,404.535L552.85,415.278L463.786,466.7L463.786,455.956L552.85,404.535Z\",\n style: {\n fill: \"rgb(0,76,64)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,51.77,-570.266)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M552.85,404.535L552.85,415.278L463.786,466.7L463.786,455.956L552.85,404.535Z\",\n style: {\n fill: \"rgb(255,111,0)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,181.468,-491.618)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M552.85,404.535L552.85,415.278L463.786,466.7L463.786,455.956L552.85,404.535Z\",\n style: {\n fill: \"rgb(51,105,30)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,-407.531,-256.447)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M552.629,404.407L552.629,415.151L463.786,466.7L463.786,455.956L552.629,404.407Z\",\n style: {\n fill: \"rgb(74,0,114)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,-137.43,-420.642)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M463.786,466.7L374.722,415.278L374.722,404.535L463.786,455.956L463.786,466.7Z\",\n style: {\n fill: \"rgb(72,169,153)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,80.5414,-552.819)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M444.835,455.758L374.722,415.278L374.722,404.535L444.835,445.015L444.835,455.758Z\",\n style: {\n fill: \"rgb(255,213,79)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,210.076,-474.072)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M444.835,455.758L374.722,415.278L374.722,404.535L444.835,445.015L444.835,455.758Z\",\n style: {\n fill: \"rgb(174,213,129)\"\n }\n })), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1.51821,0,0,1.59459,-407.531,-256.447)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M463.786,466.7L374.501,415.151L374.501,404.407L463.786,455.956L463.786,466.7Z\",\n style: {\n fill: \"rgb(174,82,212)\"\n }\n })))));\n}\n\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAbout);\nexport default __webpack_public_path__ + \"static/media/about.a4d06242.svg\";\nexport { ForwardRef as ReactComponent };","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { TextField } from '@material-ui/core'\nimport { isNil, isEmpty } from 'lodash'\nimport YAML from 'yaml'\n\n/**\n * Form used for editing a YAML or JSON config.\n */\nconst InputConfig = React.memo(({data, format, maxRows, minRows, onChange, error, onError, readOnly}) => {\n const controlledError = useRef(error !== undefined)\n const [serialized, setSerialized] = useState()\n const [errorInternal, setErrorInternal] = useState()\n const errorFinal = error || errorInternal\n const formatLib = {\n 'JSON': JSON,\n 'YAML': YAML\n }[format]\n\n useEffect(() => {\n setSerialized(isEmpty(data)\n ? ''\n : formatLib.stringify(\n data,\n (k, v) => { return v === Infinity ? \"Infinity\" : v },\n 2)\n )\n }, [data, formatLib])\n\n const handleError = useCallback((e) => {\n if (!controlledError.current) {\n setErrorInternal(e)\n onError && onError(e)\n } else {\n if (!isNil(e)) onError && onError(e)\n }\n }, [onError])\n\n const handleChange = useCallback((event) => {\n const value = event.target.value\n setSerialized(value)\n try {\n const data = formatLib.parse(value)\n onChange && onChange(data)\n handleError(null)\n } catch (e) {\n handleError(`This is not ${format}: ` + e)\n }\n }, [onChange, handleError, formatLib, format])\n\n return (\n - \n
- version: {data.version} \n {data?.plugin_packages?.length\n ?
- {\"plugin packages: \"}\n {data.plugin_packages.map((pluginPackage, i) => <>\n {\n setSelected(pluginPackage)\n setTitle('Plugin package')\n }}>{pluginPackage.name}\n {i !== data.plugin_packages.length - 1 ? \", \" : null}\n )}\n \n : null\n }\n {Object.keys(categories)\n .sort()\n .map((category) => {\n const entryPoints = categories[category]\n return
- \n {`${pluralize(category, 2)}: `}\n {entryPoints\n .sort((a, b) => (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0))\n .map((entryPoint, i) => <>\n {\n setSelected(entryPoint)\n setTitle('Plugin entry point')\n }}>{entryPoint.id}\n {i !== entryPoints.length - 1 ? \", \" : null}\n )}\n \n })}\n
\n \n \n {`\n # **NOMAD** – Manage and Publish Materials Data\n\n This is the *graphical user interface* (GUI) of NOMAD. It allows you to **search,\n access, and download all NOMAD data** in its\n *raw files* and *processed data* form. You can **upload and manage your own\n raw materials science data**. You can access all published data without an account.\n If you want to provide your own data, please login or register for an account.\n\n You can learn more about NOMAD on its\n [homepage](https://nomad-lab.eu/repo-arch), our\n [documentation](${appBase}/docs/index.html).\n There is also an [FAQ](https://nomad-lab.eu/repository-archive-faqs)\n and the more detailed [uploader documentation](${appBase}/docs/web.html).\n `} \n \n \n NOMAD extracts rich metadata from uploaded raw-data. \n Explore NOMAD's data by creating complex queries from interactive data visualizations of key\n properties, including the simulated composition/system, used method, upload metadata,\n as well as material classifications and available quantities. Or use\n the Optimade filter language to add arbitrarily nested queries.\n \n \n NOMAD provides data in processed and normalized form in a machine processable and common hierarchical format.\n This processed data, i.e. the NOMAD Archive, is organized into nested sections of quantities with well defined units,\n data types, shapes, and descriptions. These definitions are called the NOMAD Metainfo and they\n can be browsed here.\n \n \n \n \n \n \n \n {`\n The NOMAD can also be accessed programmatically via ReST APIs.\n There is the proprietary NOMAD API,an implementation of the\n standardized [OPTiMaDe API](https://github.com/Materials-Consortia/OPTiMaDe/tree/master)\n materials science database API, and more.\n\n We offer a [tutorial on how to use the API with plain Python](${appBase}/docs/api.html).\n Another [tutorial covers how to install and use NOMAD's Python client library](${appBase}/docs/archive.html).\n The [NOMAD Analytics Toolkit](https://nomad-lab.eu/AIToolkit) allows to use\n this without installation and directly on NOMAD servers.\n\n Visit our [API page](/analyze/apis).\n `} \n {`\n ### Getting Help\n If you encounter any difficulties, please write to\n support@nomad-lab.eu . If you think\n that this web-page is not working as expected, or if you want to start a discussion\n about possible features, feel free to open an issue on our\n [github project](https://github.com/nomad-coe/nomad/issues).\n\n ### Developer Documentation\n The [in-depth documentation](${appBase}/docs/index.html)\n contains a general introduction to NOMAD and its underlying architecture,\n more information and tutorials, how to prepare uploads, how\n to use the API, developer information, how to operate your own NOMAD (a so called\n Oasis), how to contribute parsers, and much more.\n\n ### Source code\n The source-code for NOMAD is maintained\n at the MPCDF's [gitlab](https://gitlab.mpcdf.mpg.de/nomad-lab/nomad-FAIR).\n To push code, you need an MPCDF account and you can apply\n [here](https://www.mpcdf.mpg.de/userspace/new-users).\n\n ${debug ? `\n ### Material science data and domains\n Originally NOMAD was build for DFT calculations and data from the respective\n community codes. But NOMAD is now extended to support multiple materials science domains,\n such as experiments, synthesis, and computational methods at different scales.` : ''}\n\n ${debug ? `\n ### Log management with Elastic stack\n We use a central logging system based on the *elastic*-stack\n (previously called *Elastic Logstash Kibana* (ELK)-stack).\n This system pushes logs, events, monitoring data,\n and other application metrics to a central database where it\n can be analysed visually by us.\n\n ### Test user\n During development this GUI might not be connected to the actual NOMAD\n repository. Therefore, you cannot create a user or login with an existing\n user. You might use the test user \\`leonard.hofstadter@nomad-fairdi.tests.de\\`\n with password \\`password\\`. The user \\`sheldon.cooper@nomad-fairdi.tests.de\\` is\n used for data that has no provenance with the original NOMAD CoE database.\n ` : ''}\n `} \n \n \n About this distribution \n \n \n
\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport Alert from '@material-ui/lab/Alert'\nimport { hasWebGLSupport } from '../utils'\n\nexport class ErrorHandler extends React.Component {\n state = {\n hasError: false\n }\n\n static getDerivedStateFromError(error) {\n return {\n hasError: true,\n error: error\n }\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error, errorInfo)\n }\n\n render() {\n if (this.state.hasError) {\n const msg = typeof this.props.message === 'string' ? this.props.message : this.props.message(this.state.error)\n return \n You provide your own data as is. Just zip your files as they are,\n including nested directory structures and potential auxiliary files, and upload\n up to 32GB in a single .zip or .tar(.gz) file. NOMAD will automatically discover\n and process the relevant files.\n
\n\n You can privately inspect, curate, or delete your data before publishing.\n Data can be published with an embargo (up to 3 years) to only share data with\n selected users.\n
\n\n Add additional metadata like comments, references to websites or papers, and\n your co-authors. Organize the uploaded entries into datasets and\n cite your data with a DOI that we provide on request.\n
\n\n You can provide via GUI or shell command or manage already uploaded\n data here.\n
\n\n Uploaded data is automatically processed and made available\n in the uploaded raw files or in its unified processed data form.\n NOMAD parsers convert raw files into NOMAD's common data format.\n You can inspect the processed data and extracted metadata before\n publishing your data.\n
\nNOMAD supports most community codes and file formats:
\n To use NOMAD's parsers and normalizers outside of NOMAD read here.\n Read here on how to install\n our software and how to use NOMAD processing in your Python environment.\n
\n\n
\n \n
\n \n {lanes.current && lanes.current.map((lane, index) => (\n
\n \n ERROR \n {error} \n
\n }\n if (!adaptor || !initialized) {\n return null\n }\n return \n
\n // We deliberetly break the React rules here. The goal is to only update if the\n // lanes contents change and not the lane object.\n // eslint-disable-next-line\n }, [lane, key, adaptor, initialized, next?.key, classes, error, internalUpdate])\n\n useEffect(() => {\n if (adaptor && initialized && containerRef.current && adaptor.onRendered) {\n adaptor.onRendered({target: containerRef.current}, updateLane)\n }\n // eslint-disable-next-line\n }, [key, adaptor, internalUpdate, updateLane])\n\n return content\n}\nLane.propTypes = ({\n lane: PropTypes.object.isRequired\n})\n\nconst useItemStyles = makeStyles(theme => ({\n root: {\n color: theme.palette.text.primary,\n textDecoration: 'none',\n margin: `0 -${theme.spacing(1)}px`,\n padding: `0 0 0 ${theme.spacing(1)}px`,\n whiteSpace: 'nowrap',\n display: 'flex',\n '& $icon': {\n color: theme.palette.grey[700]\n }\n },\n rootSelected: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n whiteSpace: 'nowrap',\n '& $icon': {\n color: theme.palette.primary.contrastText\n }\n },\n rootUnSelected: {\n '&:hover': {\n backgroundColor: grey[300]\n }\n },\n rootUnSelectedHighlighted: {\n color: theme.palette.primary.main,\n '& $icon': {\n color: theme.palette.primary.main\n },\n '&:hover': {\n backgroundColor: grey[300]\n }\n },\n disabled: {\n color: 'grey'\n },\n rightPaddedItem: {\n padding: `0 ${theme.spacing(1)}px 0 0`\n },\n childContainer: {\n flexGrow: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n },\n icon: {\n fontSize: 16,\n marginTop: 4\n }\n}))\n\nconst ItemLink = React.forwardRef(function ItemLink({itemKey, ...props}, ref) {\n const lane = useContext(laneContext)\n if (lane && itemKey) {\n return \n \n \n {adaptor.render()}\n \n \n
\n (
}\n {doi}\n )
}\n \n
\n}\n\nNoData.propTypes = {\n className: PropTypes.string,\n /**\n * Margin with respect to the parent in theme spacing units.\n */\n margin: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),\n 'data-testid': PropTypes.string\n}\n\nNoData.defaultProps = {\n margin: [0, 1, 0, 1]\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useMemo, useContext, useCallback} from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport {\n makeStyles,\n Typography,\n Tooltip,\n IconButton,\n TableBody,\n TableContainer,\n TableHead,\n Table,\n TableRow,\n TableCell,\n Link,\n Box\n} from '@material-ui/core'\nimport { DOI } from './dataset/DOI'\nimport ClipboardIcon from '@material-ui/icons/Assignment'\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\nimport { get, isNil, isString, isNumber } from 'lodash'\nimport { searchQuantities } from '../config'\nimport Placeholder from './visualization/Placeholder'\nimport Ellipsis from './visualization/Ellipsis'\nimport NoData from './visualization/NoData'\nimport {formatNumber, formatTimestamp, authorList, serializeMetainfo, getDisplayLabel} from '../utils'\nimport { Quantity as Q } from './units/Quantity'\nimport { Unit } from './units/Unit'\nimport { useUnitContext } from './units/UnitContext'\nimport { defaultFilterData } from './search/FilterRegistry'\nimport { MaterialLink, RouteLink } from './nav/Routes'\n\n/**\n * Component for showing a metainfo quantity value together with a name and\n * description.\n*/\nconst useQuantityStyles = makeStyles(theme => ({\n root: {\n width: '100%'\n },\n valueContainer: {\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n maxWidth: '100%'\n },\n value: {\n flexGrow: 1\n },\n valueAction: {},\n valueActionButton: {\n padding: 4\n },\n valueActionIcon: {\n fontSize: 16\n },\n row: {\n display: 'flex',\n flexWrap: 'wrap',\n flexDirection: 'row',\n '& > :not(:last-child)': {\n marginRight: theme.spacing(3)\n }\n },\n column: {\n display: 'flex',\n flexDirection: 'column',\n '& > :not(:first-child)': {\n marginTop: theme.spacing(1)\n }\n },\n flex: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n alignContent: 'flex-start',\n '& div': {\n marginRight: theme.spacing(1)\n }\n },\n label: {\n color: 'rgba(0, 0, 0, 0.54)',\n fontSize: '0.75rem',\n fontWeight: 500\n },\n quantityList: {\n display: 'flex',\n flexDirection: 'column'\n }\n}))\n\nconst Quantity = React.memo((props) => {\n const styles = useQuantityStyles()\n const presets = quantityPresets[props.quantity] || {}\n const {\n quantity,\n label,\n description,\n value,\n loading,\n placeholder,\n typography,\n noWrap,\n noLabel,\n row,\n column,\n flex,\n data,\n withClipboard,\n ellipsisFront,\n hideIfUnavailable,\n maxWidth,\n format\n } = {...presets, ...props}\n\n const getRenderFromType = useCallback((quantity, data) => {\n const type = quantity.type\n const value = data[quantity.name]\n if (type.type_data === 'str') {\n return \n
\n \n no data \n
\n {children}
\n } else {\n return (\n \n {!noLabel ? {useLabel} : ''}\n
\n )\n }\n})\n\nQuantity.propTypes = {\n children: PropTypes.node,\n label: PropTypes.string,\n typography: PropTypes.string,\n loading: PropTypes.bool,\n placeholder: PropTypes.string,\n noWrap: PropTypes.bool,\n noLabel: PropTypes.bool,\n row: PropTypes.bool,\n column: PropTypes.bool,\n flex: PropTypes.bool,\n data: PropTypes.object,\n value: PropTypes.any,\n quantity: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.object\n ]),\n withClipboard: PropTypes.bool,\n ellipsisFront: PropTypes.bool,\n hideIfUnavailable: PropTypes.bool,\n description: PropTypes.string,\n format: PropTypes.bool,\n maxWidth: PropTypes.string\n}\n\nQuantity.defaultProps = {\n maxWidth: '280px'\n}\n\nexport default Quantity\n\n// Preset configuration for quantities\nconst nElementMap = {\n 1: 'unary',\n 2: 'binary',\n 3: 'ternary',\n 4: 'quaternary',\n 5: 'quinary',\n 6: 'sexinary',\n 7: 'septenary',\n 8: 'octanary',\n 9: 'nonary',\n 10: 'decimary'\n}\nconst quantityPresets = {\n datasets: {\n label: 'Datasets',\n placeholder: 'no datasets',\n render: (data) => (data.datasets && data.datasets.length !== 0) &&\n \n {loading\n ? \n loading ...\n \n // The tooltip portal is disabled for custom contents that may\n // contain links. Pressing a link while the tooltip is shown will\n // cause a navigation that leaves the popup opened (the Tooltip\n // state does not get updated since the page may be cached and a new\n // page is shown immediately).\n : \n {content}\n \n }\n {withClipboard\n ? null}\n >\n \n \n \n : ''\n }\n
\n \n \n
\n \n {data.datasets.map(ds => (\n \n {ds.dataset_name} \n {ds.doi ? ))}\n
\n },\n authors: {\n label: 'Authors',\n placeholder: 'no authors',\n render: (data) => \n {data.references.map(ref => \n {ref}\n )}\n
)\n },\n comment: {\n label: 'Comment',\n placeholder: 'no comment'\n },\n upload_id: {\n noWrap: true,\n withClipboard: true,\n render: (data) => (\n \n {content}\n
\n})\n\nSectionTable.propTypes = {\n data: PropTypes.oneOfType([\n PropTypes.bool, // Set to False to show NoData component\n PropTypes.shape({\n data: PropTypes.arrayOf(PropTypes.object).isRequired\n })\n ]),\n section: PropTypes.string,\n quantities: PropTypes.any,\n horizontal: PropTypes.bool,\n showIndex: PropTypes.bool, // Whether to display the item index\n className: PropTypes.string,\n classes: PropTypes.object,\n units: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\n/**\n * Recursively displays all of the quantities that are present within the given\n * section.\n */\nexport const SectionTableAutomatic = React.memo(({data, prefix, columns}) => {\n // Figure out a flat list of quantities to display\n const quantities = []\n const addMethodQuantities = (obj, parentKey) => {\n const children = {}\n Object.keys(obj).forEach(key => {\n const value = obj[key]\n if (Array.isArray(value) || isString(value) || isNumber(value)) {\n const metainfoPath = `${prefix}.${parentKey === '' ? '' : `${parentKey}.`}${key}`\n quantities.push({\n label: key.replace(/_/g, ' '),\n quantity: metainfoPath,\n value: value\n })\n } else if (value instanceof Object) {\n children[key] = value\n }\n })\n Object.keys(children).forEach(key => addMethodQuantities(children[key], `${parentKey === '' ? '' : `${parentKey}.`}${key}`))\n }\n addMethodQuantities(data, '')\n\n // Create rows that each have a fixed number of items\n const rows = []\n quantities.forEach((quantity, index) => {\n if (index % columns === 0) {\n rows.push([])\n }\n const row = rows[Math.floor(index / columns)]\n row.push(quantity)\n })\n\n return \n {float\n ? \n : children\n }\n \n
\n}\n\nFloatable.propTypes = {\n /**\n * Whether this component should be in floating mode or not.\n */\n float: PropTypes.bool.isRequired,\n /**\n * Callback that is called whenever this component requests a change in the\n * float property. The callback accepts one parameter: 'float' that is a\n * boolean indicating the current float status.\n */\n onFloat: PropTypes.func,\n onResize: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n classes: PropTypes.object,\n style: PropTypes.object\n}\nFloatable.defaultProps = {\n float: false\n}\n\n/**\n * Component that wraps it's children in a container that can be 'floated', i.e.\n * is positioned relative to the viewport and is above all other elements.\n */\nconst actionsHeight = 52.5 // Size of the actions element that is shown when floating\nconst useNoReparentStyles = makeStyles((theme) => {\n return {\n root: {\n top: '50%',\n left: '50%',\n margin: 0,\n padding: 0,\n maxWidth: 'none',\n maxHeight: 'none',\n boxSizing: 'border-box'\n },\n paper: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box'\n },\n full: {\n width: '100%',\n height: '100%',\n boxSizing: 'border-box'\n },\n dialogActions: {\n height: actionsHeight,\n boxSizing: 'border-box'\n }\n }\n})\nexport const FloatableNoReparent = React.memo(({\n className,\n float,\n children,\n onFloat,\n onResize,\n maxWidth,\n margin\n}) => {\n // The ratio is calculated dynamically from the final size\n const styles = useNoReparentStyles()\n const { height, width, ref } = useResizeDetector()\n const dim = useRef({width: 800, height: 600})\n const windowSize = useWindowSize()\n\n // This fixes the aspect ratio of the component based on the non-floating\n // size.\n useEffect(() => {\n if (!float) {\n dim.current = {\n width: width,\n height: height\n }\n }\n if (onResize && !isNil(width) && !isNil(height)) {\n onResize(width, height)\n }\n }, [float, width, height, onResize])\n\n const handleFloat = useCallback(() => {\n onFloat && onFloat()\n }, [onFloat])\n\n // Calculate the final floated size\n const size = useMemo(() => {\n // Calculate the fullscreen size\n const marginAbsolute = margin * (windowSize.windowHeight)\n const windowHeight = windowSize.windowHeight - marginAbsolute\n const windowWidth = Math.min(windowSize.windowWidth, maxWidth) - marginAbsolute\n const windowRatio = windowWidth / windowHeight\n const ratio = dim.current.width / dim.current.height\n let width\n let height\n if (windowRatio > ratio) {\n width = (windowHeight) * ratio\n height = windowHeight + actionsHeight\n } else {\n width = windowWidth\n height = (windowWidth) / ratio + actionsHeight\n }\n return {width, height}\n }, [windowSize, maxWidth, margin])\n\n return \n \n {float && Structure }\n
\n \n \n})\n\nStructureBase.propTypes = {\n wrapMode: PropTypes.string,\n onWrapModeChange: PropTypes.func,\n disableWrapMode: PropTypes.bool,\n showLatticeConstants: PropTypes.bool,\n onShowLatticeConstants: PropTypes.func,\n disableShowLatticeConstants: PropTypes.bool,\n showBonds: PropTypes.bool,\n onShowBonds: PropTypes.func,\n disableShowBonds: PropTypes.bool,\n showCell: PropTypes.bool,\n onShowCell: PropTypes.func,\n disableShowCell: PropTypes.bool,\n prompt: PropTypes.string, // Prompt shown before showing the visualization\n onAccept: PropTypes.func, // Callback for answering yes to the prompt\n onReset: PropTypes.func,\n onTakeScreenshot: PropTypes.func,\n onFullscreen: PropTypes.func,\n species: PropTypes.array,\n loading: PropTypes.bool,\n float: PropTypes.bool,\n className: PropTypes.string,\n classes: PropTypes.object,\n noData: PropTypes.bool,\n canvasID: PropTypes.string,\n disableFileDownload: PropTypes.bool, // Used to disable the file download button\n entryId: PropTypes.string,\n path: PropTypes.string,\n m_path: PropTypes.string, // Path of the structure data in the metainfo\n captureName: PropTypes.string, // Name of the file that the user can download\n disableLegend: PropTypes.bool, // Disable the legend showing the species list\n 'data-testid': PropTypes.string,\n children: PropTypes.node\n}\nStructureBase.defaultProps = {\n captureName: 'system'\n}\n\nexport default withWebGLErrorHandler(withErrorHandler('Could not load structure.')(StructureBase))\n\nfunction getRadius(radius) {\n return `${Math.sqrt(radius) * 12}px`\n}\n\n/**\n * Shows a list of atomic species.\n */\nconst useSpeciesStyles = makeStyles((theme) => {\n return {\n root: {\n padding: theme.spacing(0.5),\n overflowY: 'auto',\n overflowX: 'hidden',\n direction: 'rtl'\n },\n grid: {\n display: 'grid',\n gridTemplateColumns: 'min-content auto',\n gridGap: `${theme.spacing(0.1)}px ${theme.spacing(0.5)}px`,\n direction: 'ltr'\n },\n label: {\n justifySelf: 'start',\n alignSelf: 'center',\n textShadow: '0px 0px 5px #ffffff'\n },\n circle: {\n borderRadius: '100%',\n border: '1px solid #555',\n justifySelf: 'center',\n alignSelf: 'center'\n }\n }\n})\nexport const Species = React.memo(({species, className}) => {\n const styles = useSpeciesStyles()\n const normalized = useMemo(() => {\n let normalized\n try {\n normalized = species\n .map(x => ({...x, radius: (x.radius)}))\n .sort((a, b) => (a.atomicNumber - b.atomicNumber))\n } catch {}\n return normalized\n }, [species])\n\n return normalized\n ? \n {overlay}\n
\n {/* This contains the actual visualization. Needs to be always in the DOM so we can\n load the structure into it properly. */}\n \n {children}\n {!disableLegend &&\n \n }\n
\n \n \n \n \n \n {float ? \n \n \n \n {m_path &&\n { history.push(m_path) }}>\n \n }\n \n \n \n setSystemAnchorEl(null)}\n />\n \n \n \n \n \n \n
\n \n
\n : null\n})\n\nSpecies.propTypes = {\n species: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string.isRequired, // The label to show\n radius: PropTypes.number.isRequired, // Radius in Ã…ngstrom\n color: PropTypes.string.isRequired, // CSS color\n atomicNumber: PropTypes.number.isRequired // Atomic number for sorting\n })),\n className: PropTypes.string,\n 'data-testid': PropTypes.string\n}\n\n/**\n * Converts the given structure in the format used by 'results' into the format\n * used by the materia-library.\n *\n * @param {object} structure.\n *\n * @return {undefined|object} If the given structure cannot be converted,\n * returns an empty object.\n */\nexport function toMateriaStructure(structure) {\n if (!structure) {\n return undefined\n }\n\n try {\n // Resolve atomic species using the labels and their mapping to chemical\n // elements.\n const speciesMap = new Map(structure.species.map(s => [s.name, s.chemical_symbols[0]]))\n\n const structMateria = {\n species: structure.species_at_sites.map(x => speciesMap.get(x)),\n cell: structure.lattice_vectors\n ? new Quantity(structure.lattice_vectors, 'meter').to('angstrom').value()\n : undefined,\n positions: new Quantity(structure.cartesian_site_positions, 'meter').to('angstrom').value(),\n fractional: false,\n pbc: structure.dimension_types ? structure.dimension_types.map((x) => !!x) : undefined\n }\n return structMateria\n } catch (error) {\n return {}\n }\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles, alpha } from '@material-ui/core/styles'\nimport {\n Checkbox,\n Button,\n Menu,\n MenuItem,\n Typography,\n FormControlLabel\n} from '@material-ui/core'\nimport { Alert } from '@material-ui/lab'\nimport {\n MoreVert,\n Fullscreen,\n FullscreenExit,\n CameraAlt,\n Replay,\n ViewList\n} from '@material-ui/icons'\nimport { StructureViewer } from '@lauri-codes/materia'\nimport { Species } from './StructureBase'\nimport Floatable from './Floatable'\nimport NoData from './NoData'\nimport Placeholder from '../visualization/Placeholder'\nimport { Actions, Action } from '../Actions'\nimport { withErrorHandler, withWebGLErrorHandler } from '../ErrorHandler'\nimport { useHistory } from 'react-router-dom'\nimport { isEmpty, flattenDeep } from 'lodash'\nimport { Quantity } from '../units/Quantity'\nimport { delay } from '../../utils'\nimport { useAsyncError } from '../../hooks'\nimport clsx from 'clsx'\n\n/**\n * Used to show atomistic systems in an interactive 3D viewer based on the\n * 'materia'-library.\n */\nconst fitMargin = 0.5\nconst useStyles = makeStyles((theme) => {\n return {\n root: {},\n container: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n content: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n display: 'flex',\n flexDirection: 'column'\n },\n header: {\n display: 'flex',\n flexDirection: 'row',\n zIndex: 1\n },\n legend: {\n zIndex: 10,\n position: 'absolute',\n left: 0,\n top: 0,\n bottom: 0\n },\n selected: {\n '&$selected': {\n color: alpha(theme.palette.action.active, 0.87)\n }\n },\n title: {\n marginBottom: theme.spacing(1)\n },\n canvas: {\n position: 'relative',\n flex: 1,\n zIndex: 0,\n minHeight: 0, // added min-height: 0 to allow the item to shrink to fit inside the container.\n marginBottom: theme.spacing(1)\n }\n }\n})\nconst Structure = React.memo(({\n className,\n classes,\n data,\n structuralType,\n cellType,\n m_path,\n captureName,\n sizeLimit,\n bondLimit,\n disableLegend,\n selection,\n 'data-testid': testID\n}) => {\n // States\n const [anchorEl, setAnchorEl] = React.useState(null)\n const [fullscreen, setFullscreen] = useState(false)\n const [showLatticeConstants, setShowLatticeConstantsState] = useState(true)\n const [showCell, setShowCellState] = useState(true)\n const [center, setCenter] = useState('COP')\n const [fit, setFit] = useState('full')\n const [wrap, setWrapState] = useState(true)\n const [showPrompt, setShowPrompt] = useState(false)\n const [accepted, setAccepted] = useState(false)\n const [showBonds, setShowBondsState] = useState(true)\n const [species, setSpecies] = useState()\n const [loading, setLoading] = useState(true)\n const [ready, setReady] = useState(false)\n const throwError = useAsyncError()\n const noData = data === false\n\n const setShowBonds = useCallback((value, render = false) => {\n setShowBondsState(value)\n if (refViewer?.current) {\n try {\n refViewer.current.bonds({enabled: value})\n if (render) refViewer.current.render()\n } catch (e) {\n }\n }\n }, [])\n\n const setWrap = useCallback((value, showBonds, render = false) => {\n setWrapState(value)\n if (refViewer?.current) {\n try {\n refViewer.current.wrap(value)\n refViewer.current.bonds({enabled: showBonds})\n if (render) refViewer.current.render()\n } catch (e) {\n }\n }\n }, [])\n\n const setShowLatticeConstants = useCallback((value, render = false) => {\n setShowLatticeConstantsState(value)\n if (refViewer?.current) {\n try {\n refViewer.current.latticeConstants({enabled: value})\n if (render) refViewer.current.render()\n } catch (e) {\n }\n }\n }, [])\n\n const setShowCell = useCallback((value, render = false) => {\n setShowCellState(value)\n if (refViewer?.current) {\n try {\n refViewer.current.cell({enabled: value})\n if (render) refViewer.current.render()\n } catch (e) {\n }\n }\n }, [])\n\n // Variables\n const history = useHistory()\n const open = Boolean(anchorEl)\n const readyRef = useRef(true)\n const refViewer = useRef(null)\n const refCanvasDiv = useRef(null)\n const styles = useStyles(classes)\n const hasSelection = !isEmpty(selection?.selection)\n const nAtoms = useMemo(() => data?.positions?.length, [data])\n const hasCell = useMemo(() => {\n const hasCell = !data?.cell\n ? false\n : !flattenDeep(data.cell).every(v => v === 0)\n // If there is no valid cell, the property is set as undefined\n if (!hasCell && data) {\n data.cell = undefined\n }\n return hasCell\n }, [data])\n\n // In order to properly detect changes in a reference, a reference callback is\n // used. This is the recommended way to monitor reference changes as a simple\n // useRef is not guaranteed to update:\n // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node\n const refCanvas = useCallback(node => {\n // Dependency on 'fit' will make this function run every time it changes\n // (useCallback should not really run the function when the dependency\n // changes, but something weird is going on here.). An extra check is made\n // to check for node change before setting up the canvas to the new div.\n if (node !== null && refViewer.current !== null && node !== refCanvasDiv.current) {\n refViewer.current.changeHostElement(node, true)\n refViewer.current.fit(fit, fitMargin)\n refViewer.current.render()\n }\n refCanvasDiv.current = node\n }, [fit])\n\n /**\n * Used to asynchronously load a new viewer and system. Since loading the\n * structure is a long-taking operation, running this function later in the\n * event queue allows the component to perform state updates (e.g. loading\n * placeholder) while the viewer is loading.\n */\n const loadSystem = useCallback(async (system, refViewer) => {\n await delay(() => {\n // Initialize the viewer. A new viewer is used for each system as the\n // render settings may differ.\n const nAtoms = system?.positions?.length\n const isHighQuality = nAtoms <= 3000\n const options = {\n renderer: {\n backgroundColor: ['#ffffff', 1],\n antialias: {enabled: isHighQuality},\n pixelRatioScale: 1,\n shadows: {enabled: false}\n },\n atoms: {\n smoothness: isHighQuality ? 165 : 150,\n outline: {enabled: isHighQuality}\n },\n bonds: {\n enabled: false,\n smoothness: isHighQuality ? 145 : 130,\n outline: {enabled: isHighQuality}\n }\n }\n refViewer.current = new StructureViewer(refCanvasDiv.current, options)\n refViewer.current.load(system)\n refViewer.current.controls({resetOnDoubleClick: false})\n\n // Get a list of all species ordered by atomic number\n const species = Object.entries(refViewer.current.elements)\n .map(([label, info]) => ({\n label: label,\n color: info[0],\n radius: info[1],\n atomicNumber: refViewer.current.elementNumbers[label]\n }))\n setSpecies(species)\n })\n }, [])\n\n // Called whenever the system changes. Loads the structure asynchronously.\n useEffect(() => {\n if (!data) return\n readyRef.current = false\n setReady(false)\n setLoading(true)\n\n // If the system is very large, ask the user first for permission to attempt\n // to visualize it.\n if (!accepted) {\n if (nAtoms > sizeLimit) {\n setShowPrompt(true)\n return\n }\n }\n\n // Remember to catch since react error boundaries do not automatically catch\n // from async calls.\n loadSystem(data, refViewer)\n .catch(throwError)\n .finally(() => {\n setReady(true)\n readyRef.current = true\n })\n }, [data, nAtoms, accepted, sizeLimit, throwError, loadSystem])\n\n // Once the system is loaded, this effect will determine the final visual\n // layout. By monitoring the ready-state, the selections are updated correctly\n // once the system is loaded. By also monitoring the readyRef-reference, this\n // effect can know the status within the same render cycle as well.\n useEffect(() => {\n if (!ready || !readyRef.current) {\n return\n }\n\n // Reset camera and system rotations\n refViewer.current.resetCamera()\n refViewer.current.setRotation([1, 0, 0, 0])\n\n // Determine the orientation and view centering based on material type and\n // the structure type.\n let center = 'COP'\n let fit = 'full'\n let showBondsValue = nAtoms < bondLimit\n let rotations = [\n [0, 1, 0, 60],\n [1, 0, 0, 30]\n ]\n let alignments = hasCell\n ? [\n ['up', 'c'],\n ['right', 'b']\n ]\n : undefined\n if (cellType === 'conventional' || cellType === 'primitive') {\n if (structuralType === 'bulk') {\n center = 'COC'\n alignments = [\n ['up', 'c'],\n ['right', 'b']\n ]\n } else if (structuralType === '2D') {\n center = 'COC'\n alignments = [\n ['right', 'a'],\n ['up', 'b']\n ]\n rotations = [\n [1, 0, 0, -60]\n ]\n } else if (structuralType === '1D') {\n center = 'COC'\n alignments = [\n ['right', 'a']\n ]\n rotations = [\n [1, 0, 0, -60],\n [0, 1, 0, 30],\n [1, 0, 0, 30]\n ]\n }\n }\n\n // No selection: show all\n if (isEmpty(selection?.selection)) {\n refViewer.current.atoms()\n showBondsValue = nAtoms < bondLimit\n setShowBonds(showBondsValue, false)\n if (hasCell) {\n setShowCell(true)\n setShowLatticeConstants(true)\n }\n // Focused selection: show only selected atoms\n } else {\n center = selection.isSubsystem ? selection.focus : center\n fit = selection.isSubsystem ? selection.focus : 'full'\n refViewer.current.atoms([\n {opacity: 0},\n {opacity: 0.1, include: selection.transparent},\n {opacity: 1, include: selection.selection}\n ])\n // Bonds are not shown for selections\n if (!selection.isSubsystem) {\n showBondsValue = false\n setShowBonds(showBondsValue, false)\n }\n if (hasCell) {\n setShowCell(!selection.isSubsystem)\n setShowLatticeConstants(!selection.isSubsystem)\n }\n }\n if (hasCell) {\n setWrap(true, showBondsValue, false)\n refViewer.current.align(alignments)\n }\n refViewer.current.rotate(rotations)\n refViewer.current.center(center)\n refViewer.current.fit(fit, fitMargin)\n refViewer.current.render()\n refViewer.current.saveCameraReset()\n setFit(fit)\n setCenter(center)\n setLoading(false)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selection, ready])\n\n // Memoized callbacks\n const openMenu = useCallback((event) => {\n setAnchorEl(event.currentTarget)\n }, [])\n\n const closeMenu = useCallback(() => {\n setAnchorEl(null)\n }, [])\n\n const toggleFullscreen = useCallback(() => {\n setFullscreen(!fullscreen)\n }, [fullscreen])\n\n const takeScreencapture = useCallback(() => {\n refViewer.current.takeScreenShot(captureName)\n }, [captureName])\n\n const handleReset = useCallback(() => {\n refViewer.current.resetCamera()\n refViewer.current.center(center)\n refViewer.current.fit(fit, fitMargin)\n refViewer.current.render()\n }, [center, fit])\n\n // Decides the possible overlay to display\n const overlay = useMemo(() => {\n if (showPrompt) {\n return \n {species && normalized.map(item => {\n const radius = getRadius(item.radius)\n return \n {item.label} \n \n })}\n
\n \n {/* Overlay that is displayed on top of the viewer */}\n \n {fullscreen && Structure }\n
\n \n \n})\n\nStructure.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n data: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.object\n ]),\n structuralType: PropTypes.oneOf(['bulk', 'surface', '2D', '1D', 'molecule / cluster', 'unavailable']),\n cellType: PropTypes.oneOf(['original', 'conventional', 'primitive']),\n m_path: PropTypes.string, // Path of the structure data in the metainfo\n captureName: PropTypes.string, // Name of the file that the user can download\n sizeLimit: PropTypes.number, // Maximum system size before a prompt is shown\n bondLimit: PropTypes.number, // The size at which bonds are turned off\n disableLegend: PropTypes.bool, // Disable the legend showing the species list\n selection: PropTypes.shape({\n /**\n * The atom indices to show.\n */\n selection: PropTypes.arrayOf(PropTypes.number),\n /**\n * The atom indices to which the view is focused on.\n */\n focus: PropTypes.arrayOf(PropTypes.number),\n /**\n * The atom indices to display transparently.\n */\n transparent: PropTypes.arrayOf(PropTypes.number),\n /**\n * Is the selection visualizing a subsystem, e.g. a single molecule?\n */\n isSubsystem: PropTypes.bool\n }),\n 'data-testid': PropTypes.string\n}\nStructure.defaultProps = {\n captureName: 'structure',\n sizeLimit: 500,\n bondLimit: 50\n}\n\nexport default withWebGLErrorHandler(withErrorHandler('Could not load structure.')(Structure))\n\n/**\n * Converts the given structure in the format used by 'results' into the format\n * used by the materia-library.\n *\n * @param {object} structure.\n *\n * @return {undefined|object} If the given structure cannot be converted,\n * returns an empty object.\n */\nexport function toMateriaStructure(structure) {\n if (!structure) {\n return undefined\n }\n\n try {\n // Resolve atomic species using the labels and their mapping to chemical\n // elements.\n const speciesMap = new Map(structure.species.map(s => [s.name, s.chemical_symbols[0]]))\n\n const structMateria = {\n species: structure.species_at_sites.map(x => speciesMap.get(x)),\n cell: structure.lattice_vectors\n ? new Quantity(structure.lattice_vectors, 'meter').to('angstrom').value()\n : undefined,\n positions: new Quantity(structure.cartesian_site_positions, 'meter').to('angstrom').value(),\n fractional: false,\n pbc: structure.dimension_types ? structure.dimension_types.map((x) => !!x) : undefined\n }\n return structMateria\n } catch (error) {\n return {}\n }\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Typography, makeStyles, Button, Box } from '@material-ui/core'\nimport { useErrors } from '../errors'\nimport ReactJson from 'react-json-view'\nimport { Document, Page, pdfjs } from 'react-pdf'\nimport InfiniteScroll from 'react-infinite-scroller'\nimport { useApi } from '../api'\nimport { apiBase } from '../../config'\nimport { parseCifStructures } from 'crystcif-parse'\nimport H5Web from '../visualization/H5Web'\nimport Structure from '../visualization/Structure'\nimport { isWaitingForUpdateTestId } from '../../utils'\nimport { useLane } from './Browser'\n\npdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`\n\nconst useFilePreviewStyles = makeStyles(theme => ({\n scrollableContainer: {\n width: '100%',\n height: '100%',\n display: 'inline-block',\n overflow: 'auto'\n },\n img: {\n maxHeight: '100%',\n maxWidth: '100%'\n }\n}))\n\n/* Viewer definitions */\nconst viewerText = {\n name: 'text',\n fileExtensions: ['txt', 'yaml', 'yml', 'csv', 'xml', 'dat'],\n maxSizePreview: 1e10, // Effectively infinite\n maxSizeAutoPreview: 1e10, // Effectively infinite\n width: 700,\n render: ({ uploadId, path }) => {\n return \n {overlay}\n
\n {/* This contains the actual visualization. Needs to be always in the DOM so we can\n load the structure into it properly. */}\n \n {!disableLegend &&\n \n }\n
\n \n \n \n \n \n {fullscreen ? \n \n \n {m_path &&\n { history.push(m_path) }}>\n \n }\n \n \n \n \n \n \n \n \n \n
\n \n
\n )\n }\n}\n\nexport const viewers = [viewerText, viewerImg, viewerJSON, viewerPDF, viewerHdfFive, viewerCif]\n\nconst FilePreview = React.memo(({ uploadId, path, size }) => {\n const classes = useFilePreviewStyles()\n const { api, user } = useApi()\n const { raiseError } = useErrors()\n\n // Determine viewer to use and if we should preview automatically, based on extension and size\n const fileExtension = path.split('.').pop().toLowerCase()\n let autoPreview = true\n let selectedViewer = viewerText\n for (const viewer of viewers) {\n if (viewer.fileExtensions.includes(fileExtension)) {\n if (size < (selectedViewer.maxSizePreview || 50e6)) {\n selectedViewer = viewer\n autoPreview = size < viewer.maxSizeAutoPreview\n break\n }\n }\n }\n\n const [preview, setPreview] = useState(autoPreview)\n const [failedToPreview, setFailedToPreview] = useState(false)\n const [useFallbackViewer, setUseFallbackViewer] = useState(false)\n\n const data = useRef()\n const [dataLoaded, setDataLoaded] = useState(false)\n\n const encodedPath = path.split('/').map(segment => encodeURIComponent(segment)).join('/')\n let url = `${apiBase}/v1/uploads/${uploadId}/raw/${encodedPath}`\n if (url.startsWith('/')) {\n url = `${window.location.origin}${url}`\n }\n\n useEffect(() => {\n if (preview && !failedToPreview && selectedViewer.requiresLoadedData && data.current === undefined) {\n // Need to load the file data content for the viewer\n data.current = null\n api.get(url)\n .then(response => {\n data.current = response\n setDataLoaded(true)\n })\n .catch(error => {\n setFailedToPreview(true)\n raiseError(error)\n })\n }\n }, [preview, failedToPreview, selectedViewer, user, url, data, dataLoaded, setDataLoaded, api, raiseError])\n\n if (!preview) {\n return (\n \n lane.containerRef.current}\n {...(contents === null ? { 'data-testid': isWaitingForUpdateTestId } : {})}\n >\n
\n )\n}\nFilePreviewText.propTypes = {\n uploadId: PropTypes.string.isRequired,\n path: PropTypes.string.isRequired\n}\n\nconst useFilePreviewPdfStyles = makeStyles(theme => ({\n containerDiv: {\n height: '100%',\n overflowX: 'hidden',\n overflowY: 'scroll',\n border: '1px solid rgba(0, 0, 0, 0.42)',\n boxSizing: 'border-box'\n },\n pageDiv: {\n border: '5px solid gray'\n }\n}))\nconst FilePreviewPdf = React.memo(props => {\n const classes = useFilePreviewPdfStyles()\n const containerRef = useRef()\n const [numPages, setNumPages] = useState(null)\n const [pageWidth, setPageWidth] = useState()\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setPageWidth(containerRef.current.clientWidth - 10) // The -10 is because of the borders\n }\n }, [])\n\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages)\n }\n\n return (\n \n {contents || ''}\n \n \n \n \n \n {numPages && pageWidth &&\n Array(numPages).fill().map((_, i) =>\n \n
)\n})\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState, useMemo, useEffect, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport { useApi } from '../api'\nimport { useDataStore, useEntryStoreObj } from '../DataStore'\nimport { ui, apiBase} from '../../config'\n\n/**\n * Hook for retrieving read-only archive information for the entry present in\n * the active EntryContext.\n */\nexport const useArchive = (required) => {\n const { entryId } = useEntryContext()\n const { api } = useApi()\n const [response, setResponse] = useState({})\n\n // When entryId changes, resets the currently held response and updates it\n // once new data arrives\n useEffect(() => {\n setResponse({})\n if (!entryId) return\n api\n .post(`entries/${entryId}/archive/query`, {required}, {returnRequest: true})\n .then(response => setResponse({data: response?.response?.data?.archive, response: response}))\n }, [api, required, entryId])\n\n return response\n}\n\n/**\n * Hook for retrieving read-only index information for the entry present in the\n * active EntryContext.\n */\nexport const useIndex = () => {\n const { entryId } = useEntryContext()\n const { api } = useApi()\n const [response, setResponse] = useState({})\n\n // When entryId changes, resets the currently held response and updates it\n // once new data arrives\n useEffect(() => {\n setResponse({})\n api\n .get(`entries/${entryId}`, null, {returnRequest: true})\n .then(response => setResponse({data: response?.response?.data, response: response}))\n }, [api, entryId])\n\n return response\n}\n\n/**\n * Hook for fetching the \"full\" entry data. If the entry is editable, the user\n * can also mutate the archive through this hook.\n *\n * @param {*} requireArchive Optional query filter\n */\nexport const useEntryStore = (requireArchive) => {\n const {entryId} = useContext(entryContext) || {}\n const entryStoreObj = useEntryStoreObj(apiBase, entryId, true, requireArchive)\n return entryStoreObj\n}\n\n/**\n * Hook for fetching the current entry context.\n */\nexport const useEntryContext = () => {\n return useContext(entryContext)\n}\n\n/**\n * Context that manages information about a specific entry that will be targeted\n * by different components.\n */\nconst entryContext = React.createContext()\nexport const EntryContext = React.memo(({entryId, cards, children}) => {\n const dataStore = useDataStore()\n dataStore.resetIfNeeded(entryId)\n\n // Inform the Store of the selected entry\n useEffect(() => {\n dataStore.selectedEntry.current = `${apiBase}:${entryId}`\n return () => { dataStore.selectedEntry.current = undefined }\n }, [dataStore, entryId])\n\n // Get the overview config\n const finalCards = useMemo(() => {\n const finalCards = cards || ui?.entry?.cards\n return finalCards || undefined\n }, [cards])\n\n const value = useMemo(() => ({entryId, cards: finalCards}), [entryId, finalCards])\n return \n
)\n }\n \n \n {({height}) => \n
\n } else {\n return \n \n
}\n \n {pageWithWidth}\n
\n \n {pageWithWidth}\n
\n }\n}\n\nPage.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n /** Limits the width of the page content to a standard width. */\n limitedWidth: PropTypes.bool,\n /** Limits the height of the page content to fit into the current view port. */\n limitedHeight: PropTypes.bool,\n loading: PropTypes.bool\n}\n","/* eslint-disable quotes */\n/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState } from 'react'\nimport {\n Grid,\n makeStyles,\n Box,\n Accordion,\n Typography,\n AccordionSummary,\n AccordionDetails,\n Link,\n Chip\n} from '@material-ui/core'\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\nimport Page from '../Page'\nimport { withLoginRequired } from '../api'\nimport Markdown from '../Markdown'\nimport DefaultIcon from '@material-ui/icons/Assessment'\nimport Icon from '@material-ui/core/Icon'\nimport NorthTool, { NorthToolButtons, useNorthTool } from './NorthTool'\nimport { ui, northTools as _tools } from '../../config'\n\nexport const help = `\nThe NOMAD Remote Tools Hub (NORTH) provides access to tools which you can use to\nwork remotely on unpublished data stored within NOMAD.\n`\n\nconst useNorthToolStyles = makeStyles(theme => ({\n description: {\n '& > :first-child': {\n marginTop: '0 !important'\n }\n },\n iconImg: {\n height: '100%'\n },\n screenShotImg: {\n width: '100%'\n }\n}))\n\nconst NorthToolAccordion = React.memo(function NorthToolAccordion({...props}) {\n const {\n state,\n title,\n icon,\n file_extensions,\n maintainer,\n short_description,\n description} = useNorthTool()\n const classes = useNorthToolStyles()\n\n return (\n - \n {toolsData\n .map((tool, index) => (\n
\n
\n ))}\n \n \n \n \n \n \n
\n \n \n \n
\n {pages.map((page, index) => \n \n {({width}) => (\n \n {({style, ...props}) => \n
\n \n {fullscreen && Brillouin zone }\n \n }\n return null\n }, [loading, data, styles, placeHolderStyle, testID])\n\n // Determine the final list of actions to show\n const allActions = useMemo(() => {\n const defaultActions = disableDefaultActions\n ? null\n : <>\n \n \n \n {float ? \n \n \n {metaInfoLink && { history.push(metaInfoLink) }}>\n }\n \n return (defaultActions || actions)\n ? \n \n
\n \n \n}))\n\nPlot.propTypes = {\n data: PropTypes.any, // Plotly.js data object: Set to null to show Placeholder, set to false to show NoData.\n layout: PropTypes.object, // Plotly.js layout object. Notice that all the fields that are set in this object will be updated.\n config: PropTypes.object, // Plotly.js config object\n capture: PropTypes.object, // Capture settings\n fixedMargins: PropTypes.bool, // When enabled, the margins are not updated upon pan/scroll. This makes the interaction smoother.\n className: PropTypes.string,\n classes: PropTypes.object,\n placeHolderStyle: PropTypes.string, // The CSS class to apply for the Placeholder component.\n noDataStyle: PropTypes.string, // The CSS class to apply for the NoData component.\n floatTitle: PropTypes.string, // The title of the plot shown in floating mode\n metaInfoLink: PropTypes.string, // A link to the metainfo definition\n warning: PropTypes.string, // Optional message displayed under a warning icon on the top-left corner of the element.\n onRelayout: PropTypes.func,\n onRedraw: PropTypes.func,\n onRelayouting: PropTypes.func,\n onHover: PropTypes.func,\n onReset: PropTypes.func,\n onSelected: PropTypes.func,\n onSelecting: PropTypes.func,\n onDeselect: PropTypes.func,\n onClick: PropTypes.func,\n disableDefaultActions: PropTypes.bool, // Whether to show the default plot actions.\n actions: PropTypes.node, // Additional actions.\n onWebglContextLost: PropTypes.func,\n throttleResize: PropTypes.bool, // Whether to throttle resize using requestAnimationFrame\n /**\n * A RxJS Subject for efficient, non-persistent, layout changes that bypass\n * rendering of the component. Should send messages that contain the new\n * layout object.\n */\n layoutSubject: PropTypes.any,\n 'data-testid': PropTypes.string,\n showOptions: PropTypes.bool,\n onClickOptions: PropTypes.func\n}\nPlot.defaultProps = {\n floatTitle: '',\n fixedMargins: true, // If set to true, the margins will be fixed after first render.\n throttleResize: false\n}\n\nexport default Plot\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useState, useEffect, useMemo} from 'react'\nimport PropTypes from 'prop-types'\nimport { isFinite } from 'lodash'\nimport { useTheme } from '@material-ui/core/styles'\nimport Plot from '../plotting/Plot'\nimport { add, distance, mergeObjects } from '../../utils'\nimport { Quantity } from '../units/Quantity'\nimport { Unit } from '../units/Unit'\nimport { withErrorHandler } from '../ErrorHandler'\nimport { msgNormalizationWarning } from '../../config'\nimport { getLineStyles } from '../plotting/common'\n\nconst BandStructure = React.memo(({\n data,\n layout,\n className,\n units,\n type,\n ...other\n}) => {\n const [finalData, setFinalData] = useState(!data ? data : undefined)\n const [pathSegments, setPathSegments] = useState(undefined)\n const energyUnit = useMemo(() => new Unit('joule'), [])\n const theme = useTheme()\n\n // Determine the energy reference and normalization\n const energyHighestOccupiedNormalized = useMemo(() => {\n if (!data) {\n return [[undefined, undefined]]\n }\n if (type === 'vibrational') {\n return [[0, true]]\n } else {\n return data.map(d => {\n if (!isFinite(d.energy_highest_occupied)) {\n return [0, false]\n } else {\n return [new Quantity(d.energy_highest_occupied, energyUnit).toSystem(units).value(), true]\n }\n })\n }\n }, [data, energyUnit, units, type])\n\n // Side effect that runs when the data that is displayed should change. By\n // running all this heavy stuff as a side effect, the first render containing\n // the placeholders etc. can be done as fast as possible.\n useEffect(() => {\n if (!data) {\n setFinalData(data)\n return\n }\n\n const energyName = 'energies'\n const kpointName = 'kpoints'\n const plotData = []\n const channels = data.map(d => d.segment[0][energyName].length)\n const lines = getLineStyles(channels.reduce((a, b) => a + b, 0), null, channels.length > 0 ? channels[0] : null).values()\n data.forEach((d, n) => {\n const nChannels = d.segment[0][energyName].length\n const nBands = d.segment[0][energyName][0][0].length\n\n // Calculate distances in k-space if missing. These distances in k-space\n // define the plot x-axis spacing.\n const tempSegments = []\n if (d.segment[0].k_path_distances === undefined) {\n let length = 0\n for (const segment of d.segment) {\n const k_path_distances = []\n const nKPoints = segment[energyName][0].length\n const start = segment[kpointName][0]\n const end = segment[kpointName].slice(-1)[0]\n const segmentLength = distance(start, end)\n for (let iKPoint = 0; iKPoint < nKPoints; ++iKPoint) {\n const kPoint = segment[kpointName][iKPoint]\n const dist = distance(start, kPoint)\n k_path_distances.push(length + dist)\n }\n length += segmentLength\n segment.k_path_distances = k_path_distances\n tempSegments.push(k_path_distances)\n }\n } else {\n for (const segment of d.segment) {\n tempSegments.push(segment.k_path_distances)\n }\n }\n setPathSegments(tempSegments)\n\n // Path\n let path = []\n for (const segment of d.segment) {\n path = path.concat(segment.k_path_distances)\n tempSegments.push(segment.k_path_distances)\n }\n\n // we assign first for spin up\n const lineUp = lines.next().value\n // Second spin channel\n if (nChannels === 2) {\n const line = lines.next().value\n const bands = []\n for (let iBand = 0; iBand < nBands; ++iBand) {\n bands.push([])\n }\n for (const segment of d.segment) {\n for (let iBand = 0; iBand < nBands; ++iBand) {\n const nKPoints = segment[energyName][1].length\n for (let iKPoint = 0; iKPoint < nKPoints; ++iKPoint) {\n bands[iBand].push(segment[energyName][1][iKPoint][iBand])\n }\n }\n }\n\n // Create plot data entry for each band\n for (let band of bands) {\n band = new Quantity(band, energyUnit).toSystem(units).value()\n if (energyHighestOccupiedNormalized[n][0] !== 0) {\n band = add(band, -energyHighestOccupiedNormalized[n][0])\n }\n plotData.push(\n {\n x: path,\n y: band,\n type: 'scatter',\n mode: 'lines',\n showlegend: false,\n legendgroup: d.name,\n line: line\n }\n )\n }\n }\n\n // First spin channel\n const bands = []\n for (let iBand = 0; iBand < nBands; ++iBand) {\n bands.push([])\n }\n for (const segment of d.segment) {\n for (let iBand = 0; iBand < nBands; ++iBand) {\n const nKPoints = segment[energyName][0].length\n for (let iKPoint = 0; iKPoint < nKPoints; ++iKPoint) {\n bands[iBand].push(segment[energyName][0][iKPoint][iBand])\n }\n }\n path = path.concat(segment.k_path_distances)\n }\n\n // Create plot data entry for each band\n for (let [nBand, band] of bands.entries()) {\n band = new Quantity(band, energyUnit).toSystem(units).value()\n if (energyHighestOccupiedNormalized[n][0] !== 0) {\n band = add(band, -energyHighestOccupiedNormalized[n][0])\n }\n plotData.push(\n {\n x: path,\n y: band,\n name: d.name,\n type: 'scatter',\n mode: 'lines',\n showlegend: nBand === 0 && d.name !== undefined,\n legendgroup: d.name,\n line: lineUp\n }\n )\n }\n\n // Normalization line\n if (type !== 'vibrational' && energyHighestOccupiedNormalized[0][1] && n === data.length - 1) {\n plotData.push({\n x: [path[0], path[path.length - 1]],\n y: [0, 0],\n name: 'Highest occupied',\n showlegend: true,\n type: 'line',\n mode: 'lines',\n line: {\n color: '#000',\n width: 1\n }\n })\n }\n })\n\n setFinalData(plotData)\n }, [data, theme, units, energyUnit, type, energyHighestOccupiedNormalized])\n\n // Merge custom layout with default layout\n const tmpLayout = useMemo(() => {\n const defaultLayout = {\n xaxis: {\n tickangle: 0,\n tickfont: {\n size: 14\n },\n zeroline: false\n },\n yaxis: {\n title: {\n text: `Energy (${energyUnit.toSystem(units).label()})`\n },\n zeroline: type === 'vibrational'\n },\n title: {\n text: {\n text: 'Band structure'\n }\n },\n showlegend: true,\n legend: {\n x: 1,\n y: 0,\n xanchor: 'right',\n yanchor: 'bottom',\n font: {\n size: 13\n }\n }\n }\n return mergeObjects(layout, defaultLayout)\n }, [layout, type, energyUnit, units])\n\n // Compute layout that depends on data.\n const computedLayout = useMemo(() => {\n if (data === undefined || data === false || pathSegments === undefined) {\n return {}\n }\n // Set new layout that contains the segment labels\n const labels = []\n const labelKPoints = []\n for (let iSegment = 0; iSegment < data[0].segment.length; ++iSegment) {\n const segment = data[0].segment[iSegment]\n const startLabel = segment.endpoints_labels\n ? segment.endpoints_labels[0]\n : ''\n if (iSegment === 0) {\n labels.push(startLabel)\n labelKPoints.push(pathSegments[iSegment][0])\n } else {\n const prevLabel = labels[labels.length - 1]\n if (prevLabel !== startLabel) {\n labels[labels.length - 1] = `${prevLabel}|${startLabel}`\n }\n }\n const endLabel = segment.endpoints_labels\n ? segment.endpoints_labels[1]\n : ''\n labels.push(endLabel)\n labelKPoints.push(pathSegments[iSegment].slice(-1)[0])\n }\n\n const shapes = []\n for (let iShape = 1; iShape < labelKPoints.length - 1; ++iShape) {\n const labelKPoint = labelKPoints[iShape]\n shapes.push({\n type: 'line',\n x0: labelKPoint,\n y0: 0,\n x1: labelKPoint,\n y1: 1,\n yref: 'paper',\n line: {\n color: '#999',\n width: 1,\n dash: '10px,10px'\n }\n })\n }\n const ticks = {\n shapes: shapes,\n xaxis: {\n tickmode: 'array',\n tickvals: labelKPoints,\n ticktext: labels\n }\n }\n return ticks\n }, [data, pathSegments])\n\n // Merge the given layout and layout computed from data\n const finalLayout = useMemo(() => {\n return mergeObjects(computedLayout, tmpLayout)\n }, [computedLayout, tmpLayout])\n\n return \n
\n \n})\n\nBrillouinZone.propTypes = {\n data: PropTypes.oneOfType([\n PropTypes.shape({\n reciprocal_cell: PropTypes.array.isRequired, // Reciprocal cell in SI units\n segment: PropTypes.array.isRequired // Array of section_k_band_segments in SI units\n }),\n PropTypes.oneOf([false, undefined]) // False for NoData, undefined for Placeholder\n ]),\n captureName: PropTypes.string, // Name of the file that the user can download\n classes: PropTypes.object,\n className: PropTypes.string,\n 'data-testid': PropTypes.string\n}\nBrillouinZone.defaultProps = {\n captureName: 'brillouin_zone'\n}\n\nexport default withWebGLErrorHandler(withErrorHandler(bzError)(BrillouinZone))\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useState, useLayoutEffect, useMemo, useRef, useCallback, forwardRef, useImperativeHandle, useEffect} from 'react'\nimport PropTypes from 'prop-types'\nimport { useResizeDetector } from 'react-resize-detector'\nimport { isNil, isEmpty, cloneDeep } from 'lodash'\nimport { useHistory } from 'react-router-dom'\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\nimport {\n Typography,\n Box,\n Tooltip\n} from '@material-ui/core'\nimport {\n CameraAlt,\n Fullscreen,\n FullscreenExit,\n Replay,\n ViewList,\n Warning\n} from '@material-ui/icons'\nimport Floatable from '../visualization/Floatable'\nimport Placeholder from '../visualization/Placeholder'\nimport NoData from '../visualization/NoData'\nimport { Actions, Action } from '../Actions'\nimport Plotly from 'plotly.js-dist-min'\nimport clsx from 'clsx'\nimport { mergeObjects } from '../../utils'\n\n/**\n * Component that produces a highly customized Plotly.js graph. We are using the\n * vanilla JS Plotly library to achieve the most customizability.\n */\nconst useStyles = makeStyles((theme) => {\n return {\n root: {\n width: '100%',\n height: '100%',\n position: 'relative'\n },\n footer: {\n paddingRight: theme.spacing(1),\n display: 'flex',\n flexDirection: 'row',\n zIndex: 1\n },\n container: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n content: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n display: 'flex',\n flexDirection: 'column'\n },\n canvasContainer: {\n flex: 1,\n minHeight: 0 // added min-height: 0 to allow the item to shrink to fit inside the container.\n },\n placeholderRoot: {\n left: 0,\n right: 0,\n position: 'absolute'\n },\n floatable: {\n width: '100%',\n height: '100%'\n },\n spacer: {\n flex: 1\n },\n warning: {\n color: theme.palette.warning.main,\n position: 'absolute',\n zIndex: 1,\n left: '2px',\n top: '20px'\n }\n }\n})\nconst Plot = React.memo(forwardRef(({\n data,\n layout,\n config,\n floatTitle,\n metaInfoLink,\n capture,\n fixedMargins,\n className,\n classes,\n placeHolderStyle,\n noDataStyle,\n warning,\n onRelayout,\n onRedraw,\n onRelayouting,\n onHover,\n onReset,\n onSelected,\n onSelecting,\n onDeselect,\n onClick,\n onWebglContextLost,\n layoutSubject,\n disableDefaultActions,\n actions,\n throttleResize,\n 'data-testid': testID\n}, canvas) => {\n const [float, setFloat] = useState(false)\n const theme = useTheme()\n const firstRender = useRef(true)\n const [ratio, setRatio] = useState(1)\n const [canvasNode, setCanvasNode] = useState()\n const attach = useRef()\n const [sizeReady, setSizeReady] = useState(false)\n const [loading, setLoading] = useState(true)\n const margins = useRef()\n const history = useHistory()\n const { height, width, ref } = useResizeDetector()\n const canvasSize = useRef({})\n const layoutRecoverRef = useRef()\n const resetInfo = useRef()\n\n // The image capture settings\n const captureSettings = useMemo(() => {\n const maxSize = 1280\n let width, height\n if (ratio > 1) {\n width = maxSize\n height = maxSize / ratio\n } else {\n width = maxSize * ratio\n height = maxSize\n }\n const defaultCapture = {\n format: 'png',\n width: width,\n height: height,\n filename: 'plot'\n }\n const settings = mergeObjects(capture, defaultCapture)\n return settings\n }, [capture, ratio])\n\n const styles = useStyles({classes: classes})\n if (noDataStyle) {\n styles.nodata = noDataStyle\n }\n if (placeHolderStyle) {\n styles.placeholder = placeHolderStyle\n }\n\n // This callback redraws the plot whenever the canvas element changes. In\n // order to properly detect changes in a reference, a reference callback is\n // used. This is the recommended way to monitor reference changes as a simple\n // useRef is not guaranteed to update:\n // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node\n const canvasRef = useCallback(node => {\n if (node) {\n if (!firstRender.current) {\n attach.current = true\n // We use a dummy state to request a redraw on the new canvas\n setCanvasNode(node)\n }\n // We add a NATIVE wheel event handler that prevents the wheel events sent\n // by Plotly from bubbling up. Notice that the SyntheticEvents added by\n // React cannot be used, since they do not play well with the original\n // native events created by Plotly (in particular: SyntheticEvents are all\n // passive, so calling preventDefault on them will cause problems on\n // browsers that support passive events.)\n node.addEventListener('wheel', (e) => {\n e.preventDefault()\n e.stopPropagation()\n })\n }\n canvasRef.current = node\n }, [])\n\n // Set the final layout. It is a combination of a default layout, the layout\n // set by the user and some properties of the curretly used layout.\n const finalLayout = useMemo(() => {\n const withTitle = layout?.title?.text || layout?.template?.title?.text || layout?.annotations?.some(item => item?.text)\n const defaultLayout = {\n dragmode: 'pan',\n hovermode: false,\n showlegend: false,\n autosize: false,\n template: 'plotly_white',\n // There is extra space reserved for the top and bottom margins so that\n // automargin does not make the plot jump around too much.\n margin: {\n l: theme.spacing(4),\n r: theme.spacing(1.5),\n t: theme.spacing(withTitle ? 5 : 1),\n b: theme.spacing(6)\n },\n title: {\n font: {\n family: theme.typography.fontFamily\n },\n yanchor: 'middle'\n },\n legend: {\n bgcolor: 'rgba(255, 255, 255, 0.9)',\n font: {\n family: theme.typography.fontFamily,\n size: 14\n }\n },\n xaxis: {\n automargin: false,\n autorange: true,\n linecolor: '#333',\n linewidth: 1,\n mirror: true,\n ticks: 'outside',\n showline: true,\n fixedrange: true,\n title: {\n standoff: 10,\n font: {\n family: theme.typography.fontFamily,\n size: 16,\n color: '#333'\n },\n tickfont: {\n family: theme.typography.fontFamily,\n size: 14,\n color: '#333'\n }\n }\n },\n yaxis: {\n automargin: true,\n autorange: true,\n linecolor: '#333',\n linewidth: 1,\n mirror: true,\n ticks: 'outside',\n showline: true,\n title: {\n standoff: 10,\n font: {\n family: theme.typography.fontFamily,\n size: 16,\n color: '#333'\n }\n },\n tickfont: {\n family: 'Titillium Web,sans-serif',\n size: 14,\n color: '#333'\n }\n },\n yaxis2: {\n automargin: true,\n autorange: true,\n linecolor: '#333',\n linewidth: 1,\n mirror: true,\n ticks: 'outside',\n showline: true,\n title: {\n standoff: 8,\n font: {\n family: 'Titillium Web,sans-serif',\n size: 16,\n color: '#333'\n }\n },\n tickfont: {\n family: 'Titillium Web,sans-serif',\n size: 14,\n color: '#333'\n }\n }\n }\n const newLayout = mergeObjects(layout, defaultLayout)\n return newLayout\n }, [layout, theme])\n\n // Set the final config\n const finalConfig = useMemo(() => {\n const defaultConfig = {\n scrollZoom: true,\n displayModeBar: false,\n showTips: false,\n responsive: true\n }\n return mergeObjects(config, defaultConfig)\n }, [config])\n\n // Saves reset options according to the given layout.\n useEffect(() => {\n resetInfo.current = {\n rangeX: finalLayout?.xaxis?.range,\n rangeY: finalLayout?.yaxis?.range,\n rangeY2: finalLayout?.yaxis2?.range,\n margin: finalLayout?.margin\n }\n }, [finalLayout])\n\n // Used to get the currently active layout. Because of Floatable, the plot\n // layout is lost upon the plot being put on another div. This is why we need\n // a backup that is stored when the final plot config is ready. Notice that we\n // have to keep parts of the old layout, as it stores e.g. range etc. that\n // need to be persistent.\n const getLayout = useCallback((update) => {\n const oldLayout = cloneDeep(canvasRef.current.layout || layoutRecoverRef.current || {})\n if (!oldLayout.xaxis) oldLayout.xaxis = {}\n if (!oldLayout.yaxis) oldLayout.yaxis = {}\n if (!oldLayout.yaxis2) oldLayout.yaxis2 = {}\n const newLayout = mergeObjects(update, oldLayout)\n // When fixed margins are set, the margins should be automatically set and\n // then fixed in a secondary update.\n if (fixedMargins) {\n newLayout.xaxis.automargin = true\n newLayout.yaxis.automargin = true\n newLayout.yaxis2.automargin = true\n newLayout.margin = resetInfo.current.margin\n }\n // The current size overrides any size that is set\n newLayout.width = canvasSize.current?.width || newLayout.width\n newLayout.height = canvasSize.current?.height || newLayout.height\n // The range from updated layout should be used if it's set, otherwise use\n // old range.\n if (isEmpty(newLayout.xaxis.range)) newLayout.xaxis.range = oldLayout.xaxis.range\n if (isEmpty(newLayout.yaxis.range)) newLayout.yaxis.range = oldLayout.yaxis.range\n if (isEmpty(newLayout.yaxis2.range)) newLayout.yaxis2.range = oldLayout.yaxis2.range\n return newLayout\n }, [canvasRef, fixedMargins])\n\n // If fixedMargins = true, captures the automatically set margin value from\n // the plot and performs a layout update that fixes them.\n const fixMargins = useCallback(() => {\n if (fixedMargins && canvasRef.current) {\n try {\n // Get the element which explicitly stores the computed margin and\n // perform a relayout with these values.\n const currentLayout = cloneDeep(canvasRef.current.layout)\n currentLayout.xaxis.automargin = false\n currentLayout.yaxis.automargin = false\n currentLayout.yaxis2.automargin = false\n if (!currentLayout.margin) currentLayout.margin = {}\n const subPlots = canvasRef.current.children[0].children[0].children[0].children[2].children\n let [xMin, xMax] = [undefined, undefined]\n for (const subPlot of subPlots) {\n const canvas = subPlot.children[0]\n const left = parseInt(canvas.getAttribute('x'))\n const right = left + parseInt(canvas.getAttribute('width'))\n xMin = !xMin || left < xMin ? left : xMin\n xMax = !xMax || right > xMax ? right : xMax\n }\n const totalWidth = canvasRef.current.clientWidth\n currentLayout.margin.l = xMin\n currentLayout.margin.r = totalWidth - xMax\n margins.current = cloneDeep(currentLayout.margin)\n Plotly.relayout(canvasRef.current, currentLayout)\n } catch (e) {\n console.log('Could not determine the margin values.', e)\n }\n }\n }, [canvasRef, fixedMargins])\n\n // Handle canvas resize\n useLayoutEffect(() => {\n if (width && height) {\n setRatio(width / height)\n canvasSize.current = {width, height}\n if (firstRender.current) {\n setSizeReady(true)\n } else {\n // The updates are throttled by using requestAnimationFrame: there is no\n // sense in trying to update beyond what the browser can render TODO:\n // Ideally we would not need to call fixMargins here, as a simple resize\n // should not trigger any change in the margins. The call is curently\n // necesary due to the way the plot updates when going fullscreen:\n // without fixmargins the view is jumbled.\n const layout = getLayout()\n if (throttleResize) {\n window.requestAnimationFrame(() => {\n // Notice that fixMargins has to be done within this callback\n // together with the relayout\n Plotly.relayout(canvasRef.current, layout)\n fixMargins()\n })\n } else {\n Plotly.relayout(canvasRef.current, layout)\n fixMargins()\n }\n }\n }\n }, [canvasRef, width, height, throttleResize, fixMargins, getLayout])\n\n // Update plots when data, config or rendering canvas is updated.\n // useLayoutEffect is used so that React rendering and Plotly rendering are\n // synced.\n useLayoutEffect(() => {\n if (!data || !sizeReady) {\n if (data === false) setLoading(false)\n return\n }\n // The plot is created on the first render\n const layout = getLayout(finalLayout)\n if (firstRender.current) {\n Plotly.newPlot(canvasRef.current, data, layout, finalConfig)\n attach.current = true\n firstRender.current = false\n\n // Subscribe to the layout change publisher if one is given\n if (layoutSubject) {\n layoutSubject.subscribe(layout => {\n // The updates are throttled by using requestAnimationFrame: there is\n // no sense in trying to update beyond what the browser can render\n const newLayout = mergeObjects(layout, canvasRef.current.layout)\n window.requestAnimationFrame(() => {\n Plotly.relayout(canvasRef.current, newLayout)\n })\n })\n }\n setLoading(false)\n // On subsequent updates to data or layout, we call Plotly.react to update\n // the plot.\n } else {\n Plotly.react(canvasRef.current, data, layout, finalConfig)\n }\n\n fixMargins()\n\n // Upon first render or changing the plot DOM element the events are (re-)attached.\n if (attach.current === true) {\n if (onRelayouting) {\n canvasRef.current.on('plotly_relayouting', onRelayouting)\n }\n if (onRedraw) {\n canvasRef.current.on('plotly_redraw', onRedraw)\n }\n if (onRelayout) {\n canvasRef.current.on('plotly_relayout', onRelayout)\n }\n if (onHover) {\n canvasRef.current.on('plotly_hover', onHover)\n }\n if (onSelected) {\n canvasRef.current.on('plotly_selected', onSelected)\n }\n if (onSelecting) {\n canvasRef.current.on('plotly_selecting', onSelecting)\n }\n if (onDeselect) {\n canvasRef.current.on('plotly_deselect', onDeselect)\n }\n if (onClick) {\n canvasRef.current.on('plotly_click', onClick)\n }\n if (onWebglContextLost) {\n canvasRef.current.on('plotly_webglcontextlost', onWebglContextLost)\n }\n attach.current = false\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [layoutSubject, fixedMargins, canvasNode, firstRender, data, finalConfig, finalLayout, sizeReady, canvasRef, onRelayout, onRelayouting, fixMargins, getLayout])\n\n // If the callbacks change, we need to update them in the canvas as well.\n // TODO: Do this for other callbacks as well.\n useEffect(() => {\n if (onSelected && canvasRef?.current?.on) {\n canvasRef.current.on('plotly_selected', onSelected)\n }\n }, [onSelected, canvasRef])\n\n // For resetting the view.\n const handleReset = useCallback(() => {\n if (canvasRef?.current) {\n // If a fixed range was set in the original layout, use it. Otherwise\n // autorange the view.\n const hasX = !isNil(resetInfo.current.rangeX)\n const hasY = !isNil(resetInfo.current.rangeY)\n const hasY2 = !isNil(resetInfo.current.rangeY2)\n const oldLayout = getLayout()\n const layout = {\n ...oldLayout,\n xaxis: {...oldLayout.xaxis, autorange: !hasX, range: hasX ? [...resetInfo.current.rangeX] : oldLayout.xaxis.range},\n yaxis: {...oldLayout.yaxis, autorange: !hasY, range: hasY ? [...resetInfo.current.rangeY] : oldLayout.yaxis.range},\n yaxis2: {...oldLayout.yaxis2, autorange: !hasY2, range: hasY2 ? [...resetInfo.current.rangeY2] : oldLayout.yaxis2.range}\n }\n Plotly.relayout(canvasRef.current, layout)\n fixMargins()\n onReset && onReset()\n }\n }, [canvasRef, onReset, fixMargins, getLayout])\n\n // Saves the current layout for recovering the plot\n const saveLayout = useCallback(() => {\n layoutRecoverRef.current = cloneDeep(canvasRef?.current?.layout)\n }, [canvasRef])\n\n // Handles float change\n const handleFloat = useCallback(() => {\n saveLayout()\n setFloat(!float)\n }, [float, saveLayout])\n\n // Handles plot capturing\n const handleCapture = useCallback(() => {\n Plotly.downloadImage(canvasRef.current, captureSettings)\n }, [canvasRef, captureSettings])\n\n // Listen to keyboard events to deselect.\n useEffect(() => {\n function handleDeselect(event) {\n if (['Escape', 'Delete'].includes(event.key)) {\n const layout = canvasRef.current.layout\n delete layout.selections\n const data = canvasRef.current.data\n data.forEach(element => {\n delete element.selectedpoints\n })\n Plotly.react(canvasRef.current, data, layout)\n onDeselect && onDeselect()\n }\n }\n window.addEventListener('keydown', handleDeselect)\n return () => window.removeEventListener('keydown', handleDeselect)\n }, [canvasRef, onDeselect])\n\n useImperativeHandle(canvas, () => ({\n reset() {\n handleReset()\n },\n toggleFullscreen() {\n handleFloat()\n },\n capture() {\n handleCapture()\n },\n saveLayout() {\n saveLayout()\n },\n relayout(callback) {\n if (canvasRef.current?.layout) {\n const newLayout = callback(canvasRef.current.layout)\n Plotly.relayout(canvasRef.current, newLayout)\n }\n }\n }))\n\n // Decides the possible overlay to display\n const overlay = useMemo(() => {\n if (loading) {\n return \n \n \n \n \n {fullscreen ? \n \n \n \n
\n \n {defaultActions}{actions} \n
\n : null\n }, [actions, disableDefaultActions, float, handleCapture, handleFloat, handleReset, history, metaInfoLink, styles])\n\n // Even if the plots are still loading, all the html elements need to be\n // placed in the DOM. During loading, they are placed underneath the\n // placeholder with visibility=hidden. This way Plotly still has access to\n // these HTML nodes and their sizes when the plots are loading.\n return \n {/* Overlay that is displayed on top of the viewer */}\n \n {float && {floatTitle} }\n
\n \n {overlay}\n
\n {/* This contains the actual visualization. Needs to be always in the DOM so we can\n load the structure into it properly. */}\n \n {/* Note that we need to apply \"style\" to the canvas instead of \"className\" */}\n
\n {allActions}\n \n {warning && \n }\n
\n \n
\n \n {code}\n
\n \n null}>\n \n \n \n \n \n
\n \n Request \n Response \n
\n})\nSourceApiCall.propTypes = {\n description: PropTypes.string,\n method: PropTypes.string,\n url: PropTypes.string,\n body: PropTypes.any,\n response: PropTypes.any\n}\n\nexport const SourceJsonDialogButton = React.memo(function SourceJsonDialogButton({description, data, ...props}) {\n return \n {method}\n {url}\n
\n {formatedBody && \n \n {formatedBody}\n
}\n \n
}\n \n
\n \n
\n \n
\n \n \n
\n }\n {\n validateURL(value) &&\n \n \n \n \n \n \n {lane && value && (\n setAskForOverwrite(false)}\n />\n
\n )\n})\nFileEditQuantity.propTypes = {\n quantityDef: PropTypes.object.isRequired,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onFailed: PropTypes.func\n}\nexport default FileEditQuantity\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState, useRef } from 'react'\nimport { Editor } from '@tinymce/tinymce-react'\nimport PropTypes from 'prop-types'\nimport { Box, FormControl, FormLabel, makeStyles } from '@material-ui/core'\nimport DOMPurify from 'dompurify'\nimport {getDisplayLabel} from \"../../utils\"\nimport {useRecoilValue} from \"recoil\"\nimport {configState} from \"../archive/ArchiveBrowser\"\n\nconst useStyle = makeStyles(theme => ({\n root: {\n borderBottom: '1px solid rgba(0, 0, 0, 0.42)',\n marginBottom: 1\n },\n focused: {\n transition: 'border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n transitionProperty: 'border-bottom-color',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n transitionDelay: '0ms',\n borderBottom: `2px solid ${theme.palette.primary.main}`\n }\n}))\n\nconst RichTextEditQuantity = React.memo((props) => {\n const classes = useStyle()\n const {quantityDef, value, onChange, height} = props\n const initialHeight = height || 500\n const config = useRecoilValue(configState)\n const label = getDisplayLabel(quantityDef, true, config?.showMeta)\n const initialValue = useRef(value)\n const editedValue = useRef(value)\n const [focus, setFocus] = useState(false)\n const [initialized, setInitialized] = useState(false)\n\n if (editedValue.current !== value) {\n // Means that the value has been changed elsewhere, for example edited in a different tab\n // In this case we need to force an update to the provided value\n editedValue.current = value\n initialValue.current = value\n }\n\n const handleChange = useCallback((value) => {\n editedValue.current = value\n if (onChange) {\n onChange(value === '' ? undefined : value)\n }\n }, [onChange])\n\n const handleImageUpload = useCallback((blobInfo, success, failure, progress) => {\n success('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64())\n }, [])\n\n const handleEditorInit = useCallback(editor => {\n setInitialized(true)\n }, [setInitialized])\n\n return (\n \n \n \n
\n})\n\nListboxMetainfo.propTypes = {\n children: PropTypes.node\n}\n\nexport const LISTBOX_PADDING = 8\nconst OuterElementContext = createContext({})\n\nexport const OuterElementType = React.forwardRef((props, ref) => {\n const outerProps = useContext(OuterElementContext)\n return \n})\n\nexport const renderGroup = (params) => [\n - \n
\n \n \n }\n
\n}\n\nMetainfoOption.propTypes = {\n id: PropTypes.string,\n options: PropTypes.object\n}\n\n/**\n * Used to filter a set of filterData according to the given filtering options.\n *\n * @param {*} filterData The filterData to filter\n * @param {*} dtypes Included data types as a set\n * @param {*} dtypesRepeatable Included repeatabel data types as a set\n * @param {*} disableNonAggregatable Whether to filter out non-aggregatable filters\n * @returns Object containing the filtered filters\n */\nfunction getMetainfoOptions(filterData, dtypes, dtypesRepeatable, disableNonAggregatable) {\n return Object.fromEntries(\n Object.entries(filterData)\n .filter(([key, data]) => {\n if (disableNonAggregatable && !data.aggregatable) return false\n const dtype = data?.dtype\n const passed = data?.repeats\n ? dtypesRepeatable?.has(dtype)\n : dtypes?.has(dtype)\n return passed\n })\n .map(([key, data]) => [key, {\n key: key,\n definition: data\n }])\n )\n}\n","/* eslint-disable no-unused-vars */\n/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState, useMemo, createContext, useContext, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport assert from 'assert'\nimport { isNil, has } from 'lodash'\nimport { makeStyles } from '@material-ui/core/styles'\nimport SearchIcon from '@material-ui/icons/Search'\nimport HistoryIcon from '@material-ui/icons/History'\nimport CloseIcon from '@material-ui/icons/Close'\nimport { HelpButton } from '../../components/Help'\nimport { Paper, Tooltip, Chip, List, ListSubheader, Typography, IconButton, Box } from '@material-ui/core'\nimport { parseQuantityName, getSchemaAbbreviation } from '../../utils'\nimport { useSuggestions } from '../../hooks'\nimport { useSearchContext } from './SearchContext'\nimport { quantityNameSearch } from './FilterRegistry'\nimport { VariableSizeList } from 'react-window'\nimport { InputText } from './input/InputText'\nimport { SearchSuggestion, SuggestionType } from './SearchSuggestion'\nimport { SearchSyntaxes } from './SearchSyntaxes'\nimport { renderRow, useResetCache, LISTBOX_PADDING } from './input/InputMetainfo'\n\n/**\n * Displays a suggestion in the search bar.\n */\nexport const useSuggestionStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n '& > *': {\n marginRight: theme.spacing(1)\n },\n '& > *:last-child': {\n marginRight: 0\n },\n // The delete icon is hidden until the item is hovered. It is not removed\n // from the document with \"display: none\" in order for the hover to not\n // change the layout which may cause other elements to shift around.\n '& .delete': {\n visibility: \"hidden\"\n },\n '&:hover .delete': {\n visibility: \"visible\"\n }\n },\n primary: {\n flexGrow: 1,\n whiteSpace: 'nowrap',\n overflowX: 'scroll',\n '&::-webkit-scrollbar': {\n display: 'none'\n },\n '-ms-overflow-style': 'none',\n scrollbarWidth: 'none'\n }\n}))\nconst Suggestion = ({suggestion, onDelete, tooltip}) => {\n const typeTooltip = (suggestion.type === SuggestionType.Name\n ? 'Suggested name for an available filter in this app'\n : SearchSyntaxes[suggestion.type]?.readme) || ''\n const label = (suggestion.type === SuggestionType.Name\n ? 'name'\n : SearchSyntaxes[suggestion.type]?.labelShort) || ''\n const styles = useSuggestionStyles()\n let schema, primary\n if (suggestion.type === SuggestionType.Name) {\n const {path, schema: schemaTmp} = parseQuantityName(suggestion.input)\n primary = path\n schema = schemaTmp\n } else {\n primary = suggestion.input\n }\n\n return \n \n
\n \n \n \n {primary}\n \n \n {suggestion.history\n ? \n {\n event.preventDefault()\n event.stopPropagation()\n onDelete?.()\n }}>\n \n \n : null\n }\n {suggestion.history\n ? \n \n \n : null\n }\n {schema\n ? \n {getSchemaAbbreviation(schema)} \n \n : null\n }\n \n \n \n
\n}\n\nSuggestion.propTypes = {\n suggestion: PropTypes.object,\n onDelete: PropTypes.func,\n tooltip: PropTypes.string\n}\n\nconst queryControlsHeight = 5.5\nexport const useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column'\n },\n paper: {\n width: '100%'\n },\n offset: {\n height: theme.spacing(queryControlsHeight),\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n queryContainer: {\n minHeight: theme.spacing(queryControlsHeight),\n marginTop: theme.spacing(0.5),\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n },\n iconButton: {\n padding: 10\n }\n}))\n\n/**\n * This component shows a search bar with autocomplete functionality.\n */\nconst SearchBar = React.memo(({\n quantities,\n className\n}) => {\n const styles = useStyles()\n const {\n filters,\n filterData,\n filterFullnames,\n useUpdateFilter,\n useParseQuery,\n useSearchSuggestions,\n usePushSearchSuggestion,\n useRemoveSearchSuggestion,\n useSetPagination,\n searchSyntaxes,\n useResetFilters,\n useRefresh,\n useApiData\n } = useSearchContext()\n\n const includedFormats = Object\n .keys(SearchSyntaxes)\n .filter((key) => !searchSyntaxes?.exclude?.includes(key))\n const formatReadmeList = includedFormats\n .map((key) => {\n const examples = SearchSyntaxes[key]?.examples?.map((example) => ` ${example}`).join('\\n')\n return ` - **${SearchSyntaxes[key]?.label}**: ${SearchSyntaxes[key]?.readme} For example:\\n\\n \\`\\`\\`\\n${examples}\\n \\`\\`\\`\\n`\n })\n .join('\\n')\n const [inputValue, setInputValue] = useState('')\n const [suggestionInput, setSuggestionInput] = useState('')\n const [error, setError] = useState(false)\n const setPagination = useSetPagination()\n const updateFilter = useUpdateFilter()\n const parseQuery = useParseQuery()\n const inputRef = useRef()\n\n const [quantitiesAll, quantitiesAllSet, quantitiesSuggestable] = useMemo(() => {\n let quantitySetSuggestable, quantityList\n // Custom list of quantities. They are validated against the current search\n // context.\n if (quantities) {\n for (const quantity of quantities) {\n assert(\n quantity.name === quantityNameSearch || has(filterData, quantity.name),\n `Quantity ${quantity.name} does not exist in the current search context.`\n )\n }\n quantityList = [...quantities]\n quantitySetSuggestable = new Set(\n quantityList\n .map(q => q.name)\n .filter(name => name === quantityNameSearch || filterData[name]?.suggestion)\n )\n // Default quantities to use. Certain quantities are prioritized, others\n // come in alphabetical order.\n } else {\n quantitySetSuggestable = new Set([\n 'results.material.elements',\n 'results.material.chemical_formula_hill',\n 'results.material.chemical_formula_anonymous',\n 'results.material.structural_type',\n 'results.material.symmetry.structure_name',\n 'results.method.simulation.program_name',\n 'authors.name'\n ])\n const filterList = [...filters]\n filterList.forEach(q => quantitySetSuggestable.add(q))\n quantityList = filterList.map((name) => ({name, size: 5}))\n // The list of available quantity names is provided at the very\n // bottom.\n quantitySetSuggestable.add(quantityNameSearch)\n quantityList.push({name: quantityNameSearch})\n }\n const quantitySet = new Set(quantityList.map((q) => q.name))\n return [quantityList, quantitySet, quantitySetSuggestable]\n }, [quantities, filterData, filters])\n\n const [suggestionNames, setSuggestionNames] = useState(quantitiesSuggestable)\n const suggestionQuantities = useMemo(() => {\n return quantitiesAll.filter((q) => suggestionNames.has(q.name))\n }, [quantitiesAll, suggestionNames])\n\n const [suggestionsMatch, setSuggestionsMatch] = useState([])\n const pushSuggestion = usePushSearchSuggestion()\n const removeSuggestion = useRemoveSearchSuggestion()\n const suggestionsHistory = useSearchSuggestions(inputValue)\n const [suggestionsMetainfo, loading] = useSuggestions(suggestionQuantities, quantitiesAllSet, suggestionInput, filterData)\n\n // Contains the final set of suggestions\n const [suggestions, keys] = useMemo(() => {\n const suggestions = {}\n\n for (const suggestion of suggestionsMatch) {\n suggestions[suggestion.key] = suggestion\n }\n\n for (const suggestion of suggestionsHistory) {\n suggestions[suggestion.key] = suggestion\n }\n\n for (const suggestion of suggestionsMetainfo) {\n let input, type\n if (suggestion.category === quantityNameSearch) {\n type = SuggestionType.Name\n input = suggestion.value\n } else {\n type = SuggestionType.Equality\n input = `${suggestion.category} = ${suggestion.value}`\n }\n const suggestionObject = new SearchSuggestion({input, type})\n const key = suggestionObject.key\n if (!has(suggestions, key)) {\n suggestions[key] = suggestionObject\n }\n }\n return [suggestions, Object.keys(suggestions)]\n }, [suggestionsMatch, suggestionsHistory, suggestionsMetainfo])\n\n const clearSuggestions = useCallback(() => {\n setSuggestionInput('')\n setSuggestionsMatch([])\n }, [])\n\n const clearInput = useCallback(() => {\n setError(error => error ? undefined : null)\n setInputValue('')\n setSuggestionInput('')\n }, [])\n\n // Used to check the validity of the given quantity name\n const checkMetainfo = useCallback((name) => {\n const fullName = filterFullnames[name] || name\n if (!quantitiesAllSet.has(fullName)) {\n return [undefined, `The quantity '${name}' is not supported`]\n }\n if (filterData[fullName].section) {\n return [fullName, `Cannot target metainfo sections`]\n }\n return [fullName, undefined]\n }, [quantitiesAllSet, filterData, filterFullnames])\n\n // Get suggestions based on the current input and the supported query syntaxes\n const getSuggestionsMatch = useCallback((input) => {\n input = input?.trim()\n if (!input?.length) {\n return []\n }\n const suggestions = []\n for (const key of includedFormats) {\n // regex.test() is significantly faster than string.match()\n const match = SearchSyntaxes[key].regex.test(input)\n if (match) {\n suggestions.push(new SearchSuggestion({input, type: key}))\n }\n }\n return suggestions\n }, [includedFormats])\n\n // Triggered when the user selects a highlighted item with mouse or with\n // keyboard.\n const handleAccept = useCallback((key) => {\n let suggestion = suggestions[key]\n if (!suggestion) {\n const bestSuggestion = suggestions[keys[0]]\n if (bestSuggestion?.input?.trim() === key?.trim()) {\n suggestion = bestSuggestion\n } else {\n setError('Unsupported query')\n return\n }\n }\n if (suggestion.type === SuggestionType.Name) {\n setInputValue(suggestion.input)\n return\n }\n\n // Parse the suggestion using the matched format\n const format = SearchSyntaxes[suggestion.type]\n const {target: targetTmp, value: valueTmp, inputNormalized} = format.parse(suggestion.input)\n\n // Check that targeted metainfo is ok, and attempt to parse the query\n const [target, errorMeta] = checkMetainfo(targetTmp)\n let value, errorQuery\n if (!errorMeta) {\n try {\n value = parseQuery(target, valueTmp)\n } catch (err) {\n errorQuery = `Invalid value for the metainfo ${target}. Please check your syntax.`\n }\n }\n\n // Catch any errors and raise them\n const error = errorMeta || errorQuery\n if (error) {\n setError(error)\n return\n }\n\n // The pagination is explicitly set to be done by descending relevance\n // score if a free-text query is performed\n if (suggestion.type === SuggestionType.Freetext) {\n setPagination(old => {\n return {...old, order_by: '_score', order: 'desc'}\n })\n }\n\n // Update the search filter\n updateFilter([target, old => {\n const multiple = filterData[target].multiple\n return (format?.label === SuggestionType.RangeHalfBounded || suggestion.type === SuggestionType.RangeBounded || isNil(old) || !multiple)\n ? value\n : new Set([...old, ...value])\n }])\n\n // We need to create a copy here, since Recoil won't allow mutating object\n // stored in a state.\n const normalizedSuggestion = new SearchSuggestion(suggestion)\n normalizedSuggestion.input = inputNormalized\n\n pushSuggestion(normalizedSuggestion)\n clearSuggestions()\n clearInput()\n }, [checkMetainfo, clearInput, clearSuggestions, filterData, keys, parseQuery, pushSuggestion, suggestions, updateFilter, setPagination])\n\n // When a suggestion is highlighted with keyboard (not mouse), the text field\n // is changed to that suggestion value. Note that this should not trigger the\n // suggestions etc. and this is why we don't set inputValue.\n const handleHighlight = useCallback((key, reason) => {\n if (reason === 'keyboard') {\n const suggestion = suggestions[key]?.input\n if (suggestion) {\n inputRef.current.value = suggestion\n }\n }\n }, [suggestions])\n\n // Handle typing events\n const handleInputChange = useCallback((input) => {\n setError(error => error ? undefined : null)\n setInputValue(input)\n input = input?.trim()\n if (!input) {\n clearSuggestions()\n return\n }\n\n // Get suggestions for making specific queries\n setSuggestionsMatch(getSuggestionsMatch(input))\n\n // Start getting suggestions from ES\n const split = input.split('=', 2)\n let quantitySet = quantitiesSuggestable\n if (split.length === 2) {\n const quantityName = split[0].trim()\n const quantityFullname = filterFullnames[quantityName]\n if (quantitiesSuggestable.has(quantityName)) {\n quantitySet = new Set([quantityName])\n input = split[1].trim()\n } else if (quantitiesSuggestable.has(quantityFullname)) {\n quantitySet = new Set([quantityFullname])\n input = split[1].trim()\n }\n }\n setSuggestionNames(quantitySet)\n setSuggestionInput(input)\n }, [quantitiesSuggestable, filterFullnames, getSuggestionsMatch, clearSuggestions])\n\n return \n \n \n
\n})\n\nListboxSuggestion.propTypes = {\n children: PropTypes.node\n}\n\nconst OuterElementType = React.forwardRef((props, ref) => {\n const outerProps = useContext(OuterElementContext)\n return \n})\n\nexport default SearchBar\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useContext, useEffect, useState, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { DoesNotExist } from '../api'\nimport { useDataStore } from '../DataStore'\nimport { useHistory } from 'react-router-dom'\nimport { getUrl } from '../nav/Routes'\nimport { apiBase } from '../../config'\n\nexport const uploadPageContext = React.createContext()\n\nexport function useUploadPageContext() {\n return useContext(uploadPageContext)\n}\n\nconst UploadPageContext = React.memo(function UploadPageContext({uploadId, children}) {\n const dataStore = useDataStore()\n dataStore.resetIfNeeded(uploadId)\n const [uploadStoreObj, setUploadStoreObj] = useState(dataStore.getUpload(apiBase, uploadId))\n\n const onUploadStoreUpdated = useCallback((oldStoreObj, newStoreObj) => {\n setUploadStoreObj(newStoreObj)\n }, [setUploadStoreObj])\n\n useEffect(() => {\n return dataStore.subscribeToUpload(apiBase, uploadId, onUploadStoreUpdated, true, true)\n }, [dataStore, uploadId, onUploadStoreUpdated])\n\n const history = useHistory()\n\n useEffect(() => {\n if (uploadStoreObj.error && uploadStoreObj.error instanceof DoesNotExist && uploadStoreObj.deletionRequested) {\n history.push(getUrl('user/uploads', new URL(window.location.href).pathname))\n }\n })\n\n return - \n
\n \n {children}\n \n
\n \n {children}\n
\n \n \n
\n \n}\n\nPropertyItem.propTypes = {\n title: PropTypes.string,\n align: PropTypes.string,\n height: PropTypes.string.isRequired,\n minHeight: PropTypes.string,\n className: PropTypes.string,\n classes: PropTypes.object,\n children: PropTypes.any\n}\n\nPropertyItem.defaultProps = {\n height: '400px'\n}\n\n/**\n * For displaying the provenance for a property.\n */\nconst usePropertyProvenanceListStyle = makeStyles(theme => ({\n column: {\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n },\n content: {\n flex: 1,\n minHeight: 0 // min-height: 0 to allow the item to shrink to fit inside the container.\n }\n}))\nexport function PropertyProvenanceList({className, classes, children, ...other}) {\n const styles = usePropertyProvenanceListStyle({classes: classes})\n return \n {children}\n
\n \n
\n \n {children}\n
\n \n \n \n \n
\n )\n})\nUserMetadata.propTypes = {\n data: PropTypes.object.isRequired\n}\n\nexport const EntryIds = React.memo(({data}) => {\n return (\n \n \n {/* \n \n
\n )\n})\nEntryIds.propTypes = {\n data: PropTypes.object.isRequired\n}\n\nexport const VisitEntryAction = React.memo(({data, ...props}) => {\n // The visit button is hidden if the entry is still processing.\n if (data.process_running) {\n return null\n }\n\n // The exit transition is disabled for this tooltip because this button causes\n // a navigation that does not fully remove the button from the DOM (the page\n // is cached and a new page is shown immediately). If the exit transition is\n // left on, the button can flicker on the new page.\n return \n
\n )\n})\nEntryDetails.propTypes = {\n data: PropTypes.object.isRequired\n}\n\nexport default EntryDetails\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { IconButton } from '@material-ui/core'\nimport { MaterialButton } from '../nav/Routes'\nimport DetailsIcon from '@material-ui/icons/ArrowForward'\n\nexport const MaterialRowActions = React.memo(({data, ...rest}) => {\n return \n
\n\n \n
\n\n \n \n \n
\n\n \n \n \n
\n \n \n Go to the entry page\n \n
\n \n
\n})\n\nScrollable.propTypes = {\n onBottom: PropTypes.func, // Callback that is fired when bottom reached\n scrollBar: PropTypes.bool, // Whether to show native scrollbar\n hints: PropTypes.bool, // Whether to show scroll hints\n fixed: PropTypes.bool, // Whether to show scroll hints\n footer: PropTypes.object, // A fixed component that is shown at the bottom\n className: PropTypes.string,\n classes: PropTypes.object,\n children: PropTypes.any,\n 'data-testid': PropTypes.string\n}\nScrollable.defaultProps = {\n scrollBar: false,\n hints: true\n}\n\nexport default Scrollable\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n Checkbox,\n MenuItem,\n FormControlLabel\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { useSearchContext } from '../SearchContext'\n\n/**\n * Menu showing the Filter settings.\n */\nconst useStyles = makeStyles((theme) => {\n return {\n root: {\n },\n menuItem: {\n width: '10rem'\n },\n systems: {\n margin: theme.spacing(2),\n marginTop: theme.spacing(1)\n }\n }\n})\nconst FilterSettings = React.memo(({\n className,\n classes,\n 'data-testid': testID\n}) => {\n const styles = useStyles(classes)\n const {\n useIsStatisticsEnabled,\n useSetIsStatisticsEnabled\n } = useSearchContext()\n const [isStatisticsEnabled, setIsStatisticsEnabled] = [useIsStatisticsEnabled(), useSetIsStatisticsEnabled()]\n\n const handleStatsChange = useCallback((event, value) => {\n setIsStatisticsEnabled(value)\n }, [setIsStatisticsEnabled])\n\n return \n {(hints && isOverflowing && !isTop) &&
\n \n \n
}\n \n
\n {(hints && isOverflowing && !isBottom) && \n {children}\n {footer}\n
\n \n \n
}\n \n \n
\n})\n\nFilterSettings.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nexport default FilterSettings\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useState, useCallback, useContext, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\nimport {\n List,\n ListItem,\n ListItemText,\n ListItemIcon,\n Divider,\n Paper,\n Menu,\n Typography\n} from '@material-ui/core'\nimport ArrowForwardIcon from '@material-ui/icons/ArrowForward'\nimport ArrowBackIcon from '@material-ui/icons/ArrowBack'\nimport NavigateNextIcon from '@material-ui/icons/NavigateNext'\nimport MoreVert from '@material-ui/icons/MoreVert'\nimport Scrollable from '../../visualization/Scrollable'\nimport FilterSettings from './FilterSettings'\nimport { Actions, ActionHeader, Action } from '../../Actions'\nimport { useSearchContext } from '../SearchContext'\nimport { pluralize } from '../../../utils'\nimport { isNil } from 'lodash'\n\n// The menu animations use a transition on the 'transform' property. Notice that\n// animating 'transform' instead of e.g. the 'left' property is much more\n// performant. We also hint the browser that the transform property will be\n// animated using the 'will-change' property: this will pre-optimize the element\n// for animation when possible (the recommendation is to remove/add it when\n// needed, but in this case we keep it on constantly).\n//\n// The menu widths are hardcoded. We need the widths to perform the close\n// animation. Another option would be to use useLayoutEffect to determine the\n// sizes of the components dynamically, but this seems to be quite a bit less\n// responsive compared to hardcoding the values.\n\nexport const filterMenuContext = React.createContext()\nconst paddingHorizontal = 1.5\nexport const collapsedMenuWidth = 3.3\n\n// Topmost header for filter menus. Contains menu actions and an overline text\nconst useFilterMenuTopHeaderStyles = makeStyles(theme => {\n return {\n root: {\n paddingTop: theme.spacing(1.2),\n paddingRight: theme.spacing(paddingHorizontal),\n paddingLeft: theme.spacing(paddingHorizontal)\n },\n title: {\n display: 'flex',\n alignItems: 'center',\n fontSize: '0.75rem',\n marginTop: -3,\n marginBottom: -3\n }\n }\n})\nexport const FilterMenuTopHeader = React.memo(({\n title,\n actions,\n className\n}) => {\n const styles = useFilterMenuTopHeaderStyles()\n return \n \n \n {title} \n \n {actions}\n \n
\n})\nFilterMenuTopHeader.propTypes = {\n overlineTitle: PropTypes.string,\n title: PropTypes.string,\n topAction: PropTypes.node,\n actions: PropTypes.node,\n className: PropTypes.string\n}\n\n// Header for filter menus. Contains panel actions and an overline text.\nconst useFilterMenuHeaderStyles = makeStyles(theme => {\n return {\n root: {\n height: theme.spacing(3),\n paddingBottom: theme.spacing(1.1),\n paddingTop: theme.spacing(0.3),\n paddingLeft: theme.spacing(paddingHorizontal),\n paddingRight: theme.spacing(paddingHorizontal),\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center'\n },\n title: {\n display: 'flex',\n alignItems: 'center',\n fontSize: '0.90rem'\n }\n }\n})\nexport const FilterMenuHeader = React.memo(({\n title,\n actions,\n className,\n 'data-testid': testID\n}) => {\n const styles = useFilterMenuHeaderStyles()\n return \n \n \n {title} \n \n {actions}\n \n
\n})\n\nFilterMenuHeader.propTypes = {\n overlineTitle: PropTypes.string,\n title: PropTypes.string,\n topAction: PropTypes.node,\n actions: PropTypes.node,\n className: PropTypes.string,\n 'data-testid': PropTypes.string\n}\n\nconst useFilterMenuStyles = makeStyles(theme => {\n const width = 22\n return {\n root: {\n boxSizing: 'border-box',\n display: 'flex',\n position: 'relative',\n flexDirection: 'column',\n width: `${width}rem`,\n height: '100%',\n '-webkit-transform': 'none',\n transform: 'none',\n transition: 'transform 250ms',\n willChange: 'transform'\n },\n collapsed: {\n '-webkit-transform': `translateX(-${width - collapsedMenuWidth}rem)`,\n transform: `translateX(-${width - collapsedMenuWidth}rem)`\n }\n }\n})\n\nexport const FilterMenu = React.memo(({\n selected,\n onSelectedChange,\n open,\n onOpenChange,\n collapsed,\n onCollapsedChange,\n className,\n children\n}) => {\n const styles = useFilterMenuStyles()\n const [size, setSize] = useState('m')\n\n const handleChange = useCallback((newValue) => {\n if (newValue !== selected) {\n onOpenChange(true)\n } else {\n onOpenChange(old => !old)\n }\n onSelectedChange && onSelectedChange(newValue)\n }, [selected, onSelectedChange, onOpenChange])\n\n return \n \n {children}\n \n
\n})\nFilterMenu.propTypes = {\n selected: PropTypes.string,\n onSelectedChange: PropTypes.func,\n open: PropTypes.bool,\n onOpenChange: PropTypes.func,\n collapsed: PropTypes.bool,\n onCollapsedChange: PropTypes.func,\n className: PropTypes.string,\n children: PropTypes.node\n}\n\nconst useFilterMenuItemsStyles = makeStyles(theme => {\n return {\n root: {\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n backgroundColor: theme.palette.background.paper,\n zIndex: 3\n },\n headerTextVertical: {\n display: 'flex',\n alignItems: 'center',\n position: 'absolute',\n right: '0.07rem',\n top: '2.5rem',\n height: `${collapsedMenuWidth}rem`,\n transform: 'rotate(90deg)'\n },\n menu: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n left: 0,\n boxSizing: 'border-box'\n },\n menuBorder: {\n boxShadow: `1px 0px 0px 0px ${theme.palette.action.selected}`\n },\n padding: {\n paddingBottom: `${theme.spacing(1.5)}px`\n },\n button: {\n marginRight: 0,\n '-webkit-transform': 'none',\n transform: 'none',\n transition: 'transform 250ms',\n willChange: 'transform'\n },\n hidden: {\n display: 'none'\n },\n overflow: {\n overflow: 'visible'\n },\n list: {\n paddingTop: 0\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n },\n content: {\n flex: 1,\n minHeight: 0\n },\n collapsedActions: {\n paddingTop: theme.spacing(0.7),\n paddingLeft: theme.spacing(paddingHorizontal),\n paddingRight: theme.spacing(paddingHorizontal)\n }\n }\n})\nexport const FilterMenuItems = React.memo(({\n className,\n children\n}) => {\n // const { useResetFilters, useRefresh, useApiData } = useSearchContext()\n const styles = useFilterMenuItemsStyles()\n const { open, onOpenChange, collapsed, onCollapsedChange } = useContext(filterMenuContext)\n const [anchorEl, setAnchorEl] = React.useState(null)\n const isSettingsOpen = Boolean(anchorEl)\n\n // Callbacks\n const openMenu = useCallback((event) => {\n setAnchorEl(event.currentTarget)\n }, [])\n const closeMenu = useCallback(() => {\n setAnchorEl(null)\n }, [])\n\n // Unfortunately the ClickAwayListener does not play nicely together with\n // Menus/Select/Popper. When using Portals, the clicks are registered wrong.\n // When Portals are disabled (disablePortal), their positioning goes haywire.\n // The clicks outside are thus detected by individual event listeners that\n // toggle the menu state.\n return \n
\n})\nFilterMenuItems.propTypes = {\n className: PropTypes.string,\n children: PropTypes.node\n}\n\nconst levelIndent = 1.8\nconst leftGutter = 3.0\nconst rightGutter = 2.35\nconst itemHeight = 2.6\nconst useFilterMenuItemStyles = makeStyles(theme => {\n return {\n root: {\n minHeight: `${itemHeight}rem`\n },\n label: {\n textTransform: 'capitalize'\n },\n listIcon: {\n fontsize: '1rem',\n minWidth: '1.5rem'\n },\n arrow: {\n marginLeft: theme.spacing(1),\n fontSize: '1.5rem'\n },\n gutters: {\n paddingLeft: theme.spacing(leftGutter),\n paddingRight: theme.spacing(rightGutter)\n },\n listItem: {\n position: 'relative',\n height: `${itemHeight}rem`\n },\n actions: {\n display: 'flex',\n flexDirection: 'column',\n paddingLeft: theme.spacing(leftGutter),\n paddingRight: theme.spacing(rightGutter)\n },\n divider: {\n width: '100%',\n backgroundColor: theme.palette.grey[300]\n }\n }\n})\nexport const FilterMenuItem = React.memo(({\n id,\n label,\n onClick,\n actions,\n disableButton,\n level\n}) => {\n const styles = useFilterMenuItemStyles()\n const theme = useTheme()\n const { selected, open, onChange } = useContext(filterMenuContext)\n const handleClick = disableButton ? undefined : (onClick || onChange)\n const opened = open && id === selected\n\n return \n
\n \n \n {\n onCollapsedChange(old => !old)\n onOpenChange(false)\n }}\n // className={styles.button}\n >\n \n \n \n \n \n \n
\n \n
\n \n }\n />\n \n \n \n
\n \n
\n - \n {children}\n
\n \n {collapsed && {\n onCollapsedChange(false)\n }}\n className={styles.button}\n >\n \n }\n \n Filters\n \n
\n \n {(label || handleClick) &&\n handleClick(id))}\n >\n {label && \n \n }\n }\n {actions && \n {actions}\n
}\n \n { onOpenChange(false) }}\n className={styles.button}\n >\n \n }\n />\n
\n \n})\nFilterSubMenus.propTypes = {\n sizes: PropTypes.object,\n children: PropTypes.node\n}\n\nconst useFilterSubMenuStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n },\n hidden: {\n display: 'none'\n },\n padding: {\n paddingBottom: theme.spacing(1.5),\n paddingLeft: theme.spacing(paddingHorizontal),\n paddingRight: theme.spacing(paddingHorizontal)\n },\n content: {\n flex: 1,\n minHeight: 0\n }\n}))\n\nexport const FilterSubMenu = React.memo(({\n id,\n label,\n size,\n actions,\n children\n}) => {\n const styles = useFilterSubMenuStyles()\n const { selected, onSizeChange } = useContext(filterMenuContext)\n const visible = id === selected\n useEffect(() => {\n if (visible) {\n onSizeChange(size)\n }\n }, [size, visible, onSizeChange])\n\n return \n {children}\n
\n \n \n
\n})\nFilterSubMenu.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),\n actions: PropTypes.node,\n children: PropTypes.node\n}\nFilterSubMenu.defaultProps = {\n size: 's'\n}\n\nexport default FilterSubMenu\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport {\n Grid,\n Divider,\n makeStyles\n} from '@material-ui/core'\n\n/**\n * For displaying a grid of input properties.\n *\n * Notice that we have to use a workaround for the MUI grid item in order to\n * prevent horizontal overflow. A padding is applied to the parent element as\n * described in https://v4.mui.com/components/grid/#negative-margin\n */\nconst inputGridSpacing = 2\nconst useInputGridStyles = makeStyles(theme => ({\n root: {\n paddingLeft: theme.spacing(inputGridSpacing / 2),\n paddingRight: theme.spacing(inputGridSpacing / 2)\n }\n}))\nexport function InputGrid({children}) {\n const styles = useInputGridStyles()\n return \n \n {children}\n \n
\n \n \n {children}\n \n
\n}\n\nInputGrid.propTypes = {\n children: PropTypes.any\n}\n\n/**\n * For displaying an individual input filter, typically within a InputGrid.\n */\nconst useInputGridItemStyles = makeStyles(theme => ({\n root: {\n marginBottom: theme.spacing(inputGridSpacing / 2)\n },\n content: {\n paddingLeft: theme.spacing(inputGridSpacing / 4),\n paddingRight: theme.spacing(inputGridSpacing / 4)\n },\n divider: {\n marginLeft: theme.spacing(-inputGridSpacing / 2),\n marginRight: theme.spacing(-inputGridSpacing / 2),\n marginTop: theme.spacing(-inputGridSpacing / 2),\n marginBottom: theme.spacing(inputGridSpacing / 4),\n backgroundColor: theme.palette.grey[300]\n }\n}))\nexport function InputGridItem({classes, children, ...other}) {\n const styles = useInputGridItemStyles({classes: classes})\n return \n {children}\n
\n \n \n {labelFinal} }\n />\n \n
\n})\n\nInputCheckbox.propTypes = {\n quantity: PropTypes.string.isRequired,\n label: PropTypes.string,\n description: PropTypes.string,\n initialValue: PropTypes.bool,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nexport default InputCheckbox\n\n/**\n * A checkbox where the selection activates a specific value within a quantity.\n */\nconst useInputCheckboxValueStyles = makeStyles(theme => ({\n root: {\n '& > :last-child': {\n marginRight: -3\n }\n },\n control: {\n padding: 6\n }\n}))\nexport const InputCheckboxValue = React.memo(({\n quantity,\n description,\n value,\n className,\n classes,\n 'data-testid': testID\n}) => {\n const theme = useTheme()\n const styles = useInputCheckboxValueStyles({classes: classes, theme: theme})\n const {filterData, useFilterState} = useSearchContext()\n const [filter, setFilter] = useFilterState(quantity)\n\n // Determine the description and units\n const def = filterData[quantity]\n const descFinal = description || def?.description || ''\n\n const handleChange = useCallback(() => {\n setFilter(old => {\n const newValue = old ? new Set(old) : new Set()\n newValue.has(value) ? newValue.delete(value) : newValue.add(value)\n return newValue\n })\n }, [setFilter, value])\n\n return \n \n \n
\n})\n\nInputCheckboxValue.propTypes = {\n quantity: PropTypes.string.isRequired,\n description: PropTypes.string,\n value: PropTypes.any,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useMemo, useCallback, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { isNil } from 'lodash'\nimport elementData from '../../../elementData'\nimport { useResizeDetector } from 'react-resize-detector'\nimport { Tooltip } from '@material-ui/core'\nimport InputHeader from './InputHeader'\nimport InputCheckbox from './InputCheckbox'\nimport { makeStyles, useTheme, lighten } from '@material-ui/core/styles'\nimport { useSearchContext } from '../SearchContext'\nimport { approxInteger } from '../../../utils'\nimport { getScaler } from '../../plotting/common'\n\n/**\n * A single element in the periodic table.\n*/\nconst useElementStyles = makeStyles(theme => ({\n text: {\n fontFamily: theme.typography.fontFamily,\n fill: theme.palette.text.default,\n userSelect: 'none',\n pointerEvents: 'none'\n },\n rect: {\n transition: 'fill .15s ease',\n cursor: 'pointer',\n '&:hover': {\n filter: 'drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4))'\n }\n },\n rectDisabled: {\n cursor: 'auto',\n '&:hover': {\n filter: 'unset'\n }\n },\n label: {\n fontSize: '1rem',\n fontWeight: 600\n },\n number: {\n fontSize: '0.58rem'\n },\n count: {\n fontSize: '0.58rem'\n }\n}))\n\nconst Element = React.memo(({\n x,\n y,\n width,\n height,\n element,\n selected,\n disabled,\n onClick,\n disableStatistics,\n max,\n count,\n scale\n}) => {\n const styles = useElementStyles()\n const theme = useTheme()\n const scaler = useMemo(() => getScaler(scale, [0, max], [0.2, 1]), [scale, max])\n const finalCount = useMemo(() => approxInteger(count || 0), [count])\n const finalScale = useMemo(() => scaler(count), [count, scaler])\n const disabledFinal = disabled && !selected\n const color = selected\n ? theme.palette.secondary.main\n : disabled\n ? '#eee'\n : disableStatistics\n ? theme.palette.primary.light\n : lighten(theme.palette.primary.light, 1 - finalScale)\n const strokeColor = disabledFinal\n ? theme.palette.text.disabled\n : '#555'\n const textColor = selected\n ? 'white'\n : disabled\n ? theme.palette.text.disabled\n : theme.palette.text.default\n\n const handleClick = useCallback(() => {\n if (disabledFinal) return\n onClick && onClick()\n }, [onClick, disabledFinal])\n\n return \n \n {(width && height) &&\n elementData.elements.map((element) => (\n onElementClicked(element.symbol)}\n selected={filter?.has(element.symbol)}\n max={max}\n count={availableValues[element.symbol]}\n scale={scale}\n x={padding + (element.xpos - 1) * (cellWidth + margin)}\n y={padding + (element.ypos - 1) * (cellHeight + margin)}\n width={cellWidth}\n height={cellHeight}\n disableStatistics={disableStatistics}\n />\n ))\n }\n \n
\n})\n\nPeriodicTable.propTypes = {\n quantity: PropTypes.string,\n label: PropTypes.string,\n description: PropTypes.string,\n visible: PropTypes.bool,\n scale: PropTypes.string,\n anchored: PropTypes.bool,\n disableStatistics: PropTypes.bool,\n aggId: PropTypes.string,\n className: PropTypes.string,\n 'data-testid': PropTypes.string\n}\n\nPeriodicTable.defaultProps = {\n aggId: 'default',\n 'data-testid': 'periodictable'\n}\n\n/**\n * Periodic table that directly shows the targeted quantity along with some\n * extra controls.\n */\nconst useInputPeriodicTableStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column'\n }\n}))\nconst InputPeriodicTable = React.memo(({\n quantity,\n label,\n description,\n visible,\n initialScale,\n anchored,\n disableStatistics,\n aggId,\n className\n }) => {\n const styles = useInputPeriodicTableStyles()\n const [scale, setScale] = useState(initialScale)\n const {filterData} = useSearchContext()\n\n // Determine the description and title\n const def = filterData[quantity]\n const descFinal = description || def?.description || ''\n const labelFinal = label || def?.label\n\n return \n \n
\n \n
\n})\n\nInputPeriodicTable.propTypes = {\n quantity: PropTypes.string,\n label: PropTypes.string,\n description: PropTypes.string,\n visible: PropTypes.bool,\n initialScale: PropTypes.string,\n anchored: PropTypes.bool,\n disableStatistics: PropTypes.bool,\n aggId: PropTypes.string,\n className: PropTypes.string\n}\n\nInputPeriodicTable.defaultProps = {\n initialScale: 'linear'\n}\n\nexport default InputPeriodicTable\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useMemo } from 'react'\nimport clsx from 'clsx'\nimport { Typography, Tooltip } from '@material-ui/core/'\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\nimport PropTypes from 'prop-types'\nimport { approxInteger } from '../../../utils'\nimport { getScaler } from '../../plotting/common'\n\n/**\n * A rectangular bar displaying the relative occurence of a specific value. Uses\n * an animated CSS transform to react to changes in the bar size. Notice that\n * using a transform is much more performant than animating the width.\n */\nconst useStyles = makeStyles(theme => ({\n root: {\n },\n container: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n rectangle: {\n backgroundColor: theme.palette.primary.light,\n width: '100%',\n height: '100%',\n '-webkit-transform': 'none',\n transform: 'none',\n transition: 'transform 250ms',\n transformOrigin: 'bottom left',\n willChange: 'transform'\n },\n value: {\n position: 'absolute',\n right: theme.spacing(1),\n top: 0,\n bottom: 0\n }\n}))\nconst StatisticsBar = React.memo(({\n max,\n value,\n scale,\n selected,\n vertical,\n disabled,\n disableValue,\n tooltip,\n onClick,\n className,\n classes,\n 'data-testid': testID\n}) => {\n const styles = useStyles(classes)\n const theme = useTheme()\n\n // Calculate the approximated count and the final scaled value\n const scaler = useMemo(() => scale ? getScaler(scale, [0, max]) : (value) => value, [scale, max])\n const finalCount = useMemo(() => approxInteger(value || 0), [value])\n const finalScale = useMemo(() => scaler(value), [value, scaler])\n\n return \n \n \n
\n})\n\nStatisticsBar.propTypes = {\n max: PropTypes.number,\n value: PropTypes.number,\n scale: PropTypes.string,\n selected: PropTypes.bool,\n disabled: PropTypes.bool,\n disableValue: PropTypes.bool,\n tooltip: PropTypes.string,\n vertical: PropTypes.bool,\n onClick: PropTypes.func,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nexport default StatisticsBar\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport {\n Checkbox,\n Radio,\n Tooltip,\n Typography,\n FormControlLabel\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport StatisticsBar from '../widgets/StatisticsBar'\n\n/**\n * Represents a selectable item for a filter value.\n*/\nexport const inputItemHeight = 34\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n height: inputItemHeight,\n position: 'relative'\n },\n controlLabel: {\n width: '100%',\n height: '100%',\n margin: 0\n },\n labelContainer: {\n height: '100%',\n width: '100%'\n },\n labelPlacementStart: {\n margin: 0\n },\n container: {\n position: 'relative',\n height: '100%',\n width: '100%'\n },\n label: {\n position: 'absolute',\n top: 0,\n left: theme.spacing(0.5),\n right: 0,\n bottom: 0,\n lineHeight: '100%',\n textAlign: 'center',\n display: 'flex',\n alignItems: 'center'\n },\n bar: {\n position: 'absolute',\n top: theme.spacing(0.8),\n left: 0,\n right: 0,\n bottom: theme.spacing(0.8)\n }\n}))\nconst InputItem = React.memo(({\n value,\n label,\n selected,\n onChange,\n disabled,\n tooltip,\n variant,\n max,\n count,\n scale,\n disableStatistics,\n labelPlacement,\n disableLabelClick,\n disableSelect,\n className,\n classes,\n 'data-testid': testID,\n ...moreProps\n}) => {\n const styles = useStyles(classes)\n\n const finalLabel = label || `${value}`\n const handleChange = useCallback((event) => {\n if (!disabled && onChange) onChange(event, value, !selected)\n }, [value, disabled, onChange, selected])\n\n let Control\n if (variant === 'radio') {\n Control = Radio\n } else if (variant === 'checkbox') {\n Control = Checkbox\n }\n\n // Component that contains the label and the statistics\n const labelComponent = \n \n {!disableValue && {finalCount} }\n
\n \n {!disableStatistics &&
\n\n return \n \n {finalLabel} \n \n
\n \n {disableSelect\n ? labelComponent\n :
\n})\n\nInputItem.propTypes = {\n value: PropTypes.any, // The actual value\n label: PropTypes.string, // The name to show\n selected: PropTypes.bool, // Whether the option is selected or not\n onChange: PropTypes.func, // Callback when selecting\n disabled: PropTypes.bool, // Whether the option should be disabled\n tooltip: PropTypes.string, // Tooltip that is shown for label\n variant: PropTypes.oneOf(['radio', 'checkbox']), // The type of item to display\n max: PropTypes.number, // Maximum for statistics\n count: PropTypes.number, // Count of these values for statistics\n scale: PropTypes.string, // Scaling of the statistics\n disableStatistics: PropTypes.bool, // Use to disable statistics for this item\n labelPlacement: PropTypes.oneOf(['start', 'end']), // Controls the label placement\n disableLabelClick: PropTypes.bool, // Whether clicking the label is enabled\n disableSelect: PropTypes.bool, // Whether the checkbox is shown\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nInputItem.defaultProps = {\n labelPlacement: 'end'\n}\n\nexport default InputItem\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { Typography, makeStyles } from '@material-ui/core'\n\n/**\n * Indicates that no input options are available with the current query\n * settings.\n */\nconst useStyles = makeStyles(theme => ({\n root: {\n fontStyle: 'italic',\n color: theme.palette.text.disabled\n }\n}))\nexport default function InputUnavailable({className}) {\n const styles = useStyles()\n return \n
\n \n {aggComp}\n
\n }, [\n disableOptions,\n disableStatistics,\n agg,\n finalOptions,\n minSize,\n fixedOptions,\n receivedAggSize,\n requestedAggSize,\n incr,\n xs,\n aggCollapse,\n visibleOptions,\n styles,\n aggIndicator,\n initialSize,\n handleChange,\n scale,\n handleShowMore,\n handleShowLess,\n loading,\n nFixedOptions,\n testID\n ]\n )\n\n return \n
\n})\n\nInputField.propTypes = {\n quantity: PropTypes.string.isRequired,\n label: PropTypes.string,\n description: PropTypes.string,\n visible: PropTypes.bool,\n xs: PropTypes.number,\n initialScale: PropTypes.number, // The initial statistics scaling\n initialSize: PropTypes.number, // The initial maximum number of items to load\n increment: PropTypes.number, // The amount of new items to load on 'show more'\n disableStatistics: PropTypes.bool, // Whether to disable statistics\n disableSearch: PropTypes.bool, // Whether to show the search field\n disableOptions: PropTypes.bool, // Whether to show the options gathered through aggregations\n disableSuggestions: PropTypes.bool, // Whether to disable the text field suggestions\n formatLabels: PropTypes.bool, // Whether to reformat the options labels\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nInputField.defaultProps = {\n xs: 12\n}\n\nexport default InputField\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport clsx from 'clsx'\nimport { makeStyles } from '@material-ui/core/styles'\nimport PropTypes from 'prop-types'\n\n/**\n * Tick used in plots.\n */\nconst usePlotTickStyles = makeStyles(theme => ({\n root: {\n backgroundColor: theme.palette.grey[500]\n }\n}))\nconst PlotTick = React.memo(({\n length,\n thickness,\n orientation,\n className,\n classes,\n 'data-testid': testID\n}) => {\n const styles = usePlotTickStyles(classes)\n return \n {label}\n \n \n
\n})\n\nPlotLabel.propTypes = {\n label: PropTypes.string,\n size: PropTypes.number,\n labelPadding: PropTypes.number,\n tickLength: PropTypes.number,\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nPlotLabel.defaultProps = {\n size: 6,\n labelPadding: 3,\n orientation: 'horizontal'\n}\n\nexport default PlotLabel\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useMemo } from 'react'\nimport clsx from 'clsx'\nimport { format } from 'date-fns'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { isArray, isNil } from 'lodash'\nimport { useResizeDetector } from 'react-resize-detector'\nimport { getScaler, getTicks } from './common'\nimport { formatNumber, DType } from '../../utils'\nimport PlotLabel from './PlotLabel'\nimport PlotTick from './PlotTick'\nimport PropTypes from 'prop-types'\n\n/**\n * Represents a plot axis. Can be oriented to fit different sides of a plot\n * using the placement argument.\n */\nconst usePlotAxisStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n position: 'relative',\n overflow: 'hidden'\n },\n left: {\n flexDirection: 'row',\n height: '100%'\n },\n bottom: {\n flexDirection: 'column-reverse',\n width: '100%'\n },\n labelContainer: {\n position: 'relative'\n },\n labelPositioner: {\n position: 'absolute'\n },\n topTick: {\n position: 'absolute',\n top: 0,\n right: 0\n },\n verticalAxis: {\n position: 'absolute',\n width: 1,\n right: 0,\n backgroundColor: theme.palette.grey[500]\n },\n horizontalAxis: {\n position: 'absolute',\n height: 1,\n top: 0,\n backgroundColor: theme.palette.grey[500]\n }\n}))\n\nconst PlotAxis = React.memo(({\n min,\n max,\n dtype,\n mode,\n decimals,\n scale,\n labels,\n labelHeight,\n labelWidth,\n placement,\n tickLength,\n labelPadding,\n overflowLeft,\n overflowRight,\n overflowTop,\n overflowBottom,\n className,\n classes,\n 'data-testid': testID}) => {\n const styles = usePlotAxisStyles(classes)\n const {height, width, ref} = useResizeDetector()\n const orientation = {\n left: 'vertical',\n bottom: 'horizontal'\n }[placement]\n const axisSize = orientation === 'vertical'\n ? height\n : width\n const labelSize = (orientation === 'vertical'\n ? labelHeight\n : labelWidth)\n\n // Determine the correct scaler\n const scaler = useMemo(\n () => getScaler(scale, [min, max], [0, axisSize])\n , [scale, min, max, axisSize])\n\n // Determine styles that depend on overflow values\n overflowBottom = isNil(overflowBottom) ? 8 : overflowBottom\n overflowTop = isNil(overflowTop) ? (placement === 'bottom' ? 0 : 8) : overflowTop\n overflowLeft = isNil(overflowLeft) ? (placement === 'bottom' ? 0 : 8) : overflowLeft\n overflowRight = isNil(overflowRight) ? (placement === 'left' ? 0 : 8) : overflowRight\n const rootStyle = useMemo(() => {\n return {\n marginTop: -overflowTop,\n paddingTop: overflowTop,\n marginBottom: -overflowBottom,\n paddingBottom: overflowBottom,\n marginRight: -overflowRight,\n paddingRight: overflowRight,\n marginLeft: -overflowLeft,\n paddingLeft: overflowLeft\n }\n }, [overflowBottom, overflowLeft, overflowRight, overflowTop])\n const axisStyle = useMemo(() => {\n let axisStyle\n if (placement === 'left') {\n axisStyle = {\n top: overflowTop,\n bottom: overflowBottom - 1\n }\n } else if (placement === 'bottom') {\n axisStyle = {\n left: overflowLeft - 1,\n right: overflowRight - 1\n }\n }\n return axisStyle\n }, [overflowBottom, overflowLeft, overflowRight, overflowTop, placement])\n\n const labelList = useMemo(() => {\n if (!axisSize) {\n return []\n }\n\n // Function for formatting ticks\n const formatTick = (value) => {\n return dtype === DType.Timestamp\n ? format(value, 'MMM d')\n : formatNumber(value, dtype, mode, decimals)\n }\n\n // Manual ticks\n if (isArray(labels)) {\n return labels.map((tick) => ({...tick, label: formatTick(tick.label), pos: scaler(tick.pos) / axisSize}))\n }\n\n // On linear and log axes, the labels are spaced evenly, and the number of\n // labels is calculated from the available space. On non-linearly spaced\n // axes, we calculate the number of labels with formula:\n // axisSize - scaler(max - (max-min) / nLabels) = labelSize\n // -> nLabels = (max-min) / (max - scaler.invert(axisSize - labelSize)\n const padding = 10\n let nItems = (scale === 'linear' || scale === 'log')\n ? Math.floor(axisSize / (labelSize + padding))\n : Math.floor((max - min) / (max - scaler.invert(axisSize - (labelSize + padding))))\n\n // At least two labels should be attempted to be shown\n nItems = Math.max(2, nItems)\n\n // If the scale length is zero, show only one tick\n if (min === max) {\n return [{\n label: formatTick(min),\n pos: 0\n }]\n }\n\n // Get reasonable, human-readable ticks. the .ticks function from d3-scale\n // does not guarantee an upper limit to the number of ticks, so it cannot be\n // directly used.\n return getTicks(min, max, nItems, scale, dtype, mode, decimals)\n .map(({tick, value}) => {\n return {\n label: tick,\n pos: scaler(value) / axisSize\n }\n })\n }, [axisSize, dtype, labelSize, labels, max, min, scaler, mode, decimals, scale])\n\n // Here we estimate the maximum label width. This is a relatively simple\n // approximattion calculated using the font size. A more reliable way would to\n // to actually render to label and measure it's size on the DOM, but this is\n // more expensive.\n const finalLabelWidth = useMemo(() => {\n if (labelWidth) {\n return labelWidth\n }\n const maxCharacters = labelList?.length\n ? Math.max(...labelList.map(label => label.label.length))\n : 0\n const width = tickLength + labelPadding + maxCharacters * 0.56 * labelHeight\n return width\n }, [labelWidth, labelList, tickLength, labelPadding, labelHeight])\n\n return \n \n
}\n \n \n
\n})\n\nPlotAxis.propTypes = {\n min: PropTypes.number,\n max: PropTypes.number,\n scale: PropTypes.string,\n mode: PropTypes.oneOf(['scientific', 'SI', 'standard']),\n decimals: PropTypes.number,\n labels: PropTypes.array,\n placement: PropTypes.oneOf(['left', 'bottom']),\n labelHeight: PropTypes.number,\n labelWidth: PropTypes.number,\n labelPadding: PropTypes.number,\n overflowTop: PropTypes.number,\n overflowBottom: PropTypes.number,\n overflowLeft: PropTypes.number,\n overflowRight: PropTypes.number,\n tickLength: PropTypes.number,\n dtype: PropTypes.string,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nPlotAxis.defaultProps = {\n labelHeight: 12,\n tickLength: 6,\n labelPadding: 3,\n scale: 'linear',\n scientific: true, // Whether to use scientific notation, e.g. 1e+3\n siPostfix: false, // Whether to use SI postfixes, e.g. K, M, B\n decimals: 3 // How many decimals to show for custom labels\n}\n\nexport default PlotAxis\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useMemo } from 'react'\nimport clsx from 'clsx'\nimport { clamp } from 'lodash'\nimport { Tooltip } from '@material-ui/core/'\nimport { makeStyles } from '@material-ui/core/styles'\nimport PropTypes from 'prop-types'\n\n/**\n * Bar within a plot.\n */\nconst usePlotAxisStyles = makeStyles(theme => ({\n root: {\n position: 'absolute',\n cursor: 'pointer',\n height: '100%',\n paddingLeft: '1px',\n paddingRight: '1px'\n },\n container: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n rectangle: {\n width: '100%',\n height: '100%',\n '-webkit-transform': 'none',\n transform: 'none',\n transition: 'transform 250ms',\n transformOrigin: 'bottom left',\n willChange: 'transform',\n backgroundColor: theme.palette.primary.veryLight,\n position: 'relatives'\n },\n highlight: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n backgroundColor: theme.palette.secondary.veryLight\n }\n}))\n\nconst PlotBar = React.memo(({\n startX,\n endX,\n startY,\n endY,\n selected,\n tooltip,\n onClick,\n className,\n classes,\n 'data-testid': testID}) => {\n const styles = usePlotAxisStyles(classes)\n\n const handleClick = useCallback((event) => {\n onClick && onClick(event)\n }, [onClick])\n\n const highlightStyle = useMemo(() => {\n if (selected === false) {\n return {visibility: 'hidden'}\n }\n if (selected === true) {\n return {\n left: '0%',\n right: '0%'\n }\n }\n return {\n left: `${clamp(selected[0] * 100, 0, 100)}%`,\n right: `${clamp((1 - selected[1]) * 100, 0, 100)}%`\n }\n }, [selected])\n\n return \n
\n \n \n
\n \n {Object.values(finalBins).map((item, i) => {\n return handleClick(event, item)}\n />\n })}\n
\n }, [finalBins, xAxis.min, maxX, styles.canvas, calculateSelection, rangeInternal, handleClick, tooltipLabel])\n\n // Create x-axis once axis range is ready\n const xaxis = useMemo(() => {\n if (isNil(finalBins) || isNil(xAxis.min) || isNil(maxX)) {\n return null\n }\n let labels\n\n // One bin is shown for the artificial values\n if (isArtificial) {\n const offset = discretization ? 0.5 * step : 0\n labels = [{\n label: finalBins[0].start,\n pos: finalBins[0].start + offset\n }]\n // Discrete values get label at the center of the bin.\n } else if (discretization) {\n const start = step * Math.ceil(xAxis.min / step)\n const end = step * Math.floor(maxX / step)\n labels = rangeLodash(start, end).map(x => ({\n label: x,\n pos: x + 0.5 * step\n }))\n }\n\n const min = new Quantity(xAxis.min, xAxis.unitStorage).to(xAxis.unit).value()\n const max = new Quantity(maxX, xAxis.unitStorage).to(xAxis.unit).value()\n\n return \n
\n }\n\n const titleComp = \n {yaxis}\n
\n \n {plot}\n {!disableSlider &&\n
\n \n {xaxis}\n \n
\n\n return \n
\n})\n\nPlotHistogram.propTypes = {\n xAxis: PropTypes.object,\n yAxis: PropTypes.object,\n /* The bins data to show. */\n bins: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.number,\n count: PropTypes.number\n })),\n range: PropTypes.object,\n step: PropTypes.number,\n /* The number of bins: required only when showing a dummy bin for histograms\n * that have no width. */\n nBins: PropTypes.number,\n /* Discretization of the values. */\n discretization: PropTypes.number,\n dtypeY: PropTypes.string,\n disabled: PropTypes.bool,\n /* The label to show for the tooltips */\n tooltipLabel: PropTypes.string,\n /* Whether the selected region should be highlighted */\n highlight: PropTypes.bool,\n /* Disable the intervative slider shown on top of the plot */\n disableSlider: PropTypes.bool,\n /* Function to call when a histogram bar has been clicked */\n onClick: PropTypes.func,\n /* Whether the min slider is inclusive (=min value is included) */\n minXInclusive: PropTypes.bool,\n /* Whether the max slider is inclusive (=max value is included) */\n maxXInclusive: PropTypes.bool,\n showInput: PropTypes.bool,\n onRangeChange: PropTypes.func,\n onRangeCommit: PropTypes.func,\n onMinChange: PropTypes.func,\n onMaxChange: PropTypes.func,\n onMinSubmit: PropTypes.func,\n onMaxSubmit: PropTypes.func,\n showinput: PropTypes.bool,\n maxError: PropTypes.any,\n minError: PropTypes.any,\n maxInput: PropTypes.any,\n minInput: PropTypes.any,\n maxLocal: PropTypes.any,\n minLocal: PropTypes.any,\n stepSlider: PropTypes.any,\n disableHistogram: PropTypes.bool,\n disableXTitle: PropTypes.bool,\n onMinBlur: PropTypes.func,\n onMaxBlur: PropTypes.func,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nexport default PlotHistogram\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { useSearchContext } from '../SearchContext'\nimport { Widget } from './Widget'\nimport { ActionCheckbox, ActionSelect } from '../../Actions'\nimport { Range } from '../input/InputRange'\nimport { scales } from '../../plotting/common'\nimport {getDisplayLabel} from '../../../utils'\nimport { Unit } from '../../units/Unit'\nimport { useUnitContext } from '../../units/UnitContext'\n\n/**\n * Displays a histogram widget.\n */\nexport const autorangeDescription = 'Automatically center the view on the data'\nexport const WidgetHistogram = React.memo((\n{\n id,\n title,\n description,\n x,\n y,\n nbins,\n autorange,\n showinput,\n className\n}) => {\n const { filterData, useSetWidget } = useSearchContext()\n const {units} = useUnitContext()\n const setWidget = useSetWidget(id)\n\n // Create final axis config for the plot\n const xAxis = useMemo(() => {\n const xFilter = filterData[x.quantity]\n const xTitle = x.title || getDisplayLabel(xFilter)\n const xType = xFilter?.dtype\n const xUnit = x.unit\n ? new Unit(x.unit)\n : new Unit(xFilter.unit || 'dimensionless').toSystem(units)\n\n return {\n ...x,\n title: xTitle,\n unit: xUnit,\n dtype: xType\n }\n }, [filterData, x, units])\n\n const handleEdit = useCallback(() => {\n setWidget(old => { return {...old, editing: true } })\n }, [setWidget])\n\n const handleChangeScale = useCallback((value) => {\n setWidget(old => { return {...old, y: {...old.y, scale: value}} })\n }, [setWidget])\n\n return \n {!disableHistogram &&
\n {histComp}
}\n {!disableXTitle && titleComp}\n \n {showinput\n ? <>\n {inputMinField}\n {(disableHistogram && !isTime)\n ?
\n \n
\n : \n }\n {inputMaxField}\n \n : null\n }\n \n {\n handleRangeChange(event, value, false)\n handleRangeCommit(event, value)\n }}\n minError={minError}\n maxError={maxError}\n minInput={minInput}\n maxInput={maxInput}\n minLocal={minLocal}\n maxLocal={maxLocal}\n showinput={showinput}\n stepSlider={stepSlider}\n disableHistogram={disableHistogram}\n disableXTitle={disableXTitle}\n data-testid={`${testID}-histogram`}\n />\n
\n})\n\nRange.propTypes = {\n xAxis: PropTypes.object,\n yAxis: PropTypes.object,\n /* Target number of steps for the slider that is shown when statistics are\n * disabled. The actual number may vary, as the step is chosen to be a\n * human-readable value that depends on the range and the unit. */\n nSteps: PropTypes.number,\n /* Number of bins for the histogram (and the slider) when statistics are\n * enabled. */\n nBins: PropTypes.number,\n visible: PropTypes.bool,\n /* Whether the histogram is disabled */\n disableHistogram: PropTypes.bool,\n /* Whether the x title is disabled */\n disableXTitle: PropTypes.bool,\n /* Set the range automatically according to data. */\n autorange: PropTypes.bool,\n /* Show the input fields for min and max value */\n showinput: PropTypes.bool,\n aggId: PropTypes.string,\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nRange.defaultProps = {\n nSteps: 20,\n nBins: 30,\n aggId: 'default',\n 'data-testid': 'inputrange'\n}\n\n/**\n * A small wrapper around Range for use in the filter menus.\n */\nconst useInputRangeStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column'\n },\n histogram: {\n height: '8rem'\n }\n}))\nconst InputRange = React.memo(({\n label,\n quantity,\n description,\n nSteps,\n visible,\n initialScale,\n nBins,\n disableHistogram,\n initialAutorange,\n aggId,\n className,\n 'data-testid': testID\n}) => {\n const {filterData} = useSearchContext()\n const {units} = useUnitContext()\n const styles = useInputRangeStyles()\n const [scale, setScale] = useState(initialScale || filterData[quantity].scale)\n const dtype = filterData[quantity].dtype\n const isTime = dtype === DType.Timestamp\n const [autorange, setAutorange] = useState(isNil(initialAutorange) ? isTime : initialAutorange)\n const x = useMemo(() => (\n {\n quantity,\n dtype,\n unit: new Unit(filterData[quantity]?.unit || 'dimensionless').toSystem(units)\n }\n ), [quantity, filterData, dtype, units])\n const y = useMemo(() => ({scale: scale}), [scale])\n\n // Determine the description and title\n const def = filterData[quantity]\n const descFinal = description || def?.description || ''\n const labelFinal = label || def?.label\n\n // Component for enabling/disabling autorange\n const actions = \n
\n})\n\nInputRange.propTypes = {\n label: PropTypes.string,\n quantity: PropTypes.string.isRequired,\n description: PropTypes.string,\n nSteps: PropTypes.number,\n nBins: PropTypes.number,\n visible: PropTypes.bool,\n initialScale: PropTypes.string,\n disableHistogram: PropTypes.bool,\n initialAutorange: PropTypes.bool,\n aggId: PropTypes.string,\n className: PropTypes.string,\n 'data-testid': PropTypes.string\n}\n\nInputRange.defaultProps = {\n nSteps: 20,\n nBins: 30,\n aggId: 'default',\n 'data-testid': 'inputrange'\n}\n\nexport default InputRange\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { FilterSubMenu, filterMenuContext } from './FilterMenu'\nimport { InputGrid, InputGridItem } from '../input/InputGrid'\nimport InputPeriodicTable from '../input/InputPeriodicTable'\nimport InputField from '../input/InputField'\nimport InputRange from '../input/InputRange'\n\nconst useStyles = makeStyles(theme => ({\n grid: {\n marginTop: theme.spacing(2)\n },\n periodicTable: {\n height: '30rem'\n }\n}))\n\nconst FilterSubMenuElements = React.memo(({\n id,\n ...rest\n}) => {\n const {selected, open} = useContext(filterMenuContext)\n const visible = open && id === selected\n const styles = useStyles()\n\n return \n
\n})\n\nInputRadio.propTypes = {\n quantity: PropTypes.string.isRequired,\n label: PropTypes.string,\n description: PropTypes.string,\n initialValue: PropTypes.string,\n options: PropTypes.object, // Mapping from option name to show label and tooltip\n className: PropTypes.string,\n classes: PropTypes.object,\n 'data-testid': PropTypes.string\n}\n\nexport default InputRadio\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useEffect, useMemo, useState, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { FilterSubMenu, filterMenuContext } from './FilterMenu'\nimport { InputGrid, InputGridItem } from '../input/InputGrid'\nimport { Box, Collapse, makeStyles } from '@material-ui/core'\nimport { SectionMDef, SubSectionMDef, useGlobalMetainfo } from '../../archive/metainfo'\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight'\nimport { useSearchContext } from '../SearchContext'\nimport InputItem from '../input/InputItem'\nimport { InputTextQuantity } from '../input/InputText'\nimport { useErrors } from '../../errors'\nimport { useDataStore } from '../../DataStore'\nimport InputField from '../input/InputField'\nimport InputRadio from '../input/InputRadio'\nimport { useApi } from '../../api'\nimport InputHeader from '../input/InputHeader'\n\nconst filterProperties = def => !(def.name.startsWith('x_') || def.virtual)\n\nconst useDefinitionStyles = makeStyles(theme => ({\n root: {},\n item: {\n '&:hover': {\n backgroundColor: theme.palette.grey[100]\n },\n cursor: 'pointer',\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n flexWrap: 'nowrap',\n paddingRight: theme.spacing(1),\n boxSizing: 'border-box'\n },\n icon: {\n },\n name: {\n flexGrow: 1\n },\n actions: {\n marginLeft: theme.spacing(1)\n },\n children: {\n marginLeft: theme.spacing(3)\n }\n}))\n\nconst Definition = React.memo(function Definition({node, name, path, className}) {\n const classes = useDefinitionStyles()\n const [open, setOpen] = useState(!path)\n const { useFilterState } = useSearchContext()\n const [filter, setFilter] = useFilterState('quantities')\n\n const handleSelect = useCallback((event) => {\n event.stopPropagation()\n setFilter(old => {\n let newValues\n if (old) {\n const isSelected = old?.has(path)\n isSelected ? old.delete(path) : old.add(path)\n newValues = new Set(old)\n } else {\n newValues = new Set([path])\n }\n return newValues\n })\n }, [path, setFilter])\n\n const handleToggle = useCallback(event => {\n event.stopPropagation()\n setOpen(open => !open)\n }, [setOpen])\n\n const children = Object.keys(node)\n const hasChildren = children.length > 0\n\n const icon = useMemo(() => {\n const iconProps = {\n className: classes.icon,\n fontSize: 'small'\n }\n return hasChildren\n ? (open ? \n \n {open && children.map((name, index) => (\n \n )}\n
\n})\nDefinition.propTypes = {\n node: PropTypes.object.isRequired,\n name: PropTypes.string,\n path: PropTypes.string,\n className: PropTypes.string\n}\n\nconst FilterSubMenuMetadata = React.memo(({\n id,\n ...rest\n}) => {\n const {api} = useApi()\n const {selected, open} = useContext(filterMenuContext)\n const visible = open && id === selected\n const authenticated = api?.keycloak?.authenticated\n const dataStore = useDataStore()\n const globalMetainfo = useGlobalMetainfo()\n const [[options, tree], setOptions] = useState([[], {}])\n const {raiseError} = useErrors()\n useEffect(() => {\n if (!globalMetainfo || !visible) {\n return\n }\n const root = globalMetainfo.getEntryArchiveDefinition()\n const subSections = root?.sub_sections\n const tree = {}\n if (!subSections) {\n return []\n }\n const options = []\n const defsSet = new Set()\n function addDef(def, prefix, node) {\n const fullName = prefix ? `${prefix}.${def.name}` : def.name\n node[def.name] = node[def.name] || {}\n node = node[def.name]\n if (defsSet.has(def)) {\n return\n }\n defsSet.add(def)\n options.push({value: fullName})\n if (def.m_def === SubSectionMDef && def.sub_section) {\n def = def.sub_section\n }\n if (def.m_def === SectionMDef) {\n def._allProperties.filter(filterProperties).forEach(def => addDef(def, fullName, node))\n dataStore.getAllInheritingSections(def).forEach(def => {\n def._allProperties.filter(filterProperties).forEach(def => addDef(def, fullName, node))\n })\n }\n }\n subSections.forEach(def => addDef(def, null, tree))\n setOptions([options, tree])\n }, [raiseError, dataStore, globalMetainfo, setOptions, visible])\n\n return \n {icon}\n
\n {hasChildren && (\n \n {label}}\n onDelete={locked ? undefined : onDelete}\n color={locked ? undefined : color}\n icon={locked ?
\n})\n\nQueryChip.propTypes = {\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onDelete: PropTypes.func,\n color: PropTypes.string,\n className: PropTypes.string,\n locked: PropTypes.bool\n}\nQueryChip.defaultProps = {\n color: 'primary'\n}\n\n/**\n * Used to group several related query chips inside one container.\n */\nexport const queryTitleHeight = 2.2\nexport const queryGroupHeight = 4.1 + queryTitleHeight\nexport const queryGroupSpacing = 0.5\nconst useQueryChipGroupStyles = makeStyles(theme => ({\n root: {\n position: 'relative',\n minHeight: theme.spacing(queryGroupHeight),\n marginLeft: theme.spacing(queryGroupSpacing),\n marginRight: theme.spacing(queryGroupSpacing)\n },\n chips: {\n marginTop: theme.spacing(queryTitleHeight),\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.primary.main,\n borderRadius: theme.spacing(2)\n },\n titleRoot: {\n position: 'absolute',\n left: theme.spacing(0.4),\n right: 0,\n top: 0,\n height: theme.spacing(queryTitleHeight)\n },\n title: {\n color: theme.palette.grey[600]\n }\n}))\nexport const QueryChipGroup = React.memo(({\n quantity,\n className,\n children\n}) => {\n const styles = useQueryChipGroupStyles()\n return \n
\n})\n\nQueryChipGroup.propTypes = {\n quantity: PropTypes.string,\n color: PropTypes.string,\n className: PropTypes.string,\n children: PropTypes.node\n}\nQueryChipGroup.defaultProps = {\n color: 'primary'\n}\n\n/**\n * Operators between query chips.\n */\nconst useQueryOpStyles = makeStyles(theme => ({\n root: {\n cursor: 'default'\n },\n inside: {\n fontSize: '0.6rem',\n marginLeft: theme.spacing(0.2),\n marginRight: theme.spacing(0),\n color: 'white'\n },\n outside: {\n fontSize: '1.5rem',\n marginLeft: theme.spacing(0.1),\n marginRight: theme.spacing(0.1),\n marginBottom: theme.spacing(-0.4)\n }\n}))\nexport const QueryOp = React.memo(({className, children, tooltip, variant}) => {\n const styles = useQueryOpStyles()\n return \n {children}\n
\n \n {chips.length\n ? chips\n : Your query will be shown here \n }\n
\n )\n})\n\nQueryChips.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object\n}\n\nconst useQueryStyles = makeStyles(theme => ({\n root: {\n minHeight: theme.spacing(queryGroupHeight),\n margin: theme.spacing(1, 0.25),\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n },\n offset: {\n height: theme.spacing(queryGroupHeight),\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n width: 'unset'\n }\n}))\n\n/**\n * Displays the current query and actions for it.\n */\nconst Query = React.memo(() => {\n const {useResetFilters, useRefresh, useApiData} = useSearchContext()\n const styles = useQueryStyles()\n const resetFilters = useResetFilters()\n const refresh = useRefresh()\n const apiData = useApiData()\n\n return ` +\n `${xLabel || ''}: %{x} ${xUnit === 'dimensionless' ? '' : xUnit}
` +\n `${yLabel || ''}: %{y} ${yUnit === 'dimensionless' ? '' : yUnit}
`\n if (colorLabel) {\n template = template +\n `${colorLabel || ''}: %{${discrete ? 'text' : 'text:.3'}} ${colorUnit === 'dimensionless' ? '' : colorUnit}
`\n }\n template = template + `
\n
\n}))\n\nPlotScatter.propTypes = {\n data: PropTypes.object,\n title: PropTypes.string,\n xAxis: PropTypes.object, // Contains x-axis settings\n yAxis: PropTypes.object, // Contains y-axis settings\n colorAxis: PropTypes.object, // Contains colorbar settings\n discrete: PropTypes.bool,\n autorange: PropTypes.bool,\n dragmode: PropTypes.string,\n onSelected: PropTypes.func,\n onDeselect: PropTypes.func,\n onNavigateToEntry: PropTypes.func,\n 'data-testid': PropTypes.string\n}\n\nPlotScatter.defaultProps = {\n unitX: 'dimensionless',\n unitY: 'dimensionless',\n unitColor: 'dimensionless'\n}\n\nexport default PlotScatter\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport PropTypes from 'prop-types'\nimport { number, bool } from 'yup'\nimport jmespath from 'jmespath'\nimport { isEmpty, isArray, isEqual, range, isNil, flattenDeep } from 'lodash'\nimport {\n Divider,\n Tooltip,\n makeStyles\n} from '@material-ui/core'\nimport { ToggleButton, ToggleButtonGroup, Alert } from '@material-ui/lab'\nimport { Widget, schemaWidget, schemaAxis, schemaMarkers } from './Widget'\nimport { useSearchContext } from '../SearchContext'\nimport Floatable from '../../visualization/Floatable'\nimport PlotScatter from '../../plotting/PlotScatter'\nimport { Action, ActionCheckbox } from '../../Actions'\nimport { CropFree, PanTool, Fullscreen, Replay } from '@material-ui/icons'\nimport { autorangeDescription } from './WidgetHistogram'\nimport { styled } from '@material-ui/core/styles'\nimport {DType, parseJMESPath, getDisplayLabel} from '../../../utils'\nimport { Quantity } from '../../units/Quantity'\nimport { Unit } from '../../units/Unit'\nimport { useUnitContext } from '../../units/UnitContext'\n\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({\n '& .MuiToggleButtonGroup-grouped': {\n margin: theme.spacing(0, 0.25),\n border: 0,\n '&.Mui-disabled': {\n border: 0\n },\n '&:not(:first-of-type)': {\n borderRadius: theme.shape.borderRadius\n },\n '&:first-of-type': {\n borderRadius: theme.shape.borderRadius\n }\n }\n}))\n\n/**\n * A thin wrapper for displaying a Plotly scatter plot as a widget.\n */\nconst useStyles = makeStyles((theme) => ({\n widget: {\n width: '100%',\n height: '100%'\n },\n divider: {\n margin: theme.spacing(0.5, 0.5)\n },\n alert: {\n overflow: 'auto'\n }\n}))\n\nexport const WidgetScatterPlot = React.memo((\n{\n id,\n title,\n description,\n x,\n y,\n markers,\n size,\n autorange,\n dragmode,\n className,\n onSelected\n}) => {\n const styles = useStyles()\n const {units} = useUnitContext()\n const canvas = useRef()\n const [float, setFloat] = useState(false)\n const [loading, setLoading] = useState(true)\n const { useSetWidget, useHits, filterData, useSetFilter } = useSearchContext()\n\n // Parse additional JMESPath config\n const [xParsed, yParsed, colorParsed, error] = useMemo(() => {\n const xParsed = parseJMESPath(x?.quantity)\n const yParsed = parseJMESPath(y?.quantity)\n const colorParsed = markers?.color?.quantity ? parseJMESPath(markers.color.quantity) : {}\n if (xParsed.error || yParsed.error || colorParsed.error) {\n return [{}, {}, {}, 'Invalid JMESPath query, please check your syntax.']\n }\n return [xParsed, yParsed, colorParsed, undefined]\n }, [markers?.color?.quantity, x?.quantity, y?.quantity])\n\n // Parse units\n const {unitXObj, unitYObj, unitColorObj, displayUnitX, displayUnitY, displayUnitColor, discrete} = useMemo(() => {\n if (error) return {}\n const unitXObj = new Unit(filterData[xParsed.quantity].unit || 'dimensionless')\n const unitYObj = new Unit(filterData[yParsed.quantity].unit || 'dimensionless')\n const unitColorObj = new Unit(filterData[colorParsed?.quantity]?.unit || 'dimensionless')\n const displayUnitX = x.unit ? new Unit(x.unit) : unitXObj.toSystem(units)\n const displayUnitY = y.unit ? new Unit(y.unit) : unitYObj.toSystem(units)\n const displayUnitColor = markers?.color?.unit ? new Unit(markers?.color?.unit) : unitColorObj.toSystem(units)\n const discrete = colorParsed?.quantity && new Set([DType.String, DType.Enum]).has(filterData[colorParsed.quantity]?.dtype)\n return {unitXObj, unitYObj, unitColorObj, displayUnitX, displayUnitY, displayUnitColor, discrete}\n }, [filterData, x.unit, xParsed.quantity, y.unit, yParsed.quantity, markers?.color?.unit, colorParsed?.quantity, units, error])\n\n // Create final axis config for the plot\n const {xAxis, yAxis, colorAxis} = useMemo(() => {\n if (error) return {}\n const xFilter = filterData[xParsed.quantity]\n const yFilter = filterData[yParsed.quantity]\n const colorFilter = filterData[colorParsed.quantity]\n const xTitle = x.title || xFilter?.label || getDisplayLabel(xFilter)\n const yTitle = y.title || yFilter?.label || getDisplayLabel(yFilter)\n const xType = xFilter?.dtype\n const yType = yFilter?.dtype\n const colorTitle = markers?.color?.title || colorFilter?.label || getDisplayLabel(colorFilter)\n const unitLabelX = displayUnitX.label()\n const unitLabelY = displayUnitY.label()\n const unitLabelColor = displayUnitColor.label()\n return {\n xAxis: {...x, ...xParsed, title: xTitle, unit: unitLabelX, type: xType},\n yAxis: {...y, ...yParsed, title: yTitle, unit: unitLabelY, type: yType},\n colorAxis: markers?.color ? {...markers.color, ...colorParsed, title: colorTitle, unit: unitLabelColor} : {}\n }\n }, [colorParsed, displayUnitColor, displayUnitX, displayUnitY, filterData, markers?.color, x, xParsed, y, yParsed, error])\n\n const setXFilter = useSetFilter(xParsed.quantity)\n const setYFilter = useSetFilter(yParsed.quantity)\n\n const setWidget = useSetWidget(id)\n const pagination = useMemo(() => ({\n page_size: size,\n order: 'asc'\n }), [size])\n const required = useMemo(() => {\n const include = new Set(['entry_id'])\n for (const config of [xParsed, yParsed, colorParsed]) {\n if (!isEmpty(config)) {\n include.add(config.quantity)\n for (const extra of config.extras) {\n include.add(extra)\n }\n }\n }\n return {include: [...include]}\n }, [xParsed, yParsed, colorParsed])\n\n useEffect(() => {\n setLoading(true)\n }, [required, pagination])\n\n const hitsCallback = useCallback(() => {\n setLoading(false)\n }, [])\n\n // Fetch the data using the useHits hook that automatically applies the\n // existing filters. We filter out data that is invalid (e.g. no values or\n // incompatible sizes between x/y/color). TODO: The API should support an\n // \"exists\" query that could be used to return hits that actually have the\n // requested values. This way we would get a better match for the query size\n // and we would not need to manually validate and check the results.\n const hits = useHits(id, required, pagination, hitsCallback)\n const dataRaw = useMemo(() => {\n if (!hits || error) return\n function getData(hit) {\n const hitData = {}\n\n // Get each property using JMESPath. Errors at this stage will simply\n // cause the entry to be ignored.\n for (const [name, path] of [['x', xParsed.path], ['y', yParsed.path], ['color', colorParsed.path]]) {\n if (isEmpty(path)) continue\n let value\n try {\n value = jmespath.search(hit, path)\n } catch (e) {\n return {error: 'Invalid JMESPATH'}\n }\n // Missing x/y/color value will cause an error unless dealing with\n // discretized colors\n if (isNil(value)) {\n if (name === 'color' && discrete) {\n value = 'undefined'\n } else {\n return {error: 'Empty value'}\n }\n }\n hitData[name] = value\n }\n\n // Get the shapes\n const xShape = getShape(hitData.x)\n const yShape = getShape(hitData.y)\n\n // Check if x/y leaf shapes match\n if (xShape[xShape.length - 1] !== yShape[yShape.length - 1]) {\n return {error: 'Incompatible size for x/y'}\n }\n\n // If x/y shapes do not match, extend accordingly\n const biggestShape = [xShape, yShape].reduce((prev, current) => {\n return (prev.length > current.length)\n ? prev\n : current\n })\n hitData.x = extendFront(hitData.x, xShape, biggestShape)\n hitData.y = extendFront(hitData.y, yShape, biggestShape)\n\n // Modify color dimensions\n let colorShape = colorParsed.path && getShape(hitData.color)\n if (colorShape && !isEqual(colorShape, biggestShape)) {\n // If color has one more dimension than other arrays and it is discrete,\n // we reduce the last dimension to a single string\n if (discrete && colorShape.length === biggestShape.length + 1) {\n hitData.color = reduceInner(hitData.color)\n colorShape = colorShape.slice(0, -1)\n }\n // Scalar color values are extended\n if (colorShape.length === 0 || (colorShape.length === 1 && colorShape[0] === 1)) {\n hitData.color = fill(\n biggestShape,\n colorShape.length === 0\n ? hitData.color\n : hitData.color[0]\n )\n // Colors are extended according to traces\n } else if ((colorShape.length < biggestShape.length) && colorShape[0] === biggestShape[0]) {\n hitData.color = extendBack(hitData.color, colorShape, biggestShape)\n } else {\n return {error: 'Incompatible size for color'}\n }\n }\n\n // Flatten arrays\n hitData.x = flatten(hitData.x)\n hitData.y = flatten(hitData.y)\n hitData.color = colorParsed.path && flatten(hitData.color)\n\n // If shapes still don't match, skip entry. TODO: This check is not ideal,\n // since we may be accepting accidentally mathing sizes. A proper shape\n // check that would also allow \"ragged arrays\" would be better.\n if (hitData.x.length !== hitData.y.length || (colorParsed.path && hitData.x.length !== hitData.color.length)) {\n return {error: 'Incompatible number of elements'}\n }\n\n return {hitData, nPoints: hitData.x.length}\n }\n const x = []\n const y = []\n const color = colorParsed.path ? [] : undefined\n const id = []\n for (const hit of hits) {\n const {hitData, error, nPoints} = getData(hit)\n if (error || !nPoints) continue\n for (const i of range(nPoints)) {\n x.push(hitData.x[i])\n y.push(hitData.y[i])\n colorParsed.path && color.push(hitData.color?.[i])\n id.push(hit.entry_id)\n }\n }\n return {x, y, color, id}\n }, [discrete, hits, xParsed.path, yParsed.path, colorParsed.path, error])\n\n // Perform unit conversion, report errors\n const data = useMemo(() => {\n if (!dataRaw) return\n const x = xAxis.type === DType.Timestamp\n ? dataRaw.x\n : new Quantity(dataRaw.x, unitXObj).to(displayUnitX).value()\n const y = yAxis.type === DType.Timestamp\n ? dataRaw.y\n : new Quantity(dataRaw.y, unitYObj).to(displayUnitY).value()\n const color = dataRaw.color && (discrete\n ? dataRaw.color\n : new Quantity(dataRaw.color, unitColorObj).to(displayUnitColor).value()\n )\n return {x, y, color, id: dataRaw.id}\n }, [dataRaw, displayUnitColor, displayUnitX, displayUnitY, unitColorObj, unitXObj, unitYObj, discrete, xAxis, yAxis])\n\n const handleEdit = useCallback(() => {\n setWidget(old => { return {...old, editing: true } })\n }, [setWidget])\n\n const handleDragModeChanged = useCallback((event, value) => {\n if (value !== null) {\n setWidget(old => ({...old, dragmode: value}))\n }\n }, [setWidget])\n\n const handleResetClick = useCallback(() => {\n canvas.current.reset()\n }, [])\n\n const handleFloat = useCallback(() => {\n // The current layout needs to be saved, because the DOM change will\n // cause it to be lost.\n canvas.current?.saveLayout()\n setFloat(old => !old)\n }, [])\n\n const handleSelected = useCallback((data) => {\n const range = data?.range\n if (!range) return\n setXFilter({\n gte: new Quantity(range.x[0], displayUnitX),\n lte: new Quantity(range.x[1], displayUnitX)\n })\n setYFilter({\n gte: new Quantity(range.y[0], displayUnitY),\n lte: new Quantity(range.y[1], displayUnitY)\n })\n onSelected?.(data)\n }, [onSelected, setXFilter, setYFilter, displayUnitX, displayUnitY])\n\n const handleDeselect = useCallback(() => {\n onSelected?.(undefined)\n }, [onSelected])\n\n const actions = useMemo(() => {\n return <>\n \n
\n \n
\n \n \n
\n {!discrete && colorAxis &&\n \n
\n }\n - \n {children}\n
\n
\n \n {showinput\n ?
\n \n {aggComp}\n
\n {nShown !== 0 && \n \n {nShown < aggConfig.size\n ? nShown === 1\n ? 'Showing the only item'\n : `Showing all ${count}`\n : `Showing top ${count}`\n }\n \n
}\n \n \n \n \n
\n })\n }, [widgets, styles])\n\n // Mount the grid only after the width has been succesfully calculated. Also\n // the latest valid width is stored and used for the actual grid, since upon\n // the changing route, the width of the component goes to zero causing\n // unwanted flickering.\n useLayoutEffect(() => {\n if (width) {\n setValidWidth(width)\n }\n }, [width])\n\n // The layouts are stored when they are changed. This allows retaining the\n // layout for each breakpoint individually. Notice that we need to feed in the\n // changed layout back to the component so that it works in a controlled\n // manner.\n const handleLayoutChange = useCallback((layout, allLayouts) => {\n setWidgets(old => {\n const newLayout = cloneDeep(old)\n for (const [breakpoint, value] of Object.entries(allLayouts)) {\n for (const layout of value) {\n newLayout[layout.i].layout[breakpoint] = cloneDeep(layout)\n }\n }\n return newLayout\n })\n }, [setWidgets])\n\n return \n { validWidth\n ? }\n width={validWidth}\n >\n {children}\n \n : null }\n
\n})\n\nWidgetGrid.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object\n}\n\nexport default WidgetGrid\n\n/**\n * A custom resize handle component for the grid items.\n */\nconst useHandleStyles = makeStyles(theme => {\n return {\n root: {\n margin: theme.spacing(1),\n width: '25px',\n height: '25px'\n }\n }\n})\nconst ResizeHandle = React.forwardRef((props, ref) => {\n const {handleAxis, ...restProps} = props\n const styles = useHandleStyles()\n return \n
\n})\nSearchPage.propTypes = {\n header: PropTypes.node\n}\n\nexport default SearchPage\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useCallback, useEffect, useMemo, useState} from 'react'\nimport PropTypes from 'prop-types'\nimport {cloneDeep} from 'lodash'\nimport {\n Chip,\n Dialog, DialogContent, IconButton, TextField, Tooltip\n} from \"@material-ui/core\"\nimport {FreeformSearchContext, useSearchContext} from \"../search/SearchContext\"\nimport {ui} from \"../../config\"\nimport DialogActions from \"@material-ui/core/DialogActions\"\nimport Button from \"@material-ui/core/Button\"\nimport SearchPage from \"../search/SearchPage\"\nimport SearchIcon from \"@material-ui/icons/Search\"\nimport {useRecoilValue} from \"recoil\"\nimport {configState} from \"../archive/ArchiveBrowser\"\nimport {getDisplayLabel, pluralize} from \"../../utils\"\nimport Autocomplete from \"@material-ui/lab/Autocomplete\"\nimport {ItemButton, useLane} from \"../archive/Browser\"\nimport ClearIcon from \"@material-ui/icons/Clear\"\n\nconst context = cloneDeep(ui?.apps?.options?.eln)\nconst shownColumns = [\n 'entry_name',\n 'entry_type',\n 'authors',\n 'upload_name'\n]\nconst rows = context?.rows\nconst columns = (context?.columns || [])\n .map((column) => ({...column, selected: shownColumns.includes(column.quantity)}))\nrows.details = {enabled: false}\nrows.actions = {enabled: false}\n\nfunction SearchDialog({open, filters, pageSize, onCancel, onQueryChanged}) {\n const {filters: queryFilters, useFilters, useSetFilters, useResults, useApiData} = useSearchContext()\n const setFilters = useSetFilters()\n const filterValues = useFilters(queryFilters)\n const {data, setPagination} = useResults()\n const apiData = useApiData()\n\n const updateFilters = useCallback(() => {\n const newValue = {}\n for (const key in filters) {\n if (Object.hasOwnProperty.call(filters, key)) {\n newValue[key] = Array.isArray(filters[key]) || filters[key] instanceof Set ? new Set(filters[key]) : filters[key]\n }\n }\n if (setPagination && pageSize) {\n setPagination(old => {\n return {...old, page_size: pageSize}\n })\n }\n setFilters(newValue)\n }, [pageSize, setFilters, filters, setPagination])\n\n useEffect(() => {\n if (open) {\n updateFilters()\n }\n }, [updateFilters, open])\n\n const newFilters = useMemo(() => {\n const filters = {...filterValues}\n for (const key in filters) {\n if (key in filters && filters[key] === undefined) {\n delete filters[key]\n }\n }\n return filters\n }, [filterValues])\n\n const results = useMemo(() => {\n if (!data) {\n return undefined\n }\n return data.map(entry => ({entry_id: entry.entry_id, upload_id: entry.upload_id, mainfile: entry.mainfile}))\n }, [data])\n\n const handleQueryChanged = useCallback(() => {\n if (onQueryChanged) {\n onQueryChanged(newFilters, apiData, results)\n }\n }, [onQueryChanged, newFilters, apiData, results])\n\n return \n
\n setIsMenuOpen(false)}>\n \n \n {header}\n \n \n \n \n \n \n \n \n \n
\n \n {\n {allVisibleProperties.map(property => (\n \n \n \n ))}\n }\n
\n )\n})\nSectionPreview.propTypes = {\n sectionDef: PropTypes.object.isRequired,\n section: PropTypes.object\n}\n\nconst SectionCard = React.memo(({archivePath, sectionDef, section, readOnly, ...props}) => {\n const {entryId, uploadId} = useEntryStore()\n const [showJson, setShowJson] = useState(false)\n\n const actions = \n {showJson\n ? (\n \n \n ) : (\n allVisibleQuantities.map(quantity => (\n quantity._isEditable\n ? \n handleChange(quantity, value)}\n />\n \n : \n \n \n \n \n \n \n ))\n )\n }\n
\n )\n})\nSectionEditor.propTypes = {\n sectionDef: PropTypes.object.isRequired,\n section: PropTypes.object,\n onChange: PropTypes.func,\n showJson: PropTypes.bool,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ])\n}\n\nexport default SectionEditor\n","import React, {useMemo} from 'react'\nimport {Box} from '@material-ui/core'\nimport {Quantity as Q} from '../units/Quantity'\nimport {useUnitContext} from '../units/UnitContext'\nimport {titleCase, resolveInternalRef} from '../../utils'\nimport {cloneDeep, merge} from 'lodash'\nimport Plot from '../plotting/Plot'\nimport PropTypes from 'prop-types'\nimport {withErrorHandler} from '../ErrorHandler'\n\nclass XYPlotError extends Error {\n constructor(message) {\n super(message)\n this.name = 'XYPlotError'\n }\n}\n\nconst traverse = (value, callback, parent = null, key = null) => {\n if (value && typeof value === 'object') {\n Object.entries(value).forEach(([k, v]) => {\n traverse(v, callback, value, k)\n })\n } else if (value && Array.isArray(value)) {\n value.forEach((item, index) => {\n traverse(item, callback, value, index)\n })\n } else {\n callback(parent, key, value)\n }\n}\n\nconst PlotlyFigure = React.memo(function PlotlyFigure({plot, section, sectionDef, title, metaInfoLink}) {\n const {units} = useUnitContext()\n\n const plotlyGraphObj = useMemo(() => {\n if (!sectionDef?._properties) {\n return [undefined, undefined]\n }\n\n const toUnit = path => {\n const relativePath = '/' + path.replace('./', '')\n const resolvedQuantityDef = resolveInternalRef(relativePath, sectionDef)\n if (resolvedQuantityDef === undefined || resolvedQuantityDef === null) {\n throw new XYPlotError(`Could not resolve the path ${path}`)\n }\n let value\n try {\n value = resolveInternalRef(relativePath, section)\n } catch (err) {\n if (!err.message.startsWith('Path does not exist:')) {\n throw new XYPlotError(err.message)\n }\n }\n if (value === undefined || value === null) {\n // there is not data yet\n return [undefined, undefined]\n }\n const unit = resolvedQuantityDef?.unit\n if (unit) {\n const displayUnit = resolvedQuantityDef?.m_annotations?.eln?.[0]?.defaultDisplayUnit\n const quantity = displayUnit ? new Q(value, unit).to(displayUnit) : new Q(value, unit).toSystem(units)\n return [quantity.value(), quantity.label()]\n } else {\n return [value, unit]\n }\n }\n\n /**\n * Recursively splits a path containing slice notation (`start:stop`)\n * @param {String} path The path which should be split at repeating sections\n * @param {Boolean} isScalar Whether the quantity at the end of the path is scalar\n * @returns {Array} The paths and names of the new paths\n */\n function resolveSlice(path, isScalar) {\n const pathArr = path.split('/')\n for (let i = 0; i < pathArr.length; i++) {\n const pathSection = pathArr[i]\n if (pathSection.includes(':')) {\n const repeatPath = pathArr.slice(0, i).join('/')\n const repeat = resolveInternalRef('/' + repeatPath.replace('./', ''), section)\n if (repeat === undefined) { return [[], []] }\n // Get start and stop from python slice notation\n let [start, stop, rest] = pathSection.split(':').map((x) => x === '' ? undefined : parseInt(x))\n if (Number.isNaN(start) || Number.isNaN(stop) || rest !== undefined) {\n throw new XYPlotError(`Invalid slice notation: \"${pathSection}\"`)\n }\n start = start === undefined || start < -repeat.length ? 0 : (start < 0 ? start + repeat.length : start)\n stop = stop === undefined || stop > repeat.length ? repeat.length : (stop < 0 ? stop + repeat.length : stop)\n // If there are initialized sections in this range\n if (stop > start) {\n const remainPath = pathArr.slice(i + 1).join('/')\n const allPaths = []\n const allNames = []\n for (let j = start; j < stop; j++) {\n const repeatDef = resolveInternalRef('/' + repeatPath.replace('./', '') + `/${j}/sub_section`, sectionDef)\n const label = isScalar ? undefined : (repeat[j][repeatDef?.more?.label_quantity] ?? repeat[j].name)\n const [paths, names] = resolveSlice(`${repeatPath}/${j}/${remainPath}`, isScalar)\n const subSectionName = label ?? `${titleCase(pathArr[i - 1])}${isScalar ? '' : ` ${j}`}`\n names.forEach((name) => { allNames.push(`${subSectionName}, ${name}`) })\n allPaths.push(...paths)\n }\n return [allPaths, allNames]\n }\n return [[], []]\n }\n }\n return [[path], [titleCase(pathArr[pathArr.length - 1])]]\n }\n\n /**\n * Function for getting all the paths for an array of paths that may contain slice\n * notation. The function also returns names to be used as labels if withNames is true.\n * @param {Array} slicedPaths The array of paths that may contatin slice notation\n * @param {Boolean} withNames Whether or not the functiion should return names\n * @returns Array of paths or Array of Array of paths and names\n */\n function getSlicedPaths(path, withNames) {\n const slicedPaths = Array.isArray(path) ? path : [path]\n const allPaths = []\n const Names = []\n slicedPaths.forEach((slicedPath) => {\n const pathRelative = '/' + slicedPath.replace('./', '')\n // Removes the index in the path and resolve the shape of the quantity\n const isScalar = resolveInternalRef(pathRelative.replace(/\\/-?\\d*:-?\\d*/gm, '/0') + '/shape', sectionDef)?.length === 0\n const [paths, names] = resolveSlice(pathRelative, isScalar)\n // If the quanitity is a scalar an Array of paths is added otherwise the paths are added one by one\n allPaths.push(...(isScalar ? [paths] : paths))\n if (withNames) {\n // For scalar quantities the name is taken as the first one\n Names.push(...(isScalar ? [names[0]] : names))\n }\n })\n return withNames ? [allPaths, Names] : allPaths\n }\n\n /**\n * Gets the value array, unit and split path for:\n * 1. A path to an array quanitity\n * or\n * 2. An array of paths to a scalar quantity\n * @param {*} path String path or Array of string paths\n * @returns Array of [value, unit, split path]\n */\n function getValues(path) {\n let Values = []\n let Unit = ''\n let pathArray = ''\n if (Array.isArray(path)) {\n // If path is an Array of paths the quantity is scalar and Values is build from all of them\n path.forEach((Point) => {\n const [Value, PointUnit] = toUnit(Point)\n Values.push(Value)\n Unit = PointUnit\n pathArray = Point.split('/')\n })\n } else {\n [Values, Unit] = toUnit(path)\n pathArray = path.split('/')\n }\n return [Values, Unit, pathArray]\n }\n\n const xUnits = []\n const xLabels = []\n const yUnits = []\n const yLabels = []\n const zUnits = []\n const zLabels = []\n\n const resolveReferences = (data, key, units, labels) => {\n const value = data?.[key]\n if (value && (typeof value === 'string' || value instanceof String)) {\n if (value.startsWith(\"#\")) {\n const [paths, names] = getSlicedPaths(value.slice(1), true)\n const [values, unit, path] = getValues(paths[0])\n const label = names[0] || titleCase(path[path.length - 1])\n data[key] = values\n units.push(unit)\n labels.push(label)\n }\n }\n }\n\n const plotlyGraphObj = cloneDeep(plot)\n const isDataArray = plotlyGraphObj?.data && Array.isArray(plotlyGraphObj.data)\n const dataArray = isDataArray ? plotlyGraphObj.data : [plotlyGraphObj.data]\n dataArray.forEach((data, index) => {\n resolveReferences(data, 'x', xUnits, xLabels)\n resolveReferences(data, 'y', yUnits, yLabels)\n resolveReferences(data, 'z', zUnits, zLabels)\n })\n\n traverse(plotlyGraphObj.data, (data, key, value) => {\n if (key === 'color') {\n if (typeof value === 'string' || value instanceof String) {\n if (value.startsWith(\"#\")) {\n let paths, values\n try {\n [paths] = getSlicedPaths(value.slice(1), true);\n [values] = getValues(paths[0])\n } catch (error) {\n if (value && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {\n values = value\n } else {\n throw new XYPlotError(error)\n }\n }\n data[key] = values\n }\n }\n }\n })\n\n const layout = {}\n if (xLabels.length > 0) {\n layout.xaxis = {\n title: xUnits[0] ? `${xLabels[0]} (${xUnits[0]})` : xLabels[0]\n }\n }\n yLabels.forEach((yLabel, index) => {\n layout[index === 0 ? 'yaxis' : `yaxis${index + 1}`] = {\n title: yUnits[index] ? `${yLabel} (${yUnits[index]})` : yLabel\n }\n })\n zLabels.forEach((zLabel, index) => {\n layout[index === 0 ? 'zaxis' : `zaxis${index + 1}`] = {\n title: zUnits[index] ? `${zLabel} (${zUnits[index]})` : zLabel\n }\n })\n\n plotlyGraphObj.layout = merge({}, layout, plotlyGraphObj.layout)\n return plotlyGraphObj\n }, [plot, section, sectionDef, units])\n\n return - \n {value.map((value, index) =>
{value} )}\n
- \n {value.map((value, index) => {\n const [finalValue] = getRenderValue(value)\n return
- \n
{typeof finalValue === 'object' ? JSON.stringify(finalValue) : finalValue?.toString()} \n \n })}\n
\n \n {open ? \n {actions &&
\n {open &&\n \n {actions}\n
}\n \n {range(topStart, topEnd).map((index) => children[index])}\n {topEnd < bottomStart && \n {nTop > 0 && 0}\n onMore={() => setNShownTop(x => Math.min(bottomStart, x + pageSize))}\n onLess={() => setNShownTop(x => Math.max(0, x - pageSize))}\n variant=\"down\"\n data-testid=\"propertyvalueslist-pagination-down\"\n />}\n {nBottom > 0 && 0}\n onMore={() => setNShownBottom(x => Math.min(children.length - nShownTop - nBottom, x + pageSize))}\n onLess={() => setNShownBottom(x => Math.max(0, x - pageSize))}\n variant=\"up\"\n data-testid=\"propertyvalueslist-pagination-up\"\n />}\n }\n {range(bottomStart, bottomEnd).map((index) => children[index])}\n
\n }\n \n - \n
\n \n
\n \n
\n\n if (card) {\n return \n \n
\n { handleItemClicked(item) }}>\n
\n \n \n \n {link.includes('manual.nexusformat.org') ? 'nexus manual' : link}\n
)}\n \n { node.onClick && node.onClick(); event.preventDefault() }}\n nodeId={node.system_id}\n label={\n \n })}\n \n})\nTopologyItem.propTypes = {\n node: PropTypes.object,\n level: PropTypes.number,\n selected: PropTypes.string\n}\n\n/**\n * Displays the information that is present for a single node within tabs.\n */\nconst useMaterialTabsStyles = makeStyles(theme => ({\n noData: {\n height: 172.72 // The height of three QuantityRows\n }\n}))\nconst MaterialTabs = React.memo(({value, onChange, node}) => {\n const styles = useMaterialTabsStyles()\n const nElems = node?.n_elements\n const nElemsLabel = nElementMap[nElems]\n const n_elements = `${nElems}${nElemsLabel ? ` (${nElemsLabel})` : ''}`\n const tabMap = useMemo(() => {\n const hasTopology = !isEmpty(node)\n const hasCell = !isEmpty(node?.cell)\n const hasSymmetry = !isEmpty(node?.symmetry)\n const hasPorosity = [\n node.largest_cavity_diameter,\n node.pore_limiting_diameter,\n node.accessible_surface_area,\n node.accessible_volume,\n node.void_fraction,\n node.n_of_channels\n ].some(x => !isNil(x))\n const hasSbu = [\n node.sbu_type,\n node.sbu_coordination_number\n ].some(x => !isNil(x))\n const hasActiveOrbitals = !isEmpty(node?.active_orbitals)\n const hasCoreHole = hasActiveOrbitals && node?.label === 'core-hole'\n const tabMap = {\n composition: hasTopology && {\n label: 'Composition'\n },\n cell: hasCell && {\n label: 'Cell'\n },\n porosity: hasPorosity && {\n label: 'Porosity'\n },\n sbu: hasSbu && {\n label: 'SBU'\n },\n symmetry: hasSymmetry && {\n label: 'Symmetry'\n },\n coreHole: hasCoreHole && {\n label: 'Core-hole'\n }\n }\n return tabMap\n }, [node])\n\n const finalValue = tabMap[value] ? value : 'composition'\n\n return <>\n \n {Object.entries(tabMap).map(([key, value]) => value ? \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n}) // TODO: Add a cell for the total charge? Or keep it for the composition? + Add j and m_j (which are numerical arrays)\nMaterialTabs.propTypes = {\n node: PropTypes.object,\n value: PropTypes.any,\n onChange: PropTypes.func\n}\n\nconst MaterialTab = React.memo(({selected, value, children}) => {\n return \n {children}\n
\n})\nMaterialTab.propTypes = {\n selected: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n children: PropTypes.node\n}\n\nexport default MaterialCardTopology\n\n/**\n * Retrieves the topology for a calculation given the index and archive.\n *\n * @param {object} index\n * @param {object} archive\n *\n * @return {undefined|object} If the given structure cannot be converted,\n * returns an empty object.\n */\nexport function getTopology(index, archive) {\n // If topology is explicitly stored, use it.\n let topology\n if (index?.results?.material?.topology) {\n topology = merge(\n cloneDeep(index?.results?.material?.topology),\n archive?.results?.material?.topology\n )\n }\n\n // Create topology map\n const topologyMap = Object.fromEntries(topology.map(top => ([top.system_id, top])))\n\n // Create topology tree by finding the root node and then recursively\n // replacing its children with the actual child instances.\n const roots = topology.filter(top => isNil(top.parent_system))\n const traverse = (node) => {\n if (!isEmpty(node?.child_systems)) {\n node.child_systems = node.child_systems.map(id => topologyMap[id])\n node.child_systems.forEach(child => traverse(child))\n }\n }\n for (const root of roots) {\n traverse(root)\n }\n\n // Simplify the view if there is only one subsystem that covers everything.\n for (const root of roots) {\n if (root?.child_systems?.length === 1) {\n const child = root.child_systems[0]\n if (child.atomic_fraction === 1 && child?.system_relation?.type === 'subsystem') {\n child.parent_system = root\n root.child_systems = child.child_systems\n }\n }\n }\n\n return [roots, topologyMap]\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { PropertyCard, PropertyGrid, PropertyItem } from './PropertyCard'\nimport { QuantityTable, QuantityRow, QuantityCell } from '../../Quantity'\n\n/**\n * Displays a summary of material related properties for an entry.\n */\nconst MaterialCardFormula = React.memo(({index}) => {\n if (!index?.results?.material) {\n return null\n }\n\n return \n
\n \n})\n\nStructureNGL.propTypes = {\n entryId: PropTypes.string,\n data: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.string\n ]),\n topologyMap: PropTypes.object,\n selected: PropTypes.string,\n sizeLimit: PropTypes.number, // Maximum number of atoms before a prompt is shown.\n onFullscreen: PropTypes.func\n}\n\nStructureNGL.defaultProps = {\n sizeLimit: 40000\n}\n\nexport default withErrorHandler('Could not load structure.')(StructureNGL)\n\n/**\n * Used to resolve the API parameters for fetching a structure that is required\n * to visualize the current selection.\n *\n * @param {string} selected The selected system\n * @param {string} entryId Entry id\n * @param {object} topologyMap Object containing a mapping from system ids to the data.\n * @returns The final entry_id and path for fetching the system file through the API.\n */\nexport function getSystemAPIQuery(selected, entryId, topologyMap) {\n if (isNil(selected) || isNil(entryId) || isNil(topologyMap)) {\n return {entryId: undefined, path: undefined}\n }\n\n // Get path to the first system which stores a reference or actual data for\n // the structure and does not specify indices. This way the visualizer is a\n // bit more optimal compared to doing API calls for every subsystem.\n function getPath(top) {\n let path\n if ((top.atoms_ref || top.atoms) && isNil(top.indices)) {\n path = top.system_id\n } else if (!isNil(top.indices)) {\n path = getPath(topologyMap[top.parent_system])\n }\n return path\n }\n let path = getPath(topologyMap[selected])\n\n // The path may be a reference that points to some other entry as well,\n // here it is resolved\n if (path && !path.startsWith('results')) {\n const nomadUrl = parseNomadUrl(path)\n entryId = nomadUrl.entryId || entryId\n path = nomadUrl.path\n }\n return {entryId, path}\n}\n\n/**\n * Returns a quaternion that aligns the view according to the given input\n * options.\n *\n * @param {*} alignments: List of at most two alignments to set. E.g. [['up',\n * 'c'], ['right', 'b']] will align the c-vector (see 'directions') to point\n * up, and the b-vector to point right. These are applied sequentially.\n * @param {*} directions: Object containing a mapping between direction names\n * and the unit vectors that the correspond to.\n * @returns\n */\nfunction getAlignment(alignments, directions) {\n // Check alignment validity\n if (alignments === undefined) return\n if (alignments.length > 2) throw Error('At most two alignments can be performed.')\n\n const finalQuaternion = new THREE.Quaternion()\n finalQuaternion.identity()\n const alignedDirections = []\n const rotate = (alignment) => {\n const direction = alignment[0]\n const target = alignment[1]\n const targetMap = {\n up: new THREE.Vector3(0, 1, 0),\n down: new THREE.Vector3(0, -1, 0),\n right: new THREE.Vector3(-1, 0, 0),\n left: new THREE.Vector3(1, 0, 0),\n front: new THREE.Vector3(0, 0, -1),\n back: new THREE.Vector3(0, 0, 1)\n }\n const targetVector = targetMap[direction]\n\n // Determine the top direction\n const finalVector = directions[target]\n for (const alignedDirection of alignedDirections) {\n finalVector[alignedDirection] = 0\n }\n\n // Rotate the scene according to the selected top direction\n if (finalVector.length() > 1e-8) {\n const quaternion = new THREE.Quaternion().setFromUnitVectors(\n finalVector.clone().normalize(),\n targetVector.clone().normalize()\n )\n finalQuaternion.premultiply(quaternion)\n\n // Rotate the given directions so that their direction will be correct\n // for the next aligment\n for (const dir in directions) {\n directions[dir].clone().applyQuaternion(quaternion)\n }\n\n if (direction === \"right\" || direction === \"left\") {\n alignedDirections.push(\"x\")\n } else if (direction === \"up\" || direction === \"down\") {\n alignedDirections.push(\"y\")\n } else if (direction === \"front\" || direction === \"back\") {\n alignedDirections.push(\"z\")\n }\n }\n }\n\n // Apply the alignments\n for (const alignment of alignments) {\n rotate(alignment)\n }\n return finalQuaternion\n}\n\n/**\n * Creates outlines for a cell specified by the given basis vectors.\n *\n * @param origin - The origin position for the cell\n * @param basis - The cell basis vectors\n * @param collapsed - Whether a basis vector is collapsed (length = 0)\n * @param color - Color for the cell wireframe\n * @param linewidth - Cell wireframe line width\n * @param dashSize - Cell wireframe dash size. Defaults to 0. Provide a value >\n * 0 for a dashed line.\n * @param gapSize - Cell wireframe dash size. Defaults to 0. Provide a value >\n * 0 for a dashed line.\n */\nfunction createCell(origin, basis, collapsed, color, linewidth, dashSize, gapSize) {\n const cell = new THREE.Object3D()\n let lineMaterial\n if (!(dashSize === 0 && gapSize === 0)) {\n lineMaterial = new THREE.LineDashedMaterial({\n color: color,\n linewidth: linewidth,\n dashSize: dashSize,\n gapSize: gapSize\n })\n } else {\n lineMaterial = new THREE.LineBasicMaterial({\n color: color,\n linewidth: linewidth\n })\n }\n\n function addEdge(points) {\n const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)\n const line = new THREE.Line(lineGeometry, lineMaterial)\n cell.add(line)\n line.computeLineDistances()\n }\n\n for (let len = basis.length, i = 0; i < len; ++i) {\n const isFirstCollapsed = collapsed[i]\n if (isFirstCollapsed) continue\n const basisVector = basis[i]\n\n // First edge\n const points1 = [origin, basisVector.clone().add(origin)]\n addEdge(points1)\n\n // Second edge\n const secondIndex = (i + 1) % len\n const isSecondCollapsed = collapsed[secondIndex]\n const secondAddition = basis[secondIndex].clone()\n if (!isSecondCollapsed) {\n const points2 = [secondAddition.clone().add(origin), basisVector.clone().add(secondAddition).add(origin)]\n addEdge(points2)\n }\n\n // Third edge\n const thirdIndex = (i + 2) % len\n const isThirdCollapsed = collapsed[thirdIndex]\n const thirdAddition = basis[thirdIndex].clone()\n if (!isThirdCollapsed) {\n const points3 = [thirdAddition.clone().add(origin), basisVector.clone().add(thirdAddition).add(origin)]\n addEdge(points3)\n }\n\n // Fourth edge\n if (!isSecondCollapsed && !isThirdCollapsed) {\n const points4 = [secondAddition.clone().add(thirdAddition).add(origin), basisVector.clone().add(secondAddition).add(thirdAddition).add(origin)]\n addEdge(points4)\n }\n }\n return cell\n}\n\n/**\n * Visualizes the lattice constants using the given visualization options.\n *\n * @param {string} options.font Font size for lattice constants. Defaults to 0.7.\n * constants. Applied as default to all labels, can be overridden\n * individually for each lattice constant.\n * @param {string} options.color Font color for lattice constants. Applied\n * as default to all labels, can be overridden individually for each lattice\n * constant. Defaults to\n * @param {string} options.stroke.color Font stroke color\n * for lattice constants. Defaults to \"#000\". Applied as default to all\n * labels, can be overridden individually for each lattice constant.\n * @param {string} options.stroke.width Font stroke width\n * for lattice constants. Defaults to \"#000\". Applied as default to all\n * labels, can be overridden individually for each lattice constant.\n * @param {string} options.a.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.a.color Font color. Defaults to \"#C52929\".\n * @param {string} options.a.font Font family. Defaults to \"Arial\".\n * @param {number} options.a.size Font size. Defaults to 0.7.\n * @param {number} options.a.label The label to display. Defaults to \"a\".\n * @param {number} options.a.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.a.stroke.color Font stroke color. Defaults to \"#000\".\n * @param {string} options.b.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.b.color Font color. Defaults to \"#47A823\".\n * @param {string} options.b.font Font family. Defaults to \"Arial\".\n * @param {number} options.b.size Font size. Defaults to 0.7.\n * @param {number} options.b.label The label to display. Defaults to \"b\".\n * @param {number} options.b.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.b.stroke.color Font stroke color. Defaults to \"#000\".\n * @param {string} options.c.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.c.color Font color. Defaults to \"#3B5796\".\n * @param {string} options.c.font Font family. Defaults to \"Arial\".\n * @param {number} options.c.size Font size. Defaults to 0.7.\n * @param {number} options.c.label The label to display. Defaults to \"c\".\n * @param {number} options.c.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.c.stroke.color Font stroke color. Defaults to \"#000\".\n * @param {string} options.alpha.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.alpha.color Font color. Defaults to \"#ffffff\".\n * @param {string} options.alpha.font Font family. Defaults to \"Arial\".\n * @param {number} options.alpha.size Font size. Defaults to 0.7.\n * @param {number} options.alpha.label The label to display. Defaults to \"α\".\n * @param {number} options.alpha.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.alpha.stroke.color Font stroke color. Defaults to \"#000\".\n * @param {string} options.beta.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.beta.color Font color. Defaults to \"#ffffff\".\n * @param {string} options.beta.font Font family. Defaults to \"Arial\".\n * @param {number} options.beta.size Font size. Defaults to 0.7.\n * @param {number} options.beta.label The label to display. Defaults to \"β\".\n * @param {number} options.beta.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.beta.stroke.color Font stroke color. Defaults to \"#000\".\n * @param {string} options.gamma.enabled Whether to display this lattice\n * contant. Defaults to true.\n * @param {string} options.gamma.color Font color. Defaults to \"#ffffff\".\n * @param {string} options.gamma.font Font family. Defaults to \"Arial\".\n * @param {number} options.gamma.size Font size. Defaults to 0.7.\n * @param {number} options.gamma.label The label to display. Defaults to \"γ\".\n * @param {number} options.gamma.stroke.width Font stroke width. Defaults to 0.06.\n * @param {string} options.gamma.stroke.color Font stroke color. Defaults to \"#000\".\n */\nfunction createLatticeConstants(basis, periodicity, collapsed, valid, options) {\n // Delete old instance\n const latticeConstants = new THREE.Group()\n const opt = options\n\n // Determine the periodicity and setup the visualization accordingly\n const periodicIndices = []\n for (let dim = 0; dim < 3; ++dim) {\n const p1 = periodicity[dim]\n const p2 = periodicity[(dim + 1) % 3]\n const p3 = periodicity[(dim + 2) % 3]\n if (p1 && !p2 && !p3) {\n periodicIndices.push(dim)\n break\n } else if (p1 && p2 && !p3) {\n periodicIndices.push(dim)\n periodicIndices.push((dim + 1) % 3)\n break\n }\n }\n\n // Create new instances\n const infoColor = 0x000000\n const axisOffset = 1.3\n\n let iBasis = -1\n const cellBasisColors = []\n cellBasisColors.push(opt.a.color)\n cellBasisColors.push(opt.b.color)\n cellBasisColors.push(opt.c.color)\n const angleColors = []\n angleColors.push(opt.alpha.color)\n angleColors.push(opt.beta.color)\n angleColors.push(opt.gamma.color)\n const angleStrokeColors = []\n angleStrokeColors.push(opt.alpha?.stroke?.color === undefined ? opt.stroke.color : opt.alpha.stroke.color)\n angleStrokeColors.push(opt.beta?.stroke?.color === undefined ? opt.stroke.color : opt.beta.stroke.color)\n angleStrokeColors.push(opt.gamma?.stroke?.color === undefined ? opt.stroke.color : opt.gamma.stroke.color)\n const angleStrokeWidths = []\n angleStrokeWidths.push(opt.alpha?.stroke?.width === undefined ? opt.stroke.width : opt.alpha.stroke.width)\n angleStrokeWidths.push(opt.beta?.stroke?.width === undefined ? opt.stroke.width : opt.beta.stroke.width)\n angleStrokeWidths.push(opt.gamma?.stroke?.width === undefined ? opt.stroke.width : opt.gamma.stroke.width)\n const angleLabels = [opt.gamma.label, opt.alpha.label, opt.beta.label]\n const axisLabels = [opt.a.label, opt.b.label, opt.c.label]\n const angleEnableds = [opt.gamma.enabled, opt.alpha.enabled, opt.beta.enabled]\n const axisEnableds = [opt.a.enabled, opt.b.enabled, opt.c.enabled]\n const axisFonts = []\n axisFonts.push(opt.a.font === undefined ? opt.font : opt.a.font)\n axisFonts.push(opt.b.font === undefined ? opt.font : opt.b.font)\n axisFonts.push(opt.c.font === undefined ? opt.font : opt.c.font)\n const axisFontSizes = []\n axisFontSizes.push(opt.a.size === undefined ? opt.size : opt.a.size)\n axisFontSizes.push(opt.b.size === undefined ? opt.size : opt.b.size)\n axisFontSizes.push(opt.c.size === undefined ? opt.size : opt.c.size)\n const strokeColors = []\n strokeColors.push(opt.a?.stroke?.color === undefined ? opt.stroke.color : opt.a.stroke.color)\n strokeColors.push(opt.b?.stroke?.color === undefined ? opt.stroke.color : opt.b.stroke.color)\n strokeColors.push(opt.c?.stroke?.color === undefined ? opt.stroke.color : opt.c.stroke.color)\n const strokeWidths = []\n strokeWidths.push(opt.a?.stroke?.width === undefined ? opt.stroke.width : opt.a.stroke.width)\n strokeWidths.push(opt.b?.stroke?.width === undefined ? opt.stroke.width : opt.b.stroke.width)\n strokeWidths.push(opt.c?.stroke?.width === undefined ? opt.stroke.width : opt.c.stroke.width)\n const angleFonts = []\n angleFonts.push(opt.alpha.font === undefined ? opt.font : opt.alpha.font)\n angleFonts.push(opt.beta.font === undefined ? opt.font : opt.beta.font)\n angleFonts.push(opt.gamma.font === undefined ? opt.font : opt.gamma.font)\n const angleFontSizes = []\n angleFontSizes.push(opt.alpha.size === undefined ? opt.size : opt.alpha.size)\n angleFontSizes.push(opt.beta.size === undefined ? opt.size : opt.beta.size)\n angleFontSizes.push(opt.gamma.size === undefined ? opt.size : opt.gamma.size)\n\n // If 2D periodic, we save the periodic indices, and ensure a right\n // handed coordinate system.\n for (let iTrueBasis = 0; iTrueBasis < 3; ++iTrueBasis) {\n iBasis += 1\n const axisLabel = axisLabels[iBasis]\n const axisColor = cellBasisColors[iBasis]\n const axisFont = axisFonts[iBasis]\n const axisFontSize = axisFontSizes[iBasis]\n const angleFontSize = angleFontSizes[iBasis]\n const strokeWidth = strokeWidths[iBasis]\n const strokeColor = strokeColors[iBasis]\n const angleFont = angleFonts[iBasis]\n const angleColor = angleColors[iBasis]\n const angleLabel = angleLabels[iBasis]\n const angleStrokeColor = angleStrokeColors[iBasis]\n const angleStrokeWidth = angleStrokeWidths[iBasis]\n const axisEnabled = axisEnableds[iBasis]\n const angleEnabled = angleEnableds[iBasis]\n\n const collapsed1 = collapsed[iTrueBasis]\n const collapsed2 = collapsed[(iTrueBasis + 1) % 3]\n const collapsed3 = collapsed[(iTrueBasis + 2) % 3]\n const valid1 = valid[iTrueBasis]\n const valid2 = valid[(iTrueBasis + 1) % 3]\n const basisVec1 = basis[iTrueBasis]\n const basisVec2 = basis[(iTrueBasis + 1) % 3].clone()\n const basisVec3 = basis[(iTrueBasis + 2) % 3].clone()\n\n // Basis and angle label selection, same for all systems\n if (axisEnabled && !collapsed1 && valid1) {\n const origin = new THREE.Vector3(0, 0, 0)\n const dir = basisVec1.clone()\n\n // Add an axis label\n const textPos = dir.clone()\n .multiplyScalar(0.5)\n let labelOffset\n let newBasis\n if (collapsed2 && collapsed3) {\n newBasis = new THREE.Vector3(0, 0, 1)\n labelOffset = new THREE.Vector3().crossVectors(basisVec1, newBasis)\n } else if (collapsed2) {\n newBasis = new THREE.Vector3().crossVectors(basisVec1, basisVec3)\n labelOffset = new THREE.Vector3().crossVectors(basisVec1, newBasis)\n } else if (collapsed3) {\n newBasis = new THREE.Vector3().crossVectors(basisVec1, basisVec2)\n labelOffset = new THREE.Vector3().crossVectors(basisVec1, newBasis)\n } else {\n const labelOffset1 = new THREE.Vector3().crossVectors(basisVec1, basisVec2)\n const labelOffset2 = new THREE.Vector3().crossVectors(basisVec1, basisVec3)\n labelOffset = new THREE.Vector3().sub(labelOffset1).add(labelOffset2)\n }\n labelOffset.normalize()\n labelOffset.multiplyScalar(0.8)\n textPos.add(labelOffset)\n\n const axisLabelSprite = createLabel(\n textPos,\n axisLabel,\n axisColor,\n axisFont,\n axisFontSize,\n new THREE.Vector2(0.0, 0.0),\n strokeWidth,\n strokeColor\n )\n latticeConstants.add(axisLabelSprite)\n axisLabels.push(axisLabelSprite)\n\n // Add basis vector colored line\n const cellVectorMaterial = new THREE.MeshBasicMaterial({\n color: axisColor,\n transparent: true,\n opacity: 0.75\n })\n const cellVector = basisVec1.clone()\n const cellVectorLine = createCylinder(origin.clone(), cellVector.clone().add(origin), 0.09, 10, cellVectorMaterial)\n latticeConstants.add(cellVectorLine)\n\n // Add basis vector axis line\n const cellAxisMaterial = new THREE.MeshBasicMaterial({\n color: \"#000000\"\n })\n const axisStart = basis[iTrueBasis].clone()\n const axisEnd = axisStart.clone().multiplyScalar(1 + axisOffset / axisStart.length())\n const cellAxisVectorLine = createCylinder(origin.clone(), axisEnd, 0.02, 10, cellAxisMaterial)\n latticeConstants.add(cellAxisVectorLine)\n\n // Add axis arrow\n const arrowGeometry = new THREE.CylinderGeometry(0, 0.10, 0.5, 12)\n const arrowMaterial = new THREE.MeshBasicMaterial({\n color: infoColor\n })\n const arrow = new THREE.Mesh(arrowGeometry, arrowMaterial)\n arrow.position.copy(dir)\n .multiplyScalar(1 + axisOffset / dir.length())\n arrow.lookAt(new THREE.Vector3())\n arrow.rotateX(-Math.PI / 2)\n latticeConstants.add(arrow)\n }\n\n // Add angle label and curve\n if (angleEnabled && !collapsed1 && !collapsed2 && valid1 && valid2) {\n const arcMaterial = new THREE.LineDashedMaterial({\n color: infoColor,\n linewidth: 2,\n dashSize: 0.2,\n gapSize: 0.1\n })\n\n const normal = new THREE.Vector3().crossVectors(basisVec1, basisVec2)\n const angle = basisVec1.angleTo(basisVec2)\n const maxRadius = 5\n const minRadius = 1\n const radius = Math.max(\n Math.min(1 / 6 * basisVec1.length(), 1 / 6 * basisVec2.length(), maxRadius),\n minRadius\n )\n const curve = new THREE.EllipseCurve(\n 0, 0, // ax, aY\n radius, radius, // xRadius, yRadius\n 0, angle, // aStartAngle, aEndAngle\n false, // aClockwise\n 0 // aRotation\n )\n const nArcPoints = 20\n const points = curve.getSpacedPoints(nArcPoints)\n const arcGeometry = new THREE.BufferGeometry().setFromPoints(points)\n const arc = new THREE.Line(arcGeometry, arcMaterial)\n arc.computeLineDistances()\n\n // First rotate the arc so that it's x-axis points towards the\n // first basis vector that defines the arc\n const xAxis = new THREE.Vector3(1, 0, 0)\n const quaternion = new THREE.Quaternion().setFromUnitVectors(\n xAxis,\n basisVec1.clone().normalize()\n )\n arc.quaternion.copy(quaternion)\n\n // Then rotate the arc along it's x axis so that the xy-plane\n // coincides with the plane defined by the the two basis vectors\n // that define the plane.\n const verticesArray = arcGeometry.attributes.position.array\n const nVertices = verticesArray.length / 3\n const lastArcPointLocal = new THREE.Vector3().fromArray(verticesArray, (nVertices - 1) * 3)\n arc.updateMatrixWorld() // The positions are not otherwise updated properly\n const lastArcPointWorld = arc.localToWorld(lastArcPointLocal.clone())\n\n // The angle direction is defined by the first basis vector\n const axis = basisVec1\n const arcNormal = new THREE.Vector3()\n .crossVectors(axis, lastArcPointWorld)\n let planeAngle = normal.angleTo(arcNormal)\n const planeCross = new THREE.Vector3()\n .crossVectors(basisVec2, lastArcPointWorld)\n const directionValue = planeCross.dot(axis)\n if (directionValue > 0) {\n planeAngle = -planeAngle\n }\n arc.rotateX(planeAngle)\n\n // Add label for the angle\n arc.updateMatrixWorld() // The positions are not otherwise updated properly\n arc.updateMatrix() // The positions are not otherwise updated properly\n const angleLabelPos = arc.localToWorld(new THREE.Vector3().fromArray(verticesArray, (nArcPoints / 2 - 1) * 3))\n const angleLabelLen = angleLabelPos.length()\n angleLabelPos.multiplyScalar(1 + 0.3 / angleLabelLen)\n const angleLabelObj = createLabel(\n angleLabelPos,\n angleLabel.toString(),\n angleColor,\n angleFont,\n angleFontSize,\n new THREE.Vector2(0.0, 0.0),\n angleStrokeWidth,\n angleStrokeColor\n )\n latticeConstants.add(angleLabelObj)\n latticeConstants.add(arc)\n }\n }\n return latticeConstants\n}\n\n/**\n * Helper function for creating a text sprite that lives in 3D space.\n *\n * @param pos1 - Start position\n * @param pos2 - End position\n * @param radius - Cylinder radius\n * @param material - Cylinder material\n */\nfunction createLabel(\n position,\n label,\n color,\n fontFamily,\n fontSize,\n offset = undefined,\n strokeWidth = 0,\n strokeColor = \"#000\"\n) {\n const canvas = document.createElement('canvas')\n const size = 256\n canvas.width = size\n canvas.height = size\n const ctx = canvas.getContext('2d')\n\n // Draw label\n const fontFactor = 0.90\n ctx.fillStyle = color\n ctx.font = `${fontFactor * size}px ${fontFamily}`\n ctx.textAlign = \"center\"\n ctx.textBaseline = \"middle\"\n if (strokeWidth > 0) {\n ctx.lineWidth = strokeWidth * size\n ctx.strokeStyle = strokeColor\n ctx.strokeText(label, size / 2, size / 2)\n }\n ctx.fillText(label, size / 2, size / 2)\n\n const texture = new THREE.Texture(canvas)\n texture.needsUpdate = true\n const material = new THREE.SpriteMaterial({ map: texture })\n const sprite = new THREE.Sprite(material)\n sprite.scale.set(fontSize, fontSize, 1)\n\n // Apply offset\n if (offset === undefined) {\n offset = new THREE.Vector2(0, 0)\n }\n const trueOffset = new THREE.Vector2()\n trueOffset.addVectors(offset, new THREE.Vector2(0.5, 0.5))\n sprite.center.copy(trueOffset)\n\n const labelRoot = new THREE.Object3D()\n labelRoot.position.copy(position)\n labelRoot.add(sprite)\n\n return labelRoot\n}\n\n/**\n * Helper function for creating a cylinder mesh.\n *\n * @param pos1 - Start position\n * @param pos2 - End position\n * @param radius - Cylinder radius\n * @param material - Cylinder material\n */\nfunction createCylinder(pos1, pos2, radius, nSegments, material) {\n const direction = new THREE.Vector3().subVectors(pos2, pos1)\n const dirLen = direction.length()\n const dirNorm = direction.clone().divideScalar(dirLen)\n const arrow = new THREE.ArrowHelper(dirNorm, pos1)\n const edgeGeometry = new THREE.CylinderGeometry(radius, radius, dirLen, nSegments)\n const edge = new THREE.Mesh(edgeGeometry, material)\n edge.rotation.copy(arrow.rotation.clone())\n edge.position.copy(new THREE.Vector3().addVectors(pos1, direction.multiplyScalar(0.5)))\n\n return edge\n}\n\n/**\n * Used to add custom three.js objects to an NGL stage. Note that this adds the\n * object to an item inside 'modelGroup'. This is the easiest way to attach the\n * objects to a group with the correct translations and rotations, but may break\n * if the first item is not a group.\n *\n * @param object - The object to add. Can be any object that inherits from Object3D.\n * @param stage - The NGL Stage to add the object into.\n * @param obects - List of custom objects into which the given one is added.\n */\nfunction addObject3DToStage(object, stage) {\n const scene = stage.viewer.scene\n const rotationGroup = scene.getObjectByName('rotationGroup')\n const translationGroup = rotationGroup.getObjectByName('translationGroup')\n const pickingGroup = translationGroup.getObjectByName('modelGroup')\n // TODO: Since we don't know the actual three.js Object3Ds that correspond to\n // each component, we are simply adding the object to the latest model object\n // that is found and is visible by default.\n const group = pickingGroup.children[pickingGroup.children.length - 2]\n group.add(object)\n}\n\n/**\n * For setting the positions according to the currently set wrapmode.\n *\n * @param {ngl.Component} component The ngl component\n * @param {ngl.Representation} representation The ngl representation\n */\nfunction wrapRepresentation(component, representation) {\n let posNew\n const indices = representation.indices\n const wrapMode = representation.wrapMode\n const basis = component.basis\n const cartToFrac = component.cartToFrac\n const fracToCart = component.fracToCart\n const pbc = component.pbc\n\n if (!basis) return\n if (!pbc.some(a => a)) return\n\n // Gather and store the original cartesian positions if they are not already\n // resolved.\n if (isNil(representation.posCart)) {\n representation.posCart = []\n for (const index of indices) {\n const ap = component.structure.getAtomProxy(index)\n representation.posCart.push(ap.positionToVector3(new THREE.Vector3()))\n }\n }\n\n // Use wrapped positions\n if (wrapMode === wrapModes.wrap.key) {\n if (!isNil(representation.posWrap)) {\n posNew = representation.posWrap\n } else {\n posNew = representation.posCart.map(pos => {\n return pos.clone().applyMatrix4(cartToFrac)\n })\n wrapPositions(posNew, cartToFrac, pbc)\n posNew = posNew.map(pos => pos.applyMatrix4(fracToCart))\n representation.posWrap = posNew\n }\n // Use unwrapped positions\n } else if (wrapMode === wrapModes.unwrap.key) {\n if (!isNil(representation.posUnwrap)) {\n posNew = representation.posUnwrap\n } else {\n const posFrac = representation.posCart.map(pos => {\n return pos.clone().applyMatrix4(cartToFrac)\n })\n const centerOfPos = getCenterOfPositions(posFrac, component.pbc)\n posNew = posFrac.map(pos => pos.add(new Vector3(0.5, 0.5, 0.5).sub(centerOfPos)))\n wrapPositions(posNew, cartToFrac, pbc)\n posNew = posNew.map(pos => pos.applyMatrix4(fracToCart))\n representation.posUnwrap = posNew\n }\n // Use original positions\n } else if (wrapMode === wrapModes.original.key) {\n posNew = representation.posCart\n } else {\n throw Error('Invalid wrapmode provided.')\n }\n\n // Set new positions within the structure data. This follows roughly the\n // Structure.updatePosition()-function in NGL.\n let i = 0\n for (const index of indices) {\n const ap = component.structure.getAtomProxy(index)\n ap.positionFromVector3(posNew[i])\n ++i\n }\n\n // This updates the actual visuals. TODO: not sure why this is producing an\n // exception, ignored for now.\n component.structure._hasCoords = undefined\n component.structure.refreshPosition()\n try {\n component.updateRepresentations()\n } catch {\n }\n}\n\n/**\n * Wraps fractional positions within a cell respecting periodic boundary\n * conditions. Wrapping is done in place.\n *\n * @param {THREE.Vector3[]} posFrac Positions to wrap\n * @param {THREE.Matrix4} cartToFrac Matrix to convert cartesian positions to fractional\n * @param {bool[]} pbc Periodic boundary conditions for each lattice vector\n */\nfunction wrapPositions(posFrac, cartToFrac, pbc) {\n const eps = 1e-2\n const epsArray = new THREE.Vector3(eps, eps, eps).applyMatrix4(cartToFrac).toArray()\n const center = [0.5, 0.5, 0.5] // Positions will be nearest to this location\n const shift = center.map((center, i) => pbc[i] ? center - 0.5 - epsArray[i] : 0)\n for (let len = posFrac.length, i = 0; i < len; ++i) {\n const iFracPos = posFrac[i]\n for (let i = 0; i < 3; ++i) {\n if (!pbc[i]) continue\n const comp = iFracPos.getComponent(i)\n let remainder = ((comp - shift[i]) % 1) + shift[i]\n // Unlike in python, remainder in javascript can be negative\n if (remainder < -epsArray[i]) remainder += 1\n iFracPos.setComponent(i, remainder)\n }\n }\n}\n\n// This data is copied directly from NGL as it cannot be imported directly.\nconst atomicNumbers = {\n H: 1, D: 1, T: 1, HE: 2, LI: 3, BE: 4, B: 5, C: 6, N: 7, O: 8, F: 9, NE: 10, NA: 11, MG: 12, AL: 13, SI: 14, P: 15, S: 16, CL: 17, AR: 18, K: 19, CA: 20, SC: 21, TI: 22, V: 23, CR: 24, MN: 25, FE: 26, CO: 27, NI: 28, CU: 29, ZN: 30, GA: 31, GE: 32, AS: 33, SE: 34, BR: 35, KR: 36, RB: 37, SR: 38, Y: 39, ZR: 40, NB: 41, MO: 42, TC: 43, RU: 44, RH: 45, PD: 46, AG: 47, CD: 48, IN: 49, SN: 50, SB: 51, TE: 52, I: 53, XE: 54, CS: 55, BA: 56, LA: 57, CE: 58, PR: 59, ND: 60, PM: 61, SM: 62, EU: 63, GD: 64, TB: 65, DY: 66, HO: 67, ER: 68, TM: 69, YB: 70, LU: 71, HF: 72, TA: 73, W: 74, RE: 75, OS: 76, IR: 77, PT: 78, AU: 79, HG: 80, TL: 81, PB: 82, BI: 83, PO: 84, AT: 85, RN: 86, FR: 87, RA: 88, AC: 89, TH: 90, PA: 91, U: 92, NP: 93, PU: 94, AM: 95, CM: 96, BK: 97, CF: 98, ES: 99, FM: 100, MD: 101, NO: 102, LR: 103, RF: 104, DB: 105, SG: 106, BH: 107, HS: 108, MT: 109, DS: 110, RG: 111, CN: 112, NH: 113, FL: 114, MC: 115, LV: 116, TS: 117, OG: 118\n}\nconst vdwRadii = {\n 1: 1.1, 2: 1.4, 3: 1.81, 4: 1.53, 5: 1.92, 6: 1.7, 7: 1.55, 8: 1.52, 9: 1.47, 10: 1.54, 11: 2.27, 12: 1.73, 13: 1.84, 14: 2.1, 15: 1.8, 16: 1.8, 17: 1.75, 18: 1.88, 19: 2.75, 20: 2.31, 21: 2.3, 22: 2.15, 23: 2.05, 24: 2.05, 25: 2.05, 26: 2.05, 27: 2.0, 28: 2.0, 29: 2.0, 30: 2.1, 31: 1.87, 32: 2.11, 33: 1.85, 34: 1.9, 35: 1.83, 36: 2.02, 37: 3.03, 38: 2.49, 39: 2.4, 40: 2.3, 41: 2.15, 42: 2.1, 43: 2.05, 44: 2.05, 45: 2.0, 46: 2.05, 47: 2.1, 48: 2.2, 49: 2.2, 50: 1.93, 51: 2.17, 52: 2.06, 53: 1.98, 54: 2.16, 55: 3.43, 56: 2.68, 57: 2.5, 58: 2.48, 59: 2.47, 60: 2.45, 61: 2.43, 62: 2.42, 63: 2.4, 64: 2.38, 65: 2.37, 66: 2.35, 67: 2.33, 68: 2.32, 69: 2.3, 70: 2.28, 71: 2.27, 72: 2.25, 73: 2.2, 74: 2.1, 75: 2.05, 76: 2.0, 77: 2.0, 78: 2.05, 79: 2.1, 80: 2.05, 81: 1.96, 82: 2.02, 83: 2.07, 84: 1.97, 85: 2.02, 86: 2.2, 87: 3.48, 88: 2.83, 89: 2.0, 90: 2.4, 91: 2.0, 92: 2.3, 93: 2.0, 94: 2.0, 95: 2.0, 96: 2.0, 97: 2.0, 98: 2.0, 99: 2.0, 100: 2.0, 101: 2.0, 102: 2.0, 103: 2.0, 104: 2.0, 105: 2.0, 106: 2.0, 107: 2.0, 108: 2.0, 109: 2.0, 110: 2.0, 111: 2.0, 112: 2.0, 113: 2.0, 114: 2.0, 115: 2.0, 116: 2.0, 117: 2.0, 118: 2.0\n}\nconst elementColors = {\n 'H': 0xFFFFFF, 'HE': 0xD9FFFF, 'LI': 0xCC80FF, 'BE': 0xC2FF00, 'B': 0xFFB5B5, 'C': 0x909090, 'N': 0x3050F8, 'O': 0xFF0D0D, 'F': 0x90E050, 'NE': 0xB3E3F5, 'NA': 0xAB5CF2, 'MG': 0x8AFF00, 'AL': 0xBFA6A6, 'SI': 0xF0C8A0, 'P': 0xFF8000, 'S': 0xFFFF30, 'CL': 0x1FF01F, 'AR': 0x80D1E3, 'K': 0x8F40D4, 'CA': 0x3DFF00, 'SC': 0xE6E6E6, 'TI': 0xBFC2C7, 'V': 0xA6A6AB, 'CR': 0x8A99C7, 'MN': 0x9C7AC7, 'FE': 0xE06633, 'CO': 0xF090A0, 'NI': 0x50D050, 'CU': 0xC88033, 'ZN': 0x7D80B0, 'GA': 0xC28F8F, 'GE': 0x668F8F, 'AS': 0xBD80E3, 'SE': 0xFFA100, 'BR': 0xA62929, 'KR': 0x5CB8D1, 'RB': 0x702EB0, 'SR': 0x00FF00, 'Y': 0x94FFFF, 'ZR': 0x94E0E0, 'NB': 0x73C2C9, 'MO': 0x54B5B5, 'TC': 0x3B9E9E, 'RU': 0x248F8F, 'RH': 0x0A7D8C, 'PD': 0x006985, 'AG': 0xC0C0C0, 'CD': 0xFFD98F, 'IN': 0xA67573, 'SN': 0x668080, 'SB': 0x9E63B5, 'TE': 0xD47A00, 'I': 0x940094, 'XE': 0x940094, 'CS': 0x57178F, 'BA': 0x00C900, 'LA': 0x70D4FF, 'CE': 0xFFFFC7, 'PR': 0xD9FFC7, 'ND': 0xC7FFC7, 'PM': 0xA3FFC7, 'SM': 0x8FFFC7, 'EU': 0x61FFC7, 'GD': 0x45FFC7, 'TB': 0x30FFC7, 'DY': 0x1FFFC7, 'HO': 0x00FF9C, 'ER': 0x00E675, 'TM': 0x00D452, 'YB': 0x00BF38, 'LU': 0x00AB24, 'HF': 0x4DC2FF, 'TA': 0x4DA6FF, 'W': 0x2194D6, 'RE': 0x267DAB, 'OS': 0x266696, 'IR': 0x175487, 'PT': 0xD0D0E0, 'AU': 0xFFD123, 'HG': 0xB8B8D0, 'TL': 0xA6544D, 'PB': 0x575961, 'BI': 0x9E4FB5, 'PO': 0xAB5C00, 'AT': 0x754F45, 'RN': 0x428296, 'FR': 0x420066, 'RA': 0x007D00, 'AC': 0x70ABFA, 'TH': 0x00BAFF, 'PA': 0x00A1FF, 'U': 0x008FFF, 'NP': 0x0080FF, 'PU': 0x006BFF, 'AM': 0x545CF2, 'CM': 0x785CE3, 'BK': 0x8A4FE3, 'CF': 0xA136D4, 'ES': 0xB31FD4, 'FM': 0xB31FBA, 'MD': 0xB30DA6, 'NO': 0xBD0D87, 'LR': 0xC70066, 'RF': 0xCC0059, 'DB': 0xD1004F, 'SG': 0xD90045, 'BH': 0xE00038, 'HS': 0xE6002E, 'MT': 0xEB0026, 'DS': 0xFFFFFF, 'RG': 0xFFFFFF, 'CN': 0xFFFFFF, 'UUT': 0xFFFFFF, 'FL': 0xFFFFFF, 'UUP': 0xFFFFFF, 'LV': 0xFFFFFF, 'UUH': 0xFFFFFF, 'D': 0xFFFFC0, 'T': 0xFFFFA0\n}\n\n/**\n * Calculates the center of positions and also takes the periodicity of the\n * system into account.\n *\n * The algorithm is replicated from:\n * https://en.wikipedia.org/wiki/Center_of_mass#Systems_with_periodic_boundary_conditions\n *\n * @param {*} relative_positions\n * @param {*} cell\n * @param {*} pbc\n * @returns\n */\nfunction getCenterOfPositions(posFrac, pbc) {\n const center = new Vector3()\n const total = posFrac.length\n for (const iComp of [0, 1, 2]) {\n const iPbc = pbc[iComp]\n let centerComp\n if (iPbc) {\n let xiSum = 0\n let zetaSum = 0\n for (const pos of posFrac) {\n const component = pos.getComponent(iComp)\n const theta = component * 2 * Math.PI\n xiSum += Math.cos(theta)\n zetaSum += Math.sin(theta)\n }\n const xiMean = xiSum / total\n const zetaMean = zetaSum / total\n const thetaMean = Math.atan2(-zetaMean, -xiMean) + Math.PI\n centerComp = thetaMean / (2 * Math.PI)\n } else {\n let sum = 0\n for (const pos of posFrac) {\n sum += pos.getComponent(iComp)\n }\n centerComp = sum / posFrac.length\n }\n center.setComponent(iComp, centerComp)\n }\n return center\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { isEmpty, isNil, merge, cloneDeep } from 'lodash'\nimport { PropertyCard } from './PropertyCard'\nimport { Tab, Tabs, Typography, Box } from '@material-ui/core'\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\nimport StructureNGL from '../../visualization/StructureNGL'\nimport { FloatableNoReparent } from '../../visualization/Floatable'\nimport TreeView from '@material-ui/lab/TreeView'\nimport TreeItem from '@material-ui/lab/TreeItem'\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight'\nimport { QuantityTable, QuantityRow, QuantityCell } from '../../Quantity'\n\n/**\n * For displaying the most descriptive chemical formula that is present in an\n * entry.\n*/\nconst nElementMap = {\n 1: 'unary',\n 2: 'binary',\n 3: 'ternary',\n 4: 'quaternary',\n 5: 'quinary',\n 6: 'sexinary',\n 7: 'septenary',\n 8: 'octanary',\n 9: 'nonary',\n 10: 'decimary'\n}\n\n/**\n * Displays information about the material and it's structure.\n */\nconst useMaterialCardStyles = makeStyles((theme) => ({\n root: {\n height: '700px'\n },\n card: {\n height: '100%',\n width: '100%'\n }\n}))\n\nconst MaterialCardTopology = React.memo(({index, archive}) => {\n const styles = useMaterialCardStyles()\n const [topologyTrees, topologyMap] = useMemo(() => getTopology(index, archive), [index, archive])\n const [selected, setSelected] = useState(topologyTrees[0].system_id)\n const [tab, setTab] = useState('composition')\n const [float, setFloat] = useState(false)\n\n // Handle tab change\n const handleTabChange = useCallback((event, value) => {\n setTab(value)\n }, [])\n\n // Handle float change\n const handleFloat = useCallback(() => {\n setFloat(old => !old)\n }, [])\n\n return \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n})\n\nMaterialCardTopology.propTypes = {\n index: PropTypes.object.isRequired,\n archive: PropTypes.object\n}\nconst useTopologyStyles = makeStyles((theme) => ({\n root: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n },\n tree: {\n borderTop: `1px solid ${theme.palette.divider}`,\n overflow: 'auto'\n },\n spacer: {\n flexGrow: 1\n }\n}))\n\n/**\n * Displays the topology in an interactive tree.\n */\nconst Topology = React.memo(({topologyTrees, topologyMap, selected, onSelect}) => {\n const styles = useTopologyStyles()\n\n // Add selection handlers and gather a list of all nodes.\n const nodes = useMemo(() => {\n const nodes = []\n Object.values(topologyMap).forEach(node => {\n node.onClick = () => onSelect(node.system_id)\n nodes.push(node.system_id)\n })\n return nodes\n }, [onSelect, topologyMap])\n\n const [expanded, setExpanded] = useState(nodes)\n const description = topologyMap?.[selected].description\n\n // Handle node expansion\n const handleToggle = useCallback((event, nodeIds) => {\n setExpanded(nodeIds)\n }, [])\n\n return \n \n )}\n \n \n {description && \n Description: \n {description} \n }\n
\n})\nTopology.propTypes = {\n topologyTrees: PropTypes.array,\n topologyMap: PropTypes.object,\n selected: PropTypes.string,\n onSelect: PropTypes.func\n}\n\nconst useTopologyItemStyles = makeStyles({\n root: (props) => ({\n '&:hover > $content': {\n backgroundColor: props.theme.palette.action.hover\n },\n '&$selected > $content': {\n backgroundColor: props.theme.palette.primary.main,\n color: 'white'\n },\n '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {\n backgroundColor: 'transparent'\n }\n }),\n content: (props) => ({\n borderBottom: `1px solid ${props.theme.palette.divider}`,\n fontWeight: props.theme.typography.fontWeightMedium,\n '$expanded > &': {\n fontWeight: props.theme.typography.fontWeightRegular\n },\n paddingLeft: props.theme.spacing(0.75 * props.level),\n boxSizing: 'border-box'\n }),\n group: (props) => ({marginLeft: 0}),\n // These empty classes are needed for reset\n expanded: (props) => ({}),\n selected: (props) => ({}),\n label: (props) => ({\n fontWeight: 'inherit',\n color: 'inherit',\n paddingLeft: 0\n }),\n row: (props) => ({\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n paddingRight: props.theme.spacing(0.5)\n }),\n column: (props) => ({\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n padding: props.theme.spacing(0.25, 0),\n flexGrow: 1,\n height: props.theme.spacing(5)\n }),\n nodeLabelPrimary: (props) => ({\n textTransform: 'uppercase',\n fontSize: 14\n }),\n nodeLabelSecondary: (props) => ({\n fontSize: 12\n }),\n iconContainer: (props) => ({\n paddingLeft: props.theme.spacing(0.5)\n })\n})\n\nconst TopologyItem = React.memo(({node, level, selected}) => {\n // The best way to dynamically manipulate the classes created by makeStyles\n // was to make each style dependent on a set of properties. Creating the\n // styles within the function does not seem to work.\n const theme = useTheme()\n const styleProps = useMemo(() => ({theme, level: level}), [theme, level])\n const classes = useTopologyItemStyles(styleProps)\n const isSelected = selected === node.system_id\n\n return \n
\n }\n classes={{\n root: classes.root,\n content: classes.content,\n expanded: classes.expanded,\n selected: classes.selected,\n iconContainer: classes.iconContainer,\n group: classes.group,\n label: classes.label\n }}\n >\n {node.child_systems && node.child_systems.map(node => {\n return \n \n {`${node.label}`}\n \n \n {node.label === 'original'\n ? undefined\n : `${node.structural_type}` + (!isEmpty(node?.child_systems) && node.structural_type === 'group'\n ? ` (${[...new Set(node.child_systems.map(x => x.structural_type))].join(', ')})`\n : ''\n )}\n \n
\n \n
\n})\n\nResourceDetails.propTypes = {\n data: PropTypes.object.isRequired\n}\n\nconst ResourceActions = React.memo(({data}) => {\n return \n
\n \n
\n \n
\n \n
\n \n Input to a task or workflow.\n
\n } else if (label === 'output') {\n tooltip =\n Output from a task or workflow.\n
\n } else if (label === 'workflow') {\n tooltip =\n Task containing further sub-tasks.\n
\n } else if (label === 'task') {\n tooltip =\n Elementary task with inputs and outputs.\n
\n }\n setTooltipContent(tooltip)\n })\n .on('mouseout', () => {\n setTooltipContent('')\n })\n }\n\n // add legend\n legend.append('path')\n .attr('d', () => {\n const line = d3.line().x(d => d[0]).y(d => d[1])\n return line([\n [width / 4 + 70, height - legendSize * 3],\n [3 * width / 4, height - legendSize * 3],\n [3 * width / 4, height],\n [width / 4, height],\n [width / 4, height - legendSize * 3],\n [width / 4 + 10, height - legendSize * 3]\n ])\n })\n .attr('stroke', grey[900])\n .attr('stroke-width', 0.5)\n .attr('fill', 'none')\n legend.append('text')\n .text('Legend')\n .attr('class', 'text')\n .attr('font-weight', 'bold')\n .attr('x', width / 4 + 40)\n .attr('y', height - legendSize * 2.8)\n\n const legendLabels = Object.keys(nodeShape)\n legendLabels.forEach((label, index) => addLegend(label, index))\n\n // add zoom\n const zoomBehaviors = d3.zoom()\n .on('zoom', () => {\n zoomTransform = d3.event.transform\n svgGroup.attr('transform', zoomTransform)\n })\n\n svg.call(zoomBehaviors)\n\n // set zoom factor to <1 inorder to see the inputs and outputs\n const zoomF = (r) => width * scaling / r\n\n // add force directed behavior for tasks inside box\n const simulation = d3.forceSimulation()\n .force('link', d3.forceLink().id(d => d.id))\n .force('charge', d3.forceManyBody())\n .velocityDecay(0.2)\n .alphaDecay(0.2)\n\n // add drag\n const dragBehaviors = d3.drag()\n .on('drag', d => {\n if (!d.parent || d.id === nodes[0].id) return\n const event = d3.event.sourceEvent\n const k = zoomF(view[2])\n const x = ((event.offsetX - zoomTransform.x) / zoomTransform.k - width / 2) / k + view[0]\n const y = ((event.offsetY - zoomTransform.y) / zoomTransform.k - height / 2) / k + view[1]\n setTooltipContent('')\n if (enableForce) {\n d.fx = x\n d.fy = y\n } else {\n d.x = x\n d.y = y\n zoomTo(view)\n }\n })\n .on('start', d => {\n if (!enableForce) return\n simulation.alphaTarget(0.7).restart()\n })\n .on('end', d => {\n dragged = true\n if (!enableForce) return\n simulation.alphaTarget(0)\n d.fx = null\n d.fy = null\n })\n\n const gNode = svgGroup.append('g')\n .attr('class', 'node')\n .attr('cursor', 'pointer')\n .attr('pointer-events', 'all')\n\n const gLink = svgGroup.append('g')\n .attr('class', 'link')\n .attr('cursor', 'default')\n .attr('pointer-events', 'all')\n .attr('stroke', color.link)\n\n const setNodesPosition = (root) => {\n // layout root and its nodes horizontally from inputs (left) root and tasks (middle)\n // and outputs (right)\n if (!root.nodes || root.children) return\n\n const circleRadius = root.r / 12\n const dx = circleRadius * 4\n const fx = 1.4\n const tasks = root.nodes.filter(node => node.type === 'tasks')\n root.children = tasks\n // tasks are arranged in a circle inside the parent workflow\n tasks.forEach((node, index) => {\n const theta = (2 * Math.PI * index / tasks.length) - Math.PI / 4\n node.r = Math.sqrt(node.size || 1) * circleRadius * 1.5\n const r = root.r - node.r\n node.x = -r * 0.95 * Math.cos(theta) * whRatio + root.x\n node.y = -r * (theta < 0 || theta > Math.PI ? 0.95 : 0.85) * Math.sin(theta) + root.y\n })\n\n // inputs left\n const inputs = root.nodes.filter(node => node.type === 'inputs')\n let offsetX = (inputs.length - 1) * dx / 2\n inputs.forEach((node, index) => {\n node.y = index * dx - offsetX + root.y\n node.x = -root.r * fx * whRatio + root.x\n node.r = circleRadius\n })\n\n // inputs-outputs top\n const inouts = root.nodes.filter(node => node.type === 'inputs-outputs')\n offsetX = (inouts.length - 1) * dx\n inouts.forEach((node, index) => {\n node.x = index * dx * 2 - offsetX + root.x\n node.y = -root.r * fx + root.y\n node.r = circleRadius\n })\n\n // outputs right\n const outputs = root.nodes.filter(node => node.type === 'outputs')\n offsetX = (outputs.length - 1) * dx / 2\n outputs.forEach((node, index) => {\n node.y = index * dx - offsetX + root.y\n node.x = root.r * whRatio * fx + root.x\n node.r = circleRadius\n })\n root.nodes = [...inputs, ...inouts, ...root.children, ...outputs]\n }\n\n const fLink = (source, target) => {\n let vx = target.x - source.x\n let vy = target.y - source.y\n const vr = Math.sqrt(vx * vx + vy * vy)\n const sin = vy / vr\n const cos = vx / vr\n const sx = vy ? Math.max(-1, Math.min(cos / sin, 1)) * Math.sign(sin) : Math.sign(vx)\n const sy = vx ? Math.max(-1, Math.min(sin / cos, 1)) * Math.sign(cos) : Math.sign(vy)\n const targetR = (f) => Math.abs(target.r) * f\n let offsetxt, offsetyt, offsetxs, offsetys\n if (source.r > 0) {\n // offset from edge of circle\n offsetxs = cos * source.r\n offsetys = sin * source.r\n } else {\n // offset from edge of square\n offsetxs = -sx * source.r * whRatio\n offsetys = -sy * source.r\n }\n if (target.r > 0) {\n // offset to edge of circle\n offsetxt = cos * targetR(1)\n offsetyt = sin * targetR(1)\n } else {\n // offset to edge of square\n offsetxt = sx * targetR(whRatio)\n offsetyt = sy * targetR(1)\n }\n source = {x: source.x + offsetxs, y: source.y + offsetys}\n target = {x: target.x - offsetxt, y: target.y - offsetyt}\n vx = target.x - source.x\n vy = target.y - source.y\n const line = d3.line().x(d => d[0]).y(d => d[1])\n .curve(d3.curveBasis)\n const points = [[source.x, source.y]]\n if (Math.abs(vx) > Math.abs(vy)) {\n target.x = target.x - markerWidth * 2 * Math.sign(vx)\n // points.push([source.x + vx / 2, source.y])\n // points.push([source.x + vx / 2, target.y])\n } else {\n target.y = target.y - markerWidth * 2 * Math.sign(vy)\n // points.push([source.x, source.y + vy / 2])\n // points.push([target.x, source.y + vy / 2])\n }\n points.push([target.x, target.y])\n return line(points)\n }\n\n const zoomTo = (v) => {\n if (!node) return\n\n // for elementary tasks, set radius to 1/6\n const k = zoomF(v[2])\n const rk = (node) => {\n return node.id === focus.id && !isWorkflow(node) ? 1 / 6 : 1\n }\n const bound = (d) => {\n let x = (d.x - v[0]) * k + width / 2\n let y = (d.y - v[1]) * k + height / 2\n const s = 0.8 * scaling\n if (d.type === 'tasks' && d.id !== source.id) {\n x = Math.min(Math.max(x, s * width), (1 - s) * width)\n y = Math.min(Math.max(y, s * height), (1 - s) * height)\n }\n return [x, y]\n }\n\n view = v\n node\n .attr('transform', d => {\n const [x, y] = bound(d)\n return `translate(${x},${y})`\n })\n node.selectAll('circle').attr('r', d => d.r * rk(d) * k)\n node.selectAll('rect')\n .attr('x', d => -d.r * rk(d) * k * whRatio)\n .attr('y', d => -d.r * rk(d) * k)\n .attr('rx', d => d.r * rk(d) * k * 0.05)\n .attr('width', d => d.r * 2 * rk(d) * k * whRatio)\n .attr('height', d => d.r * 2 * rk(d) * k)\n line.attr('d', d => {\n const translate = (node) => {\n const isCircle = ['inputs', 'outputs', 'inputs-outputs'].includes(node.type)\n const dr = node.r * rk(node) * k\n const [x, y] = bound(node)\n return {\n x: x,\n y: y,\n r: isCircle ? dr : -dr\n }\n }\n return fLink(translate(d.source), translate(d.target))\n })\n node.selectAll('text').attr('y', d => -1.2 * d.r * rk(d) * k)\n }\n\n const zoom = (d) => {\n focus = d\n if (!focus) return\n const transition = svg.transition()\n .duration(500)\n .tween('zoom', d => {\n const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2])\n return t => zoomTo(i(t))\n })\n\n node.selectAll('text')\n .transition(transition)\n }\n\n const update = (source) => {\n if (!source) return\n\n if (!source.nodes || !source.nodes.length) return\n\n dragged = false\n\n const setShowNodes = (inputValue) => {\n const value = []\n if (hasError) setCurrentNode(currentNode)\n let sourceNode = currentNode\n if (['inputs', 'outputs'].includes(currentNode.type)) {\n sourceNode = currentNode.parent\n }\n if (!sourceNode) return\n let total = 1\n const nodes = sourceNode.nodes.filter(node => node.type === (currentNode.type || 'tasks'))\n if (nodes.length) total = nodes[0].total\n const toNumber = (value) => {\n if (value.includes('%')) return Math.floor(parseFloat(value.replace('%')) * total / 100)\n if (value.includes('.')) return Math.floor(parseFloat(value.replace('%')) * total)\n value = parseInt(value)\n if (value < 0) value = total + value\n return value\n }\n for (const query of inputValue.split(',')) {\n try {\n const q = query.split(':')\n if (q.length === 2) {\n value.push(...range(...q.map((qi, n) => qi ? toNumber(qi) : n === 0 ? 0 : total)))\n } else {\n value.push(toNumber(q[0]))\n }\n } catch (error) {\n console.error(error)\n hasError = true\n setCurrentNode(null)\n break\n }\n }\n if (!value.length) return\n dquery['resolveIndices'][currentNode.type || 'tasks'] = [...new Set(value)]\n source.nodes = source.nodes.filter(node => node.id !== currentNode.id)\n // set children and links to recalculate node positions and links\n const d = source\n d.children = undefined\n d.links = undefined\n d.parent = source.parent\n resolveSection(d, query).then(d => {\n if (!d) return\n getNodes(d, dquery).then(nodes => {\n d.nodes = nodes\n getLinks(d, query).then(links => {\n d.links = links\n update(d)\n zoom(d)\n }).catch(asyncError)\n }).catch(asyncError)\n .catch(asyncError)\n })\n }\n\n d3.select('#nodes-filter-clear')\n .on('click', () => {\n const mid = (query.maxNodes || 6) / 2\n setShowNodes(`:${mid},${-mid}:`)\n })\n\n d3.select('#nodes-filter-enter')\n .on('keydown', () => {\n const inputValue = d3.event.target.value\n if (d3.event.key === 'Enter' && inputValue) setShowNodes(inputValue)\n })\n\n d3.select('#backbutton')\n .on('click', () => {\n previousNode = source.parent\n handleClickIcon(source)\n })\n\n d3.select('#resetbutton')\n .on('click', () => {\n previousNode = 'root'\n root.nodes = null\n root.links = null\n root.children = null\n dquery.resolveIndices = {}\n resolveSection(root, query).then(d => {\n if (!d) return\n getNodes(d, query).then(nodes => {\n d.nodes = nodes\n getLinks(d, query).then(links => {\n d.links = links\n update(d)\n zoom(d)\n }).catch(asyncError)\n }).catch(asyncError)\n .catch(asyncError)\n })\n svg.call(zoomBehaviors.transform, d3.zoomIdentity)\n if (enableForce) simulation.alphaTarget(0)\n })\n\n d3.select('#legendtogglebutton')\n .on('click', () => {\n const visibility = legend.attr('visibility') === 'visible' ? 'hidden' : 'visible'\n legend.attr('visibility', visibility)\n setShowLegend(visibility === 'visible')\n })\n\n d3.select('#forcetogglebutton')\n .on('click', () => {\n enableForce = !enableForce\n setEnableForce(enableForce)\n update(source)\n zoom(source)\n if (enableForce) {\n simulation.alphaTarget(0.7).restart()\n } else {\n simulation.alphaTarget(0)\n }\n })\n\n // set ids and size\n const maxLength = Math.max(...source.nodes\n .filter(node => node.type === 'tasks').map(node => node.nChildren || 0))\n source.size = source.nChildren / maxLength\n source.id = id\n id = id + 1\n source.nodes.forEach((node) => {\n node.size = isWorkflow(node) ? node.nChildren / maxLength : 1\n // put a lower limit on size so node will not get too small\n node.size = Math.max(node.size, 0.1)\n node.id = id\n id = id + 1\n })\n\n setNodesPosition(source)\n\n nodes = [source, ...source.nodes]\n const links = source.links\n\n links.forEach((link) => {\n link.id = `${link.source.id}-${link.target.id}`\n })\n\n addLinkMarkers(links)\n\n if (enableForce) {\n const k = zoomF(source.r * 2)\n simulation\n .nodes(source.nodes.filter(node => node.type === 'tasks'))\n .on('tick', () => zoomTo(view))\n\n simulation\n .force('charge')\n .strength(-10 / k ** 2)\n\n simulation\n .force('link')\n .strength(0.005 / k)\n .distance(source.r)\n .links(source.links.filter(link => link.source.type === 'tasks' && link.target.type === 'tasks'))\n\n simulation\n .force('center', d3.forceCenter(source.x, source.y))\n\n simulation\n .force('collide', d3.forceCollide(source.r / 3).strength(2))\n }\n\n const handleMouseOverIcon = (d) => {\n d3.select(`#icon-${d.id}`).style('stroke-opacity', 1)\n if (d.id === source.id) {\n if (!previousNode || previousNode === 'root') return\n setTooltipContent(Click to go back up
)\n return\n }\n if (['inputs', 'outputs'].includes(d.type)) {\n setTooltipContent(Click to switch {d.type} filter
)\n }\n const sectionType = d.sectionType === 'tasks' ? 'task' : 'workflow'\n if (d.type === 'tasks') setTooltipContent(Click to expand {sectionType}
)\n }\n\n const handleMouseOutIcon = (d) => {\n setTooltipContent('')\n d3.select(`#icon-${d.id}`).style('stroke-opacity', 0.5)\n }\n\n const handleClickIcon = (d) => {\n if (dragged) d.children = null\n d3.event.stopPropagation()\n setCurrentNode(d)\n dquery['resolveIndices'][d.type || 'tasks'] = null\n currentNode = d\n if (!d.nodes || !d.nodes.length) {\n return\n }\n if (d.id === source.id) {\n if (!previousNode || previousNode === 'root') return\n setCurrentNode(previousNode)\n currentNode = previousNode\n update(previousNode)\n zoom(previousNode)\n previousNode = previousNode.parent\n return\n }\n d.parent = source\n previousNode = d.parent\n resolveSection(d, query).then(d => {\n if (!d) return\n getNodes(d, query).then(nodes => {\n d.nodes = nodes\n getLinks(d, query).then(links => {\n d.links = links\n update(d)\n zoom(d)\n }).catch(asyncError)\n }).catch(asyncError)\n .catch(asyncError)\n })\n }\n\n node = gNode.selectAll('g')\n .attr('visibility', 'hidden')\n .attr('pointer-events', 'none')\n .exit().remove()\n .data(nodes, d => d.id)\n .attr('cursor', d => d.nodes ? null : 'pointer')\n .join('g')\n .call(dragBehaviors)\n\n node\n .filter(d => d.type === 'tasks' || d.id === source.id)\n .append('rect')\n .attr('class', 'icon')\n .attr('id', d => `icon-${d.id}`)\n .attr('stroke', color.outline)\n .attr('fill', d => nodeColor(d))\n .attr('fill-opacity', d => {\n if (d.type === 'link') return 0\n if (!d.nodes || !d.nodes.filter(node => node.type === 'tasks').length) return 1\n if (d.id === source.id) return 0.2\n return 1\n })\n .on('mouseover', handleMouseOverIcon)\n .on('mouseout', handleMouseOutIcon)\n .on('click', handleClickIcon)\n\n node\n .filter(d => d.type === 'inputs' || d.type === 'outputs' || d.type === 'inputs-outputs')\n .append('circle')\n .attr('class', 'icon')\n .attr('id', d => `icon-${d.id}`)\n .attr('stroke', color.outline)\n .attr('fill', d => nodeColor(d))\n .on('mouseover', handleMouseOverIcon)\n .on('mouseout', handleMouseOutIcon)\n .on('click', handleClickIcon)\n\n node.append('text')\n .attr('class', 'text')\n .attr('fill', color.text)\n .attr('font-weight', d => d.id === source.id ? 'bold' : 'none')\n .attr('id', d => `text-${d.id}`)\n .text(d => trimName(d.name))\n .style('font-size', d => d.id === nodes[0].id ? 18 : 14)\n .on('click', d => {\n d3.event.stopPropagation()\n if (!d.entryId || !d.parent) return\n let path = `entry/id/${d.entryId}`\n const sectionPath = d.path ? d.path.replace(/\\/(?=\\d)/g, ':') : null\n path = isWorkflow(d) ? path : sectionPath ? `${path}/data${sectionPath}` : path\n const url = getUrl(path)\n history.push(url)\n })\n .on('mouseover', d => {\n if (!d.type || !d.parent) return\n if (!d.sectionType) return\n d3.select(`#text-${d.id}`).style('font-weight', 'bold')\n .text(d.name)\n const text = isWorkflow(d) ? 'overview page' : 'archive section'\n if (d.entryId) {\n setTooltipContent(Click to go to {text} for entry
{d.entryId}
{d.label}
)\n })\n .on('mouseout', d => {\n d3.select(`#link-${d.id}`).style('stroke-opacity', 0.5)\n svg.select(`.marker-${d.id}`).attr('fill-opacity', 0.5)\n d3.select(`#icon-${d.source.id}`).style('stroke', color.outline).style('stroke-opacity', 0.5)\n d3.select(`#icon-${d.target.id}`).style('stroke', color.outline).style('stroke-opacity', 0.5)\n setTooltipContent('')\n })\n }\n\n resolveSection(source, query).then(source => {\n if (!source) return\n getNodes(source, query).then(nodes => {\n source.nodes = nodes\n source.x = 0\n source.y = 0\n source.r = width / 2\n getLinks(source, query).then(links => {\n source.links = links\n focus = source\n root = source\n setCurrentNode(source)\n currentNode = source\n update(source)\n zoomTo([source.x, source.y, source.r * 2])\n }).catch(asyncError)\n }).catch(asyncError)\n .catch(asyncError)\n })\n }, [\n history,\n setTooltipContent,\n setCurrentNode,\n setShowLegend,\n setEnableForce,\n query,\n source,\n svgRef,\n finalLayout,\n asyncError\n ])\n\n return \n})\n\nGraph.propTypes = {\n source: PropTypes.object.isRequired,\n query: PropTypes.object.isRequired,\n layout: PropTypes.object,\n setTooltipContent: PropTypes.any,\n setCurrentNode: PropTypes.any,\n setShowLegend: PropTypes.any,\n setEnableForce: PropTypes.any\n}\n\nconst WorkflowCard = React.memo(({archive}) => {\n const {api} = useApi()\n const [tooltipContent, setTooltipContent] = useState('')\n const [tooltipPosition, setTooltipPosition] = useState({x: undefined, y: undefined})\n const [showLegend, setShowLegend] = useState(true)\n const [enableForce, setEnableForce] = useState(false)\n const [currentNode, setCurrentNode] = useState({type: 'tasks'})\n const [inputValue, setInputValue] = useState('')\n const query = useMemo(() => ({\n api: api,\n required: { 'workflow2': '*', 'metadata': '*', 'data': '*' },\n sectionKeys: ['inputs', 'tasks', 'outputs'],\n maxNodes: 6\n }), [api])\n\n const graph = useMemo(() => {\n if (!archive || !archive.workflow2) return ''\n\n const source = {\n path: '/workflow2',\n archive: archive\n }\n\n return\n \n setInputValue(event.target.value)}\n InputProps={{\n endAdornment: (\n setInputValue('')} size='medium'>\n \n )\n }}\n >\n \n \n \n {enableForce ? \n \n \n \n {showLegend ? \n \n \n \n \n \n \n \n \n \n
\n\n return graph && \n {graph}\n
\n - \n
\n \n \n
: {\n archive\n ? loading ... \n }
\n }\n \n Processed data is not valid JSON. Displaying plain text instead. \n \n \n \n \n
\n : {archive || ''}\n {data.exception}\n \n {selected.map((value) => (\n
\n )}\n >\n {uniquekeys.map((name) => (\n \n ))}\n \n \n
\n )\n }\n return 'Logs'\n }\n\n return \n \n
\n )\n}\nExampleUploadButton.propTypes = {\n isDisable: PropTypes.bool\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, {useState, useCallback, useEffect, useMemo} from 'react'\nimport PropTypes from 'prop-types'\nimport {\n Tooltip,\n IconButton,\n Dialog,\n DialogContent,\n DialogContentText,\n DialogActions,\n Button\n} from '@material-ui/core'\nimport DeleteIcon from '@material-ui/icons/Delete'\nimport {pluralize} from '../../utils'\nimport {useApi} from '../api'\nimport {useErrors} from '../errors'\nimport DeletingReferencesTable from './DeletingReferencesTable'\n\n/**\n * Button for deleting uploads. Shows a confirmation dialog with additional\n * information about the effects of the deletion.\n */\nconst DeleteUploadsButton = React.memo(({\n tooltip,\n disabled,\n buttonProps,\n dark,\n uploads,\n onConfirm,\n 'data-testid': testID\n}) => {\n const [openDialog, setOpenDialog] = useState(false)\n const {api} = useApi()\n const {raiseError} = useErrors()\n const [entryReferences, setEntryReferences] = useState([])\n const [brokenEntries, setBrokenEntries] = useState([])\n const {uploadIDs, nUploads, shared, uploadText, haveText} = useMemo(() => {\n const nUploads = uploads?.length || 0\n const uploadText = pluralize('upload', nUploads, false)\n const haveText = pluralize('has', nUploads, false)\n return {\n uploadIDs: uploads?.map(upload => upload.upload_id) || [],\n nUploads,\n shared: uploads?.some(entry => entry?.coauthors?.length > 0 || entry?.reviewers?.length > 0),\n uploadText,\n haveText\n }\n }, [uploads])\n\n // Fetch information about whether deleting the uploads will result in broken\n // references.\n useEffect(() => {\n if (!openDialog) return\n\n api.post(`entries/query`,\n {\n owner: 'visible',\n query: {entry_references: {'target_upload_id:any': uploadIDs}}\n }\n )\n .then(results => {\n const data = results?.data || []\n if (data.length > 0) {\n const brokenEntries = data.filter(entry => !uploadIDs.includes(entry.upload_id))\n setBrokenEntries(brokenEntries)\n const allReferences = data.map(entry => entry.entry_references).flat()\n const references = [...new Map(allReferences.map(entry => [entry.target_entry_id, entry])).values()]\n setEntryReferences(references)\n }\n })\n .catch(raiseError)\n }, [api, openDialog, raiseError, uploadIDs])\n\n const handleClick = useCallback(() => {\n setOpenDialog(true)\n }, [])\n\n const handleDelete = useCallback(() => {\n setOpenDialog(false)\n onConfirm && onConfirm()\n }, [onConfirm])\n\n return (\n e.stopPropagation()}>\n {button}\n
\n \n }\n\n return \n
\n}\n\nWithButton.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n button: PropTypes.node,\n icon: PropTypes.node,\n tooltip: PropTypes.string,\n onClick: PropTypes.func,\n clipboard: PropTypes.string\n}\n","import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport {\n Button, TextField, Dialog, DialogTitle, IconButton, DialogContent,\n DialogContentText, DialogActions, Tooltip, makeStyles, Box, RadioGroup, FormControlLabel, Radio,\n FormControl\n} from '@material-ui/core'\nimport { Autocomplete } from '@material-ui/lab'\nimport { useApi } from '../api'\nimport { useErrors } from '../errors'\nimport { getUrl } from '../nav/Routes'\nimport { useHistory, useLocation } from 'react-router-dom'\nimport { getUrlFromDefinition, SectionMDef, useGlobalMetainfo } from '../archive/metainfo'\nimport { useUploadPageContext } from './UploadPageContext'\nimport SearchIcon from '@material-ui/icons/Search'\nimport SectionSelectDialog from './SectionSelectDialog'\nimport SectionSelectAutocomplete from './SectionSelectAutocomplete'\n\nconst useStyles = makeStyles(theme => ({\n dialog: {\n width: '100%',\n minWidth: 600\n },\n nameField: {\n marginBottom: theme.spacing(3),\n width: '100%'\n },\n schemaField: {\n marginBottom: theme.spacing(1),\n width: '100%'\n },\n radioGroup: {\n marginTop: 0,\n display: 'flex'\n }\n}))\n\nfunction addSearchIconToEndAdornment(endAdornment, onClick) {\n const children = React.Children.toArray(endAdornment.props.children)\n children.push({children}
\n {button}\n \n \n {submitting &&
\n \n \n {children || 'loading ...'}\n \n
\n}\n\nFileOrFolder.propTypes = {\n onToggle: PropTypes.func,\n open: PropTypes.bool,\n hasChildren: PropTypes.bool,\n children: PropTypes.arrayOf(PropTypes.object),\n name: PropTypes.string,\n path: PropTypes.string,\n entry_id: PropTypes.string,\n parser: PropTypes.string,\n info: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ])\n}\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(2),\n position: 'relative'\n },\n disabled: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n borderRadius: 4,\n background: 'rgba(200, 200, 200, 0.5)',\n zIndex: 10\n },\n disabledProgress: {\n position: 'absolute',\n margin: 0,\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)'\n }\n}))\n\nexport default function FilesBrower({uploadId, disabled}) {\n const classes = useStyles()\n const {api} = useApi()\n const errors = useErrors()\n const [renderCounter, setRenderCounter] = useState(-1)\n const [previewPath, setPreviewPath] = useState(null)\n const allData = useRef({})\n\n const fetchData = useMemo(() => (path, open) => {\n async function fetchData() {\n const encodedPath = path.split('/').map(segment => encodeURIComponent(segment)).join('/')\n const results = await api.get(`/uploads/${uploadId}/rawdir/${encodedPath}?page_size=500&include_entry_info=true`)\n allData.current[path] = {\n open: open,\n ...results\n }\n const resultsByPath = {}\n results.directory_metadata.content\n .filter(item => item.is_file)\n .forEach(item => {\n resultsByPath[`${path}/${item.name}`] = item\n if (item.parser_name) {\n item.parser = item.parser_name.replace('parsers/', '').replace('parser/', '')\n }\n })\n setRenderCounter(renderCounter => renderCounter + 1)\n }\n if (!disabled) {\n fetchData().catch(errors.raiseError)\n }\n }, [uploadId, api, errors, setRenderCounter, disabled])\n\n useEffect(() => {\n if (!disabled) {\n fetchData('')\n }\n }, [fetchData, disabled])\n\n const handleToggle = (path) => {\n const folderData = allData.current[path]\n if (folderData) {\n // TODO this can be avoided, if this component gets notified about possible file\n // changes behind\n // the api.\n if (!folderData.open) {\n fetchData(path, true)\n }\n folderData.open = !folderData.open\n setRenderCounter(renderCounter + 1)\n } else {\n fetchData(path, true)\n }\n }\n\n function renderFileOrFolder(path, item) {\n const {is_file} = item\n const data = allData.current[path]\n const pathPrefix = path ? `${path}/` : ''\n const mapContent = item => renderFileOrFolder(`${pathPrefix}${item.name}`, item)\n const props = {\n key: path,\n path: path,\n uploadId: uploadId,\n hasChildren: !is_file,\n open: data?.open,\n children: data?.directory_metadata?.content?.map(mapContent),\n onToggle: is_file ? null : () => handleToggle(path),\n // TODO\n // info: !is_file && data?.content?.length === 0 && \n {icon}\n \n {name || '/'} \n \n {(info || parser) && \n \n \n \n \n \n )}\n
\n \n {info}\n
}\n \n {parser &&
\n {entry_id && (\n \n {refs.map((ref, i) => \n {ref}{(i + 1) < refs.length ? ', ' :
\n )\n } else {\n return no references\n }\n }\n },\n {\n key: 'datasets',\n align: 'left',\n sortable: false,\n render: entry => {\n const datasets = entry.datasets || []\n if (datasets.length > 0) {\n return datasets.map(dataset => dataset.dataset_name).join(', ')\n } else {\n return no datasets\n }\n }\n }\n]\n\naddColumnDefaults(columns, defaultFilterData)\n\nconst defaultSelectedColumns = [\n 'entry_name',\n 'entry_type',\n 'mainfile',\n 'process_status'\n]\n\nexport default function ProcessingTable(props) {\n const [selected, setSelected] = useState(new Set())\n const {pagination, customTitle} = props\n const {upload, isEditable} = useUploadPageContext()\n\n const selectedQuery = useMemo(() => {\n if (selected === 'all') {\n return {'upload_id': upload.upload_id}\n }\n\n return {entry_id: [...selected]}\n }, [selected, upload])\n\n return \n
\n : \n {index ? \n {values.map(item => (\n \n
\n })\n }\n\n return \n
\n )\n}\nDropButton.propTypes = {\n onDrop: PropTypes.func\n}\n\nfunction EmbargoSelect({embargo, onChange, disabledReason}) {\n return \n \n }\n {...buttonProps}\n >\n Drop files here or click to open dialog\n \n
\n \n
\n \n
\n}\n\nconst UploadActions = React.memo(function UploadActions({data}) {\n return \n null}>\n \n \n \n \n \n \n \\`) (like in the\n examples above) or multi-part form data (\\`-X PUT -f file=@\\`):\n \\`\\`\\`\n ${uploadCommands.upload_command_form}\n \\`\\`\\`\n We generally recommend to use streaming, because form data can produce very\n large HTTP request on large files. Form data has the advantage of carrying\n more information (e.g. the file name) to our servers (see below).\n\n #### Upload names\n With multi-part form data (\\`-X PUT -f file=@\\`), your upload will\n be named after the file by default. With stream data (\\`-T \\`)\n there will be no default name. To set a custom name, you can use the URL\n parameter \\`name\\`:\n \\`\\`\\`\n ${uploadCommands.upload_command_with_name}\n \\`\\`\\`\n Make sure to user proper [URL encoding](https://www.w3schools.com/tags/ref_urlencode.asp)\n and shell encoding, if your name contains spaces or other special characters.\n `}/>\n \n
\n \n {`\n \\`\\`\\`\n ${uploadCommands.upload_command}\n \\`\\`\\`\n `} \n
\n \n {`\n # APIs\n\n NOMAD's Application Programming Interface (API) allows you to access NOMAD data\n and functions programatically. For all APIs, we offer dashboards that let you use\n each API interactively, right in your browser.\n\n ## NOMAD's API\n\n - [API dashboard](${apiBase}/v1/extensions/docs)\n - [API documentation](${apiBase}/v1/extensions/redoc)\n\n We started to implement a more consise and easier to use API for access NOMAD\n data. This will step-by-step reimplement all functions of NOMAD's old main API.\n At some point, it will replace it entirely. For new users, we recommend to start\n using this API. API Dashboard and documentation contain a tutorial on how to get started.\n\n There is a [tutorial on how to use the API with plain Python](${appBase}/docs/api_tutorial.html).\n Another [tutorial covers how to install and use NOMAD's Python client library](${appBase}/docs/archive_tutorial.html).\n The [NOMAD Analytics Toolkit](https://nomad-lab.eu/AIToolkit) allows to use\n this without installation and directly on NOMAD servers.\n\n ### App token\n\n Next to the usual access token based on OpenID Connect, we provide an\n [app token](${appBase}/docs/apis/api.html#app-token) with custom expiration date.\n You may request one via the [API](${apiBase}/v1/extensions/docs) or the following form:\n `} \n\n {`\n\n ### Old API\n\n You can still use NOMAD's old REST API. The data it provides might miss the most\n recent contributions:\n\n - [v0 API dashboard](https://nomad-lab.eu/prod/rae/api/)\n\n ## OPTIMADE\n\n - [OPTIMADE API overview page](${appBase}/optimade/)\n - [OPTIMADE API dashboard](${appBase}/optimade/v1/extensions/docs)\n - [OPTIMADE API documentation](${appBase}/optimade/v1/extensions/redoc)\n\n [OPTIMADE](https://www.optimade.org/) is an\n open API standard for materials science databases. This API can be used to search\n and access NOMAD metadata in a standardized way that can also be applied to many\n [other materials science databses](https://providers.optimade.org/).\n\n ## DCAT\n\n - [DCAT API dashboard](${appBase}/dcat/)\n\n [DCAT](https://www.w3.org/TR/vocab-dcat-2/) is a RDF vocabulary designed to facilitate\n interoperability between data catalogs published on the Web. This API allows you\n access to NOMAD via RDF documents following DCAT. You can access NOMAD entries as\n DCAT Datasets or all NOMAD entries as a DCAT Catalog.\n\n ## Resources\n\n - [Resources API dashboard](${appBase}/resources/extensions/docs)\n\n The resources API provides links from NOMAD entries to related external resources.\n These include the [Aflow Encyclopedia of Crystallographic Prototypes](https://www.aflowlib.org/prototype-encyclopedia/),\n [Springer Materials Database of Inorganic Solid Phases](https://materials.springer.com)\n and [OPTIMADE providers](https://providers.optimade.org/).\n `} \n
\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { Typography, Link, makeStyles } from '@material-ui/core'\nimport { useHistory, useLocation } from 'react-router'\nimport qs from 'qs'\nimport { useApi } from '../api'\nimport { useErrors } from '../errors'\nimport { getUrl } from '../nav/Routes'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(3)\n }\n}))\n\nexport default function EntryQuery(props) {\n const classes = useStyles()\n const history = useHistory()\n const location = useLocation()\n const {api} = useApi()\n const {raiseError} = useErrors()\n\n const [doesNotExist, setDoesNotExist] = useState(false)\n\n const queryParams = useMemo(() => qs.parse(location.search.substring(1)), [location])\n\n useEffect(() => {\n api.get('/entries', {...queryParams})\n .then(response => {\n if (response.pagination.total > 0) {\n const {entry_id, upload_id} = response.data[0]\n history.push(getUrl(`entry/id/${upload_id}/${entry_id}`))\n } else {\n setDoesNotExist(true)\n }\n })\n .catch(raiseError)\n }, [history, api, raiseError, setDoesNotExist, queryParams])\n\n let message = 'loading ...'\n\n if (doesNotExist) {\n if (queryParams && queryParams['external_id'] && queryParams['external_id'].startsWith('mp-')) {\n message = Details: {data.id}
\n}\nDetailsExample.propTypes = {\n data: PropTypes.object.isRequired\n}\n\nfunction ActionsExample({data}) {\n return \n \n 
\n \n
\n \n \n
\n \n
\n \n
\n )\n}\n","/*\n * Copyright The NOMAD Authors.\n *\n * This file is part of NOMAD. See https://nomad-lab.eu for further info.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react'\nimport { Helmet } from \"react-helmet\"\nimport { Router, Route } from 'react-router-dom'\nimport { QueryParamProvider } from 'use-query-params'\nimport { RecoilRoot } from 'recoil'\nimport CssBaseline from '@material-ui/core/CssBaseline'\nimport history from '../history'\nimport DateFnsUtils from '@date-io/date-fns'\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers'\nimport { ui, nomadTheme, keycloakBase, keycloakRealm, keycloakClientId } from '../config'\nimport Keycloak from 'keycloak-js'\nimport { ReactKeycloakProvider } from '@react-keycloak/web'\nimport { MuiThemeProvider } from '@material-ui/core/styles'\nimport { ErrorSnacks, ErrorBoundary } from './errors'\nimport Navigation from './nav/Navigation'\nimport GUIMenu from './GUIMenu'\nimport { APIProvider, GlobalLoginRequired, onKeycloakEvent } from './api'\nimport DataStore from './DataStore'\nimport { UnitProvider } from './units/UnitContext'\nimport { GlobalMetainfo } from './archive/metainfo'\n\nconst keycloak = new Keycloak({\n url: keycloakBase,\n realm: keycloakRealm,\n clientId: keycloakClientId\n})\n\nexport default function App() {\n return \n \n \n \n \n \n \n
\n