Add the canvas label to the canvas nav area; fixes #2113

__tests__/src/components/WindowViewer.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import manifesto from 'manifesto.js';
+import Typography from '@material-ui/core/Typography';
 import { WindowViewer } from '../../../src/components/WindowViewer';
 import OSDViewer from '../../../src/containers/OpenSeadragonViewer';
 import ViewerNavigation from '../../../src/containers/ViewerNavigation';
@@ -23,6 +24,7 @@ let mockWindow = {
 function createWrapper(props) {
   return shallow(
     <WindowViewer
+      canvasLabel="label"
       infoResponses={{}}
       fetchInfoResponse={() => {}}
       fetchAnnotation={() => {}}
@@ -45,6 +47,7 @@ describe('WindowViewer', () => {
           <div>
             <ZoomControls />
             <ViewerNavigation />
+            <Typography>label</Typography>
           </div>
         </OSDViewer>
       </>,

src/components/WindowViewer.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
 import OSDViewer from '../containers/OpenSeadragonViewer';
 import ZoomControls from '../containers/ZoomControls';
 import ViewerNavigation from '../containers/ViewerNavigation';
@@ -123,7 +124,7 @@ export class WindowViewer extends Component {
    * Renders things
    */
   render() {
-    const { window } = this.props;
+    const { canvasLabel, window } = this.props;
     return (
       <>
         <OSDViewer
@@ -134,6 +135,11 @@ export class WindowViewer extends Component {
           <div className={ns('canvas-nav')}>
             <ZoomControls windowId={window.id} />
             <ViewerNavigation window={window} canvases={this.canvases} />
+            {
+              canvasLabel && (
+                <Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
+              )
+            }
           </div>
         </OSDViewer>
       </>
@@ -147,4 +153,9 @@ WindowViewer.propTypes = {
   fetchInfoResponse: PropTypes.func.isRequired,
   manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  canvasLabel: PropTypes.string,
+};
+
+WindowViewer.defaultProps = {
+  canvasLabel: undefined,
 };

src/containers/WindowViewer.js

@@ -2,6 +2,10 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
+import {
+  getCanvasLabel,
+  getSelectedCanvas,
+} from '../state/selectors';
 import { WindowViewer } from '../components/WindowViewer';
 
 /**
@@ -9,8 +13,12 @@ import { WindowViewer } from '../components/WindowViewer';
  * @memberof WindowViewer
  * @private
  */
-const mapStateToProps = state => (
+const mapStateToProps = (state, { window }) => (
   {
+    canvasLabel: getCanvasLabel(
+      getSelectedCanvas(state, window.id),
+      state.windows[window.id].canvasIndex,
+    ),
     infoResponses: state.infoResponses,
   }
 );

src/styles/index.scss

@@ -110,6 +110,14 @@
   &-canvas-nav {
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
+    text-align: center;
+  }
+
+  &-canvas-label {
+    width: 100%;
+    text-overflow: ellipsis;
+    padding-bottom: 3px;
   }
 
   &-thumb-navigation {