From 3592f82d736740da2fccf2116533144e8a0213de Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 1 Oct 2019 09:37:40 +0300
Subject: [PATCH] Finalize range facet
---
src/client/components/facet_bar/RangeFacet.js | 80 +++++++++----------
.../perspectives/PerspectiveArrayMMM.js | 2 +-
src/server/sparql/Filters.js | 12 ++-
3 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/src/client/components/facet_bar/RangeFacet.js b/src/client/components/facet_bar/RangeFacet.js
index abb2cf72..b5263717 100644
--- a/src/client/components/facet_bar/RangeFacet.js
+++ b/src/client/components/facet_bar/RangeFacet.js
@@ -5,7 +5,7 @@ import purple from '@material-ui/core/colors/purple';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
-import { YearToISOString, ISOStringToYear } from './FacetHelpers';
+import InputAdornment from '@material-ui/core/InputAdornment';
const styles = theme => ({
root: {
@@ -13,7 +13,8 @@ const styles = theme => ({
display: 'flex',
},
textFields: {
- marginRight: theme.spacing(2)
+ marginRight: theme.spacing(2),
+ maxWidth: 150
},
textField: {
display: 'block'
@@ -36,20 +37,25 @@ const styles = theme => ({
class RangeFacet extends Component {
constructor(props) {
super(props);
- this.state = {
- min: '',
- max: ''
- };
+ let min = '';
+ let max = '';
+ const { integerFilter } = props.facet;
+ if (integerFilter !== null) {
+ min = integerFilter.start;
+ max = integerFilter.end;
+ }
+ this.state = { min, max };
}
componentDidMount = () => {
- const { isFetching, min, max } = this.props.facet;
- if (!isFetching && (min == null || max == null)) {
- this.props.fetchFacet({
- facetClass: this.props.facetClass,
- facetID: this.props.facetID,
- });
+ const { integerFilter } = this.props.facet;
+ let min = '';
+ let max = '';
+ if (integerFilter !== null) {
+ min = integerFilter.start;
+ max = integerFilter.end;
}
+ this.setState({ min, max });
}
handleMinChange = event => {
@@ -63,10 +69,6 @@ class RangeFacet extends Component {
handleApplyOnClick = event => {
let { min, max } = this.state;
let values = [ min, max ];
- if (this.props.dataType === 'ISOString') {
- values[0] = YearToISOString({ year: values[0], start: true });
- values[1] = YearToISOString({ year: values[1], start: false });
- }
this.props.updateFacetOption({
facetClass: this.props.facetClass,
facetID: this.props.facetID,
@@ -76,38 +78,27 @@ class RangeFacet extends Component {
event.preventDefault();
}
+ disableApply = () => {
+ let disabled = false;
+ if (this.props.someFacetIsFetching) {
+ disabled = true;
+ }
+ if (this.state.min === '' && this.state.max === '') {
+ disabled = true;
+ }
+ return disabled;
+ }
+
render() {
const { classes, someFacetIsFetching } = this.props;
- const { isFetching, min, max } = this.props.facet;
- let domain = null;
- let values = null;
- if (isFetching || min == null || max == null) {
+ const { isFetching, unit } = this.props.facet;
+ if (isFetching) {
return(
<div className={classes.spinnerContainer}>
<CircularProgress style={{ color: purple[500] }} thickness={5} />
</div>
);
} else {
- if (this.props.dataType === 'ISOString') {
- const minYear = this.ISOStringToYear(min);
- const maxYear = this.ISOStringToYear(max);
- domain = [ minYear, maxYear ];
- if (this.props.facet.timespanFilter == null) {
- values = domain;
- } else {
- const { start, end } = this.props.facet.timespanFilter;
- values = [ this.ISOStringToYear(start), this.ISOStringToYear(end) ];
- }
- } else if (this.props.dataType === 'integer') {
- domain = [ parseInt(min), parseInt(max) ];
- if (this.props.facet.integerFilter == null) {
- values = domain;
- } else {
- const { start, end } = this.props.facet.integerFilter;
- values = [ start, end ];
- }
- }
-
return (
<div className={classes.root}>
<div className={classes.textFields}>
@@ -120,6 +111,9 @@ class RangeFacet extends Component {
type="number"
variant="outlined"
className={classes.textField}
+ InputProps={{
+ endAdornment: <InputAdornment position="end">{unit}</InputAdornment>
+ }}
InputLabelProps={{
shrink: true,
}}
@@ -134,6 +128,9 @@ class RangeFacet extends Component {
type="number"
variant="outlined"
className={classes.textField}
+ InputProps={{
+ endAdornment: <InputAdornment position="end">{unit}</InputAdornment>
+ }}
InputLabelProps={{
shrink: true,
}}
@@ -146,7 +143,7 @@ class RangeFacet extends Component {
color="primary"
className={classes.button}
onClick={this.handleApplyOnClick}
- disabled={this.state.min === '' && this.state.max === ''}
+ disabled={this.disableApply()}
>
apply
</Button>
@@ -170,7 +167,6 @@ RangeFacet.propTypes = {
facetUpdateID: PropTypes.number,
updatedFilter: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
updatedFacet: PropTypes.string,
- dataType: PropTypes.string.isRequired
};
export default withStyles(styles)(RangeFacet);
diff --git a/src/client/components/perspectives/PerspectiveArrayMMM.js b/src/client/components/perspectives/PerspectiveArrayMMM.js
index 7fbf265d..85eb30dd 100644
--- a/src/client/components/perspectives/PerspectiveArrayMMM.js
+++ b/src/client/components/perspectives/PerspectiveArrayMMM.js
@@ -62,7 +62,7 @@ export const perspectiveArr = [
</React.Fragment>
,
perspectiveDescHeight: 99,
- defaultActiveFacets: new Set(['prefLabel', 'height']),
+ defaultActiveFacets: new Set(['prefLabel']),
tabs: [
{
id: 'table',
diff --git a/src/server/sparql/Filters.js b/src/server/sparql/Filters.js
index 4c56414a..2a8d815d 100644
--- a/src/server/sparql/Filters.js
+++ b/src/server/sparql/Filters.js
@@ -204,12 +204,18 @@ const generateIntegerFilter = ({
}) => {
const facetConfig = facetConfigs[facetClass][facetID];
const { start, end } = values;
- const selectionStart = start;
- const selectionEnd = end;
+ let integerFilter = '';
+ if (start === '') {
+ integerFilter = `xsd:integer(?value) <= ${end}`;
+ } else if (end === '') {
+ integerFilter = `xsd:integer(?value) >= ${start}`;
+ } else {
+ integerFilter = `xsd:integer(?value) >= ${start} && xsd:integer(?value) <= ${end}`;
+ }
const filterStr = `
?${filterTarget} ${facetConfig.predicate} ?value .
FILTER(
- xsd:integer(?value) >= ${selectionStart} && xsd:integer(?value) <= ${selectionEnd}
+ ${integerFilter}
)
`;
if (inverse) {
--
GitLab