Merge pull request alephdata#1670 from alephdata/kirk/collection-hist…

…ogram

Collection Date Histogram

ui/src/components/Collection/CollectionDateHistogram.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { Histogram } from '@alephdata/react-ftm';
+import { Classes } from '@blueprintjs/core';
+import c from 'classnames';
+
+import { collectionSearchQuery } from 'queries'
+import CollectionStatistics from './CollectionStatistics';
+import { selectCollection, selectEntitiesResult } from 'selectors';
+import { queryEntities } from 'actions';
+import DateFacet from 'components/Facet/DateFacet';
+import getCollectionLink from 'util/getCollectionLink';
+import collectionViewIds from 'components/Collection/collectionViewIds';
+
+class CollectionDateHistogram extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDateIntervalSelect = this.onDateIntervalSelect.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchDatesIfNeeded()
+  }
+
+  componentDidUpdate() {
+    this.fetchDatesIfNeeded()
+  }
+
+  fetchDatesIfNeeded() {
+    const { datesQuery, datesResult } = this.props;
+
+    if (datesResult.shouldLoad) {
+      this.props.queryEntities({ query: datesQuery });
+    }
+  }
+
+  onDateIntervalSelect(newQuery) {
+    const { collection, history, location } = this.props;
+
+    history.push(
+      getCollectionLink({
+        collection,
+        mode: collectionViewIds.SEARCH,
+        search: newQuery.toLocation()
+      })
+    );
+  }
+
+  render() {
+    const { className, datesQuery, datesResult, statsToRender } = this.props;
+
+    const intervals = datesResult.facets?.dates?.intervals;
+
+    if (!datesResult.isPending && (!intervals || intervals.length <= 1)) {
+      return null;
+    }
+
+    return (
+      <div className={className}>
+        <div className={c({[Classes.SKELETON]: datesResult.isPending})}>
+          <DateFacet
+            isOpen={true}
+            intervals={intervals}
+            query={datesQuery}
+            updateQuery={this.onDateIntervalSelect}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const { collectionId, location } = ownProps;
+  const collection = selectCollection(state, collectionId);
+
+  const datesQuery = collectionSearchQuery(location, collectionId)
+    .add('facet', 'dates')
+    .add('facet_interval:dates', 'year');
+
+  return {
+    collection,
+    datesQuery,
+    datesResult: selectEntitiesResult(state, datesQuery),
+  };
+};
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, { queryEntities }),
+)(CollectionDateHistogram);

ui/src/components/Collection/CollectionStatisticsGroup.jsx

@@ -4,6 +4,7 @@ import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 
 import CollectionStatistics from './CollectionStatistics';
+import CollectionDateHistogram from './CollectionDateHistogram';
 import { selectCollection } from 'selectors';
 
 import './CollectionStatisticsGroup.scss';
@@ -28,7 +29,7 @@ class CollectionStatisticsGroup extends React.Component {
   }
 
   render() {
-    const { emptyComponent, isPending, statsToRender } = this.props;
+    const { collectionId, emptyComponent, isPending, statsToRender } = this.props;
     const skeletonItems = [...Array(3).keys()];
 
     if (!isPending && !statsToRender.length) {
@@ -37,6 +38,7 @@ class CollectionStatisticsGroup extends React.Component {
 
     return (
       <div className="CollectionStatisticsGroup">
+        <CollectionDateHistogram collectionId={collectionId} className="CollectionStatisticsGroup__item" />
         {isPending && skeletonItems.map((key) => this.renderStatisticsItem({ key }))}
         {!isPending && statsToRender.map((stat) => this.renderStatisticsItem(stat))}
       </div>

ui/src/components/Collection/CollectionStatisticsGroup.scss

@@ -30,4 +30,8 @@
       width: 100%;
     }
   }
+
+  .DateFacet__label {
+    color: $blue1;
+  }
 }

ui/src/components/EntitySearch/FacetedEntitySearch.scss

@@ -36,6 +36,14 @@
       }
     }
   }
+
+  .DateFacet {
+    &.bp3-card {
+      border: 1px solid $aleph-border-color;
+      box-shadow: none;
+      margin: $aleph-grid-size/2 0 $aleph-grid-size*2;
+    }
+  }
 }
 
 @media screen and (max-width: $aleph-screen-sm-max-width) {

ui/src/components/Facet/DateFacet.scss

@@ -3,9 +3,6 @@
 
 .DateFacet {
   &.bp3-card {
-    border: 1px solid $aleph-border-color;
-    box-shadow: none;
-    margin: $aleph-grid-size/2 0 $aleph-grid-size*2;
     padding-top: $aleph-grid-size*2;
     padding-bottom: $aleph-grid-size/2;
     position: relative;