From e2564709b83ba1ae121e12ceebf2c66129985fec Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 17 Dec 2018 17:15:48 +0200
Subject: [PATCH] Prepare for facet filter handling
---
src/client/components/FacetBar.js | 15 ++++++-------
src/client/components/Tree.js | 35 ++++++++++++-------------------
src/client/containers/MapApp.js | 1 +
src/client/epics/index.js | 5 ++++-
src/server/index.js | 2 --
src/server/sparql/Datasets.js | 9 ++++++--
src/server/sparql/Manuscripts.js | 11 +++++++---
7 files changed, 41 insertions(+), 37 deletions(-)
diff --git a/src/client/components/FacetBar.js b/src/client/components/FacetBar.js
index 25f3ff7d..e4d6d200 100644
--- a/src/client/components/FacetBar.js
+++ b/src/client/components/FacetBar.js
@@ -38,20 +38,20 @@ const styles = theme => ({
class FacetBar extends React.Component {
componentDidMount = () => {
- //this.props.fetchFacet('source');
+ this.props.fetchFacet('source');
}
- // componentDidUpdate = prevProps => {
- // if (prevProps.facet.facetFilters != this.props.facet.facetFilters) {
- // this.props.fetchFacet();
- // }
- // }
+ componentDidUpdate = prevProps => {
+ if (prevProps.facetFilters != this.props.facetFilters) {
+ this.props.fetchFacet('source');
+ }
+ }
//
render() {
const { classes, source, productionPlace, lastUpdatedFacet } = this.props;
- //console.log(facet)
+ //console.log(source)
return (
<div className={classes.root}>
{this.props.fetchingFacet ?
@@ -118,6 +118,7 @@ FacetBar.propTypes = {
fetchFacet: PropTypes.func.isRequired,
fetchingFacet: PropTypes.bool.isRequired,
lastUpdatedFacet: PropTypes.string.isRequired,
+ facetFilters: PropTypes.object.isRequired,
source: PropTypes.array.isRequired,
productionPlace: PropTypes.array.isRequired,
updateFilter: PropTypes.func.isRequired,
diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js
index 0dbcd181..1639191e 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
-import SortableTree, { changeNodeAtPath } from 'react-sortable-tree';
+import SortableTree /* { changeNodeAtPath } */ from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app
import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
import Checkbox from '@material-ui/core/Checkbox';
@@ -30,33 +30,24 @@ class Tree extends Component {
constructor(props) {
super(props);
this.state = {
- treeData: [],
+ treeData: this.props.data,
searchString: '',
searchFocusIndex: 0,
searchFoundCount: null,
};
}
- componentDidMount = () => {
- console.log('tree mounted')
- //this.props.fetchFacet(this.props.property);
- }
-
- // componentDidUpdate = prevProps => {
- // if (prevProps. )
- // };
-
- handleCheckboxChange = treeObj => event => {
- const newTreeData = changeNodeAtPath({
- treeData: this.state.treeData,
- getNodeKey: ({ treeIndex }) => treeIndex,
- path: treeObj.path,
- newNode: {
- ...treeObj.node,
- selected: event.target.checked
- },
- });
- this.setState({ treeData: newTreeData });
+ handleCheckboxChange = treeObj => () => {
+ // const newTreeData = changeNodeAtPath({
+ // treeData: this.state.treeData,
+ // getNodeKey: ({ treeIndex }) => treeIndex,
+ // path: treeObj.path,
+ // newNode: {
+ // ...treeObj.node,
+ // selected: event.target.checked
+ // },
+ // });
+ // this.setState({ treeData: newTreeData });
this.props.updateFilter({
property: this.props.property,
value: treeObj.node.id
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 5a35afea..decf8a84 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -94,6 +94,7 @@ let MapApp = (props) => {
<FacetBar
fetchingFacet={props.facet.fetchingFacet}
lastUpdatedFacet={props.facet.lastUpdatedFacet}
+ facetFilters={props.facet.facetFilters}
source={props.facet.source}
productionPlace={props.facet.productionPlace}
fetchFacet={props.fetchFacet}
diff --git a/src/client/epics/index.js b/src/client/epics/index.js
index e15338f9..9d069da8 100644
--- a/src/client/epics/index.js
+++ b/src/client/epics/index.js
@@ -55,6 +55,7 @@ const getFacet = (action$, state$) => action$.pipe(
ofType(FETCH_FACET),
withLatestFrom(state$),
mergeMap(([action, state]) => {
+ let requestUrl = '';
let params = {};
let filters = {};
let activeFilters = false;
@@ -66,8 +67,10 @@ const getFacet = (action$, state$) => action$.pipe(
}
if (activeFilters) {
params.filters = JSON.stringify(filters);
+ requestUrl = `${apiUrl}facet/${action.id}?${stringify(params)}`;
+ } else {
+ requestUrl = `${apiUrl}facet/${action.id}`;
}
- const requestUrl = `${apiUrl}facet/${action.id}${stringify(params)}`;
return ajax.getJSON(requestUrl).pipe(
map(response => updateFacet({
id: action.id,
diff --git a/src/server/index.js b/src/server/index.js
index f3b075a3..e099a926 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -64,7 +64,6 @@ app.get(`${apiPath}/places/:placeId?`, (req, res) => {
app.get(`${apiPath}/facets`, (req, res) => {
const filters = req.query.filters == null ? null : JSON.parse(req.query.filters);
- // console.log(filters)
return getFacets(filters).then((data) => {
res.json(data);
})
@@ -76,7 +75,6 @@ app.get(`${apiPath}/facets`, (req, res) => {
app.get(`${apiPath}/facet/:id`, (req, res) => {
const filters = req.query.filters == null ? null : JSON.parse(req.query.filters);
- // console.log(filters)
return getFacet(req.params.id, filters).then((data) => {
res.json(data);
})
diff --git a/src/server/sparql/Datasets.js b/src/server/sparql/Datasets.js
index 760d33f7..16f2e238 100644
--- a/src/server/sparql/Datasets.js
+++ b/src/server/sparql/Datasets.js
@@ -3,8 +3,8 @@ module.exports = {
'title': 'MMM',
'shortTitle': 'MMM',
//'timePeriod': '',
- 'endpoint': 'http://ldf.fi/mmm-cidoc/sparql',
- //'endpoint': 'http://localhost:3050/ds/sparql',
+ //'endpoint': 'http://ldf.fi/mmm-cidoc/sparql',
+ 'endpoint': 'http://localhost:3050/ds/sparql',
'countQuery': `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
@@ -216,6 +216,11 @@ module.exports = {
?instance a frbroo:F4_Manifestation_Singleton .
<FILTER>
?instance <PREDICATE> ?id .
+ # OPTIONAL {
+ # FILTER(?id IN ( <http://ldf.fi/mmm/schema/Bodley> ))
+ # BIND(true AS ?is_selected)
+ # }
+ # BIND(COALESCE(?is_selected, false) as ?selected)
OPTIONAL { ?id dct:source ?source }
OPTIONAL { ?id crm:P89_falls_within ?parent_ }
BIND(COALESCE(?parent_, '0') as ?parent)
diff --git a/src/server/sparql/Manuscripts.js b/src/server/sparql/Manuscripts.js
index 3c190c92..18c5e11f 100644
--- a/src/server/sparql/Manuscripts.js
+++ b/src/server/sparql/Manuscripts.js
@@ -19,13 +19,13 @@ const facetConfigs = {
id: 'author',
label: 'Author',
predicate: 'crm:P128_carries/^frbroo:R17_created/frbroo:R19_created_a_realisation_of/^frbroo:R16_initiated/mmm-schema:carried_out_by_as_author',
- type: 'table'
+ type: 'hierarchical'
},
source: {
id: 'source',
label: 'Source',
predicate: 'dct:source',
- type: 'checkboxes',
+ type: 'hierarchical',
},
};
@@ -96,16 +96,21 @@ export const getFacet = (id, filters) => {
if (filters == null) {
facetQuery = facetQuery.replace('<FILTER>', '');
} else {
+ //console.log(filters)
+
facetQuery = facetQuery.replace('<FILTER>', generateFacetFilter(facetConfig, filters));
}
+ //console.log(facetConfig)
facetQuery = facetQuery.replace('<PREDICATE>', facetConfig.predicate);
- // console.log(facetQuery)
+ console.log(facetQuery)
let mapper = facetConfig.type === 'hierarchical' ? mapHierarchicalFacet : makeObjectList;
return sparqlSearchEngine.doSearch(facetQuery, endpoint, mapper);
};
const generateFacetFilter = (facetConfig, filters) => {
+ //console.log(filters[facetConfig.id])
delete filters[facetConfig.id]; // apply filters only from other facets
+
let filterStr = '';
for (let property in filters) {
filterStr += `
--
GitLab