Add new component for showing active filters

src/client/components/facet_bar/ActiveFilters.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import ChipsArray from './ChipsArray';
+
+const ActiveFilters = props => {
+  const { uriFilters, facets } = props;
+  return (
+    <React.Fragment>
+      {Object.keys(uriFilters).map(facetID => {
+        const facetValues = [];
+        Object.entries(uriFilters[facetID]).forEach(([ key, value]) => {
+          facetValues.push({
+            facetID: facetID,
+            facetLabel: facets[facetID].label,
+            filterType: 'uriFilter',
+            value: {
+              id: key,
+              label: value.length > 18 ? `${value.substring(0, 18)}...` : value,
+            }
+          });
+        });
+        return (
+          <ChipsArray
+            key={facetID}
+            data={facetValues}
+            facetClass={props.facetClass}
+            updateFacetOption={props.updateFacetOption}
+          />
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+ActiveFilters.propTypes = {
+  facets: PropTypes.object.isRequired,
+  facetClass: PropTypes.string.isRequired,
+  uriFilters: PropTypes.object.isRequired,
+  spatialFilters: PropTypes.object.isRequired,
+  updateFacetOption: PropTypes.func.isRequired
+};
+
+export default ActiveFilters;

src/client/components/facet_bar/ChipsArray.js

@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
-//import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   root: {
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
-    //padding: theme.spacing.unit / 2,
   },
   chip: {
     margin: theme.spacing.unit / 2,
@@ -19,7 +17,12 @@ const styles = theme => ({
 class ChipsArray extends React.Component {
 
   handleDelete = data => () => {
-    console.log(data);
+    this.props.updateFacetOption({
+      facetClass: this.props.facetClass,
+      facetID: data.facetID,
+      option: data.filterType,
+      value: data.value
+    });
   };
 
   render() {
@@ -30,9 +33,9 @@ class ChipsArray extends React.Component {
           let icon = null;
           return (
             <Chip
-              key={item.key}
+              key={item.value.id}
               icon={icon}
-              label={item.label}
+              label={`${item.facetLabel.toLowerCase()}: ${item.value.label}`}
               onDelete={this.handleDelete(item)}
               className={classes.chip}
             />
@@ -45,7 +48,9 @@ class ChipsArray extends React.Component {
 
 ChipsArray.propTypes = {
   classes: PropTypes.object.isRequired,
-  data: PropTypes.array,
+  data: PropTypes.array.isRequired,
+  facetClass: PropTypes.string.isRequired,
+  updateFacetOption: PropTypes.func.isRequired
 };
 
 export default withStyles(styles)(ChipsArray);

src/client/components/facet_bar/FacetBar.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import { has } from 'lodash';
 import { withStyles } from '@material-ui/core/styles';
 import Tree from './Tree';
 import DateSlider from './slider/DateSlider';
 import Paper from '@material-ui/core/Paper';
 import FacetHeader from './FacetHeader';
 import Typography from '@material-ui/core/Typography';
-import ChipsArray from './ChipsArray';
+import ActiveFilters from './ActiveFilters';
 
 const styles = theme => ({
   root: {
@@ -50,42 +51,53 @@ const styles = theme => ({
   }
 });
 
-// <Paper className={classes.facetContainer}>
-//   <FacetHeader
-//     facet={{ label: 'Active filters'}}
-//   />
-//   <div className={classes.textContainer}>
-//
-//     <ChipsArray data={[
-//       { key: 0, label: 'property0, value' },
-//       { key: 1, label: 'property1, value' },
-//       { key: 2, label: 'property2, value' },
-//       { key: 3, label: 'property3, value' },
-//       { key: 4, label: 'property4, value' },]} />
-//   </div>
-// </Paper>
-
-
 class FacetBar extends React.Component {
 
   render() {
-    const { classes } = this.props;
+    const { classes, facetClass } = this.props;
     const { facetUpdateID, updatedFacet, facets } = this.props.facetData;
+    let uriFilters = {};
+    let spatialFilters = {};
+    let activeUriFilters = false;
+    let activeSpatialFilters = false;
+    for (const [key, value] of Object.entries(facets)) {
+      if (value.uriFilter !== null) {
+        activeUriFilters = true;
+        uriFilters[key] = value.uriFilter;
+      } else if (has(value, 'spatialFilter') && value.spatialFilter !== null) {
+        activeSpatialFilters = true;
+        spatialFilters[key] = value.spatialFilter._bounds;
+      }
+    }
+
     return (
       <div className={classes.root}>
-
         <Paper className={classes.facetContainer}>
           <div className={classes.textContainer}>
             <Typography variant="h6">{this.props.resultCount} {this.props.resultClass}</Typography>
           </div>
         </Paper>
-
+        {(activeUriFilters || activeSpatialFilters) &&
+          <Paper className={classes.facetContainer}>
+            <FacetHeader
+              facet={{ label: 'Active filters'}}
+            />
+            <div className={classes.textContainer}>
+              <ActiveFilters
+                facets={facets}
+                facetClass={facetClass}
+                uriFilters={uriFilters}
+                spatialFilters={spatialFilters}
+                updateFacetOption={this.props.updateFacetOption}
+              />
+            </div>
+          </Paper>
+        }
         <Paper className={classes.facetContainer}>
           <div className={classes.textContainer}>
             <Typography variant="h6">Narrow down by:</Typography>
           </div>
         </Paper>
-
         {Object.keys(facets).map(id => {
           return (
             <Paper key={id} className={classes.facetContainer}>
@@ -120,7 +132,6 @@ class FacetBar extends React.Component {
                     updateFacetOption={this.props.updateFacetOption}
                   />
                 }
-
               </div>
             </Paper>
           );

src/server/sparql/FacetConfigs.js

@@ -87,7 +87,7 @@ export const facetConfigs = {
       facetValueFilter: '',
       label: 'Author',
       labelPath: '^frbroo:R16_initiated/mmm-schema:carried_out_by_as_possible_author/skos:prefLabel',
-      predicate: '^frbroo:R16_initiated/mmm-schema:carried_out_by_as_possible_author',
+      predicate: '^frbroo:R16_initiated/(mmm-schema:carried_out_by_as_possible_author|mmm-schema:carried_out_by_as_author)',
       type: 'list'
     },
   },