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

Test new layout

parent 0d0286ad
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/actions/index.js
+ 6
− 11
View file @ dcfc845e
export const OPEN_DRAWER = 'OPEN_DRAWER'; export const OPEN_ANALYSIS_VIEW = 'OPEN_ANALYSIS_VIEW';
export const CLOSE_DRAWER = 'CLOSE_DRAWER'; export const CLOSE_ANALYSIS_VIEW = 'CLOSE_ANALYSIS_VIEW';
export const UPDATE_QUERY = 'UPDATE_QUERY'; export const UPDATE_QUERY = 'UPDATE_QUERY';
export const TOGGLE_DATASET = 'TOGGLE_DATASET'; export const TOGGLE_DATASET = 'TOGGLE_DATASET';
export const START_SPINNER = 'START_SPINNER'; export const START_SPINNER = 'START_SPINNER';
...@@ -16,17 +16,16 @@ export const SORT_RESULTS = 'SORT_RESULTS'; ...@@ -16,17 +16,16 @@ export const SORT_RESULTS = 'SORT_RESULTS';
export const CLEAR_ERROR = 'CLEAR_ERROR'; export const CLEAR_ERROR = 'CLEAR_ERROR';
export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE'; export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE';
export const UPDATE_RESULT_FORMAT = 'UPDATE_RESULT_FORMAT'; export const UPDATE_RESULT_FORMAT = 'UPDATE_RESULT_FORMAT';
export const SET_MAP_READY = 'SET_MAP_READY';
export const GET_GEOJSON = 'GET_GEOJSON'; export const GET_GEOJSON = 'GET_GEOJSON';
export const UPDATE_GEOJSON = 'UPDATE_GEOJSON'; export const UPDATE_GEOJSON = 'UPDATE_GEOJSON';
export const GET_GEOJSON_FAILED = 'GET_GEOJSON_FAILED'; export const GET_GEOJSON_FAILED = 'GET_GEOJSON_FAILED';
export const openDrawer = () => ({ export const openAnalysisView = () => ({
type: OPEN_DRAWER, type: OPEN_ANALYSIS_VIEW,
}); });
export const closeDrawer = () => ({ export const closeAnalysisView = () => ({
type: CLOSE_DRAWER, type: CLOSE_ANALYSIS_VIEW,
}); });
export const updateQuery = (query) => ({ export const updateQuery = (query) => ({
...@@ -103,10 +102,6 @@ export const updateResultFormat = (resultFormat) => ({ ...@@ -103,10 +102,6 @@ export const updateResultFormat = (resultFormat) => ({
resultFormat resultFormat
}); });
export const setMapReady = () => ({
type: SET_MAP_READY,
});
export const getGeoJSON = () => ({ export const getGeoJSON = () => ({
type: GET_GEOJSON, type: GET_GEOJSON,
}); });
......
src/client/components/VirtualizedTable.js
+ 2
− 4
View file @ dcfc845e
...@@ -96,10 +96,11 @@ class VirtualizedTable extends React.PureComponent { ...@@ -96,10 +96,11 @@ class VirtualizedTable extends React.PureComponent {
// </ExpansionPanel> // </ExpansionPanel>
// </div> // </div>
console.log(list)
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Grid container className={classes.container}> <Grid container className={classes.container}>
<div style={{ flex: '1 1 auto' }}> <div style={{ flex: '1 1 auto' }}>
<AutoSizer> <AutoSizer>
{({ height, width }) => ( {({ height, width }) => (
...@@ -157,7 +158,6 @@ class VirtualizedTable extends React.PureComponent { ...@@ -157,7 +158,6 @@ class VirtualizedTable extends React.PureComponent {
_getRowHeight({index}) { _getRowHeight({index}) {
const list = this.props.list; const list = this.props.list;
return this._getDatum(list, index).size; return this._getDatum(list, index).size;
} }
...@@ -182,8 +182,6 @@ class VirtualizedTable extends React.PureComponent { ...@@ -182,8 +182,6 @@ class VirtualizedTable extends React.PureComponent {
_sort({ sortBy, sortDirection }) { _sort({ sortBy, sortDirection }) {
this.props.sortResults({ sortBy, sortDirection: sortDirection.toLowerCase() }); this.props.sortResults({ sortBy, sortDirection: sortDirection.toLowerCase() });
} }
} }
VirtualizedTable.propTypes = { VirtualizedTable.propTypes = {
......
src/client/containers/MapApp.js
+ 45
− 72
View file @ dcfc845e
...@@ -8,8 +8,14 @@ import Typography from '@material-ui/core/Typography'; ...@@ -8,8 +8,14 @@ import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu'; import MenuIcon from '@material-ui/icons/Menu';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
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 Immutable from 'immutable'; import Immutable from 'immutable';
import IntegrationAutosuggest from '../components/IntegrationAutosuggest';
import VirtualizedTable from '../components/VirtualizedTable'; import VirtualizedTable from '../components/VirtualizedTable';
import DatasetSelector from '../components/DatasetSelector';
import LeafletMap from '../components/map/LeafletMap'; import LeafletMap from '../components/map/LeafletMap';
import { import {
...@@ -24,9 +30,8 @@ import { ...@@ -24,9 +30,8 @@ import {
clearSuggestions, clearSuggestions,
fetchResults, fetchResults,
clearResults, clearResults,
openDrawer, openAnalysisView,
closeDrawer, closeAnalysisView,
setMapReady,
getGeoJSON, getGeoJSON,
updateResultFormat, updateResultFormat,
updateResultsFilter, updateResultsFilter,
...@@ -60,18 +65,40 @@ const styles = theme => ({ ...@@ -60,18 +65,40 @@ const styles = theme => ({
}); });
let MapApp = (props) => { let MapApp = (props) => {
const { classes, error, theme, drawerIsOpen, mapReady, analysisView } = props; const { classes, error, analysisView } = props;
// console.log(props.results) console.log(props.results);
let resultsSection = ''; let resultsSection = '';
if (props.results.length > 0) { if (props.results.length > 0) {
resultsSection = ( resultsSection = (
<VirtualizedTable <div>
list={Immutable.List(props.results)} <ExpansionPanel>
resultValues={props.resultValues} <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
search={props.search} <Typography className={classes.heading}>Select data sources</Typography>
sortResults={props.sortResults} </ExpansionPanelSummary>
updateResultsFilter={props.updateResultsFilter} /> <ExpansionPanelDetails>
<DatasetSelector
datasets={props.search.datasets}
toggleDataset={props.toggleDataset}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
<IntegrationAutosuggest
search={props.search}
updateQuery={props.updateQuery}
fetchSuggestions={props.fetchSuggestions}
clearSuggestions={props.clearSuggestions}
fetchResults={props.fetchResults}
clearResults={props.clearResults}
updateResultFormat={props.updateResultFormat}
/>
<VirtualizedTable
list={Immutable.List(props.results)}
resultValues={props.resultValues}
search={props.search}
sortResults={props.sortResults}
updateResultsFilter={props.updateResultsFilter} />
</div>
); );
//resultsView = <Pie data={props.results} query={props.search.query} />; //resultsView = <Pie data={props.results} query={props.search.query} />;
} }
...@@ -89,41 +116,9 @@ let MapApp = (props) => { ...@@ -89,41 +116,9 @@ let MapApp = (props) => {
let smallView = analysisView ? map : resultsSection; let smallView = analysisView ? map : resultsSection;
let mainView = analysisView ? resultsSection : map ; let mainView = analysisView ? resultsSection : map ;
// const drawer = (
// <Drawer
// variant="persistent" //
// anchor={anchor}
// open={drawerIsOpen}
// width={drawerWidth}
// classes={{
// paper: classes.drawerPaper,
// }}
// >
// <div className={classes.drawerSearch}>
// <IntegrationAutosuggest
// search={props.search}
// updateQuery={props.updateQuery}
// fetchSuggestions={props.fetchSuggestions}
// clearSuggestions={props.clearSuggestions}
// fetchResults={props.fetchResults}
// clearResults={props.clearResults}
// updateResultFormat={props.updateResultFormat}
// />
// <IconButton onClick={props.closeDrawer}>
// {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
// </IconButton>
// </div>
// <ExpansionPanel>
// <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
// <Typography className={classes.heading}>Select data sources</Typography>
// </ExpansionPanelSummary>
// <ExpansionPanelDetails>
// <DatasetSelector
// datasets={props.search.datasets}
// toggleDataset={props.toggleDataset}
// />
// </ExpansionPanelDetails>
// </ExpansionPanel>
// <ExpansionPanel> // <ExpansionPanel>
// <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> // <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
// <Typography className={classes.heading}>Saved searches</Typography> // <Typography className={classes.heading}>Saved searches</Typography>
...@@ -138,22 +133,6 @@ let MapApp = (props) => { ...@@ -138,22 +133,6 @@ let MapApp = (props) => {
// </Drawer> // </Drawer>
// ); // );
// let before = null;
// let after = null;
// if (anchor === 'left') {
// before = drawer;
// } else {
// after = drawer;
// }
// if (!mapReady) {
// props.setMapReady();
// setTimeout(() => {
// props.openDrawer();
// }, 300);
// }
return ( return (
<div className={classes.root}> <div className={classes.root}>
<div className={classes.appFrame}> <div className={classes.appFrame}>
...@@ -186,8 +165,6 @@ const mapStateToProps = (state) => { ...@@ -186,8 +165,6 @@ const mapStateToProps = (state) => {
search: state.search, search: state.search,
results: getVisibleResults(state.search), results: getVisibleResults(state.search),
resultValues: getVisibleValues(state.search), resultValues: getVisibleValues(state.search),
drawerIsOpen: state.options.drawerIsOpen,
mapReady: state.options.mapReady,
analysisView: state.options.analysisView, analysisView: state.options.analysisView,
error: state.error, error: state.error,
geoJSON: state.map.geoJSON, geoJSON: state.map.geoJSON,
...@@ -197,8 +174,8 @@ const mapStateToProps = (state) => { ...@@ -197,8 +174,8 @@ const mapStateToProps = (state) => {
}; };
const mapDispatchToProps = ({ const mapDispatchToProps = ({
openDrawer, openAnalysisView,
closeDrawer, closeAnalysisView,
updateQuery, updateQuery,
toggleDataset, toggleDataset,
fetchSuggestions, fetchSuggestions,
...@@ -206,7 +183,6 @@ const mapDispatchToProps = ({ ...@@ -206,7 +183,6 @@ const mapDispatchToProps = ({
fetchResults, fetchResults,
clearResults, clearResults,
sortResults, sortResults,
setMapReady,
getGeoJSON, getGeoJSON,
updateResultFormat, updateResultFormat,
updateResultsFilter updateResultsFilter
...@@ -217,11 +193,9 @@ MapApp.propTypes = { ...@@ -217,11 +193,9 @@ MapApp.propTypes = {
theme: PropTypes.object.isRequired, theme: PropTypes.object.isRequired,
search: PropTypes.object.isRequired, search: PropTypes.object.isRequired,
error: PropTypes.object.isRequired, error: PropTypes.object.isRequired,
drawerIsOpen: PropTypes.bool.isRequired,
mapReady: PropTypes.bool.isRequired,
analysisView: PropTypes.bool.isRequired, analysisView: PropTypes.bool.isRequired,
openDrawer: PropTypes.func.isRequired, openAnalysisView: PropTypes.func.isRequired,
closeDrawer: PropTypes.func.isRequired, closeAnalysisView: PropTypes.func.isRequired,
updateQuery: PropTypes.func.isRequired, updateQuery: PropTypes.func.isRequired,
toggleDataset: PropTypes.func.isRequired, toggleDataset: PropTypes.func.isRequired,
fetchSuggestions: PropTypes.func.isRequired, fetchSuggestions: PropTypes.func.isRequired,
...@@ -229,7 +203,6 @@ MapApp.propTypes = { ...@@ -229,7 +203,6 @@ MapApp.propTypes = {
fetchResults: PropTypes.func.isRequired, fetchResults: PropTypes.func.isRequired,
clearResults: PropTypes.func.isRequired, clearResults: PropTypes.func.isRequired,
sortResults: PropTypes.func.isRequired, sortResults: PropTypes.func.isRequired,
setMapReady: PropTypes.func.isRequired,
geoJSON: PropTypes.object.isRequired, geoJSON: PropTypes.object.isRequired,
geoJSONKey: PropTypes.number, geoJSONKey: PropTypes.number,
getGeoJSON: PropTypes.func.isRequired, getGeoJSON: PropTypes.func.isRequired,
......
src/client/reducers/options.js
+ 8
− 13
View file @ dcfc845e
import { import {
UPDATE_LANGUAGE, UPDATE_LANGUAGE,
UPDATE_RESULT_FORMAT, UPDATE_RESULT_FORMAT,
OPEN_DRAWER, OPEN_ANALYSIS_VIEW,
CLOSE_DRAWER, CLOSE_ANALYSIS_VIEW,
SET_MAP_READY
} from '../actions'; } from '../actions';
const DEFAULT_LANGUAGE = 'en'; const DEFAULT_LANGUAGE = 'en';
const DEFAULT_DRAWER_IS_OPEN = false; const DEFAULT_ANALYSIS_VIEW = false;
const DEFAULT_RESULT_FORMAT = 'table'; const DEFAULT_RESULT_FORMAT = 'table';
export const INITIAL_STATE = { export const INITIAL_STATE = {
language: DEFAULT_LANGUAGE, language: DEFAULT_LANGUAGE,
resultFormat: DEFAULT_RESULT_FORMAT, resultFormat: DEFAULT_RESULT_FORMAT,
drawerIsOpen: DEFAULT_DRAWER_IS_OPEN, analysisView: DEFAULT_ANALYSIS_VIEW,
mapReady: false,
analysisView: false
}; };
const options = (state = INITIAL_STATE, action) => { const options = (state = INITIAL_STATE, action) => {
...@@ -24,12 +21,10 @@ const options = (state = INITIAL_STATE, action) => { ...@@ -24,12 +21,10 @@ const options = (state = INITIAL_STATE, action) => {
return { ...state, language: action.language || DEFAULT_LANGUAGE }; return { ...state, language: action.language || DEFAULT_LANGUAGE };
case UPDATE_RESULT_FORMAT: case UPDATE_RESULT_FORMAT:
return { ...state, resultFormat: action.resultFormat || DEFAULT_RESULT_FORMAT }; return { ...state, resultFormat: action.resultFormat || DEFAULT_RESULT_FORMAT };
case OPEN_DRAWER: case OPEN_ANALYSIS_VIEW:
return { ...state, drawerIsOpen: true }; return { ...state, analysisView: true };
case CLOSE_DRAWER: case CLOSE_ANALYSIS_VIEW:
return { ...state, drawerIsOpen: false }; return { ...state, analysisView: false };
case SET_MAP_READY:
return { ...state, mapReady: true };
default: default:
return state; return state;
} }
......
src/client/reducers/search.js
+ 0
− 1
View file @ dcfc845e
...@@ -59,7 +59,6 @@ export const INITIAL_STATE = { ...@@ -59,7 +59,6 @@ export const INITIAL_STATE = {
}, },
sortBy: 'broaderAreaLabel', sortBy: 'broaderAreaLabel',
sortDirection: 'asc', sortDirection: 'asc',
//resultsFilter: null,
resultsQuery: '', resultsQuery: '',
fetchingResults: false, fetchingResults: false,
}; };
......
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