Skip to content
Snippets Groups Projects
Commit 51732753 authored by Esko Ikkala's avatar Esko Ikkala
Browse files

Move all search/result options to the main app menu

parent 98d9a437
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/DatasetSelector.js deleted 100644 → 0
+ 0
− 59
View file @ 98d9a437
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
const styles = theme => ({
root: {
width: '100%',
backgroundColor: theme.palette.background.default,
},
listItem: {
paddingTop: 0,
paddingBottom: 0,
}
});
const DatasetSelector = props => {
const { classes } = props;
const handleToggle = value => () => {
props.toggleDataset(value);
};
return (
<div className={classes.root}>
<List>
{Object.keys(props.datasets).map(id => (
<ListItem
key={id}
role={undefined}
dense
button
onClick={handleToggle(id)}
className={classes.listItem}
>
<Checkbox
checked={props.datasets[id].selected}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={props.datasets[id].title} />
</ListItem>
))}
</List>
</div>
);
};
DatasetSelector.propTypes = {
classes: PropTypes.object.isRequired,
datasets: PropTypes.object.isRequired,
toggleDataset: PropTypes.func.isRequired
};
export default withStyles(styles)(DatasetSelector);
src/client/components/TopBar.js
+ 82
− 32
View file @ 51732753
......@@ -6,24 +6,17 @@ import Toolbar from '@material-ui/core/Toolbar';
import NavTabs from '../components/NavTabs';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MenuIcon from '@material-ui/icons/Menu';
import MenuList from '@material-ui/core/MenuList';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Switch from '@material-ui/core/Switch';
import PlaceIcon from '@material-ui/icons/Place';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import { CSVLink } from 'react-csv';
import Button from '@material-ui/core/Button';
import FormGroup from '@material-ui/core/FormGroup';
import Checkbox from '@material-ui/core/Checkbox';
const styles = theme => ({
toolBar: {
......@@ -34,6 +27,28 @@ const styles = theme => ({
marginLeft: -12,
marginRight: 20,
},
menuContent: {
display: 'flex',
flexDirection: 'column',
maxWidth: 350,
outline: 0,
padding: theme.spacing.unit * 3
},
formControl: {
marginBottom: theme.spacing.unit * 3,
},
formGroup: {
margin: `${theme.spacing.unit}px 0`,
},
csvButton: {
margin: theme.spacing.unit * 3,
},
leftIcon: {
marginRight: theme.spacing.unit,
},
rightIcon: {
marginLeft: theme.spacing.unit,
},
menuList: {
width: 350
},
......@@ -44,12 +59,6 @@ const styles = theme => ({
navTabs: {
marginLeft: 'auto'
},
formControl: {
margin: theme.spacing.unit * 3,
},
group: {
margin: `${theme.spacing.unit}px 0`,
},
});
class TopBar extends React.Component {
......@@ -69,6 +78,10 @@ class TopBar extends React.Component {
this.setState({ anchorEl: null });
};
handleToggleDataset = value => () => {
this.props.toggleDataset(value);
};
render() {
const { anchorEl } = this.state;
const { classes } = this.props;
......@@ -76,6 +89,7 @@ class TopBar extends React.Component {
return (
<AppBar position="absolute">
<Toolbar className={classes.toolBar}>
<IconButton
className={classes.menuButton}
color="inherit"
......@@ -84,26 +98,59 @@ class TopBar extends React.Component {
>
<MenuIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Map mode</FormLabel>
<RadioGroup
aria-label="Map mode"
name="map"
className={classes.group}
value={this.props.mapMode}
onChange={this.handleChange}
>
<FormControlLabel value="cluster" control={<Radio />} label="Clustered markers" />
<FormControlLabel value="noCluster" control={<Radio />} label="Markers" />
<FormControlLabel value="heatmap" control={<Radio />} label="Heatmap" />
</RadioGroup>
</FormControl>
<div className={classes.menuContent}>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Source datasets</FormLabel>
<FormGroup className={classes.formGroup}>
{Object.keys(this.props.datasets).map(id => (
<FormControlLabel
key={id}
control={
<Checkbox
checked={this.props.datasets[id].selected}
onChange={this.handleToggleDataset(id)}
tabIndex={-1}
disableRipple
/>
}
label={this.props.datasets[id].title}
/>
))}
</FormGroup>
</FormControl>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Map mode</FormLabel>
<RadioGroup
className={classes.formGroup}
aria-label="Map mode"
name="map"
value={this.props.mapMode}
onChange={this.handleChange}
>
<FormControlLabel value="cluster" control={<Radio />} label="Clustered markers" />
<FormControlLabel value="noCluster" control={<Radio />} label="Markers" />
<FormControlLabel value="heatmap" control={<Radio />} label="Heatmap" />
</RadioGroup>
</FormControl>
<CSVLink data={this.props.results}>
<Button variant="contained" color="primary" className={classes.button}>
Results as CSV
<CloudDownloadIcon className={classes.rightIcon} />
</Button>
</CSVLink>
</div>
</Menu>
<img className={classes.namesampoLogo} src='img/logos/namesampo.png' alt='NameSampo logo'/>
{this.props.oneColumnView &&
......@@ -122,11 +169,14 @@ class TopBar extends React.Component {
TopBar.propTypes = {
classes: PropTypes.object.isRequired,
results: PropTypes.array.isRequired,
oneColumnView: PropTypes.bool.isRequired,
mapMode: PropTypes.string.isRequired,
resultFormat: PropTypes.string.isRequired,
updateResultFormat: PropTypes.func.isRequired,
updateMapMode: PropTypes.func.isRequired,
datasets: PropTypes.object.isRequired,
toggleDataset: PropTypes.func.isRequired,
};
export default withStyles(styles)(TopBar);
src/client/components/VirtualizedTable.js
+ 0
− 35
View file @ 51732753
import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import {CSVLink} from 'react-csv';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import DatasetSelector from '../components/DatasetSelector';
import SearchField from '../components/SearchField';
import Button from '@material-ui/core/Button';
import ResultFilterDialogSingle from './ResultFilterDialogSingle';
import {
AutoSizer,
Column,
......@@ -193,30 +183,6 @@ class VirtualizedTable extends React.PureComponent {
<div className={classes.searchField}>
{searchField}
</div>
{this.props.list.size > 0 &&
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>Result options</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container>
<Grid item xs={12}>
<DatasetSelector
datasets={this.props.search.datasets}
toggleDataset={this.props.toggleDataset}
/>
</Grid>
<Grid item xs={12}>
<CSVLink data={list.toArray()}>
<Button>
Results as CSV
</Button>
</CSVLink>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
}
</div>
{this.props.list.size > 0 &&
<div style={{ flex: '1 1 auto' }}>
......@@ -324,7 +290,6 @@ VirtualizedTable.propTypes = {
resultValues: PropTypes.object.isRequired,
sortResults: PropTypes.func.isRequired,
updateResultsFilter: PropTypes.func.isRequired,
toggleDataset: PropTypes.func.isRequired,
updateQuery: PropTypes.func.isRequired,
fetchSuggestions: PropTypes.func.isRequired,
clearSuggestions: PropTypes.func.isRequired,
......
src/client/containers/MapApp.js
+ 3
− 1
View file @ 51732753
......@@ -141,7 +141,6 @@ let MapApp = (props) => {
resultValues={props.resultValues}
search={props.search}
sortResults={props.sortResults}
toggleDataset={props.toggleDataset}
updateResultsFilter={props.updateResultsFilter}
updateQuery={props.updateQuery}
fetchResults={props.fetchResults}
......@@ -218,11 +217,14 @@ let MapApp = (props) => {
<div className={classes.root}>
<div className={classes.appFrame}>
<TopBar
results={props.results}
oneColumnView={oneColumnView}
mapMode={props.mapMode}
resultFormat={props.resultFormat}
updateMapMode={props.updateMapMode}
updateResultFormat={props.updateResultFormat}
datasets={props.search.datasets}
toggleDataset={props.toggleDataset}
/>
<div className={classes.mainContainer}>
{mainResultsView}
......
src/client/index.html
+ 3
− 0
View file @ 51732753
......@@ -14,6 +14,9 @@
height: 100%;
margin: 0;
}
fieldset {
outline: 0 !important;
}
#root, #app {
height: 100%;
}
......
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