Move all search/result options to the main app menu

src/client/components/DatasetSelector.js

-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

@@ -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

 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

@@ -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

@@ -14,6 +14,9 @@
       height: 100%;
       margin: 0;
     }
+    fieldset {
+      outline: 0 !important;
+    }
     #root, #app {
       height: 100%;
     }