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

Usebility improvements arround metainfo.

parent 629de6de
......@@ -4,6 +4,72 @@ import { withStyles, IconButton, Dialog, DialogTitle, DialogContent, DialogActio
import CodeIcon from '@material-ui/icons/Code'
import ReactJson from 'react-json-view'
class ApiDialogUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
data: PropTypes.any.isRequired,
title: PropTypes.string,
onClose: PropTypes.func
}
static styles = (theme) => ({
content: {
paddingBottom: 0
},
raw: {
margin: 0, padding: 0
}
})
state = {
showRaw: false
}
constructor(props) {
super(props)
this.handleToggleRaw = this.handleToggleRaw.bind(this)
}
handleToggleRaw() {
this.setState({showRaw: !this.state.showRaw})
}
render() {
const { classes, title, data, onClose, ...dialogProps } = this.props
const { showRaw } = this.state
return (
<Dialog {...dialogProps}>
<DialogTitle>{title || 'API'}</DialogTitle>
<DialogContent classes={{root: classes.content}}>
{showRaw
? <code>
<pre className={classes.raw}>
{JSON.stringify(data, null, 4)}
</pre>
</code> : <ReactJson
src={data}
enableClipboard={false}
collapsed={2}
displayObjectSize={false}
/>
}
</DialogContent>
<DialogActions>
<Button onClick={this.handleToggleRaw} color="primary">
{showRaw ? 'show tree' : 'show raw JSON'}
</Button>
<Button onClick={onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
)
}
}
export const ApiDialog = withStyles(ApiDialogUnstyled.styles)(ApiDialogUnstyled)
class ApiDialogButtonUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
......@@ -20,7 +86,7 @@ class ApiDialogButtonUnstyled extends React.Component {
}
render() {
const { classes, title, data } = this.props
const { classes, ...dialogProps } = this.props
const { showDialog } = this.state
return (
......@@ -28,22 +94,10 @@ class ApiDialogButtonUnstyled extends React.Component {
<IconButton onClick={() => this.setState({showDialog: true})}>
<CodeIcon />
</IconButton>
<Dialog open={showDialog}>
<DialogTitle>{title || 'API'}</DialogTitle>
<DialogContent>
<ReactJson
src={data}
enableClipboard={false}
collapsed={2}
displayObjectSize={false}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => this.setState({showDialog: false})} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
<ApiDialog
{...dialogProps} open={showDialog}
onClose={() => this.setState({showDialog: false})}
/>
</div>
)
}
......
......@@ -13,7 +13,7 @@ import extend from '@babel/runtime/helpers/extends'
var styles = theme => ({
root: {
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.fontSize,
fontSize: 16,
color: theme.palette.text.primary,
'& .anchor-link': {
marginTop: -96,
......
import React from 'react'
import PropTypes, { func } from 'prop-types'
import PropTypes from 'prop-types'
import DFTSearchAggregations from './dft/DFTSearchAggregations'
import DFTEntryOverview from './dft/DFTEntryOverview'
import DFTEntryCards from './dft/DFTEntryCards'
......
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, Fab, Card, CardContent } from '@material-ui/core'
import { withStyles, Fab, Card, CardContent, CardActions, Button } from '@material-ui/core'
import { Link } from 'react-router-dom'
import ReactJson from 'react-json-view'
import { compose } from 'recompose'
import Markdown from '../Markdown'
import { withApi } from '../api'
import DownloadIcon from '@material-ui/icons/CloudDownload'
import Download from './Download'
import { ValueAttributes, MetaAttribute } from '../metaInfoBrowser/ValueCard'
class ArchiveEntryView extends React.Component {
static propTypes = {
......@@ -23,7 +25,18 @@ class ArchiveEntryView extends React.Component {
height: '20vh',
overflowY: 'auto',
marginTop: theme.spacing.unit * 3,
marginBottom: theme.spacing.unit * 3
marginBottom: theme.spacing.unit * 3,
display: 'flex',
flexDirection: 'column'
},
metaInfoContent: {
flex: 1
},
metaInfoActions: {
flexDirection: 'row-reverse'
},
metaInfoDescription: {
margin: `${theme.spacing.unit}px 0`
},
data: {
height: '60vh',
......@@ -95,13 +108,26 @@ class ArchiveEntryView extends React.Component {
return (
<div className={classes.root}>
<Card className={classes.metaInfo}>
<CardContent>{
<CardContent className={classes.metaInfoContent}>{
showMetaInfo && metaInfo
? metaInfoData
? <Markdown>{`**${metaInfoData.name}**: ${metaInfoData.description}`}</Markdown>
? <div>
<MetaAttribute label={'metainfo name'} value={metaInfoData.name} />
<Markdown classes={{root: classes.metaInfoDescription}}>{metaInfoData.description}</Markdown>
<ValueAttributes definition={metaInfoData} />
</div>
: <Markdown>This value has **no** *meta-info* attached to it.</Markdown>
: <Markdown>Click a value to show its *meta-info*!</Markdown>
}</CardContent>
<CardActions className={classes.metaInfoActions}>
{ (showMetaInfo && metaInfo && metaInfoData)
? <Button color="primary" component={props => <Link to={`/metainfo/${metaInfoData.name}`} {...props} />}>
Goto Metainfo
</Button>
: <Button color="primary" disabled>
Goto Metainfo
</Button>}
</CardActions>
</Card>
<Card className={classes.data}>
<CardContent>
......
......@@ -4,7 +4,6 @@ import { withStyles } from '@material-ui/core/styles'
import { Paper, Typography } from '@material-ui/core'
import { Link } from 'react-router-dom'
import { schema } from '../MetaInfoRepository'
import ReactJson from 'react-json-view'
import { Card, CardButton, CardCompartment, PopoverCardButton } from './util/cards'
import Markdown from '../Markdown'
......@@ -97,14 +96,17 @@ class DefinitionCardUnstyled extends React.Component {
<CardButton position="center" size="tiny" icon="launch"
component={props => <Link to={`/metainfo/${definition.name}`} {...props} />}
/>
<PopoverCardButton position="center" icon="code" classes={{content: classes.source}} size="tiny">
<ReactJson src={definition.miJson} />
</PopoverCardButton>
<PopoverCardButton
position="center" icon="code" classes={{content: classes.source}}
size="tiny" data={definition.miJson}
label="Definition JSON"
/>
{definition.problems.length > 0
? <PopoverCardButton position="center" icon="report_problem" color='secondary' size="tiny"
classes={{content: classes.source}}>
<ReactJson src={definition.problems} />
</PopoverCardButton> : ''
? <PopoverCardButton
position="center" icon="report_problem" color='secondary' size="tiny"
classes={{content: classes.source}}
data={definition.problems} label="Definition Errors"
/> : ''
}
{this.isClosable() ? <CardButton position="right" icon="cancel" onClick={() => toggleDefinition(definition, false)} /> : ''}
<CardCompartment padded compId="title">
......
......@@ -7,7 +7,7 @@ import { DefinitionCard, renderName } from './DefinitionCard'
import { schema } from '../MetaInfoRepository'
import { CardCompartment, CardButton } from './util/cards'
const MetaAttribute = (props) => {
export const MetaAttribute = (props) => {
return (
<Typography component={'p'} variant={'body1'}>
<span>{props.label}</span>: <span style={{fontWeight: 'bold'}}>{props.value}</span>
......@@ -20,6 +20,20 @@ MetaAttribute.propTypes = {
value: PropTypes.any
}
export const ValueAttributes = props => {
const { definition } = props
return <div>
<MetaAttribute label={'repeats'} value={'' + (!!definition.miJson.repeats)}/>
<MetaAttribute label={'shape'} value={`[${definition.miJson.shape.join(', ')}]`}/>
<MetaAttribute label={'type'} value={definition.type}/>
{definition.miJson.units ? <MetaAttribute label={'units'} value={definition.miJson.units}/> : ''}
</div>
}
ValueAttributes.propTypes = {
definition: PropTypes.object.isRequired
}
class ValueUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
......@@ -40,10 +54,7 @@ class ValueUnstyled extends React.Component {
<AfterRenderMeasure measureId={`property.${definition.name}`} measureData={definition}>
<DefinitionCard {...inherited}>
<CardCompartment compId="type_info" padded label={'type info'} foldable>
<MetaAttribute label={'repeats'} value={'' + (!!definition.miJson.repeats)}/>
<MetaAttribute label={'shape'} value={`[${definition.miJson.shape.join(', ')}]`}/>
<MetaAttribute label={'type'} value={definition.type}/>
{definition.miJson.units ? <MetaAttribute label={'units'} value={definition.miJson.units}/> : ''}
<ValueAttributes definition={definition} />
{schema.isReference(definition) && definition.referencedSection
? <MetaAttribute label={'referenced'} value={<span>
{renderName(definition.referencedSection)} <CardButton size="tiny" icon="arrow_right_alt"
......
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import { Typography, IconButton, Icon, Popover } from '@material-ui/core'
import { Typography, IconButton, Icon } from '@material-ui/core'
import grey from '@material-ui/core/colors/grey'
import { updateListState } from './data'
import { ApiDialog } from '../../ApiDialogButton'
const ToggleCardCompartmentContext = React.createContext()
......@@ -246,7 +247,7 @@ export const CardCompartment = withStyles(CardCompartmentUnstyled.styles)(CardCo
class PopoverCardButtonUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
children: PropTypes.object,
data: PropTypes.object,
label: PropTypes.string,
icon: PropTypes.string,
size: PropTypes.string
......@@ -281,28 +282,13 @@ class PopoverCardButtonUnstyled extends React.Component {
};
render() {
const { classes, size } = this.props
const { classes, size, data, label } = this.props
const { anchorEl } = this.state
return (
<div className={classes.root}>
<CardButton {...this.props} variant={'contained'} onClick={this.handleClick} classes={{[size || 'small']: classes.iconButton}}/>
<Popover
classes={{paper: classes.content}}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
{this.props.children}
</Popover>
<ApiDialog open={Boolean(anchorEl)} onClose={this.handleClose} data={data} title={label} />
</div>
)
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment