Commit 7c055563 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Smaller layout fixes.

parent afa3fef9
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles, Typography } from '@material-ui/core'
import { withStyles, Typography, Select, MenuItem, Grid } from '@material-ui/core'
import * as d3 from 'd3'
import { scaleBand, scalePow } from 'd3-scale'
import chroma from 'chroma-js'
import repoColor from '@material-ui/core/colors/deepPurple'
import { formatQuantity } from '../config.js'
class QuantityHistogram extends React.Component {
static propTypes = {
......@@ -18,6 +19,9 @@ class QuantityHistogram extends React.Component {
static styles = theme => ({
root: {
},
title: {
fontWeight: 'bold'
}
})
......@@ -28,7 +32,8 @@ class QuantityHistogram extends React.Component {
}
state = {
selected: undefined
selected: undefined,
scalePower: 0.25
}
componentDidMount() {
......@@ -57,7 +62,7 @@ class QuantityHistogram extends React.Component {
return
}
const { selected } = this.state
const { selected, scalePower } = this.state
const width = this.container.current.offsetWidth
const height = Object.keys(this.props.data).length * 32
......@@ -68,7 +73,7 @@ class QuantityHistogram extends React.Component {
}))
const y = scaleBand().rangeRound([0, height]).padding(0.1)
const x = scalePow().range([0, width]).exponent(0.5)
const x = scalePow().range([0, width]).exponent(scalePower)
const heatmapScale = chroma.scale(['#ffcdd2', '#d50000'])
x.domain([0, d3.max(data, d => d.value)])
......@@ -120,7 +125,7 @@ class QuantityHistogram extends React.Component {
.attr('x', d => x(d.value) - 4)
.attr('text-anchor', 'end')
.style('fill', textColor)
.text(d => '' + d.value)
.text(d => formatQuantity(d.value))
item
.style('cursor', 'pointer')
......@@ -145,9 +150,9 @@ class QuantityHistogram extends React.Component {
item
.select('.value')
.text(d => '' + d.value)
.text(d => formatQuantity(d.value))
.attr('y', d => y(d.name) - 4)
.attr('x', d => x(d.value) - 4)
.attr('x', width - 4)
.style('fill', textColor)
}
......@@ -156,7 +161,24 @@ class QuantityHistogram extends React.Component {
return (
<div className={classes.root} ref={this.container}>
<Typography variant="body1">{title}</Typography>
<Grid container justify="space-between">
<Grid item>
<Typography variant="body1" className={classes.title}>{title}</Typography>
</Grid>
<Grid item>
<Select
value={this.state.scalePower}
onChange={(event) => this.setState({scalePower: event.target.value})}
displayEmpty
name="scale power"
>
<MenuItem value={1}>linear</MenuItem>
<MenuItem value={0.5}>1/2</MenuItem>
<MenuItem value={0.25}>1/4</MenuItem>
<MenuItem value={0.125}>1/8</MenuItem>
</Select>
</Grid>
</Grid>
<svg ref={this.svgEl} />
</div>
)
......
......@@ -70,10 +70,17 @@ class Repo extends React.Component {
},
quantity: {
marginTop: theme.spacing.unit * 2
},
defaultCell: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%',
maxWidth: 200
}
})
static rowConfig = {
rowConfig = {
formula: {
label: 'Formula'
},
......@@ -97,13 +104,23 @@ class Repo extends React.Component {
},
authors: {
label: 'Authors',
render: (authors) => authors.map(author => author.name).join('; ')
render: (authors) => {
if (authors.length > 3) {
return authors.filter((_, index) => index < 2).map(author => author.name).join('; ') + 'et al'
} else {
return authors.map(author => author.name).join('; ')
}
}
},
references: {
label: 'References',
render: (references) => {
if (references) {
return references.map((reference, index) => <a key={index} href={reference}>{reference}</a>)
return references.map((reference, index) => (
<div key={index} className={this.props.classes.defaultCell}>
<a href={reference}>{reference}</a>
</div>
))
} else {
return <i>no references</i>
}
......@@ -164,7 +181,7 @@ class Repo extends React.Component {
}
handleChangePage = (event, page) => {
this.update({page: this.state.page + 1})
this.update({page: page + 1})
}
handleChangeRowsPerPage = event => {
......@@ -210,7 +227,11 @@ class Repo extends React.Component {
if (rowConfig.render) {
return rowConfig.render(value)
} else {
return value
return (
<div className={this.props.classes.defaultCell}>
{value}
</div>
)
}
}
......@@ -296,7 +317,7 @@ class Repo extends React.Component {
<Table>
<TableHead>
<TableRow>
{Object.keys(Repo.rowConfig).map(key => (
{Object.keys(this.rowConfig).map(key => (
<TableCell padding="dense" key={key}>
<Tooltip
title="Sort"
......@@ -308,7 +329,7 @@ class Repo extends React.Component {
direction={sortOrder}
onClick={() => this.handleSort(key)}
>
{Repo.rowConfig[key].label}
{this.rowConfig[key].label}
</TableSortLabel>
</Tooltip>
</TableCell>
......@@ -318,9 +339,9 @@ class Repo extends React.Component {
<TableBody>
{data.map((calc, index) => (
<TableRow hover tabIndex={-1} key={index} className={classes.clickableRow}>
{Object.keys(Repo.rowConfig).map((key, rowIndex) => (
{Object.keys(this.rowConfig).map((key, rowIndex) => (
<TableCell padding="dense" key={rowIndex} onClick={() => this.handleClickCalc(calc)} >
{this.renderCell(key, Repo.rowConfig[key], calc)}
{this.renderCell(key, this.rowConfig[key], calc)}
</TableCell>
))}
</TableRow>
......
......@@ -148,7 +148,7 @@ class RepoCalcView extends React.Component {
</CalcQuantity>
</div>
</div>
<div className={classes.quantityColumn}>
<div className={classes.quantityColumn} style={{maxWidth: 250}}>
<CalcQuantity label='PID' loading={loading}>
<b>{calcData.pid}</b>
</CalcQuantity>
......
......@@ -53,3 +53,9 @@ export const analyticsTheme = createTheme({
secondary: repo
}
})
export const formatQuantity = (x) => {
const parts = x.toString().split('.')
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
return parts.join('.')
}
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