search: Improved support for paginated search responses

- Indicate the availability of more hits than currently shown with a `+`
  suffix after the "total" length in `SearchPanelNavigation` search
  responses
- Indicate how many hits remain to be fetched with an extra line on the
  `More Results` button in the `SearchResults` component.

src/components/SearchPanelNavigation.js

@@ -42,13 +42,17 @@ export class SearchPanelNavigation extends Component {
   */
   render() {
     const {
-      searchHits, selectedContentSearchAnnotation, classes, t, direction,
+      numTotal, searchHits, selectedContentSearchAnnotation, classes, t, direction,
     } = this.props;
 
     const iconStyle = direction === 'rtl' ? { transform: 'rotate(180deg)' } : {};
 
     const currentHitIndex = searchHits
       .findIndex(val => val.annotations.includes(selectedContentSearchAnnotation[0]));
+    let lengthText = searchHits.length;
+    if (searchHits.length < numTotal) {
+      lengthText += '+';
+    }
     return (
       <>
         {(searchHits.length > 0) && (
@@ -61,7 +65,7 @@ export class SearchPanelNavigation extends Component {
               <ChevronLeftIcon style={iconStyle} />
             </MiradorMenuButton>
             <span style={{ unicodeBidi: 'plaintext' }}>
-              {t('pagination', { current: currentHitIndex + 1, total: searchHits.length })}
+              {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
             </span>
             <MiradorMenuButton
               aria-label={t('searchNextResult')}
@@ -79,6 +83,7 @@ export class SearchPanelNavigation extends Component {
 SearchPanelNavigation.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
   direction: PropTypes.string.isRequired,
+  numTotal: PropTypes.number,
   searchHits: PropTypes.arrayOf(PropTypes.object),
   searchService: PropTypes.shape({
     id: PropTypes.string,
@@ -90,6 +95,7 @@ SearchPanelNavigation.propTypes = {
 };
 SearchPanelNavigation.defaultProps = {
   classes: {},
+  numTotal: undefined,
   searchHits: [],
   t: key => key,
 };

src/components/SearchResults.js

@@ -89,6 +89,7 @@ export class SearchResults extends Component {
       query,
       searchAnnotations,
       searchHits,
+      searchNumTotal,
       t,
       windowId,
     } = this.props;
@@ -122,8 +123,14 @@ export class SearchResults extends Component {
           </LiveMessenger>
         </List>
         { nextSearch && (
-          <Button color="secondary" onClick={() => fetchSearch(windowId, companionWindowId, nextSearch, query)}>
+          <Button
+            className={classes.moreButton}
+            color="secondary"
+            onClick={() => fetchSearch(windowId, companionWindowId, nextSearch, query)}
+          >
             {t('moreResults')}
+            <br />
+            {`(${t('resultsRemaining', { numLeft: searchNumTotal - searchHits.length })})`}
           </Button>
         )}
       </>
@@ -144,6 +151,7 @@ SearchResults.propTypes = {
   query: PropTypes.string,
   searchAnnotations: PropTypes.arrayOf(PropTypes.object),
   searchHits: PropTypes.arrayOf(PropTypes.object),
+  searchNumTotal: PropTypes.number,
   t: PropTypes.func,
   windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };
@@ -156,5 +164,6 @@ SearchResults.defaultProps = {
   query: undefined,
   searchAnnotations: [],
   searchHits: [],
+  searchNumTotal: undefined,
   t: k => k,
 };

src/containers/SearchPanelNavigation.js

@@ -7,6 +7,7 @@ import { SearchPanelNavigation } from '../components/SearchPanelNavigation';
 import * as actions from '../state/actions';
 import {
   getSelectedContentSearchAnnotationIds,
+  getSearchNumTotal,
   getSortedSearchHitsForCompanionWindow,
   getThemeDirection,
 } from '../state/selectors';
@@ -18,6 +19,7 @@ import {
  */
 const mapStateToProps = (state, { companionWindowId, windowId }) => ({
   direction: getThemeDirection(state),
+  numTotal: getSearchNumTotal(state, { companionWindowId, windowId }),
   searchHits: getSortedSearchHitsForCompanionWindow(state, { companionWindowId, windowId }),
   selectedContentSearchAnnotation: getSelectedContentSearchAnnotationIds(state, {
     companionWindowId, windowId,

src/containers/SearchResults.js

@@ -9,6 +9,7 @@ import {
   getNextSearchId,
   getSearchQuery,
   getSearchIsFetching,
+  getSearchNumTotal,
   getSortedSearchHitsForCompanionWindow,
   getSortedSearchAnnotationsForCompanionWindow,
 } from '../state/selectors';
@@ -25,6 +26,7 @@ const mapStateToProps = (state, { companionWindowId, windowId }) => ({
   searchAnnotations:
     getSortedSearchAnnotationsForCompanionWindow(state, { companionWindowId, windowId }),
   searchHits: getSortedSearchHitsForCompanionWindow(state, { companionWindowId, windowId }),
+  searchNumTotal: getSearchNumTotal(state, { companionWindowId, windowId }),
 });
 
 const mapDispatchToProps = {
@@ -33,6 +35,9 @@ const mapDispatchToProps = {
 
 /** */
 const styles = theme => ({
+  moreButton: {
+    width: '100%',
+  },
   navigation: {
     textTransform: 'none',
   },

src/locales/de/translation.json

@@ -106,6 +106,7 @@
     "previousCanvas": "Vorheriges Objekt",
     "related": "Verwandtes",
     "resource": "Ressource",
+    "resultsRemaining": "{{numLeft}} übrig",
     "retry": "Erneut versuchen",
     "right": "Rechts",
     "rights": "Lizenz",

src/locales/en/translation.json

@@ -109,6 +109,7 @@
     "previousCanvas": "Previous item",
     "related": "Related",
     "resource": "Resource",
+    "resultsRemaining": "{{numLeft}} remaining",
     "retry": "Retry",
     "right": "Right",
     "rights": "License",

src/state/selectors/searches.js

@@ -57,6 +57,22 @@ export const getSearchIsFetching = createSelector(
   results => results.some(result => result.isFetching),
 );
 
+export const getSearchNumTotal = createSelector(
+  [
+    getSearchForCompanionWindow,
+  ],
+  (results) => {
+    if (!results || !results.data) return undefined;
+
+    const resultWithWithin = Object.values(results.data).find(result => (
+      !result.isFetching
+        && result.json
+        && result.json.within
+    ));
+    return resultWithWithin?.json?.within?.total;
+  },
+);
+
 export const getNextSearchId = createSelector(
   [
     getSearchForCompanionWindow,