Commit f065e659 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Added error boundaries in archive browser.

parent ce4d927f
......@@ -40,11 +40,19 @@ export class ErrorHandler extends React.Component {
return this.props.children
}
}
ErrorHandler.propTypes = ({
children: PropTypes.object,
message: PropTypes.string, // Fixed error message. Provide either this or errorHandler
errorHandler: PropTypes.func, // Function that is called once an error is caught. It recveives the error object as argument and should return an error message as string.
classes: PropTypes.object,
className: PropTypes.string
})
export function ErrorCard({message, className, classes}) {
const useStyles = makeStyles((theme) => {
return {
root: {
color: theme.palette.error.main
},
content: {
paddingBottom: '16px'
......@@ -73,7 +81,7 @@ export function ErrorCard({message, className, classes}) {
<CardContent className={[style.content, style['content:last-child']].join(' ')}>
<Box className={style.container}>
<Error className={style.errorIcon}/>
<Typography className={style.title} color="textSecondary" gutterBottom>
<Typography className={style.title} color="error" gutterBottom>
{message}
</Typography>
</Box>
......@@ -86,11 +94,3 @@ ErrorCard.propTypes = ({
classes: PropTypes.object,
className: PropTypes.string
})
ErrorHandler.propTypes = ({
children: PropTypes.object,
message: PropTypes.string, // Fixed error message. Provide either this or errorHandler
errorHandler: PropTypes.func, // Function that is called once an error is caught. It recveives the error object as argument and should return an error message as string.
classes: PropTypes.object,
className: PropTypes.string
})
......@@ -400,6 +400,10 @@ function Overview({section, def}) {
let positionsOnly = false
// Do not attempt to perform visualization if size is too big
if (!section.atom_species) {
// the section is incomplete, we leave the overview empty
return ''
}
const nAtoms = section.atom_species.length
if (nAtoms >= 300) {
return <ErrorCard
......@@ -519,7 +523,9 @@ function Section({section, def}) {
const filter = config.showCodeSpecific ? def => true : def => !def.name.startsWith('x_')
return <Content>
<Title def={def} data={section} kindLabel="section" />
<Overview def={def} section={section}></Overview>
<ErrorHandler message="The section overview could not be rendered, due to an unexpected error.">
<Overview def={def} section={section}></Overview>
</ErrorHandler>
<Compartment title="sub sections">
{def.sub_sections
.filter(subSectionDef => section[subSectionDef.name] || config.showAllDefined)
......
......@@ -8,6 +8,7 @@ import ArrowRightIcon from '@material-ui/icons/ArrowRight'
import ArrowDownIcon from '@material-ui/icons/ArrowDropDown'
import classNames from 'classnames'
import { useLocation, useRouteMatch, Link } from 'react-router-dom'
import { ErrorHandler } from '../ErrorHandler'
export class Adaptor {
constructor(e) {
......@@ -124,6 +125,9 @@ const useLaneStyles = makeStyles(theme => ({
display: 'block',
height: '100%',
overflowY: 'scroll'
},
error: {
margin: theme.spacing(1)
}
}))
function Lane({lane}) {
......@@ -133,7 +137,9 @@ function Lane({lane}) {
return <div className={classes.root}>
<div className={classes.container}>
<laneContext.Provider value={lane}>
{adaptor.render()}
<ErrorHandler message='This section could not be rendered, due to an unexpected error.' className={classes.error}>
{adaptor.render()}
</ErrorHandler>
</laneContext.Provider>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment