From 6fa128bbe7a38952d6ade3cd895a21da033ee8bf Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Wed, 1 Aug 2018 14:47:35 +0300
Subject: [PATCH] Sketching the analysis view
---
.../components/IntegrationAutosuggest.js | 12 --
src/client/components/VirtualizedTable.js | 194 ++++++++++++------
src/client/containers/MapApp.js | 86 ++------
src/client/reducers/options.js | 2 +-
src/client/reducers/search.js | 4 +-
src/server/Datasets.js | 2 +-
6 files changed, 159 insertions(+), 141 deletions(-)
diff --git a/src/client/components/IntegrationAutosuggest.js b/src/client/components/IntegrationAutosuggest.js
index c9768f2a..65a5a5f9 100644
--- a/src/client/components/IntegrationAutosuggest.js
+++ b/src/client/components/IntegrationAutosuggest.js
@@ -47,13 +47,7 @@ function getSuggestionValue(suggestion) {
const styles = theme => ({
container: {
- //flexGrow: 0,
position: 'relative',
- //marginTop: theme.spacing.unit * 4,
- // paddingLeft: theme.spacing.unit * 15,
- // paddingRight: theme.spacing.unit * 15,
- //marginLeft: 24,
- //marginRight: 'auto',
width: 300,
},
suggestionsContainerOpen: {
@@ -78,11 +72,7 @@ const styles = theme => ({
},
icon: {
color: theme.palette.text.secondary,
- //paddingTop: 4,
},
- spinner: {
- //margin: theme.spacing.unit,
- }
});
const IntegrationAutosuggest = (props) => {
@@ -138,8 +128,6 @@ const IntegrationAutosuggest = (props) => {
};
const { classes } = props;
- //console.log('IntegrationAutosuggest', props.search.suggestions);
-
let adornment = null;
if (props.search.fetchingSuggestions || props.search.fetchingResults) {
adornment =
diff --git a/src/client/components/VirtualizedTable.js b/src/client/components/VirtualizedTable.js
index a3771c4e..f04eb93a 100644
--- a/src/client/components/VirtualizedTable.js
+++ b/src/client/components/VirtualizedTable.js
@@ -10,12 +10,13 @@ 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 IntegrationAutosuggest from '../components/IntegrationAutosuggest';
import {
AutoSizer,
Column,
Table,
} from 'react-virtualized';
-
// https://github.com/bvaughn/react-virtualized/issues/650
const styles = () => ({
@@ -31,6 +32,12 @@ const styles = () => ({
resultsInfo: {
flexGrow: 0
},
+ searchField: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: 70
+ }
});
const tableStyles = {
@@ -79,74 +86,133 @@ class VirtualizedTable extends React.PureComponent {
}
render() {
- const { classes, list } = this.props;
+ const { classes, list, analysisView } = this.props;
const rowGetter = ({index}) => this._getDatum(list, index);
-
//https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md
- // <div className={classes.resultsInfo}>
- // <ExpansionPanel expanded={true}>
- // <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
- // <Typography className={classes.heading}>Result options</Typography>
- // </ExpansionPanelSummary>
- // <ExpansionPanelDetails>
- // <CSVLink data={list.toArray()}>Results as CSV</CSVLink>
- // <ResultFilterDialog resultValues={this.props.resultValues} updateResultsFilter={this.props.updateResultsFilter} />
- // </ExpansionPanelDetails>
- // </ExpansionPanel>
- // </div>
- console.log(list)
+ let modifier = '';
+ let base = '';
+ let collector = '';
+ let collectionYear = '';
+ if (analysisView) {
+ modifier = (
+ <Column
+ label="Modifier"
+ cellDataGetter={({rowData}) => rowData.modifier}
+ dataKey="modifier"
+ width={150}
+ />
+ );
+ base = (
+ <Column
+ label="Base"
+ cellDataGetter={({rowData}) => rowData.basicElement}
+ dataKey="basicElement"
+ width={150}
+ />
+ );
+ collector = (
+ <Column
+ label="Collector"
+ cellDataGetter={({rowData}) => rowData.collector}
+ dataKey="collector"
+ width={150}
+ />
+ );
+ collectionYear = (
+ <Column
+ label="Year"
+ cellDataGetter={({rowData}) => rowData.collectionYear}
+ dataKey="collectionYear"
+ width={150}
+ />
+ );
+ }
return (
<div className={classes.root}>
<Grid container className={classes.container}>
- <div style={{ flex: '1 1 auto' }}>
- <AutoSizer>
- {({ height, width }) => (
- <Table
- overscanRowCount={10}
- rowHeight={40}
- rowGetter={rowGetter}
- rowCount={this.props.list.size}
- sort={this._sort}
- sortBy={this.props.search.sortBy}
- sortDirection={this.props.search.sortDirection.toUpperCase()}
- width={width}
- height={height}
- headerHeight={50}
- noRowsRenderer={this._noRowsRenderer}
- style={tableStyles.tableRoot}
- rowStyle={calculateRowStyle}
- >
- <Column
- label="Label"
- cellDataGetter={({rowData}) => rowData.label}
- dataKey="label"
- width={150}
- />
- <Column
- label="Type"
- cellDataGetter={({rowData}) => rowData.typeLabel}
- dataKey="typeLabel"
- width={150}
- />
- <Column
- label="Area"
- cellDataGetter={({rowData}) => rowData.broaderAreaLabel}
- dataKey="broaderAreaLabel"
- width={150}
- />
- <Column
- label="Source"
- cellDataGetter={({rowData}) => rowData.source}
- dataKey="source"
- width={150}
+ <div className={classes.resultsInfo}>
+ <div className={classes.searchField}>
+ <IntegrationAutosuggest
+ search={this.props.search}
+ updateQuery={this.props.updateQuery}
+ fetchSuggestions={this.props.fetchSuggestions}
+ clearSuggestions={this.props.clearSuggestions}
+ fetchResults={this.props.fetchResults}
+ clearResults={this.props.clearResults}
+ updateResultFormat={this.props.updateResultFormat}
+ />
+ </div>
+ {this.props.list.size > 0 &&
+ <ExpansionPanel>
+ <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography className={classes.heading}>Result options</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <DatasetSelector
+ datasets={this.props.search.datasets}
+ toggleDataset={this.props.toggleDataset}
/>
- </Table>
- )}
- </AutoSizer>
+ <CSVLink data={list.toArray()}>Results as CSV</CSVLink>
+ <ResultFilterDialog resultValues={this.props.resultValues} updateResultsFilter={this.props.updateResultsFilter} />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ }
</div>
+ {this.props.list.size > 0 &&
+ <div style={{ flex: '1 1 auto' }}>
+ <AutoSizer>
+ {({ height, width }) => (
+ <Table
+ overscanRowCount={10}
+ rowHeight={40}
+ rowGetter={rowGetter}
+ rowCount={this.props.list.size}
+ sort={this._sort}
+ sortBy={this.props.search.sortBy}
+ sortDirection={this.props.search.sortDirection.toUpperCase()}
+ width={width}
+ height={height}
+ headerHeight={50}
+ noRowsRenderer={this._noRowsRenderer}
+ style={tableStyles.tableRoot}
+ rowStyle={calculateRowStyle}
+ >
+ <Column
+ label="Name"
+ cellDataGetter={({rowData}) => rowData.label}
+ dataKey="label"
+ width={150}
+ />
+ {modifier}
+ {base}
+ <Column
+ label="Type"
+ cellDataGetter={({rowData}) => rowData.typeLabel}
+ dataKey="typeLabel"
+ width={150}
+ />
+ <Column
+ label="Area"
+ cellDataGetter={({rowData}) => rowData.broaderAreaLabel}
+ dataKey="broaderAreaLabel"
+ width={150}
+ />
+ {collector}
+ {collectionYear}
+ <Column
+ label="Source"
+ cellDataGetter={({rowData}) => rowData.source}
+ dataKey="source"
+ width={150}
+ />
+ </Table>
+ )}
+ </AutoSizer>
+ </div>
+ }
</Grid>
</div>
);
@@ -190,7 +256,15 @@ VirtualizedTable.propTypes = {
search: PropTypes.object.isRequired,
resultValues: PropTypes.object.isRequired,
sortResults: PropTypes.func.isRequired,
- updateResultsFilter: PropTypes.func.isRequired
+ updateResultsFilter: PropTypes.func.isRequired,
+ toggleDataset: PropTypes.func.isRequired,
+ updateQuery: PropTypes.func.isRequired,
+ fetchSuggestions: PropTypes.func.isRequired,
+ clearSuggestions: PropTypes.func.isRequired,
+ fetchResults: PropTypes.func.isRequired,
+ clearResults: PropTypes.func.isRequired,
+ updateResultFormat: PropTypes.func.isRequired,
+ analysisView: PropTypes.bool.isRequired
};
export default withStyles(styles)(VirtualizedTable);
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 815da4f9..d7ed78f9 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -8,14 +8,8 @@ import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
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 IntegrationAutosuggest from '../components/IntegrationAutosuggest';
import VirtualizedTable from '../components/VirtualizedTable';
-import DatasetSelector from '../components/DatasetSelector';
import LeafletMap from '../components/map/LeafletMap';
import {
@@ -68,41 +62,24 @@ let MapApp = (props) => {
const { classes, error, analysisView } = props;
console.log(props.results);
- let resultsSection = '';
- if (props.results.length > 0) {
- resultsSection = (
- <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>
- <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>
- );
+ const resultsSection = (
+ <VirtualizedTable
+ list={Immutable.List(props.results)}
+ resultValues={props.resultValues}
+ search={props.search}
+ sortResults={props.sortResults}
+ toggleDataset={props.toggleDataset}
+ updateResultsFilter={props.updateResultsFilter}
+ updateQuery={props.updateQuery}
+ fetchResults={props.fetchResults}
+ clearResults={props.clearResults}
+ fetchSuggestions={props.fetchSuggestions}
+ clearSuggestions={props.clearSuggestions}
+ updateResultFormat={props.updateResultFormat}
+ analysisView={props.analysisView}
+ />
+ );
//resultsView = <Pie data={props.results} query={props.search.query} />;
- }
-
const map = (
<LeafletMap
sliderValue={100}
@@ -113,26 +90,6 @@ let MapApp = (props) => {
/>
);
- let smallView = analysisView ? map : resultsSection;
- let mainView = analysisView ? resultsSection : map ;
-
-
-
- //
- // <ExpansionPanel>
- // <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
- // <Typography className={classes.heading}>Saved searches</Typography>
- // </ExpansionPanelSummary>
- // <ExpansionPanelDetails>
- // <Typography>
- // Saved searches go here
- // </Typography>
- // </ExpansionPanelDetails>
- // </ExpansionPanel>
- // {smallView}
- // </Drawer>
- // );
-
return (
<div className={classes.root}>
<div className={classes.appFrame}>
@@ -147,11 +104,11 @@ let MapApp = (props) => {
</Toolbar>
</AppBar>
<Grid container className={classes.mainContainer}>
- <Grid item xs={12} sm={4}>
- {smallView}
+ <Grid item xs={12} sm={analysisView ? 8 : 4}>
+ {resultsSection}
</Grid>
- <Grid item xs={12} sm={8}>
- {mainView}
+ <Grid item xs={12} sm={analysisView ? 4 : 8}>
+ {map}
</Grid>
</Grid>
</div>
@@ -160,7 +117,6 @@ let MapApp = (props) => {
};
const mapStateToProps = (state) => {
- // console.log('mapping state to props ', getVisibleResults(state.search))
return {
search: state.search,
results: getVisibleResults(state.search),
diff --git a/src/client/reducers/options.js b/src/client/reducers/options.js
index 82330bc7..83bd2412 100644
--- a/src/client/reducers/options.js
+++ b/src/client/reducers/options.js
@@ -6,7 +6,7 @@ import {
} from '../actions';
const DEFAULT_LANGUAGE = 'en';
-const DEFAULT_ANALYSIS_VIEW = false;
+const DEFAULT_ANALYSIS_VIEW = true;
const DEFAULT_RESULT_FORMAT = 'table';
export const INITIAL_STATE = {
diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js
index 73e3f3fc..fb700c8d 100644
--- a/src/client/reducers/search.js
+++ b/src/client/reducers/search.js
@@ -50,8 +50,8 @@ export const INITIAL_STATE = {
suggestions: [],
suggestionsQuery: '',
fetchingSuggestions: false,
- //results: [],
- results: sampleResults,
+ results: [],
+ //results: sampleResults,
resultsFilter: {
'typeLabel': new Set(),
'broaderAreaLabel': new Set(),
diff --git a/src/server/Datasets.js b/src/server/Datasets.js
index f844a9fc..db379050 100644
--- a/src/server/Datasets.js
+++ b/src/server/Datasets.js
@@ -270,7 +270,7 @@ module.exports = {
PREFIX gs: <http://www.opengis.net/ont/geosparql#>
PREFIX hipla: <http://ldf.fi/schema/hipla/>
PREFIX wgs84: <http://www.w3.org/2003/01/geo/wgs84_pos#>
- SELECT ?s ?label ?typeLabel ?broaderAreaLabel ?source ?lat ?long ?modifier ?basicElement
+ SELECT ?s ?label ?typeLabel ?broaderAreaLabel ?source ?lat ?long ?modifier ?basicElement ?collector ?collectionYear
WHERE {
?s text:query (skos:prefLabel '<QUERYTERM>') .
?s a hipla:Place .
--
GitLab