Isolating facets

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,

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,
 };
 

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,
 };
 

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}

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,
+      }))
     );
   })
 );

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:

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) {

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;
 };