Update map component, provide both hierarchical and flat facet values

src/client/actions/index.js

@@ -62,9 +62,9 @@ export const fetchFacetFailed = error => ({
   type: FETCH_FACET_FAILED,
   error
 });
-export const updateFacet = ({ id, distinctValueCount, values, sortBy, sortDirection }) => ({
+export const updateFacet = ({ id, distinctValueCount, values, flatValues, sortBy, sortDirection }) => ({
   type: UPDATE_FACET,
-  id, distinctValueCount, values, sortBy, sortDirection
+  id, distinctValueCount, values, flatValues, sortBy, sortDirection
 });
 export const updateFilter = filter => ({
   type: UPDATE_FILTER,

src/client/components/LeafletMap.js

@@ -70,7 +70,8 @@ const ColorIcon = L.Icon.extend({
 class LeafletMap extends React.Component {
 
   componentDidMount() {
-    this.props.fetchPlaces(this.props.variant);
+
+    //this.props.fetchPlaces(this.props.variant);
 
     // Base layers
     // const OSMBaseLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
@@ -140,20 +141,21 @@ class LeafletMap extends React.Component {
 
   }
 
-  componentDidUpdate({ results, place, mapMode }) {
+  componentDidUpdate({ results, instance, mapMode }) {
 
     // check if results data or mapMode have changed
     if (this.props.results !== results || this.props.mapMode !== mapMode) {
       if (this.props.mapMode === 'cluster') {
+        console.log(this.props.results)
         this.updateMarkersAndCluster(this.props.results);
       } else {
         this.updateMarkers(this.props.results);
       }
     }
 
-    if (this.props.place !== place) {
-      this.markers[this.props.place.id]
-        .bindPopup(this.createPopUpContent(this.props.place), {
+    if (this.props.instance !== instance) {
+      this.markers[this.props.instance.id]
+        .bindPopup(this.createPopUpContent(this.props.instance), {
           maxHeight: 300,
           maxWidth: 400,
           minWidth: 400,
@@ -165,7 +167,7 @@ class LeafletMap extends React.Component {
   }
 
   renderSpinner() {
-    if(this.props.fetchingPlaces) {
+    if(this.props.fetching) {
       return (
         <div className={this.props.classes.spinner}>
           <CircularProgress style={{ color: purple[500] }} thickness={5} />
@@ -286,7 +288,7 @@ class LeafletMap extends React.Component {
   }
 
   markerOnClick = event => {
-    this.props.fetchPlace(event.target.options.id);
+    this.props.fetchByURI(event.target.options.id);
   };
 
   createPopUpContent(result) {
@@ -351,13 +353,12 @@ class LeafletMap extends React.Component {
 
 LeafletMap.propTypes = {
   classes: PropTypes.object.isRequired,
-  fetchPlaces: PropTypes.func.isRequired,
-  fetchingPlaces: PropTypes.bool.isRequired,
-  fetchPlace: PropTypes.func.isRequired,
   results: PropTypes.array.isRequired,
+  instance: PropTypes.object.isRequired,
+  fetchResults: PropTypes.func,
+  fetchByURI: PropTypes.func.isRequired,
+  fetching: PropTypes.bool.isRequired,
   mapMode: PropTypes.string.isRequired,
-  variant: PropTypes.string.isRequired,
-  place: PropTypes.object.isRequired,
 };
 
 export default withStyles(styles)(LeafletMap);

src/client/components/Manuscripts.js

@@ -4,7 +4,7 @@ import { Route, Redirect } from 'react-router-dom';
 import ViewTabs from './ViewTabs';
 import ResultTable from './ResultTable';
 import LeafletMap from './LeafletMap';
-import Deck from './Deck';
+//import Deck from './Deck';
 
 let Manuscripts = props => {
   return (
@@ -38,7 +38,7 @@ let Manuscripts = props => {
         render={routeProps =>
           <ResultTable
             data={props.manuscripts}
-            filters={props.facets.filters}
+            filters={props.facetData.filters}
             resultClass='manuscripts'
             fetchResults={props.fetchResults}
             updatePage={props.updatePage}
@@ -51,16 +51,14 @@ let Manuscripts = props => {
         path={'/manuscripts/production_places'}
         render={() =>
           <LeafletMap
-            fetchPlaces={props.fetchPlaces}
-            fetchingPlaces={props.search.fetchingPlaces}
-            fetchPlace={props.fetchPlace}
-            results={props.search.places}
-            place={props.search.place}
-            mapMode='cluster'
-            variant='productionPlaces'
+            results={props.facetData.facets.productionPlace.flatValues}
+            instance={props.manuscripts.instance}
+            fetchByURI={props.fetchByURI}
+            fetching={props.facetData.fetching}
+            mapMode={'cluster'}
           />}
       />
-      <Route
+      {/*<Route
         path={'/manuscripts/migrations'}
         render={() =>
           <Deck
@@ -68,14 +66,14 @@ let Manuscripts = props => {
             fetchingPlaces={props.search.fetchingPlaces}
             data={props.search.places}
           />}
-      />
+      /> */}
     </React.Fragment>
   );
 };
 
 Manuscripts.propTypes = {
   manuscripts: PropTypes.object.isRequired,
-  facets: PropTypes.object.isRequired,
+  facetData: PropTypes.object.isRequired,
   fetchResults: PropTypes.func.isRequired,
   fetchByURI: PropTypes.func.isRequired,
   updatePage: PropTypes.func.isRequired,

src/client/components/ResultTable.js

@@ -90,7 +90,7 @@ class ResultTable extends React.Component {
 
   handleOnChangeRowsPerPage = (event, rowsPerPage) => {
     if (event != null) {
-      console.log(rowsPerPage)
+      return rowsPerPage;
     }
   }
 

src/client/components/Tree.js

@@ -88,7 +88,7 @@ class Tree extends Component {
     }
     if (this.props.updatedFacet !== '' && this.props.updatedFacet !== this.props.property && prevProps.facetFilters != this.props.facetFilters) {
       // console.log(`fetching new values for ${this.props.property}`)
-      this.props.fetchFacet(this.props.property, this.props.sortBy, this.props.sortDirection);
+      this.props.fetchFacet(this.props.resultClass, this.props.property, this.props.sortBy, this.props.sortDirection);
     }
   }
 

src/client/containers/MapApp.js

@@ -100,7 +100,7 @@ let MapApp = (props) => {
                     <Paper className={classes.resultsContainerPaper}>
                       <Manuscripts
                         manuscripts={props.manuscripts}
-                        facets={props.manuscriptsFacets}
+                        facetData={props.manuscriptsFacets}
                         fetchResults={props.fetchResults}
                         fetchByURI={props.fetchByURI}
                         updatePage={props.updatePage}

src/client/epics/index.js

@@ -76,6 +76,7 @@ const fetchFacetEpic = (action$, state$) => action$.pipe(
         id: action.id,
         distinctValueCount: res.distinctValueCount,
         values: res.values,
+        flatValues: res.flatValues,
         sortBy: action.sortBy,
         sortDirection: action.sortDirection
       }))

src/client/reducers/manuscriptsFacets.js

@@ -15,6 +15,7 @@ export const INITIAL_STATE = {
       // predicate: defined in backend
       distinctValueCount: 0,
       values: [],
+      flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
       isFetching: false,
@@ -25,6 +26,7 @@ export const INITIAL_STATE = {
       //predicate: defined in backend
       distinctValueCount: 0,
       values: [],
+      flatValues: [],
       sortBy: 'prefLabel',
       sortDirection: 'asc',
       isFetching: false,
@@ -35,6 +37,7 @@ export const INITIAL_STATE = {
       // predicate: defined in backend
       distinctValueCount: 0,
       values: [],
+      flatValues: [],
       sortBy: 'prefLabel',
       sortDirection: 'asc',
       isFetching: false,
@@ -56,7 +59,8 @@ export const INITIAL_STATE = {
     source: new Set(),
     language: new Set(),
   },
-  updatedFacet: ''
+  updatedFacet: '',
+  fetching: false
 };
 
 const manuscriptsFacets = (state = INITIAL_STATE, action) => {
@@ -72,12 +76,14 @@ const manuscriptsFacets = (state = INITIAL_STATE, action) => {
     case FETCH_FACET:
       return {
         ...state,
+        fetching: true,
         facets: {
           ...state.facets,
           [ action.id ]: {
             ...state.facets[action.id],
             distinctValueCount: 0,
             values: [],
+            flatValues: [],
             sortBy: action.sortBy,
             sortDirection: action.sortDirection,
             isFetching: true
@@ -87,12 +93,14 @@ const manuscriptsFacets = (state = INITIAL_STATE, action) => {
     case UPDATE_FACET:
       return {
         ...state,
+        fetching: false,
         facets: {
           ...state.facets,
           [ action.id ]: {
             ...state.facets[action.id],
             distinctValueCount: action.distinctValueCount,
             values: action.values,
+            flatValues: action.flatValues || [],
             sortBy: action.sortBy,
             sortDirection: action.sortDirection,
             isFetching: false

src/server/sparql/Mappers.js

@@ -72,6 +72,7 @@ export const mapHierarchicalFacet = sparqlBindings => {
   treeData.forEach(node => sumUp(node));
   return {
     distinctValueCount: results.length,
+    flatValues: results,
     values: treeData
   };
 };