diff --git a/babel.config.js b/babel.config.js
index 5602f92779f03659bcc322239ed981d86568ad72..dd1930353de4093a36c1d4316078c8eaae3446b0 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,17 +1,17 @@
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
 
   const presets = [
     '@babel/preset-env',
     '@babel/preset-react'
-  ];
+  ]
   const plugins = [
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-transform-runtime' // for async/await in node
-  ];
+  ]
 
   return {
     presets,
     plugins
-  };
-};
+  }
+}
diff --git a/package.json b/package.json
index 14570d3a1b405a2ad26471ac2d45ff86e403481e..40e4eff246eb58110accb524fe0eab93ada38a23 100644
--- a/package.json
+++ b/package.json
@@ -82,5 +82,8 @@
     "rxjs-compat": "^6.3.3",
     "sass-loader": "^8.0.0",
     "victory": "^0.26.1"
+  },
+  "standard": { 
+    "parser": "babel-eslint"
   }
 }
diff --git a/src/client/actions/index.js b/src/client/actions/index.js
index a47fe1c479bb5350872c307b863cc6632ddf9811..0b2179fd28f65862d082351ef112d689719f5081 100644
--- a/src/client/actions/index.js
+++ b/src/client/actions/index.js
@@ -1,121 +1,161 @@
-export const FETCH_PAGINATED_RESULTS = 'FETCH_PAGINATED_RESULTS';
-export const FETCH_PAGINATED_RESULTS_FAILED = 'FETCH_PAGINATED_RESULTS_FAILED';
-export const FETCH_RESULTS = 'FETCH_RESULTS';
-export const FETCH_RESULTS_FAILED = 'FETCH_RESULTS_FAILED';
-export const FETCH_RESULT_COUNT = 'FETCH_RESULT_COUNT';
-export const FETCH_RESULT_COUNT_FAILED = 'FETCH_RESULT_COUNT_FAILED';
-export const FETCH_RESULTS_CLIENT_SIDE = 'FETCH_RESULTS_CLIENT_SIDE';
-export const UPDATE_RESULT_COUNT = 'UPDATE_RESULT_COUNT';
-export const UPDATE_PAGINATED_RESULTS = 'UPDATE_PAGINATED_RESULTS';
-export const UPDATE_RESULTS = 'UPDATE_RESULTS';
-export const CLEAR_RESULTS = 'CLEAR_RESULTS';
-export const SORT_RESULTS = 'SORT_RESULTS';
-export const UPDATE_PAGE = 'UPDATE_PAGE';
-export const UPDATE_ROWS_PER_PAGE = 'UPDATE_ROWS_PER_PAGE';
-export const FETCH_BY_URI = 'FETCH_BY_URI';
-export const FETCH_BY_URI_FAILED = 'FETCH_BY_URI_FAILED';
-export const UPDATE_INSTANCE = 'UPDATE_INSTANCE';
-export const FETCH_FACET = 'FETCH_FACET';
-export const FETCH_FACET_CONSTRAIN_SELF = 'FETCH_FACET_CONSTRAIN_SELF';
-export const FETCH_FACET_FAILED = 'FETCH_FACET_FAILED';
-export const FETCH_FACET_CONSTRAIN_SELF_FAILED = 'FETCH_FACET_CONSTRAIN_SELF_FAILED';
-export const UPDATE_FACET_VALUES = 'UPDATE_FACET_VALUES';
-export const UPDATE_FACET_VALUES_CONSTRAIN_SELF = 'UPDATE_FACET_VALUES_CONSTRAIN_SELF';
-export const UPDATE_FACET_OPTION = 'UPDATE_FACET_OPTION';
-export const UPDATE_CLIENT_SIDE_FILTER = 'UPDATE_CLIENT_SIDE_FILTER';
-export const OPEN_MARKER_POPUP = 'OPEN_MARKER_POPUP';
-export const SHOW_ERROR = 'SHOW_ERROR';
-export const UPDATE_PERSPECTIVE_HEADER_EXPANDED = 'UPDATE_PERSPECTIVE_HEADER_EXPANDED';
-export const UPDATE_URL = 'UPDATE_URL';
-export const LOAD_LOCALES = 'LOAD_LOCALES';
-export const LOAD_LOCALES_FAILED = 'LOAD_LOCALES_FAILED';
-export const UPDATE_LOCALE = 'UPDATE_LOCALE';
-export const ANIMATE_MAP = 'ANIMATE_MAP';
+export const FETCH_PAGINATED_RESULTS = 'FETCH_PAGINATED_RESULTS'
+export const FETCH_PAGINATED_RESULTS_FAILED = 'FETCH_PAGINATED_RESULTS_FAILED'
+export const FETCH_RESULTS = 'FETCH_RESULTS'
+export const FETCH_RESULTS_FAILED = 'FETCH_RESULTS_FAILED'
+export const FETCH_RESULT_COUNT = 'FETCH_RESULT_COUNT'
+export const FETCH_RESULT_COUNT_FAILED = 'FETCH_RESULT_COUNT_FAILED'
+export const FETCH_RESULTS_CLIENT_SIDE = 'FETCH_RESULTS_CLIENT_SIDE'
+export const UPDATE_RESULT_COUNT = 'UPDATE_RESULT_COUNT'
+export const UPDATE_PAGINATED_RESULTS = 'UPDATE_PAGINATED_RESULTS'
+export const UPDATE_RESULTS = 'UPDATE_RESULTS'
+export const CLEAR_RESULTS = 'CLEAR_RESULTS'
+export const SORT_RESULTS = 'SORT_RESULTS'
+export const UPDATE_PAGE = 'UPDATE_PAGE'
+export const UPDATE_ROWS_PER_PAGE = 'UPDATE_ROWS_PER_PAGE'
+export const FETCH_BY_URI = 'FETCH_BY_URI'
+export const FETCH_BY_URI_FAILED = 'FETCH_BY_URI_FAILED'
+export const UPDATE_INSTANCE = 'UPDATE_INSTANCE'
+export const FETCH_FACET = 'FETCH_FACET'
+export const FETCH_FACET_CONSTRAIN_SELF = 'FETCH_FACET_CONSTRAIN_SELF'
+export const FETCH_FACET_FAILED = 'FETCH_FACET_FAILED'
+export const FETCH_FACET_CONSTRAIN_SELF_FAILED = 'FETCH_FACET_CONSTRAIN_SELF_FAILED'
+export const UPDATE_FACET_VALUES = 'UPDATE_FACET_VALUES'
+export const UPDATE_FACET_VALUES_CONSTRAIN_SELF = 'UPDATE_FACET_VALUES_CONSTRAIN_SELF'
+export const UPDATE_FACET_OPTION = 'UPDATE_FACET_OPTION'
+export const UPDATE_CLIENT_SIDE_FILTER = 'UPDATE_CLIENT_SIDE_FILTER'
+export const OPEN_MARKER_POPUP = 'OPEN_MARKER_POPUP'
+export const SHOW_ERROR = 'SHOW_ERROR'
+export const UPDATE_PERSPECTIVE_HEADER_EXPANDED = 'UPDATE_PERSPECTIVE_HEADER_EXPANDED'
+export const UPDATE_URL = 'UPDATE_URL'
+export const LOAD_LOCALES = 'LOAD_LOCALES'
+export const LOAD_LOCALES_FAILED = 'LOAD_LOCALES_FAILED'
+export const UPDATE_LOCALE = 'UPDATE_LOCALE'
+export const ANIMATE_MAP = 'ANIMATE_MAP'
 
 export const fetchPaginatedResults = (resultClass, facetClass, sortBy) => ({
   type: FETCH_PAGINATED_RESULTS,
-  resultClass, facetClass, sortBy
-});
+  resultClass,
+  facetClass,
+  sortBy
+})
 export const fetchPaginatedResultsFailed = (resultClass, error, message) => ({
   type: FETCH_PAGINATED_RESULTS_FAILED,
-  resultClass, error, message
-});
+  resultClass,
+  error,
+  message
+})
 export const fetchResults = ({ resultClass, facetClass, sortBy }) => ({
   type: FETCH_RESULTS,
-  resultClass, facetClass, sortBy
-});
+  resultClass,
+  facetClass,
+  sortBy
+})
 export const fetchResultCount = ({ resultClass, facetClass }) => ({
   type: FETCH_RESULT_COUNT,
-  resultClass, facetClass
-});
+  resultClass,
+  facetClass
+})
 export const fetchResultCountFailed = (resultClass, error, message) => ({
   type: FETCH_RESULT_COUNT_FAILED,
-  resultClass, error, message
-});
+  resultClass,
+  error,
+  message
+})
 export const fetchResultsClientSide = ({ resultClass, jenaIndex, query }) => ({
   type: FETCH_RESULTS_CLIENT_SIDE,
-  resultClass, jenaIndex, query
-});
+  resultClass,
+  jenaIndex,
+  query
+})
 export const fetchResultsFailed = (resultClass, error, message) => ({
   type: FETCH_RESULTS_FAILED,
-  resultClass, error, message
-});
+  resultClass,
+  error,
+  message
+})
 export const updateResultCount = ({ resultClass, data, sparqlQuery }) => ({
   type: UPDATE_RESULT_COUNT,
-  resultClass, data, sparqlQuery
-});
+  resultClass,
+  data,
+  sparqlQuery
+})
 export const updatePaginatedResults = ({ resultClass, page, pagesize, data, sparqlQuery }) => ({
   type: UPDATE_PAGINATED_RESULTS,
-  resultClass, page, pagesize, data, sparqlQuery
-});
+  resultClass,
+  page,
+  pagesize,
+  data,
+  sparqlQuery
+})
 export const updateResults = ({ resultClass, data, sparqlQuery, query, jenaIndex }) => ({
   type: UPDATE_RESULTS,
-  resultClass, data, sparqlQuery, query, jenaIndex
-});
+  resultClass,
+  data,
+  sparqlQuery,
+  query,
+  jenaIndex
+})
 export const sortResults = (resultClass, sortBy) => ({
   type: SORT_RESULTS,
-  resultClass, sortBy
-});
+  resultClass,
+  sortBy
+})
 export const clearResults = resultClass => ({
   type: CLEAR_RESULTS,
   resultClass
-});
+})
 export const updatePage = (resultClass, page) => ({
   type: UPDATE_PAGE,
-  resultClass, page
-});
+  resultClass,
+  page
+})
 export const updateRowsPerPage = (resultClass, rowsPerPage) => ({
   type: UPDATE_ROWS_PER_PAGE,
-  resultClass, rowsPerPage
-});
+  resultClass,
+  rowsPerPage
+})
 export const fetchByURI = ({ resultClass, facetClass, uri }) => ({
   type: FETCH_BY_URI,
-  resultClass, facetClass, uri
-});
+  resultClass,
+  facetClass,
+  uri
+})
 export const fetchByURIFailed = (resultClass, error, message) => ({
   type: FETCH_RESULTS_FAILED,
-  resultClass, error, message
-});
+  resultClass,
+  error,
+  message
+})
 export const updateInstance = ({ resultClass, data, sparqlQuery }) => ({
   type: UPDATE_INSTANCE,
-  resultClass, data, sparqlQuery
-});
+  resultClass,
+  data,
+  sparqlQuery
+})
 export const fetchFacet = ({ facetClass, facetID }) => ({
   type: FETCH_FACET,
-  facetClass, facetID
-});
+  facetClass,
+  facetID
+})
 export const fetchFacetFailed = (facetClass, id, error, message) => ({
   type: FETCH_FACET_FAILED,
-  facetClass, id, error, message
-});
+  facetClass,
+  id,
+  error,
+  message
+})
 export const fetchFacetConstrainSelfFailed = (facetClass, id, error, message) => ({
   type: FETCH_FACET_CONSTRAIN_SELF_FAILED,
-  facetClass, id, error, message
-});
+  facetClass,
+  id,
+  error,
+  message
+})
 export const fetchFacetConstrainSelf = ({ facetClass, facetID }) => ({
   type: FETCH_FACET_CONSTRAIN_SELF,
-  facetClass, facetID
-});
+  facetClass,
+  facetID
+})
 export const updateFacetValues = ({
   facetClass,
   id,
@@ -124,8 +164,12 @@ export const updateFacetValues = ({
   sparqlQuery
 }) => ({
   type: UPDATE_FACET_VALUES,
-  facetClass, id, data, flatData, sparqlQuery
-});
+  facetClass,
+  id,
+  data,
+  flatData,
+  sparqlQuery
+})
 export const updateFacetValuesConstrainSelf = ({
   facetClass,
   id,
@@ -134,44 +178,54 @@ export const updateFacetValuesConstrainSelf = ({
   sparqlQuery
 }) => ({
   type: UPDATE_FACET_VALUES_CONSTRAIN_SELF,
-  facetClass, id, data, flatData, sparqlQuery
-});
+  facetClass,
+  id,
+  data,
+  flatData,
+  sparqlQuery
+})
 export const updateFacetOption = ({ facetClass, facetID, option, value }) => ({
   type: UPDATE_FACET_OPTION,
-  facetClass, facetID, option, value
-});
+  facetClass,
+  facetID,
+  option,
+  value
+})
 export const updateClientSideFilter = filterObj => ({
   type: UPDATE_CLIENT_SIDE_FILTER,
   filterObj
-});
+})
 export const openMarkerPopup = uri => ({
   type: OPEN_MARKER_POPUP,
   uri
-});
+})
 export const showError = message => ({
   type: SHOW_ERROR,
   message
-});
+})
 export const updatePerspectiveHeaderExpanded = ({ resultClass, pageType }) => ({
   type: UPDATE_PERSPECTIVE_HEADER_EXPANDED,
-  resultClass, pageType
-});
+  resultClass,
+  pageType
+})
 export const loadLocales = currentLanguage => ({
   type: LOAD_LOCALES,
   currentLanguage
-});
+})
 export const loadLocalesFailed = (currentLanguage, error, message) => ({
   type: LOAD_LOCALES_FAILED,
-  currentLanguage, error, message
-});
+  currentLanguage,
+  error,
+  message
+})
 export const updateLocale = ({ language }) => ({
   type: UPDATE_LOCALE,
   language
-});
+})
 export const animateMap = value => ({
   type: ANIMATE_MAP,
   value
-});
+})
 // export const updateURL = ({ resultClass = 'manuscripts', newURL }) => ({
 //   type: UPDATE_URL,
 //   resultClass, newURL
diff --git a/src/client/components/facet_bar/ActiveFilters.js b/src/client/components/facet_bar/ActiveFilters.js
index 4922edde44644da50eb3c1f78deedd6207207969..1b28e0dc4f050f54d0f53cbdba98f87090da17ac 100644
--- a/src/client/components/facet_bar/ActiveFilters.js
+++ b/src/client/components/facet_bar/ActiveFilters.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import ChipsArray from './ChipsArray';
+import React from 'react'
+import PropTypes from 'prop-types'
+import intl from 'react-intl-universal'
+import ChipsArray from './ChipsArray'
 
 const ActiveFilters = props => {
-  const { uriFilters, textFilters, timespanFilters, integerFilters, facetClass, someFacetIsFetching } = props;
-  const facetValues = [];
+  const { uriFilters, textFilters, timespanFilters, integerFilters, facetClass, someFacetIsFetching } = props
+  const facetValues = []
   Object.keys(uriFilters).map(activeFacetID => {
     // URI filter may have multiple values
     Object.values(uriFilters[activeFacetID]).forEach(value => {
@@ -14,33 +14,33 @@ const ActiveFilters = props => {
         facetLabel: intl.get(`perspectives.${facetClass}.properties.${activeFacetID}.label`),
         filterType: 'uriFilter',
         value: value // a react sortable tree object
-      });
-    });
-  });
+      })
+    })
+  })
   Object.keys(textFilters).map(facetID => {
     facetValues.push({
       facetID: facetID,
       facetLabel: intl.get(`perspectives.${facetClass}.properties.${facetID}.label`),
       filterType: 'textFilter',
       value: textFilters[facetID]
-    });
-  });
+    })
+  })
   Object.keys(timespanFilters).map(facetID => {
     facetValues.push({
       facetID: facetID,
       facetLabel: intl.get(`perspectives.${facetClass}.properties.${facetID}.label`),
       filterType: 'timespanFilter',
       value: timespanFilters[facetID]
-    });
-  });
+    })
+  })
   Object.keys(integerFilters).map(facetID => {
     facetValues.push({
       facetID: facetID,
       facetLabel: intl.get(`perspectives.${facetClass}.properties.${facetID}.label`),
       filterType: 'integerFilter',
       value: integerFilters[facetID]
-    });
-  });
+    })
+  })
   return (
     <ChipsArray
       data={facetValues}
@@ -49,8 +49,8 @@ const ActiveFilters = props => {
       someFacetIsFetching={someFacetIsFetching}
       fetchFacet={props.fetchFacet}
     />
-  );
-};
+  )
+}
 
 ActiveFilters.propTypes = {
   facetClass: PropTypes.string.isRequired,
@@ -62,6 +62,6 @@ ActiveFilters.propTypes = {
   updateFacetOption: PropTypes.func.isRequired,
   someFacetIsFetching: PropTypes.bool.isRequired,
   fetchFacet: PropTypes.func.isRequired
-};
+}
 
-export default ActiveFilters;
+export default ActiveFilters
diff --git a/src/client/components/facet_bar/ChartDialog.js b/src/client/components/facet_bar/ChartDialog.js
index 800174e5ab9da0dde138cbe32f2d0fd4dbd3c752..6513c36dc63d6f09203c45ac24ef9376619a8b6a 100644
--- a/src/client/components/facet_bar/ChartDialog.js
+++ b/src/client/components/facet_bar/ChartDialog.js
@@ -1,30 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from '@material-ui/core/IconButton';
-import PieChartIcon from '@material-ui/icons/PieChart';
-import Tooltip from '@material-ui/core/Tooltip';
-import GeneralDialog from '../main_layout/GeneralDialog';
-import ApexChart from '../facet_results/ApexChart';
+import React from 'react'
+import PropTypes from 'prop-types'
+import IconButton from '@material-ui/core/IconButton'
+import PieChartIcon from '@material-ui/icons/PieChart'
+import Tooltip from '@material-ui/core/Tooltip'
+import GeneralDialog from '../main_layout/GeneralDialog'
+import ApexChart from '../facet_results/ApexChart'
 
 const ChartDialog = props => {
-  const [open, setOpen] = React.useState(false);
-  const { fetchFacetConstrainSelf, facetID, facetClass, data, fetching  } = props;
+  const [open, setOpen] = React.useState(false)
+  const { fetchFacetConstrainSelf, facetID, facetClass, data, fetching } = props
 
   const handleClickOpen = () => {
-    setOpen(true);
-  };
+    setOpen(true)
+  }
 
   const handleClose = () => {
-    setOpen(false);
-  };
+    setOpen(false)
+  }
 
-  return(
-    <React.Fragment>
-      <Tooltip disableFocusListener={true} title="Chart">
+  return (
+    <>
+      <Tooltip disableFocusListener title='Chart'>
         <IconButton
-          aria-label="Chart"
+          aria-label='Chart'
           aria-owns={open ? 'facet-option-menu' : undefined}
-          aria-haspopup="true"
+          aria-haspopup='true'
           onClick={handleClickOpen}
         >
           <PieChartIcon />
@@ -45,8 +45,8 @@ const ChartDialog = props => {
               type: 'pie',
               width: '100%',
               height: '100%',
-              //parentHeightOffset: 0,
-              fontFamily: 'Roboto',
+              // parentHeightOffset: 0,
+              fontFamily: 'Roboto'
             },
             legend: {
               position: 'right',
@@ -63,14 +63,14 @@ const ChartDialog = props => {
               },
               markers: {
                 width: 18,
-                height: 18,
+                height: 18
               },
               formatter: (seriesName, opts) => {
-                return `${seriesName} [${opts.w.globals.series[opts.seriesIndex]}]`;
+                return `${seriesName} [${opts.w.globals.series[opts.seriesIndex]}]`
               }
             },
             tooltip: {
-              //enabled: false,
+              // enabled: false,
               followCursor: false,
               fixed: {
                 enabled: true,
@@ -80,9 +80,9 @@ const ChartDialog = props => {
           }}
         />
       </GeneralDialog>
-    </React.Fragment>
-  );
-};
+    </>
+  )
+}
 
 ChartDialog.propTypes = {
   facetID: PropTypes.string,
@@ -90,6 +90,6 @@ ChartDialog.propTypes = {
   data: PropTypes.array,
   fetching: PropTypes.bool.isRequired,
   fetchFacetConstrainSelf: PropTypes.func
-};
+}
 
-export default ChartDialog;
+export default ChartDialog
diff --git a/src/client/components/facet_bar/ChipsArray.js b/src/client/components/facet_bar/ChipsArray.js
index 9b331ebbb08cf987bd091e2352aa56edfca418f0..dce2849a9e371bcd67320433591303edd183792e 100644
--- a/src/client/components/facet_bar/ChipsArray.js
+++ b/src/client/components/facet_bar/ChipsArray.js
@@ -1,42 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import Tooltip from '@material-ui/core/Tooltip';
-import { ISOStringToYear } from './FacetHelpers';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Chip from '@material-ui/core/Chip'
+import Tooltip from '@material-ui/core/Tooltip'
+import { ISOStringToYear } from './FacetHelpers'
 
 const styles = theme => ({
   root: {
     display: 'flex',
     justifyContent: 'center',
-    flexWrap: 'wrap',
+    flexWrap: 'wrap'
   },
   chip: {
-    margin: theme.spacing(0.5),
-  },
-});
-
-class ChipsArray extends React.Component {
+    margin: theme.spacing(0.5)
+  }
+})
 
-  handleDelete = item => () => {
+const ChipsArray = props => {
+  const handleDelete = item => () => {
     if (!this.props.someFacetIsFetching) {
-      switch(item.filterType) {
+      switch (item.filterType) {
         case 'uriFilter':
           this.props.updateFacetOption({
             facetClass: this.props.facetClass,
             facetID: item.facetID,
             option: item.filterType,
             value: item.value
-          });
-          break;
+          })
+          break
         case 'textFilter':
           this.props.updateFacetOption({
             facetClass: this.props.facetClass,
             facetID: item.facetID,
             option: item.filterType,
             value: null
-          });
-          break;
+          })
+          break
         case 'timespanFilter':
         case 'integerFilter':
           this.props.updateFacetOption({
@@ -44,69 +43,67 @@ class ChipsArray extends React.Component {
             facetID: item.facetID,
             option: item.filterType,
             value: null
-          });
+          })
           this.props.fetchFacet({
             facetClass: this.props.facetClass,
-            facetID: item.facetID,
-          });
+            facetID: item.facetID
+          })
       }
     }
-  };
+  }
 
-  generateLabel = (facetLabel, valueLabel, filterType) => {
-    return filterType !== 'timespanFilter'
-        && filterType !== 'integerFilter'
-        && valueLabel.length > 18
+  const generateLabel = (facetLabel, valueLabel, filterType) => {
+    return filterType !== 'timespanFilter' &&
+      filterType !== 'integerFilter' &&
+      valueLabel.length > 18
       ? `${facetLabel}: ${valueLabel.substring(0, 18)}...`
-      : `${facetLabel}: ${valueLabel}`;
+      : `${facetLabel}: ${valueLabel}`
   }
 
-  render() {
-    const { classes, data } = this.props;
-    return (
-      <div className={classes.root}>
-        {data !== null && data.map(item => {
-          let icon = null;
-          let key = null;
-          let valueLabel = null;
-          if (item.filterType === 'uriFilter') {
-            key = item.value.node.id;
-            valueLabel = item.value.node.prefLabel;
-          }
-          if (item.filterType === 'textFilter') {
-            key = item.value;
-            valueLabel = item.value;
-          }
-          if (item.filterType === 'timespanFilter') {
-            key = item.facetID;
-            valueLabel = `${ISOStringToYear(item.value.start)} to
-              ${ISOStringToYear(item.value.end)}`;
-          }
-          if (item.filterType === 'integerFilter') {
-            let { start, end } = item.value;
-            key = item.facetID;
-            //valueLabel = `${item.value.start} to ${item.value.end}`;
-            valueLabel = `
-               ${start !== '' ? start : '-'}
-               to ${end !== '' ? end : '-'}`;
-          }
-          return (
-            <Tooltip key={key} title={`${item.facetLabel}: ${valueLabel}`}>
-              <Chip
-                key={key}
-                icon={icon}
-                label={this.generateLabel(item.facetLabel, valueLabel, item.filterType)}
-                className={classes.chip}
-                onDelete={this.handleDelete(item)}
-                color="primary"
-              />
-            </Tooltip>
+  const { classes, data } = props
 
-          );
-        })}
-      </div>
-    );
-  }
+  return (
+    <div className={classes.root}>
+      {data !== null && data.map(item => {
+        const icon = null
+        let key = null
+        let valueLabel = null
+        if (item.filterType === 'uriFilter') {
+          key = item.value.node.id
+          valueLabel = item.value.node.prefLabel
+        }
+        if (item.filterType === 'textFilter') {
+          key = item.value
+          valueLabel = item.value
+        }
+        if (item.filterType === 'timespanFilter') {
+          key = item.facetID
+          valueLabel = `${ISOStringToYear(item.value.start)} to
+            ${ISOStringToYear(item.value.end)}`
+        }
+        if (item.filterType === 'integerFilter') {
+          const { start, end } = item.value
+          key = item.facetID
+          // valueLabel = `${item.value.start} to ${item.value.end}`;
+          valueLabel = `
+              ${start !== '' ? start : '-'}
+              to ${end !== '' ? end : '-'}`
+        }
+        return (
+          <Tooltip key={key} title={`${item.facetLabel}: ${valueLabel}`}>
+            <Chip
+              key={key}
+              icon={icon}
+              label={generateLabel(item.facetLabel, valueLabel, item.filterType)}
+              className={classes.chip}
+              onDelete={handleDelete(item)}
+              color='primary'
+            />
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
 }
 
 ChipsArray.propTypes = {
@@ -116,6 +113,6 @@ ChipsArray.propTypes = {
   updateFacetOption: PropTypes.func.isRequired,
   someFacetIsFetching: PropTypes.bool.isRequired,
   fetchFacet: PropTypes.func.isRequired
-};
+}
 
-export default withStyles(styles)(ChipsArray);
+export default withStyles(styles)(ChipsArray)
diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js
index 336e60539f53625a6984d25256b4e33207c56d91..c0fc94e16a59c562e74b45abfd54f16c767b4812 100644
--- a/src/client/components/facet_bar/FacetBar.js
+++ b/src/client/components/facet_bar/FacetBar.js
@@ -1,19 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { withStyles } from '@material-ui/core/styles';
-import HierarchicalFacet from './HierarchicalFacet';
-import TextFacet from './TextFacet';
-import SliderFacet from './SliderFacet';
-import RangeFacet from './RangeFacet';
-import Paper from '@material-ui/core/Paper';
-import FacetHeader from './FacetHeader';
-import FacetInfo from './FacetInfo';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import clsx from 'clsx';
+import React from 'react'
+import PropTypes from 'prop-types'
+import intl from 'react-intl-universal'
+import { withStyles } from '@material-ui/core/styles'
+import HierarchicalFacet from './HierarchicalFacet'
+import TextFacet from './TextFacet'
+import SliderFacet from './SliderFacet'
+import RangeFacet from './RangeFacet'
+import Paper from '@material-ui/core/Paper'
+import FacetHeader from './FacetHeader'
+import FacetInfo from './FacetInfo'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import clsx from 'clsx'
 
 const styles = theme => ({
   root: {
@@ -38,52 +38,51 @@ const styles = theme => ({
     flexDirection: 'column'
   },
   three: {
-    height: 108,
+    height: 108
   },
   four: {
-    height: 135,
+    height: 135
   },
   five: {
-    height: 150,
+    height: 150
   },
   six: {
-    height: 180,
+    height: 180
   },
   ten: {
-    height: 357,
-  },
-});
+    height: 357
+  }
+})
 
 class FacetBar extends React.Component {
-
-  constructor(props) {
-    super(props);
+  constructor (props) {
+    super(props)
     this.state = {
-      activeFacets: this.props.defaultActiveFacets,
-    };
+      activeFacets: this.props.defaultActiveFacets
+    }
   }
 
   handleExpandButtonOnClick = facetID => () => {
-    let activeFacets = this.state.activeFacets;
+    const activeFacets = this.state.activeFacets
     if (activeFacets.has(facetID)) {
-      activeFacets.delete(facetID);
+      activeFacets.delete(facetID)
     } else {
-      activeFacets.add(facetID);
+      activeFacets.add(facetID)
     }
-    this.setState({ activeFacets });
+    this.setState({ activeFacets })
   }
 
   renderFacet = (facetID, someFacetIsFetching) => {
-    const { classes, facetClass } = this.props;
-    const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData;
-    const label = intl.get(`perspectives.${facetClass}.properties.${facetID}.label`);
-    const description = intl.get(`perspectives.${facetClass}.properties.${facetID}.description`);
-    const facet = facets[facetID];
+    const { classes, facetClass } = this.props
+    const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData
+    const label = intl.get(`perspectives.${facetClass}.properties.${facetID}.label`)
+    const description = intl.get(`perspectives.${facetClass}.properties.${facetID}.description`)
+    const facet = facets[facetID]
     const facetConstrainSelf = this.props.facetDataConstrainSelf !== null
       ? this.props.facetDataConstrainSelf.facets[facetID]
-      : null;
-    let facetComponent = null;
-    let isActive = this.state.activeFacets.has(facetID);
+      : null
+    let facetComponent = null
+    const isActive = this.state.activeFacets.has(facetID)
     switch (facet.filterType) {
       case 'uriFilter':
       case 'spatialFilter':
@@ -100,8 +99,8 @@ class FacetBar extends React.Component {
             someFacetIsFetching={someFacetIsFetching}
             updateFacetOption={this.props.updateFacetOption}
           />
-        );
-        break;
+        )
+        break
       case 'textFilter':
         facetComponent = (
           <TextFacet
@@ -114,8 +113,8 @@ class FacetBar extends React.Component {
             someFacetIsFetching={someFacetIsFetching}
             updateFacetOption={this.props.updateFacetOption}
           />
-        );
-        break;
+        )
+        break
       case 'timespanFilter':
         facetComponent = (
           <SliderFacet
@@ -129,8 +128,8 @@ class FacetBar extends React.Component {
             updateFacetOption={this.props.updateFacetOption}
             dataType='ISOString'
           />
-        );
-        break;
+        )
+        break
       case 'integerFilter':
         facetComponent = (
           <SliderFacet
@@ -144,8 +143,8 @@ class FacetBar extends React.Component {
             updateFacetOption={this.props.updateFacetOption}
             dataType='integer'
           />
-        );
-        break;
+        )
+        break
       case 'integerFilterRange':
         facetComponent = (
           <RangeFacet
@@ -159,8 +158,8 @@ class FacetBar extends React.Component {
             updateFacetOption={this.props.updateFacetOption}
             dataType='integer'
           />
-        );
-        break;
+        )
+        break
       default:
         facetComponent = (
           <HierarchicalFacet
@@ -174,12 +173,11 @@ class FacetBar extends React.Component {
             fetchFacet={this.props.fetchFacet}
             updateFacetOption={this.props.updateFacetOption}
           />
-        );
-        break;
+        )
+        break
     }
 
-
-    return(
+    return (
       <ExpansionPanel
         key={facetID}
         expanded={isActive}
@@ -191,8 +189,8 @@ class FacetBar extends React.Component {
           }}
           expandIcon={<ExpandMoreIcon />}
           IconButtonProps={{ onClick: this.handleExpandButtonOnClick(facetID) }}
-          aria-controls="panel1a-content"
-          id="panel1a-header"
+          aria-controls='panel1a-content'
+          id='panel1a-header'
         >
           <FacetHeader
             facetID={facetID}
@@ -209,22 +207,23 @@ class FacetBar extends React.Component {
           />
         </ExpansionPanelSummary>
         <ExpansionPanelDetails
-          className={clsx(classes[facet.containerClass], classes.expansionPanelDetails)}>
+          className={clsx(classes[facet.containerClass], classes.expansionPanelDetails)}
+        >
           {isActive && facetComponent}
         </ExpansionPanelDetails>
       </ExpansionPanel>
-    );
+    )
   }
 
-  render() {
-    const { classes, facetClass, resultClass, resultCount } = this.props;
-    const { facets } = this.props.facetData;
-    let someFacetIsFetching = false;
+  render () {
+    const { classes, facetClass, resultClass, resultCount } = this.props
+    const { facets } = this.props.facetData
+    let someFacetIsFetching = false
     Object.values(facets).forEach(facet => {
       if (facet.isFetching) {
-        someFacetIsFetching = true;
+        someFacetIsFetching = true
       }
-    });
+    })
 
     return (
       <div className={classes.root}>
@@ -244,7 +243,7 @@ class FacetBar extends React.Component {
         </Paper>
         {Object.keys(facets).map(facetID => this.renderFacet(facetID, someFacetIsFetching))}
       </div>
-    );
+    )
   }
 }
 
@@ -260,7 +259,7 @@ FacetBar.propTypes = {
   fetchFacetConstrainSelf: PropTypes.func.isRequired,
   fetchResultCount: PropTypes.func.isRequired,
   updateFacetOption: PropTypes.func.isRequired,
-  defaultActiveFacets: PropTypes.instanceOf(Set).isRequired,
-};
+  defaultActiveFacets: PropTypes.instanceOf(Set).isRequired
+}
 
-export default withStyles(styles)(FacetBar);
+export default withStyles(styles)(FacetBar)
diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js
index c950a6367ae0521939aa41d56185ab3d9b29a442..5368b84f1cbd052210b74e115b409f6d72874eae 100644
--- a/src/client/components/facet_bar/FacetHeader.js
+++ b/src/client/components/facet_bar/FacetHeader.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Typography from '@material-ui/core/Typography';
-import InfoIcon from '@material-ui/icons/InfoOutlined';
-import history from '../../History';
-import ChartDialog from './ChartDialog';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import IconButton from '@material-ui/core/IconButton'
+import Tooltip from '@material-ui/core/Tooltip'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import Typography from '@material-ui/core/Typography'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import history from '../../History'
+import ChartDialog from './ChartDialog'
 
 const styles = theme => ({
   root: {
@@ -19,40 +19,40 @@ const styles = theme => ({
   headingContainer: {
     display: 'flex',
     alignItems: 'center',
-    //justifyContent: 'space-between',
+    // justifyContent: 'space-between',
     width: '100%'
   },
   facetValuesContainerTen: {
     height: 345,
-    padding: theme.spacing(1),
+    padding: theme.spacing(1)
   },
   facetValuesContainerThree: {
     height: 108,
-    padding: theme.spacing(1),
+    padding: theme.spacing(1)
   },
   facetHeaderButtons: {
     marginLeft: 'auto'
   }
-});
+})
 
 class FacetHeader extends React.Component {
   state = {
-    anchorEl: null,
+    anchorEl: null
   };
 
   handleMenuButtonClick = event => {
-    this.setState({ anchorEl: event.currentTarget });
+    this.setState({ anchorEl: event.currentTarget })
   };
 
-  handleSortOnClick = buttonID => () =>  {
-    this.setState({ anchorEl: null });
+  handleSortOnClick = buttonID => () => {
+    this.setState({ anchorEl: null })
     if (buttonID === 'prefLabel' && this.props.facet.sortBy === 'instanceCount') {
       this.props.updateFacetOption({
         facetClass: this.props.facetClass,
         facetID: this.props.facetID,
         option: 'sortBy',
         value: 'prefLabel'
-      });
+      })
     }
     if (buttonID === 'instanceCount' && this.props.facet.sortBy === 'prefLabel') {
       this.props.updateFacetOption({
@@ -60,19 +60,19 @@ class FacetHeader extends React.Component {
         facetID: this.props.facetID,
         option: 'sortDirection',
         value: 'desc'
-      });
+      })
       this.props.updateFacetOption({
         facetClass: this.props.facetClass,
         facetID: this.props.facetID,
         option: 'sortBy',
         value: 'instanceCount'
-      });
+      })
     }
   };
 
   handleFilterTypeOnClick = buttonID => () => {
-    //console.log(event.target)
-    this.setState({ anchorEl: null });
+    // console.log(event.target)
+    this.setState({ anchorEl: null })
 
     if (buttonID === 'uriFilter' && this.props.facet.filterType === 'spatialFilter') {
       this.props.updateFacetOption({
@@ -80,13 +80,13 @@ class FacetHeader extends React.Component {
         facetID: this.props.facetID,
         option: 'spatialFilter',
         value: null
-      });
+      })
       this.props.updateFacetOption({
         facetClass: this.props.facetClass,
         facetID: this.props.facetID,
         option: 'filterType',
         value: 'uriFilter'
-      });
+      })
     }
     if (buttonID === 'spatialFilter' && this.props.facet.filterType === 'uriFilter') {
       this.props.updateFacetOption({
@@ -94,50 +94,50 @@ class FacetHeader extends React.Component {
         facetID: this.props.facetID,
         option: 'filterType',
         value: 'spatialFilter'
-      });
-      history.push({ pathname: `/${this.props.resultClass}/faceted-search/${this.props.facet.spatialFilterTab}` });
+      })
+      history.push({ pathname: `/${this.props.resultClass}/faceted-search/${this.props.facet.spatialFilterTab}` })
     }
   }
 
   handleMenuClose = () => {
-    this.setState({ anchorEl: null });
+    this.setState({ anchorEl: null })
   }
 
   renderFacetMenu = () => {
-    const { anchorEl } = this.state;
-    const { sortButton, spatialFilterButton, sortBy, filterType, chartButton = false } = this.props.facet;
-    const open = Boolean(anchorEl);
-    let menuButtons = [];
+    const { anchorEl } = this.state
+    const { sortButton, spatialFilterButton, sortBy, filterType, chartButton = false } = this.props.facet
+    const open = Boolean(anchorEl)
+    const menuButtons = []
     if (sortButton) {
       menuButtons.push({
         id: 'prefLabel',
         menuItemText: 'Sort alphabetically',
-        selected: sortBy === 'prefLabel' ? true : false,
+        selected: sortBy === 'prefLabel',
         onClickHandler: this.handleSortOnClick
-      });
+      })
       menuButtons.push({
         id: 'instanceCount',
         menuItemText: `Sort by number of ${this.props.resultClass}`,
-        selected: sortBy === 'instanceCount' ? true : false,
+        selected: sortBy === 'instanceCount',
         onClickHandler: this.handleSortOnClick
-      });
+      })
     }
     if (spatialFilterButton) {
       menuButtons.push({
         id: 'uriFilter',
-        menuItemText: `Filter by name`,
-        selected: filterType === 'uriFilter' ? true : false,
+        menuItemText: 'Filter by name',
+        selected: filterType === 'uriFilter',
         onClickHandler: this.handleFilterTypeOnClick
-      });
+      })
       menuButtons.push({
         id: 'spatialFilter',
-        menuItemText: `Filter by bounding box`,
-        selected: filterType === 'spatialFilter' ? true : false,
+        menuItemText: 'Filter by bounding box',
+        selected: filterType === 'spatialFilter',
         onClickHandler: this.handleFilterTypeOnClick
-      });
+      })
     }
     return (
-      <React.Fragment>
+      <>
         {chartButton &&
           <ChartDialog
             data={this.props.facetConstrainSelf.values}
@@ -145,20 +145,19 @@ class FacetHeader extends React.Component {
             facetID={this.props.facetID}
             facetClass={this.props.facetClass}
             fetchFacetConstrainSelf={this.props.fetchFacetConstrainSelf}
-          />
-        }
-        <Tooltip disableFocusListener={true} title="Filter options">
+          />}
+        <Tooltip disableFocusListener title='Filter options'>
           <IconButton
-            aria-label="Filter options"
+            aria-label='Filter options'
             aria-owns={open ? 'facet-option-menu' : undefined}
-            aria-haspopup="true"
+            aria-haspopup='true'
             onClick={this.handleMenuButtonClick}
           >
             <MoreVertIcon />
           </IconButton>
         </Tooltip>
         <Menu
-          id="facet-option-menu"
+          id='facet-option-menu'
           anchorEl={anchorEl}
           open={open}
           onClose={this.handleMenuClose}
@@ -169,18 +168,18 @@ class FacetHeader extends React.Component {
             </MenuItem>
           ))}
         </Menu>
-      </React.Fragment>
-    );
+      </>
+    )
   }
 
-  render() {
-    const { classes, isActive, facetDescription, facetLabel } = this.props;
-    const { sortButton, spatialFilterButton, chartButton } = this.props.facet;
-    let showButtons = isActive && (sortButton || spatialFilterButton || chartButton);
+  render () {
+    const { classes, isActive, facetDescription, facetLabel } = this.props
+    const { sortButton, spatialFilterButton, chartButton } = this.props.facet
+    const showButtons = isActive && (sortButton || spatialFilterButton || chartButton)
 
     return (
       <div className={classes.headingContainer}>
-        <Typography variant="body1">{facetLabel} </Typography>
+        <Typography variant='body1'>{facetLabel} </Typography>
         <Tooltip
           title={facetDescription}
           enterDelay={300}
@@ -192,10 +191,9 @@ class FacetHeader extends React.Component {
         {showButtons &&
           <div className={classes.facetHeaderButtons}>
             {this.renderFacetMenu()}
-          </div>
-        }
+          </div>}
       </div>
-    );
+    )
   }
 }
 
@@ -212,6 +210,6 @@ FacetHeader.propTypes = {
   fetchFacetConstrainSelf: PropTypes.func,
   updateFacetOption: PropTypes.func,
   facetDescription: PropTypes.string.isRequired
-};
+}
 
-export default withStyles(styles)(FacetHeader);
+export default withStyles(styles)(FacetHeader)
diff --git a/src/client/components/facet_bar/FacetHelpers.js b/src/client/components/facet_bar/FacetHelpers.js
index 78e74279d0332a6f573cf70a0c1c3cda9668643f..8b32bd2f30d16d143697f7b841340bb18eddae9a 100644
--- a/src/client/components/facet_bar/FacetHelpers.js
+++ b/src/client/components/facet_bar/FacetHelpers.js
@@ -1,31 +1,31 @@
 export const ISOStringToYear = str => {
-  let year = null;
-  if (str.charAt(0) == '-') {
-    year = parseInt(str.substring(0,5));
+  let year = null
+  if (str.charAt(0) === '-') {
+    year = parseInt(str.substring(0, 5))
   } else {
-    year = parseInt(str.substring(0,4));
+    year = parseInt(str.substring(0, 4))
   }
-  return year;
-};
+  return year
+}
 
 export const YearToISOString = ({ year, start }) => {
-  const abs = Math.abs(year);
-  let s = year.toString();
-  let negative = false;
-  if (s.charAt(0) == '-') {
-    s = s.substring(1);
-    negative = true;
+  const abs = Math.abs(year)
+  let s = year.toString()
+  let negative = false
+  if (s.charAt(0) === '-') {
+    s = s.substring(1)
+    negative = true
   }
   if (abs < 10) {
-    s = '000' + s;
+    s = '000' + s
   }
   if (abs >= 10 && abs < 100) {
-    s = '00' + s;
+    s = '00' + s
   }
   if (abs >= 100 && abs < 1000) {
-    s = '0' + s;
-    s = negative ? s = '-' + s : s;
+    s = '0' + s
+    s = negative ? s = '-' + s : s
   }
-  s = start ? s + '-01-01' :  s + '-12-31';
-  return s;
-};
+  s = start ? s + '-01-01' : s + '-12-31'
+  return s
+}
diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js
index 7e988f33b23238654bdbaa9a8a2478abffe40acf..0de02c5b99d2af2673f151007e18db5d2aa5cdf5 100644
--- a/src/client/components/facet_bar/FacetInfo.js
+++ b/src/client/components/facet_bar/FacetInfo.js
@@ -1,94 +1,88 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { has } from 'lodash';
-import { withStyles } from '@material-ui/core/styles';
-import ActiveFilters from './ActiveFilters';
-import Divider from '@material-ui/core/Divider';
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import purple from '@material-ui/core/colors/purple';
+import React from 'react'
+import PropTypes from 'prop-types'
+import intl from 'react-intl-universal'
+import { has } from 'lodash'
+import { withStyles } from '@material-ui/core/styles'
+import ActiveFilters from './ActiveFilters'
+import Divider from '@material-ui/core/Divider'
+import Typography from '@material-ui/core/Typography'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import purple from '@material-ui/core/colors/purple'
 
 const styles = theme => ({
   facetInfoDivider: {
     marginTop: theme.spacing(0.5),
     marginBottom: theme.spacing(0.5)
   }
-});
+})
 
 class FacetInfo extends React.Component {
-
   componentDidMount = () => {
     this.props.fetchResultCount({
       resultClass: this.props.resultClass,
-      facetClass: this.props.facetClass,
-    });
+      facetClass: this.props.facetClass
+    })
   }
 
   componentDidUpdate = prevProps => {
     if (prevProps.facetUpdateID !== this.props.facetUpdateID) {
       this.props.fetchResultCount({
         resultClass: this.props.resultClass,
-        facetClass: this.props.facetClass,
-      });
+        facetClass: this.props.facetClass
+      })
     }
   }
 
-  render() {
-    const { classes, facetClass, resultClass, resultCount, someFacetIsFetching } = this.props;
-    const { facets } = this.props.facetData;
-    let uriFilters = {};
-    let spatialFilters = {};
-    let textFilters = {};
-    let timespanFilters = {};
-    let integerFilters = {};
-    let activeUriFilters = false;
-    let activeSpatialFilters = false;
-    let activeTextFilters = false;
-    let activeTimespanFilters = false;
-    let activeIntegerFilters = false;
-    for (const [key, value] of Object.entries(facets)) {
+  render () {
+    const { classes, facetClass, resultClass, resultCount, someFacetIsFetching } = this.props
+    const { facets } = this.props.facetData
+    const uriFilters = {}
+    const spatialFilters = {}
+    const textFilters = {}
+    const timespanFilters = {}
+    const integerFilters = {}
+    let activeUriFilters = false
+    let activeSpatialFilters = false
+    let activeTextFilters = false
+    let activeTimespanFilters = false
+    let activeIntegerFilters = false
+    Object.entries(facets).forEach(entry => {
+      const [key, value] = entry
       if (has(value, 'uriFilter') && value.uriFilter !== null) {
-        activeUriFilters = true;
-        uriFilters[key] = value.uriFilter;
+        activeUriFilters = true
+        uriFilters[key] = value.uriFilter
       }
       if (has(value, 'spatialFilter') && value.spatialFilter !== null) {
-        activeSpatialFilters = true;
-        spatialFilters[key] = value.spatialFilter._bounds;
+        activeSpatialFilters = true
+        spatialFilters[key] = value.spatialFilter._bounds
       }
       if (has(value, 'textFilter') && value.textFilter !== null) {
-        activeTextFilters = true;
-        textFilters[key] = value.textFilter;
+        activeTextFilters = true
+        textFilters[key] = value.textFilter
       }
       if (has(value, 'timespanFilter') && value.timespanFilter !== null) {
-        activeTimespanFilters = true;
-        timespanFilters[key] = value.timespanFilter;
+        activeTimespanFilters = true
+        timespanFilters[key] = value.timespanFilter
       }
       if (has(value, 'integerFilter') && value.integerFilter !== null) {
-        activeIntegerFilters = true;
-        integerFilters[key] = value.integerFilter;
+        activeIntegerFilters = true
+        integerFilters[key] = value.integerFilter
       }
-    }
+    })
     return (
       <div className={classes.root}>
-        { this.props.fetchingResultCount ?
-          <CircularProgress
-            style={{ color: purple[500] }}
-            thickness={5}
-            size={26}
-          />
-          :
-          <Typography variant="h6">{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>
-        }
+        {this.props.fetchingResultCount
+          ? <CircularProgress style={{ color: purple[500] }} thickness={5} size={26} />
+          : <Typography variant='h6'>{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>}
         <Divider className={classes.facetInfoDivider} />
-        {(activeUriFilters
-          || activeSpatialFilters
-          || activeTextFilters
-          || activeTimespanFilters
-          || activeIntegerFilters
+        {(activeUriFilters ||
+          activeSpatialFilters ||
+          activeTextFilters ||
+          activeTimespanFilters ||
+          activeIntegerFilters
         ) &&
-          <React.Fragment>
-            <Typography variant="h6">Active filters:</Typography>
+          <>
+            <Typography variant='h6'>Active filters:</Typography>
             <div className={classes.textContainer}>
               <ActiveFilters
                 facetClass={facetClass}
@@ -103,11 +97,10 @@ class FacetInfo extends React.Component {
               />
             </div>
             <Divider className={classes.facetInfoDivider} />
-          </React.Fragment>
-        }
-        <Typography variant="h6">{intl.get('facetBar.narrowDownBy')}:</Typography>
+          </>}
+        <Typography variant='h6'>{intl.get('facetBar.narrowDownBy')}:</Typography>
       </div>
-    );
+    )
   }
 }
 
@@ -123,6 +116,6 @@ FacetInfo.propTypes = {
   fetchResultCount: PropTypes.func.isRequired,
   someFacetIsFetching: PropTypes.bool.isRequired,
   fetchFacet: PropTypes.func.isRequired
-};
+}
 
-export default withStyles(styles)(FacetInfo);
+export default withStyles(styles)(FacetInfo)
diff --git a/src/client/components/facet_bar/HierarchicalFacet.js b/src/client/components/facet_bar/HierarchicalFacet.js
index d89cecc289cd989bb29431bfe4c6d935469f4a1c..2ba820f8b15e0cabbe413927318884f6d1c2a90b 100644
--- a/src/client/components/facet_bar/HierarchicalFacet.js
+++ b/src/client/components/facet_bar/HierarchicalFacet.js
@@ -1,19 +1,19 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { withStyles } from '@material-ui/core/styles';
-import { has } from 'lodash';
-import SortableTree, { changeNodeAtPath } from 'react-sortable-tree';
-import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import purple from '@material-ui/core/colors/purple';
-import Input from '@material-ui/core/Input';
-import IconButton from '@material-ui/core/IconButton';
-import NavigateNextIcon from '@material-ui/icons/NavigateNext';
-import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
-import Typography from '@material-ui/core/Typography';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import intl from 'react-intl-universal'
+import { withStyles } from '@material-ui/core/styles'
+import { has } from 'lodash'
+import SortableTree, { changeNodeAtPath } from 'react-sortable-tree'
+import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer'
+import Checkbox from '@material-ui/core/Checkbox'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import purple from '@material-ui/core/colors/purple'
+import Input from '@material-ui/core/Input'
+import IconButton from '@material-ui/core/IconButton'
+import NavigateNextIcon from '@material-ui/icons/NavigateNext'
+import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'
+import Typography from '@material-ui/core/Typography'
 
 const styles = () => ({
   facetSearchContainer: {
@@ -30,7 +30,7 @@ const styles = () => ({
   },
   treeContainerWithSearchField: {
     width: '100%',
-    flex: 1,
+    flex: 1
   },
   spinnerContainer: {
     display: 'flex',
@@ -42,10 +42,10 @@ const styles = () => ({
   checkbox: {
     padding: 0,
     marginLeft: 6,
-    marginRight: 4,
+    marginRight: 4
   },
   searchMatch: {
-    boxShadow: '0 2px 0 #673ab7',
+    boxShadow: '0 2px 0 #673ab7'
   },
   label: {
     // no styling
@@ -63,22 +63,22 @@ const styles = () => ({
     textDecoration: 'inherit'
   }
 
-});
+})
 
 /*
 This component is based on the React Sortable Tree example at:
 https://frontend-collective.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Search&full=0&addons=0&stories=1&panelRight=0
 */
 class HierarchicalFacet extends Component {
-  constructor(props) {
-    super(props);
+  constructor (props) {
+    super(props)
     this.state = {
       treeData: [],
       searchString: '',
       searchFocusIndex: 0,
       searchFoundCount: null,
       matches: []
-    };
+    }
   }
 
   componentDidMount = () => {
@@ -86,71 +86,68 @@ class HierarchicalFacet extends Component {
     if (this.props.facet.filterType === 'uriFilter') {
       this.props.fetchFacet({
         facetClass: this.props.facetClass,
-        facetID: this.props.facetID,
-      });
+        facetID: this.props.facetID
+      })
     }
   }
 
   componentDidUpdate = prevProps => {
     if (prevProps.facetUpdateID !== this.props.facetUpdateID) {
-
       // update component state if the user modified this facet
       if (this.props.updatedFacet === this.props.facetID) {
         if (has(this.props.updatedFilter, 'path')) {
-          const treeObj = this.props.updatedFilter;
-          let newTreeData = changeNodeAtPath({
+          const treeObj = this.props.updatedFilter
+          const newTreeData = changeNodeAtPath({
             treeData: this.state.treeData,
-            getNodeKey: ({ treeIndex }) =>  treeIndex,
+            getNodeKey: ({ treeIndex }) => treeIndex,
             path: treeObj.path,
             newNode: () => {
-              const oldNode = treeObj.node;
+              const oldNode = treeObj.node
               if (has(oldNode, 'children')) {
                 return {
                   ...oldNode,
                   selected: treeObj.added ? 'true' : 'false',
                   children: this.recursiveSelect(oldNode.children, treeObj.added)
-                };
+                }
               } else {
                 return {
                   ...oldNode,
-                  selected: treeObj.added ? 'true' : 'false',
-                };
+                  selected: treeObj.added ? 'true' : 'false'
+                }
               }
             }
-          });
-          this.setState({ treeData: newTreeData });
+          })
+          this.setState({ treeData: newTreeData })
         }
-      }
-      // else fetch new values, because some other facet was updated
-      else {
+      } else { // else fetch new values, because some other facet was updated
         // console.log(`fetching new values for ${this.props.facetID}`)
         this.props.fetchFacet({
           facetClass: this.props.facetClass,
-          facetID: this.props.facetID,
-        });
+          facetID: this.props.facetID
+        })
       }
     }
 
     // fetch new values if the user changes the filter type or sort order
-    if (prevProps.facet.filterType !== this.props.facet.filterType
-      && this.props.facet.filterType === 'uriFilter') {
+    if (prevProps.facet.filterType !== this.props.facet.filterType &&
+      this.props.facet.filterType === 'uriFilter') {
       this.props.fetchFacet({
         facetClass: this.props.facetClass,
-        facetID: this.props.facetID,
-      });
+        facetID: this.props.facetID
+      })
     }
     if (prevProps.facet.sortBy !== this.props.facet.sortBy) {
       this.props.fetchFacet({
         facetClass: this.props.facetClass,
-        facetID: this.props.facetID,
-      });
+        facetID: this.props.facetID
+      })
     }
 
     // when values have been fetched, update component's state
-    if (prevProps.facet.values != this.props.facet.values) {
+    if (prevProps.facet.values !== this.props.facet.values) {
       this.setState({
         treeData: this.props.facet.values
-      });
+      })
     }
   }
 
@@ -163,15 +160,15 @@ class HierarchicalFacet extends Component {
           facetID: this.props.facetID,
           option: this.props.facet.filterType,
           value: { node }
-        });
+        })
       }
-      node.selected = selected ? 'true' : 'false';
-      node.disabled = selected ? 'true' : 'false';
+      node.selected = selected ? 'true' : 'false'
+      node.disabled = selected ? 'true' : 'false'
       if (has(node, 'children')) {
-        this.recursiveSelect(node.children, selected);
+        this.recursiveSelect(node.children, selected)
       }
-    });
-    return nodes;
+    })
+    return nodes
   };
 
   handleCheckboxChange = treeObj => () => {
@@ -180,18 +177,18 @@ class HierarchicalFacet extends Component {
       facetID: this.props.facetID,
       option: this.props.facet.filterType,
       value: treeObj
-    });
+    })
   };
 
   handleSearchFieldOnChange = event => {
-    this.setState({ searchString: event.target.value });
+    this.setState({ searchString: event.target.value })
   }
 
   generateNodeProps = treeObj => {
-    const { uriFilter} = this.props.facet;
-    const { node } = treeObj;
-    let selectedCount = uriFilter == null ? 0 : Object.keys(this.props.facet.uriFilter).length;
-    let isSelected = node.selected === 'true' ? true : false;
+    const { uriFilter } = this.props.facet
+    const { node } = treeObj
+    const selectedCount = uriFilter == null ? 0 : Object.keys(this.props.facet.uriFilter).length
+    const isSelected = node.selected === 'true'
     return {
       title: (
         <FormControlLabel
@@ -202,21 +199,21 @@ class HierarchicalFacet extends Component {
               disabled={
                 /* non-hierarchical facet:
                 prevent selecting values with 0 hits (which may appear based on earlier selections): */
-                (this.props.facet.type !== 'hierarchical'
-                && node.instanceCount == 0
-                && node.selected === 'false')
+                (this.props.facet.type !== 'hierarchical' &&
+                node.instanceCount === 0 &&
+                node.selected === 'false') ||
                 // prevent selecting unknown value:
-                || node.id == 'http://ldf.fi/MISSING_VALUE'
+                node.id === 'http://ldf.fi/MISSING_VALUE' ||
                 // prevent selecting when another facet is still updating:
-                || this.props.someFacetIsFetching
+                this.props.someFacetIsFetching ||
                 // prevent selecting all facet values:
-                || (selectedCount >= this.props.facet.distinctValueCount - 1 && !isSelected)
+                (selectedCount >= this.props.facet.distinctValueCount - 1 && !isSelected) ||
                 // prevent selecting when parent has been selected
-                || node.disabled === 'true'
+                node.disabled === 'true'
               }
               onChange={this.handleCheckboxChange(treeObj)}
               value={treeObj.node.id}
-              color="primary"
+              color='primary'
             />
           }
           label={this.generateLabel(treeObj.node)}
@@ -225,29 +222,29 @@ class HierarchicalFacet extends Component {
           }}
         />
       )
-    };
+    }
   };
 
   generateLabel = node => {
-    let count = node.totalInstanceCount == null || node.totalInstanceCount == 0 ? node.instanceCount : node.totalInstanceCount;
-    let isSearchMatch = false;
+    const count = node.totalInstanceCount == null || node.totalInstanceCount === 0 ? node.instanceCount : node.totalInstanceCount
+    let isSearchMatch = false
     if (this.state.matches.length > 0) {
       // console.log(this.state.matches)
-      isSearchMatch = this.state.matches.some(match => match.node.id === node.id);
+      isSearchMatch = this.state.matches.some(match => match.node.id === node.id)
     }
 
     return (
-      <React.Fragment>
+      <>
         <Typography className={isSearchMatch ? this.props.classes.searchMatch : ''} variant='body2'>
           {node.prefLabel}
           <span> [{count}]</span>
         </Typography>
-      </React.Fragment>
-    );
+      </>
+    )
   }
 
   generateLabelClass = classes => {
-    let labelClass = classes.label;
+    const labelClass = classes.label
     // if (this.props.facetID === 'author' || this.props.facetID === 'source') {
     //   if (node.source === 'http://ldf.fi/mmm/schema/SDBM' || node.id === 'http://ldf.fi/mmm/schema/SDBM') {
     //     labelClass = classes.sdbmLabel;
@@ -259,69 +256,67 @@ class HierarchicalFacet extends Component {
     //     labelClass = classes.bibaleLabel;
     //   }
     // }
-    return labelClass;
+    return labelClass
   }
 
-  render() {
-    const { searchString, searchFocusIndex, searchFoundCount } = this.state;
-    const { classes, facet, facetClass, facetID } = this.props;
-    const { isFetching, searchField } = facet;
+  render () {
+    const { searchString, searchFocusIndex, searchFoundCount } = this.state
+    const { classes, facet, facetClass, facetID } = this.props
+    const { isFetching, searchField } = facet
     // if (this.props.facetID == 'owner') {
     //   console.log(this.state.treeData)
     // }
 
     // Case insensitive search of `node.title`
     const customSearchMethod = ({ node, searchQuery }) => {
-      let prefLabel = Array.isArray(node.prefLabel) ? node.prefLabel[0] : node.prefLabel;
-      return searchQuery.length > 2  &&
-      prefLabel.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
-    };
+      const prefLabel = Array.isArray(node.prefLabel) ? node.prefLabel[0] : node.prefLabel
+      return searchQuery.length > 2 &&
+      prefLabel.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1
+    }
 
     const selectPrevMatch = () =>
       this.setState({
         searchFocusIndex:
           searchFocusIndex !== null
             ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
-            : searchFoundCount - 1,
-      });
+            : searchFoundCount - 1
+      })
 
     const selectNextMatch = () =>
       this.setState({
         searchFocusIndex:
           searchFocusIndex !== null
             ? (searchFocusIndex + 1) % searchFoundCount
-            : 0,
-      });
+            : 0
+      })
 
     return (
-      <React.Fragment>
-        {isFetching ?
+      <>
+        {isFetching ? (
           <div className={classes.spinnerContainer}>
             <CircularProgress style={{ color: purple[500] }} thickness={5} />
           </div>
-          :
-          <React.Fragment>
-
+        ) : (
+          <>
             {searchField && facet.filterType !== 'spatialFilter' &&
               <div className={classes.facetSearchContainer}>
                 <Input
-                  placeholder={`Search...`}
+                  placeholder='Search...'
                   onChange={this.handleSearchFieldOnChange}
                   value={this.state.searchString}
-                >
-                </Input>
+                />
                 {searchFoundCount > 0 &&
-                  <React.Fragment>
+                  <>
                     <IconButton
                       className={classes.facetSearchIconButton}
-                      aria-label="Previous"
+                      aria-label='Previous'
                       onClick={selectPrevMatch}
                     >
                       <NavigateBeforeIcon />
                     </IconButton>
                     <IconButton
                       className={classes.facetSearchIconButton}
-                      aria-label="Next"
+                      aria-label='Next'
                       onClick={selectNextMatch}
                     >
                       <NavigateNextIcon />
@@ -329,12 +324,10 @@ class HierarchicalFacet extends Component {
                     <Typography>
                       {searchFoundCount > 0 ? searchFocusIndex + 1 : 0} / {searchFoundCount || 0}
                     </Typography>
-                  </React.Fragment>
-                }
-              </div>
-            }
+                  </>}
+              </div>}
             {facet.filterType !== 'spatialFilter' &&
-              <div className={searchField ? classes.treeContainerWithSearchField : classes.treeContainer }>
+              <div className={searchField ? classes.treeContainerWithSearchField : classes.treeContainer}>
                 <SortableTree
                   treeData={this.state.treeData}
                   onChange={treeData => this.setState({ treeData })}
@@ -349,9 +342,9 @@ class HierarchicalFacet extends Component {
                       searchFocusIndex:
                           matches.length > 0 ? searchFocusIndex % matches.length : 0,
                       matches
-                    });
+                    })
                   }}
-                  onlyExpandSearchedNodes={true}
+                  onlyExpandSearchedNodes
                   theme={FileExplorerTheme}
                   generateNodeProps={this.generateNodeProps}
                 />
@@ -361,12 +354,11 @@ class HierarchicalFacet extends Component {
                 <Typography>
                   Draw a bounding box on the map to filter by {intl.get(`perspectives.${facetClass}.properties.${facetID}.label`)}.
                 </Typography>
-              </div>
-            }
-          </React.Fragment>
-        }
-      </React.Fragment>
-    );
+              </div>}
+          </>
+        )}
+      </>
+    )
   }
 }
 
@@ -384,7 +376,7 @@ HierarchicalFacet.propTypes = {
     PropTypes.object,
     PropTypes.string,
     PropTypes.array]),
-  updatedFacet: PropTypes.string,
-};
+  updatedFacet: PropTypes.string
+}
 
-export default withStyles(styles)(HierarchicalFacet);
+export default withStyles(styles)(HierarchicalFacet)
diff --git a/src/client/components/facet_bar/RangeFacet.js b/src/client/components/facet_bar/RangeFacet.js
index b52637174b1938922c572217ab316fa97ece5d3f..7dcfaf8477d9457b399ce594cecbbed16a51f8ad 100644
--- a/src/client/components/facet_bar/RangeFacet.js
+++ b/src/client/components/facet_bar/RangeFacet.js
@@ -1,16 +1,16 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import purple from '@material-ui/core/colors/purple';
-import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import purple from '@material-ui/core/colors/purple'
+import { withStyles } from '@material-ui/core/styles'
+import TextField from '@material-ui/core/TextField'
+import Button from '@material-ui/core/Button'
+import InputAdornment from '@material-ui/core/InputAdornment'
 
 const styles = theme => ({
   root: {
     height: '100%',
-    display: 'flex',
+    display: 'flex'
   },
   textFields: {
     marginRight: theme.spacing(2),
@@ -23,7 +23,7 @@ const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: theme.spacing(1.5),
+    paddingTop: theme.spacing(1.5)
   },
   spinnerContainer: {
     display: 'flex',
@@ -31,116 +31,116 @@ const styles = theme => ({
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center'
-  },
-});
+  }
+})
 
 class RangeFacet extends Component {
-  constructor(props) {
-    super(props);
-    let min = '';
-    let max = '';
-    const { integerFilter } = props.facet;
+  constructor (props) {
+    super(props)
+    let min = ''
+    let max = ''
+    const { integerFilter } = props.facet
     if (integerFilter !== null) {
-      min = integerFilter.start;
-      max = integerFilter.end;
+      min = integerFilter.start
+      max = integerFilter.end
     }
-    this.state = { min, max };
+    this.state = { min, max }
   }
 
   componentDidMount = () => {
-    const { integerFilter } = this.props.facet;
-    let min = '';
-    let max = '';
+    const { integerFilter } = this.props.facet
+    let min = ''
+    let max = ''
     if (integerFilter !== null) {
-      min = integerFilter.start;
-      max = integerFilter.end;
+      min = integerFilter.start
+      max = integerFilter.end
     }
-    this.setState({ min, max });
+    this.setState({ min, max })
   }
 
   handleMinChange = event => {
-    this.setState({ min: event.target.value });
+    this.setState({ min: event.target.value })
   }
 
   handleMaxChange = event => {
-    this.setState({ max: event.target.value });
+    this.setState({ max: event.target.value })
   }
 
   handleApplyOnClick = event => {
-    let { min, max } = this.state;
-    let values = [ min, max ];
+    const { min, max } = this.state
+    const values = [min, max]
     this.props.updateFacetOption({
       facetClass: this.props.facetClass,
       facetID: this.props.facetID,
       option: this.props.facet.filterType,
       value: values
-    });
-    event.preventDefault();
+    })
+    event.preventDefault()
   }
 
   disableApply = () => {
-    let disabled = false;
+    let disabled = false
     if (this.props.someFacetIsFetching) {
-      disabled = true;
+      disabled = true
     }
     if (this.state.min === '' && this.state.max === '') {
-      disabled = true;
+      disabled = true
     }
-    return disabled;
+    return disabled
   }
 
-  render() {
-    const { classes, someFacetIsFetching } = this.props;
-    const { isFetching, unit } = this.props.facet;
+  render () {
+    const { classes, someFacetIsFetching } = this.props
+    const { isFetching, unit } = this.props.facet
     if (isFetching) {
-      return(
+      return (
         <div className={classes.spinnerContainer}>
           <CircularProgress style={{ color: purple[500] }} thickness={5} />
         </div>
-      );
+      )
     } else {
       return (
         <div className={classes.root}>
           <div className={classes.textFields}>
             <TextField
-              id="standard-number"
-              label="Min"
+              id='standard-number'
+              label='Min'
               disabled={someFacetIsFetching}
               value={this.state.min}
               onChange={this.handleMinChange}
-              type="number"
-              variant="outlined"
+              type='number'
+              variant='outlined'
               className={classes.textField}
               InputProps={{
-                endAdornment: <InputAdornment position="end">{unit}</InputAdornment>
+                endAdornment: <InputAdornment position='end'>{unit}</InputAdornment>
               }}
               InputLabelProps={{
-                shrink: true,
+                shrink: true
               }}
-              margin="normal"
+              margin='normal'
             />
             <TextField
-              id="standard-number"
-              label="Max"
+              id='standard-number'
+              label='Max'
               disabled={someFacetIsFetching}
               value={this.state.max}
               onChange={this.handleMaxChange}
-              type="number"
-              variant="outlined"
+              type='number'
+              variant='outlined'
               className={classes.textField}
               InputProps={{
-                endAdornment: <InputAdornment position="end">{unit}</InputAdornment>
+                endAdornment: <InputAdornment position='end'>{unit}</InputAdornment>
               }}
               InputLabelProps={{
-                shrink: true,
+                shrink: true
               }}
-              margin="normal"
+              margin='normal'
             />
           </div>
           <div className={classes.applyButton}>
             <Button
-              variant="contained"
-              color="primary"
+              variant='contained'
+              color='primary'
               className={classes.button}
               onClick={this.handleApplyOnClick}
               disabled={this.disableApply()}
@@ -149,12 +149,11 @@ class RangeFacet extends Component {
             </Button>
           </div>
         </div>
-      );
+      )
     }
   }
 }
 
-
 RangeFacet.propTypes = {
   classes: PropTypes.object.isRequired,
   facetID: PropTypes.string.isRequired,
@@ -166,7 +165,7 @@ RangeFacet.propTypes = {
   updateFacetOption: PropTypes.func,
   facetUpdateID: PropTypes.number,
   updatedFilter: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  updatedFacet: PropTypes.string,
-};
+  updatedFacet: PropTypes.string
+}
 
-export default withStyles(styles)(RangeFacet);
+export default withStyles(styles)(RangeFacet)
diff --git a/src/client/components/facet_bar/SliderComponents.js b/src/client/components/facet_bar/SliderComponents.js
index da2c1638e07ff7dd12adb7afb1ebc4f79778d772..d1c5c9176d92419d0965df69c555266e5bc2633b 100644
--- a/src/client/components/facet_bar/SliderComponents.js
+++ b/src/client/components/facet_bar/SliderComponents.js
@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-//import './tooltip.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+// import './tooltip.css';
 
 // *******************************************************
 // TOOLTIP RAIL
@@ -11,9 +11,9 @@ const railStyle = {
   transform: 'translate(0%, -50%)',
   height: 40,
   cursor: 'pointer',
-  zIndex: 300,
+  zIndex: 300
   // border: '1px solid grey',
-};
+}
 
 const railCenterStyle = {
   position: 'absolute',
@@ -23,16 +23,16 @@ const railCenterStyle = {
   borderRadius: 7,
   cursor: 'pointer',
   pointerEvents: 'none',
-  backgroundColor: 'rgb(155,155,155)',
-};
+  backgroundColor: 'rgb(155,155,155)'
+}
 
 const tooltipStyle = {
   position: 'relative',
   display: 'inline-block',
   borderBottom: '1px dotted #444',
   marginLeft: 22,
-  zIndex: 1000,
-};
+  zIndex: 1000
+}
 
 const tooltipTextStyle = {
   width: 100,
@@ -47,46 +47,46 @@ const tooltipTextStyle = {
   bottom: '150%',
   left: '50%',
   marginLeft: '-60px'
-};
+}
 
 export class TooltipRail extends Component {
   state = {
     value: null,
-    percent: null,
+    percent: null
   }
 
   onMouseEnter = () => {
-    document.addEventListener('mousemove', this.onMouseMove);
+    document.addEventListener('mousemove', this.onMouseMove)
   }
 
   onMouseLeave = () => {
-    this.setState({ value: null, percent: null });
-    document.removeEventListener('mousemove', this.onMouseMove);
+    this.setState({ value: null, percent: null })
+    document.removeEventListener('mousemove', this.onMouseMove)
   }
 
   onMouseMove = e => {
-    const { activeHandleID, getEventData } = this.props;
+    const { activeHandleID, getEventData } = this.props
 
     if (activeHandleID) {
-      this.setState({ value: null, percent: null });
+      this.setState({ value: null, percent: null })
     } else {
-      this.setState(getEventData(e));
+      this.setState(getEventData(e))
     }
   }
 
-  render() {
-    const { value, percent } = this.state;
-    const { activeHandleID, getRailProps } = this.props;
+  render () {
+    const { value, percent } = this.state
+    const { activeHandleID, getRailProps } = this.props
 
     return (
-      <Fragment>
+      <>
         {!activeHandleID && value ? (
           <div
             style={{
               left: `${percent}%`,
               position: 'absolute',
               marginLeft: '-11px',
-              marginTop: '-35px',
+              marginTop: '-35px'
             }}
           >
             <div style={tooltipStyle}>
@@ -98,60 +98,60 @@ export class TooltipRail extends Component {
           style={railStyle}
           {...getRailProps({
             onMouseEnter: this.onMouseEnter,
-            onMouseLeave: this.onMouseLeave,
+            onMouseLeave: this.onMouseLeave
           })}
         />
         <div style={railCenterStyle} />
-      </Fragment>
-    );
+      </>
+    )
   }
 }
 
 TooltipRail.propTypes = {
   getEventData: PropTypes.func,
   activeHandleID: PropTypes.string,
-  getRailProps: PropTypes.func.isRequired,
-};
+  getRailProps: PropTypes.func.isRequired
+}
 
 TooltipRail.defaultProps = {
-  disabled: false,
-};
+  disabled: false
+}
 
 // *******************************************************
 // HANDLE COMPONENT
 // *******************************************************
 export class Handle extends Component {
   state = {
-    mouseOver: false,
+    mouseOver: false
   }
 
   onMouseEnter = () => {
-    this.setState({ mouseOver: true });
+    this.setState({ mouseOver: true })
   }
 
   onMouseLeave = () => {
-    this.setState({ mouseOver: false });
+    this.setState({ mouseOver: false })
   }
 
-  render() {
+  render () {
     const {
       domain: [min, max],
       handle: { id, value, percent },
       isActive,
       disabled,
-      getHandleProps,
-    } = this.props;
-    const { mouseOver } = this.state;
+      getHandleProps
+    } = this.props
+    const { mouseOver } = this.state
 
     return (
-      <Fragment>
+      <>
         {(mouseOver || isActive) && !disabled ? (
           <div
             style={{
               left: `${percent}%`,
               position: 'absolute',
               marginLeft: '-11px',
-              marginTop: '-35px',
+              marginTop: '-35px'
             }}
           >
             <div style={tooltipStyle}>
@@ -170,15 +170,15 @@ export class Handle extends Component {
             height: 42,
             cursor: 'pointer',
             // border: '1px solid grey',
-            backgroundColor: 'none',
+            backgroundColor: 'none'
           }}
           {...getHandleProps(id, {
             onMouseEnter: this.onMouseEnter,
-            onMouseLeave: this.onMouseLeave,
+            onMouseLeave: this.onMouseLeave
           })}
         />
         <div
-          role="slider"
+          role='slider'
           aria-valuemin={min}
           aria-valuemax={max}
           aria-valuenow={value}
@@ -193,11 +193,11 @@ export class Handle extends Component {
             border: 0,
             borderRadius: '50%',
             boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.2)',
-            backgroundColor: disabled ? '#666' : '#8b6068',
+            backgroundColor: disabled ? '#666' : '#8b6068'
           }}
         />
-      </Fragment>
-    );
+      </>
+    )
   }
 }
 
@@ -206,21 +206,21 @@ Handle.propTypes = {
   handle: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   getHandleProps: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool,
-};
+  disabled: PropTypes.bool
+}
 
 Handle.defaultProps = {
-  disabled: false,
-};
+  disabled: false
+}
 
 // *******************************************************
 // TRACK COMPONENT
 // *******************************************************
-export function Track({ source, target, getTrackProps, disabled }) {
+export function Track ({ source, target, getTrackProps, disabled }) {
   return (
     <div
       style={{
@@ -232,36 +232,36 @@ export function Track({ source, target, getTrackProps, disabled }) {
         borderRadius: 7,
         cursor: 'pointer',
         left: `${source.percent}%`,
-        width: `${target.percent - source.percent}%`,
+        width: `${target.percent - source.percent}%`
       }}
       {...getTrackProps()}
     />
-  );
+  )
 }
 
 Track.propTypes = {
   source: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   target: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   getTrackProps: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-};
+  disabled: PropTypes.bool
+}
 
 Track.defaultProps = {
-  disabled: false,
-};
+  disabled: false
+}
 
 // *******************************************************
 // TICK COMPONENT
 // *******************************************************
-export function Tick({ tick, count, format }) {
+export function Tick ({ tick, count, format }) {
   return (
     <div>
       <div
@@ -271,7 +271,7 @@ export function Tick({ tick, count, format }) {
           width: 1,
           height: 5,
           backgroundColor: 'rgb(200,200,200)',
-          left: `${tick.percent}%`,
+          left: `${tick.percent}%`
         }}
       />
       <div
@@ -282,25 +282,25 @@ export function Tick({ tick, count, format }) {
           textAlign: 'center',
           marginLeft: `${-(100 / count) / 2}%`,
           width: `${100 / count}%`,
-          left: `${tick.percent}%`,
+          left: `${tick.percent}%`
         }}
       >
         {format(tick.value)}
       </div>
     </div>
-  );
+  )
 }
 
 Tick.propTypes = {
   tick: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   count: PropTypes.number.isRequired,
-  format: PropTypes.func.isRequired,
-};
+  format: PropTypes.func.isRequired
+}
 
 Tick.defaultProps = {
-  format: d => d,
-};
+  format: d => d
+}
diff --git a/src/client/components/facet_bar/SliderFacet.js b/src/client/components/facet_bar/SliderFacet.js
index d46ae90e8cd7a363580e4a461911e123591673b0..ea802c0f3feff4850388f0192211245c98bce760 100644
--- a/src/client/components/facet_bar/SliderFacet.js
+++ b/src/client/components/facet_bar/SliderFacet.js
@@ -1,16 +1,16 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import purple from '@material-ui/core/colors/purple';
-import { withStyles } from '@material-ui/core/styles';
-import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider';
-import { Handle, Track, Tick, TooltipRail } from './SliderComponents';
-import { YearToISOString, ISOStringToYear } from './FacetHelpers';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import purple from '@material-ui/core/colors/purple'
+import { withStyles } from '@material-ui/core/styles'
+import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider'
+import { Handle, Track, Tick, TooltipRail } from './SliderComponents'
+import { YearToISOString, ISOStringToYear } from './FacetHelpers'
 
 const sliderRootStyle = {
   position: 'relative',
-  width: '100%',
-};
+  width: '100%'
+}
 
 const styles = theme => ({
   root: {
@@ -26,67 +26,65 @@ const styles = theme => ({
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center'
-  },
-});
+  }
+})
 
 class SliderFacet extends Component {
-
   componentDidMount = () => {
-    const { isFetching, min, max } = this.props.facet;
+    const { isFetching, min, max } = this.props.facet
     if (!isFetching && (min == null || max == null)) {
       this.props.fetchFacet({
         facetClass: this.props.facetClass,
-        facetID: this.props.facetID,
-      });
+        facetID: this.props.facetID
+      })
     }
   }
 
   handleSliderOnChange = values => {
     if (this.props.dataType === 'ISOString') {
-      values[0] = YearToISOString({ year: values[0], start: true });
-      values[1] = YearToISOString({ year: values[1], start: false });
+      values[0] = YearToISOString({ year: values[0], start: true })
+      values[1] = YearToISOString({ year: values[1], start: false })
     }
     this.props.updateFacetOption({
       facetClass: this.props.facetClass,
       facetID: this.props.facetID,
       option: this.props.facet.filterType,
       value: values
-    });
+    })
   }
 
-  render() {
-    const { classes, someFacetIsFetching } = this.props;
-    const { isFetching, min, max } = this.props.facet;
-    let domain = null;
-    let values = null;
+  render () {
+    const { classes, someFacetIsFetching } = this.props
+    const { isFetching, min, max } = this.props.facet
+    let domain = null
+    let values = null
     if (isFetching || min == null || max == null) {
-      return(
+      return (
         <div className={classes.spinnerContainer}>
           <CircularProgress style={{ color: purple[500] }} thickness={5} />
         </div>
-      );
+      )
     } else {
       if (this.props.dataType === 'ISOString') {
-        const minYear = ISOStringToYear(min);
-        const maxYear = ISOStringToYear(max);
-        domain = [ minYear, maxYear ];
+        const minYear = ISOStringToYear(min)
+        const maxYear = ISOStringToYear(max)
+        domain = [minYear, maxYear]
         if (this.props.facet.timespanFilter == null) {
-          values = domain;
+          values = domain
         } else {
-          const { start, end } = this.props.facet.timespanFilter;
-          values = [ ISOStringToYear(start), ISOStringToYear(end) ];
+          const { start, end } = this.props.facet.timespanFilter
+          values = [ISOStringToYear(start), ISOStringToYear(end)]
         }
       } else if (this.props.dataType === 'integer') {
-        domain = [ parseInt(min), parseInt(max) ];
+        domain = [parseInt(min), parseInt(max)]
         if (this.props.facet.integerFilter == null) {
-          values = domain;
+          values = domain
         } else {
-          const { start, end } = this.props.facet.integerFilter;
-          values = [ start, end ];
+          const { start, end } = this.props.facet.integerFilter
+          values = [start, end]
         }
       }
 
-
       // Slider documentation: https://github.com/sghall/react-compound-slider
       return (
         <div className={classes.root}>
@@ -103,7 +101,7 @@ class SliderFacet extends Component {
             <Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
             <Handles>
               {({ handles, activeHandleID, getHandleProps }) => (
-                <div className="slider-handles">
+                <div className='slider-handles'>
                   {handles.map(handle => (
                     <Handle
                       key={handle.id}
@@ -118,7 +116,7 @@ class SliderFacet extends Component {
             </Handles>
             <Tracks left={false} right={false}>
               {({ tracks, getTrackProps }) => (
-                <div className="slider-tracks">
+                <div className='slider-tracks'>
                   {tracks.map(({ id, source, target }) => (
                     <Track
                       key={id}
@@ -132,7 +130,7 @@ class SliderFacet extends Component {
             </Tracks>
             <Ticks count={10}>
               {({ ticks }) => (
-                <div className="slider-ticks">
+                <div className='slider-ticks'>
                   {ticks.map(tick => (
                     <Tick key={tick.id} tick={tick} count={ticks.length} />
                   ))}
@@ -141,12 +139,11 @@ class SliderFacet extends Component {
             </Ticks>
           </Slider>
         </div>
-      );
+      )
     }
   }
 }
 
-
 SliderFacet.propTypes = {
   classes: PropTypes.object.isRequired,
   facetID: PropTypes.string.isRequired,
@@ -160,6 +157,6 @@ SliderFacet.propTypes = {
   updatedFilter: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   updatedFacet: PropTypes.string,
   dataType: PropTypes.string.isRequired
-};
+}
 
-export default withStyles(styles)(SliderFacet);
+export default withStyles(styles)(SliderFacet)
diff --git a/src/client/components/facet_bar/TextFacet.js b/src/client/components/facet_bar/TextFacet.js
index 4fb8c37c1972d2c009e7e1b18e1752f99ae666f6..fa760123608468a00d948cc0763c8a7c82177429 100644
--- a/src/client/components/facet_bar/TextFacet.js
+++ b/src/client/components/facet_bar/TextFacet.js
@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import SearchIcon from '@material-ui/icons/Search';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import FormControl from '@material-ui/core/FormControl';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import IconButton from '@material-ui/core/IconButton'
+import SearchIcon from '@material-ui/icons/Search'
+import Input from '@material-ui/core/Input'
+import InputLabel from '@material-ui/core/InputLabel'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import FormControl from '@material-ui/core/FormControl'
+import CircularProgress from '@material-ui/core/CircularProgress'
 
 const styles = theme => ({
   textSearch: {
-    margin: theme.spacing(1),
-  },
-});
+    margin: theme.spacing(1)
+  }
+})
 
 class TextFacet extends React.Component {
   state = {
-    value: '',
+    value: ''
   };
 
   // componentDidUpdate = prevProps => {
@@ -29,11 +29,11 @@ class TextFacet extends React.Component {
   // }
 
   handleChange = (event) => {
-    this.setState({ value: event.target.value });
+    this.setState({ value: event.target.value })
   };
 
   handleMouseDown = (event) => {
-    event.preventDefault();
+    event.preventDefault()
   };
 
   handleOnKeyDown = event => {
@@ -43,7 +43,7 @@ class TextFacet extends React.Component {
         facetID: this.props.facetID,
         option: this.props.facet.filterType,
         value: this.state.value
-      });
+      })
     }
   };
 
@@ -54,58 +54,58 @@ class TextFacet extends React.Component {
         facetID: this.props.facetID,
         option: this.props.facet.filterType,
         value: this.state.value
-      });
+      })
     }
   };
 
   hasValidQuery = () => {
-    return this.state.value.length > 2;
+    return this.state.value.length > 2
   }
 
-  render() {
-    const { classes } = this.props;
-    let searchButton = null;
-    const textResultsFetching = false;
+  render () {
+    const { classes } = this.props
+    let searchButton = null
+    const textResultsFetching = false
     if (textResultsFetching) {
       searchButton = (
         <IconButton
-          aria-label="Search places"
+          aria-label='Search places'
         >
           <CircularProgress size={24} />
         </IconButton>
-      );
+      )
     } else {
       searchButton = (
         <IconButton
-          aria-label="Search"
+          aria-label='Search'
           onClick={this.handleClick}
           onMouseDown={this.handleMouseDown}
         >
           <SearchIcon />
         </IconButton>
-      );
+      )
     }
 
     return (
       <div className={classes.root}>
         <FormControl className={classes.textSearch}>
-          <InputLabel htmlFor="adornment-search">Search</InputLabel>
+          <InputLabel htmlFor='adornment-search'>Search</InputLabel>
           <Input
-            id="adornment-search"
+            id='adornment-search'
             type='text'
             value={this.state.value}
             disabled={this.props.someFacetIsFetching}
             onChange={this.handleChange}
             onKeyDown={this.handleOnKeyDown}
             endAdornment={
-              <InputAdornment position="end">
+              <InputAdornment position='end'>
                 {searchButton}
               </InputAdornment>
             }
           />
         </FormControl>
       </div>
-    );
+    )
   }
 }
 
@@ -118,7 +118,7 @@ TextFacet.propTypes = {
   fetchFacet: PropTypes.func,
   someFacetIsFetching: PropTypes.bool.isRequired,
   updateFacetOption: PropTypes.func,
-  facetUpdateID: PropTypes.number,
-};
+  facetUpdateID: PropTypes.number
+}
 
-export default withStyles(styles)(TextFacet);
+export default withStyles(styles)(TextFacet)