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

Sketching the analysis view

parent dcfc845e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/IntegrationAutosuggest.js
+ 0
− 12
View file @ 6fa128bb
......@@ -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 =
......
src/client/components/VirtualizedTable.js
+ 134
− 60
View file @ 6fa128bb
......@@ -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);
src/client/containers/MapApp.js
+ 21
− 65
View file @ 6fa128bb
......@@ -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),
......
src/client/reducers/options.js
+ 1
− 1
View file @ 6fa128bb
......@@ -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 = {
......
src/client/reducers/search.js
+ 2
− 2
View file @ 6fa128bb
......@@ -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(),
......
src/server/Datasets.js
+ 1
− 1
View file @ 6fa128bb
......@@ -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 .
......
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