From 51732753fc705edb4a66b43976dfab841c8d6e38 Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Wed, 22 Aug 2018 14:07:55 +0300
Subject: [PATCH] Move all search/result options to the main app menu
---
src/client/components/DatasetSelector.js | 59 -----------
src/client/components/TopBar.js | 114 ++++++++++++++++------
src/client/components/VirtualizedTable.js | 35 -------
src/client/containers/MapApp.js | 4 +-
src/client/index.html | 3 +
5 files changed, 88 insertions(+), 127 deletions(-)
delete mode 100644 src/client/components/DatasetSelector.js
diff --git a/src/client/components/DatasetSelector.js b/src/client/components/DatasetSelector.js
deleted file mode 100644
index 7cecff8d..00000000
--- a/src/client/components/DatasetSelector.js
+++ /dev/null
@@ -1,59 +0,0 @@
-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);
diff --git a/src/client/components/TopBar.js b/src/client/components/TopBar.js
index 5f36ccf9..5d6cdf9e 100644
--- a/src/client/components/TopBar.js
+++ b/src/client/components/TopBar.js
@@ -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);
diff --git a/src/client/components/VirtualizedTable.js b/src/client/components/VirtualizedTable.js
index 2880ec03..717cccc8 100644
--- a/src/client/components/VirtualizedTable.js
+++ b/src/client/components/VirtualizedTable.js
@@ -1,20 +1,10 @@
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,
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 91f1e50c..21459ba5 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -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}
diff --git a/src/client/index.html b/src/client/index.html
index 08af4b02..5fbb2b17 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -14,6 +14,9 @@
height: 100%;
margin: 0;
}
+ fieldset {
+ outline: 0 !important;
+ }
#root, #app {
height: 100%;
}
--
GitLab