Sketching places perspective

src/client/components/FacetBar.js

@@ -43,8 +43,8 @@ class FacetBar extends React.Component {
     const { classes } = this.props;
     return (
       <div className={classes.root}>
-        <React.Fragment>
 
+        {this.props.source &&
           <Paper className={classes.facetContainer}>
             <FacetHeader
               label='Source'
@@ -71,7 +71,9 @@ class FacetBar extends React.Component {
               />
             </div>
           </Paper>
+        }
 
+        {this.props.author &&
           <Paper className={classes.facetContainer}>
             <FacetHeader
               label='Author'
@@ -98,7 +100,9 @@ class FacetBar extends React.Component {
               />
             </div>
           </Paper>
+        }
 
+        {this.props.productionPlace &&
           <Paper className={classes.facetContainerLast}>
             <FacetHeader
               label='Production place'
@@ -125,36 +129,36 @@ class FacetBar extends React.Component {
               />
             </div>
           </Paper>
+        }
 
-          {/*<Paper className={classes.facetContainerLast}>
-            <Paper className={classes.headingContainer}>
-              <Typography variant="h6">Language</Typography>
-              <div className={classes.facetHeaderButtons}>
-                <IconButton disabled aria-label="Statistics">
-                  <PieChart />
-                </IconButton>
-                <IconButton disabled aria-label="Expand">
-                  <ExpandLess />
-                </IconButton>
-              </div>
-            </Paper>
-            <div className={classes.facetValuesContainerTen}>
-              <HierarchicalFacet
-                key='language'
-                property='language'
-                data={this.props.language.values}
-                sortBy={this.props.language.sortBy}
-                fetchFacet={this.props.fetchFacet}
-                fetchingFacet={this.props.language.isFetching}
-                facetFilters={this.props.facetFilters}
-                updateFilter={this.props.updateFilter}
-                updatedFacet={this.props.updatedFacet}
-                searchField={true}
-              />
+        {/*<Paper className={classes.facetContainerLast}>
+          <Paper className={classes.headingContainer}>
+            <Typography variant="h6">Language</Typography>
+            <div className={classes.facetHeaderButtons}>
+              <IconButton disabled aria-label="Statistics">
+                <PieChart />
+              </IconButton>
+              <IconButton disabled aria-label="Expand">
+                <ExpandLess />
+              </IconButton>
             </div>
-          </Paper> */}
+          </Paper>
+          <div className={classes.facetValuesContainerTen}>
+            <HierarchicalFacet
+              key='language'
+              property='language'
+              data={this.props.language.values}
+              sortBy={this.props.language.sortBy}
+              fetchFacet={this.props.fetchFacet}
+              fetchingFacet={this.props.language.isFetching}
+              facetFilters={this.props.facetFilters}
+              updateFilter={this.props.updateFilter}
+              updatedFacet={this.props.updatedFacet}
+              searchField={true}
+            />
+          </div>
+        </Paper> */}
 
-        </React.Fragment>
       </div>
     );
   }
@@ -164,10 +168,10 @@ FacetBar.propTypes = {
   classes: PropTypes.object.isRequired,
   fetchFacet: PropTypes.func.isRequired,
   facetFilters: PropTypes.object.isRequired,
-  source: PropTypes.object.isRequired,
-  productionPlace: PropTypes.object.isRequired,
-  author: PropTypes.object.isRequired,
-  language: PropTypes.object.isRequired,
+  source: PropTypes.object,
+  productionPlace: PropTypes.object,
+  author: PropTypes.object,
+  language: PropTypes.object,
   updateFilter: PropTypes.func.isRequired,
   updatedFacet: PropTypes.string.isRequired,
 };

src/client/components/LeafletMap.js

@@ -183,25 +183,32 @@ class LeafletMap extends React.Component {
   updateMarkersAndCluster(results) {
     this.resultMarkerLayer.clearLayers();
     this.markers = {};
-    const clusterer = new L.MarkerClusterGroup({
-      iconCreateFunction: (cluster) => {
-        //const childCount = cluster.getChildCount();
-        let childCount = 0;
-        cluster.getAllChildMarkers().forEach(marker => {
-          childCount += parseInt(marker.options.manuscriptCount);
-        });
-        let c = ' marker-cluster-';
-        if (childCount < 10) {
-          c += 'small';
-        } else if (childCount < 100) {
-          c += 'medium';
-        } else {
-          c += 'large';
+    let clusterer = null;
+    if (this.props.variant === 'productionPlaces') {
+      clusterer = new L.MarkerClusterGroup({
+        iconCreateFunction: (cluster) => {
+          //const childCount = cluster.getChildCount();
+          let childCount = 0;
+          cluster.getAllChildMarkers().forEach(marker => {
+            childCount += parseInt(marker.options.manuscriptCount);
+          });
+          let c = ' marker-cluster-';
+          if (childCount < 10) {
+            c += 'small';
+          } else if (childCount < 100) {
+            c += 'medium';
+          } else {
+            c += 'large';
+          }
+          return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
         }
-        return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
-      }
-    });
+      });
+    } else {
+      clusterer = new L.MarkerClusterGroup();
+    }
+
     results.forEach(value => {
+      // console.log(value)
       const marker = this.createMarker(value);
       this.markers[value.id] = marker;
       marker == null ? null : clusterer.addLayer(marker);
@@ -245,8 +252,11 @@ class LeafletMap extends React.Component {
     if (has(result, 'sameAs')) {
       popUpTemplate += `<p>Place authority: <a target="_blank" rel="noopener noreferrer" href=${result.sameAs}>${result.sameAs}</a></p>`;
     }
-    popUpTemplate += `<p>Manuscripts produced here:</p>`;
-    popUpTemplate += this.createManscriptListing(result.manuscript);
+    if (this.props.variant === 'productionPlaces') {
+      popUpTemplate += `<p>Manuscripts produced here:</p>`;
+      popUpTemplate += this.createManscriptListing(result.manuscript);
+    }
+
     return popUpTemplate;
   }
 

src/client/components/Main.js

@@ -51,7 +51,8 @@ let Main = props => {
   const { classes } = props;
 
   const ManuscriptLink = props => <NavLink to="/manuscripts" {...props}/>;
-//const WorkLink = props => <NavLink to="/works" {...props}/>;
+  //const WorkLink = props => <NavLink to="/works" {...props}/>;
+  const PlacesLink = props => <NavLink to="/places" {...props}/>;
 
   return (
     <div className={classes.root}>
@@ -174,11 +175,11 @@ let Main = props => {
 
           <Grid item sm={6} md={4} lg={4}>
             <Card className={classes.card}>
-              <CardActionArea disabled>
+              <CardActionArea component={PlacesLink}>
                 <CardMedia
                   className={classes.media}
                   image={thumbImage}
-                  title="Manuscripts"
+                  title="Places"
                 />
                 <CardContent className={classes.cardContent}>
                   <Typography gutterBottom variant="h5" component="h2">

src/client/components/Places.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Route, Redirect } from 'react-router-dom';
+import ViewTabs from './ViewTabs';
+import ResultTable from './ResultTable';
+import LeafletMap from './LeafletMap';
+// import Deck from './Deck';
+
+let Places = props => {
+  return (
+    <React.Fragment>
+      <ViewTabs routeProps={props.routeProps} />
+      <Route
+        exact path='/places'
+        render={() => <Redirect to='places/map' />}
+      />
+      <Route
+        path={'/places/table'}
+        render={routeProps =>
+          <ResultTable
+            resultClass='places'
+            columns={props.search.resultTableColumns}
+            search={props.search}
+            facetFilters={props.facetFilters}
+            fetchResults={props.fetchResults}
+            updatePage={props.updatePage}
+            sortResults={props.sortResults}
+            routeProps={routeProps}
+          />
+        }
+      />
+      <Route
+        path={'/places/map'}
+        render={() =>
+          <LeafletMap
+            fetchPlaces={props.fetchPlaces}
+            fetchingPlaces={props.search.fetchingPlaces}
+            fetchPlace={props.fetchPlace}
+            results={props.search.places}
+            place={props.search.place}
+            mapMode='cluster'
+            variant='allPlaces'
+          />}
+      />
+    </React.Fragment>
+  );
+};
+
+Places.propTypes = {
+  search: PropTypes.object.isRequired,
+  facetFilters: PropTypes.object.isRequired,
+  fetchResults: PropTypes.func.isRequired,
+  fetchPlaces: PropTypes.func.isRequired,
+  fetchPlace:  PropTypes.func.isRequired,
+  updatePage: PropTypes.func.isRequired,
+  sortResults: PropTypes.func.isRequired,
+  routeProps: PropTypes.object.isRequired
+};
+
+export default Places;

src/client/components/TopBar.js

@@ -179,6 +179,15 @@ class TopBar extends React.Component {
         {...props}
       />);
 
+    const PlacesLink = props => (
+      <NavLink
+        to="/places"
+        className={classes.appBarButton}
+        isActive={(match, location) => location.pathname.startsWith('/places')}
+        activeClassName={classes.appBarButtonActive}
+        {...props}
+      />);
+
     // const MainLink = props =>
     //   <NavLink
     //     to="/"
@@ -223,7 +232,11 @@ class TopBar extends React.Component {
               <Button disabled className={classes.appBarButton}>Events</Button>
               <Button disabled className={classes.appBarButton}>People</Button>
               <Button disabled className={classes.appBarButton}>Organizations</Button>
-              <Button disabled className={classes.appBarButton}>Places</Button>
+              <Button
+                className={classes.appBarButton}
+                component={PlacesLink}>
+                places
+              </Button>
             </div>
             <div className={classes.sectionMobile}>
               <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="inherit">

src/client/containers/MapApp.js

@@ -10,6 +10,7 @@ import Footer from '../components/Footer';
 import { Route } from 'react-router-dom';
 import Manuscripts from '../components/Manuscripts';
 import Works from '../components/Works';
+import Places from '../components/Places';
 import Main from '../components/Main';
 import FacetBar from '../components/FacetBar';
 import Grid from '@material-ui/core/Grid';
@@ -78,7 +79,7 @@ let MapApp = (props) => {
   const { classes } = props;
   // browser
   // error,
-  ///console.log(props.search)
+  //console.log(props.search.place)
   return (
     <div className={classes.root}>
       <div className={classes.appFrame}>
@@ -86,6 +87,7 @@ let MapApp = (props) => {
           <TopBar />
           <Grid container spacing={8} className={classes.mainContainer}>
             <Route exact path="/" component={Main} />
+
             <Route
               path="/manuscripts"
               render={routeProps =>
@@ -119,6 +121,7 @@ let MapApp = (props) => {
                 </React.Fragment>
               }
             />
+
             <Route
               path="/works"
               render={routeProps =>
@@ -153,6 +156,37 @@ let MapApp = (props) => {
               }
             />
 
+            <Route
+              path="/places"
+              render={routeProps =>
+                <React.Fragment>
+                  <Grid item sm={12} md={3} className={classes.facetBarContainer}>
+                    <FacetBar
+                      facetFilters={props.facet.facetFilters}
+                      fetchFacet={props.fetchFacet}
+                      updateFilter={props.updateFilter}
+                      updatedFacet={props.facet.updatedFacet}
+                    />
+                  </Grid>
+                  <Grid item sm={12} md={9} className={classes.resultsContainer}>
+                    <Paper className={classes.resultsContainerPaper}>
+                      <Places
+                        search={props.search}
+                        facetFilters={props.facet.facetFilters}
+                        fetchResults={props.fetchResults}
+                        fetchPlaces={props.fetchPlaces}
+                        fetchPlace={props.fetchPlace}
+                        updatePage={props.updatePage}
+                        sortResults={props.sortResults}
+                        routeProps={routeProps}
+                      />
+                    </Paper>
+                  </Grid>
+                </React.Fragment>
+              }
+            />
+
+
           </Grid>
         </React.Fragment>
         <Footer />

src/client/index.js

@@ -5,7 +5,7 @@ import { createEpicMiddleware } from 'redux-observable';
 import {responsiveStoreEnhancer} from 'redux-responsive';
 import { Provider } from 'react-redux';
 import ReduxToastr, { actions as toastrActions } from 'react-redux-toastr';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import 'react-virtualized/styles.css';

src/server/sparql/Datasets.js

@@ -132,6 +132,29 @@ module.exports = {
       }
       GROUP BY ?id ?lat ?long ?prefLabel ?dataProviderUrl
         `,
+    'allPlacesQuery': `
+      PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+      PREFIX wgs84: <http://www.w3.org/2003/01/geo/wgs84_pos#>
+      PREFIX dct: <http://purl.org/dc/terms/>
+      PREFIX owl: <http://www.w3.org/2002/07/owl#>
+      PREFIX frbroo: <http://erlangen-crm.org/efrbroo/>
+      PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/>
+      PREFIX mmm-schema: <http://ldf.fi/mmm/schema/>
+      SELECT ?id ?prefLabel ?lat ?long ?source ?dataProviderUrl
+      #(COUNT(DISTINCT ?manuscript) as ?manuscriptCount)
+      WHERE {
+        ?id a crm:E53_Place .
+        ?id skos:prefLabel ?prefLabel .
+        ?id dct:source ?source
+        OPTIONAL { ?id mmm-schema:data_provider_url ?dataProviderUrl }
+        OPTIONAL {
+          ?id wgs84:lat ?lat ;
+              wgs84:long ?long .
+        }
+        #?manuscript ^crm:P108_has_produced/crm:P7_took_place_at ?id
+      }
+      #GROUP BY ?id ?lat ?long ?prefLabel ?dataProviderUrl
+        `,
     'migrationsQuery': `
       PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
       PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
@@ -185,12 +208,7 @@ module.exports = {
         }
         OPTIONAL { ?id mmm-schema:data_provider_url ?dataProviderUrl }
         OPTIONAL { ?id owl:sameAs ?sameAs }
-        {
-          ?manuscript__id ^frbroo:R18_created/crm:P7_took_place_at ?id .
-          ?manuscript__id mmm-schema:data_provider_url ?manuscript__dataProviderUrl .
-        }
-        UNION
-        {
+        OPTIONAL {
           ?manuscript__id ^crm:P108_has_produced/crm:P7_took_place_at ?id .
           ?manuscript__id mmm-schema:data_provider_url ?manuscript__dataProviderUrl .
         }

src/server/sparql/Manuscripts.js

@@ -100,6 +100,7 @@ export const getPlaces = variant => {
   // console.log(variant)
   const config = datasetConfig['mmm'];
   const query = config[`${variant}Query`];
+
   // console.log(query)
   return sparqlSearchEngine.doSearch(query, config.endpoint, makeObjectList);
 };
@@ -107,6 +108,7 @@ export const getPlaces = variant => {
 export const getPlace = id => {
   let { endpoint, placeQuery } = datasetConfig['mmm'];
   placeQuery = placeQuery.replace('<PLACE_ID>', `<${id}>`);
+  // console.log(placeQuery)
   return sparqlSearchEngine.doSearch(placeQuery, endpoint, makeObjectList);
 };