From 5fe285b4bb76e0b1051ad8dcf145f9eae1f0c3ed Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Fri, 14 Dec 2018 18:13:17 +0200
Subject: [PATCH] Isolating facets
---
src/client/actions/index.js | 7 ++++---
src/client/components/FacetBar.js | 23 +++++++++++++++--------
src/client/components/Tree.js | 11 ++++++++---
src/client/containers/MapApp.js | 5 ++++-
src/client/epics/index.js | 10 ++++++----
src/client/reducers/facet.js | 17 ++++++++++-------
src/server/index.js | 15 ++++++++++++++-
src/server/sparql/Manuscripts.js | 9 +++------
8 files changed, 64 insertions(+), 33 deletions(-)
diff --git a/src/client/actions/index.js b/src/client/actions/index.js
index 8e877f2f..25b6419c 100644
--- a/src/client/actions/index.js
+++ b/src/client/actions/index.js
@@ -160,12 +160,13 @@ export const openFacetDialog = property => ({
export const closeFacetDialog = () => ({
type: CLOSE_FACET_DIALOG,
});
-export const fetchFacet = () => ({
+export const fetchFacet = id => ({
type: FETCH_FACET,
+ id
});
-export const updateFacet = ({ facetValues }) => ({
+export const updateFacet = ({ id, facetValues }) => ({
type: UPDATE_FACET,
- facetValues
+ id, facetValues
});
export const clearFacet = () => ({
type: CLEAR_FACET,
diff --git a/src/client/components/FacetBar.js b/src/client/components/FacetBar.js
index c6678edd..38d5e883 100644
--- a/src/client/components/FacetBar.js
+++ b/src/client/components/FacetBar.js
@@ -38,7 +38,7 @@ const styles = theme => ({
class FacetBar extends React.Component {
componentDidMount = () => {
- this.props.fetchFacet();
+ //this.props.fetchFacet('source');
}
// componentDidUpdate = prevProps => {
@@ -50,11 +50,11 @@ class FacetBar extends React.Component {
//
render() {
- const { classes, facet } = this.props;
+ const { classes, source, productionPlace, lastUpdatedFacet } = this.props;
//console.log(facet)
return (
<div className={classes.root}>
- {this.props.facet.fetchingFacet ?
+ {this.props.fetchingFacet ?
<CircularProgress style={{ color: purple[500] }} thickness={5} /> :
<React.Fragment>
<Paper className={classes.facetContainer}>
@@ -63,9 +63,11 @@ class FacetBar extends React.Component {
</Paper>
<div className={classes.facetValuesContainerThree}>
<Tree
+ key='source'
property='source'
- lastUpdatedFacet={facet.lastUpdatedFacet}
- data={facet.facetValues.source}
+ lastUpdatedFacet={lastUpdatedFacet}
+ data={source}
+ fetchFacet={this.props.fetchFacet}
updateFilter={this.props.updateFilter}
/>
</div>
@@ -89,9 +91,11 @@ class FacetBar extends React.Component {
</Paper>
<div className={classes.facetValuesContainerTen}>
<Tree
+ key='productionPlace'
property='productionPlace'
- lastUpdatedFacet={facet.lastUpdatedFacet}
- data={facet.facetValues.productionPlace}
+ lastUpdatedFacet={lastUpdatedFacet}
+ data={productionPlace}
+ fetchFacet={this.props.fetchFacet}
updateFilter={this.props.updateFilter}
/>
</div>
@@ -111,7 +115,10 @@ class FacetBar extends React.Component {
FacetBar.propTypes = {
classes: PropTypes.object.isRequired,
fetchFacet: PropTypes.func.isRequired,
- facet: PropTypes.object.isRequired,
+ fetchingFacet: PropTypes.bool.isRequired,
+ lastUpdatedFacet: PropTypes.string.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 51acd116..0dbcd181 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -30,16 +30,20 @@ class Tree extends Component {
constructor(props) {
super(props);
this.state = {
- treeData: this.props.data,
+ treeData: [],
searchString: '',
searchFocusIndex: 0,
searchFoundCount: null,
};
}
+ componentDidMount = () => {
+ console.log('tree mounted')
+ //this.props.fetchFacet(this.props.property);
+ }
+
// componentDidUpdate = prevProps => {
- // console.log(this.props.lastUpdatedFacet);
- // //if (prevProps.facetFilters[this.props.property] != this.props.facetFilters )
+ // if (prevProps. )
// };
handleCheckboxChange = treeObj => event => {
@@ -191,6 +195,7 @@ Tree.propTypes = {
property: PropTypes.string.isRequired,
lastUpdatedFacet: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
+ fetchFacet: PropTypes.func.isRequired,
updateFilter: PropTypes.func.isRequired,
};
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 400df488..5a35afea 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -92,7 +92,10 @@ let MapApp = (props) => {
<React.Fragment>
<Grid item sm={12} md={3} className={classes.facetBarContainer}>
<FacetBar
- facet={props.facet}
+ fetchingFacet={props.facet.fetchingFacet}
+ lastUpdatedFacet={props.facet.lastUpdatedFacet}
+ source={props.facet.source}
+ productionPlace={props.facet.productionPlace}
fetchFacet={props.fetchFacet}
updateFilter={props.updateFilter}
updatePage={props.updatePage}
diff --git a/src/client/epics/index.js b/src/client/epics/index.js
index bd3df407..e15338f9 100644
--- a/src/client/epics/index.js
+++ b/src/client/epics/index.js
@@ -54,7 +54,7 @@ const getPlace = action$ => action$.pipe(
const getFacet = (action$, state$) => action$.pipe(
ofType(FETCH_FACET),
withLatestFrom(state$),
- mergeMap(([, state]) => {
+ mergeMap(([action, state]) => {
let params = {};
let filters = {};
let activeFilters = false;
@@ -67,10 +67,12 @@ const getFacet = (action$, state$) => action$.pipe(
if (activeFilters) {
params.filters = JSON.stringify(filters);
}
- const searchUrl = apiUrl + 'facets';
- const requestUrl = `${searchUrl}?${stringify(params)}`;
+ const requestUrl = `${apiUrl}facet/${action.id}${stringify(params)}`;
return ajax.getJSON(requestUrl).pipe(
- map(response => updateFacet({ facetValues: response }))
+ map(response => updateFacet({
+ id: action.id,
+ facetValues: response,
+ }))
);
})
);
diff --git a/src/client/reducers/facet.js b/src/client/reducers/facet.js
index 3e769088..eff8054b 100644
--- a/src/client/reducers/facet.js
+++ b/src/client/reducers/facet.js
@@ -7,12 +7,15 @@ import {
} from '../actions';
export const INITIAL_STATE = {
+ source: [],
+ productionPlace: [],
+ author: [],
facetOptions : {
productionPlace: {
id: 'productionPlace',
label: 'Production place',
//predicate: defined in backend
- type: 'hierarchical',
+ values: []
},
author: {
id: 'author',
@@ -27,11 +30,11 @@ export const INITIAL_STATE = {
type: 'checkboxes'
}
},
- facetValues : {
- productionPlace: [],
- author: [],
- source: []
- },
+ // facetValues : {
+ // productionPlace: [],
+ // author: [],
+ // source: []
+ // },
facetFilters: {
productionPlace: new Set(),
author: new Set(),
@@ -58,7 +61,7 @@ const facet = (state = INITIAL_STATE, action) => {
case UPDATE_FACET:
return {
...state,
- facetValues: action.facetValues,
+ [ action.id ]: action.facetValues,
fetchingFacet: false
};
case UPDATE_FILTER:
diff --git a/src/server/index.js b/src/server/index.js
index 0af9cbd4..f3b075a3 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -5,7 +5,8 @@ import {
getManuscripts,
getPlaces,
getPlace,
- getFacets
+ getFacets,
+ getFacet
} from './sparql/Manuscripts';
const DEFAULT_PORT = 3001;
const app = express();
@@ -73,6 +74,18 @@ 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);
+ })
+ .catch((err) => {
+ console.log(err);
+ return res.sendStatus(500);
+ });
+});
+
/* Routes are matched to a url in order of their definition
Redirect all the the rest for react-router to handle */
app.get('*', function(request, response) {
diff --git a/src/server/sparql/Manuscripts.js b/src/server/sparql/Manuscripts.js
index 779e65d8..3c190c92 100644
--- a/src/server/sparql/Manuscripts.js
+++ b/src/server/sparql/Manuscripts.js
@@ -78,7 +78,7 @@ export const getPlace = id => {
};
export const getFacets = filters => {
- return Promise.all(Object.values(facetConfigs).map(value => getFacet(value, filters)))
+ return Promise.all(Object.keys(facetConfigs).map(id => getFacet(id, filters)))
.then(data => {
let results = {};
let i = 0;
@@ -90,9 +90,9 @@ export const getFacets = filters => {
});
};
-const getFacet = (facetConfig, filters) => {
+export const getFacet = (id, filters) => {
let { endpoint, facetQuery } = datasetConfig['mmm'];
- //console.log(filters)
+ const facetConfig = facetConfigs[id];
if (filters == null) {
facetQuery = facetQuery.replace('<FILTER>', '');
} else {
@@ -113,12 +113,10 @@ const generateFacetFilter = (facetConfig, filters) => {
?id ${facetConfigs[property].predicate} ?${property}Filter .
`;
}
- // console.log(filterStr)
return filterStr;
};
const generateResultFilter = filters => {
- //console.log(filters)
let filterStr = '';
for (let property in filters) {
filterStr += `
@@ -126,6 +124,5 @@ const generateResultFilter = filters => {
?id ${facetConfigs[property].predicate} ?${property}Filter .
`;
}
- //console.log(filterStr)
return filterStr;
};
--
GitLab