diff --git a/src/client/components/facet_bar/ActiveFilters.js b/src/client/components/facet_bar/ActiveFilters.js
new file mode 100644
index 0000000000000000000000000000000000000000..3ba78f448085961148b10cfb6a4c1cb9ad8179d7
--- /dev/null
+++ b/src/client/components/facet_bar/ActiveFilters.js
@@ -0,0 +1,43 @@
+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;
diff --git a/src/client/components/facet_bar/ChipsArray.js b/src/client/components/facet_bar/ChipsArray.js
index af8207d23c641e15ba148b328b09bd40816ac94a..1512deb967e3764fbe87544b9e14f9dd6747a0c1 100644
--- a/src/client/components/facet_bar/ChipsArray.js
+++ b/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);
diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js
index a42cac6e62c5dc3480ed0504b9d5465e0a4674ca..65d74c80d53b2b01276de42bf43b8a3ebf11ebb4 100644
--- a/src/client/components/facet_bar/FacetBar.js
+++ b/src/client/components/facet_bar/FacetBar.js
@@ -1,12 +1,13 @@
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>
);
diff --git a/src/server/sparql/FacetConfigs.js b/src/server/sparql/FacetConfigs.js
index d6f69eba4230c1aa66abdb64653d1f454a219b39..025990493dbdf36262df2e350736d53a185841f6 100644
--- a/src/server/sparql/FacetConfigs.js
+++ b/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'
},
},