Core mirador behaviors to provide a plugin target for text resources

- refactor type-based filters into a module
- MiradorCanvas.imagesResources does not assume any service is an image service
- stub TextViewer shows empty div, source elements for text resources, and canvas navigation
- fixes #4085

__tests__/fixtures/version-3/text-pdf.json

@@ -0,0 +1,35 @@
+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "https://iiif.io/api/cookbook/recipe/0001-text-pdf/manifest.json",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Simplest Text Example 1"
+    ]
+  },
+  "items": [
+    {
+      "id": "https://iiif.io/api/cookbook/recipe/0001-text-pdf/canvas",
+      "type": "Canvas",
+      "items": [
+        {
+          "id": "https://iiif.io/api/cookbook/recipe/0001-text-pdf/canvas/page",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "https://iiif.io/api/cookbook/recipe/0001-text-pdf/canvas/page/annotation",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+                "type": "Text",
+                "format": "application/pdf"
+              },
+              "target": "https://iiif.io/api/cookbook/recipe/0001-text-pdf/canvas/page"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

__tests__/src/components/TextViewer.test.js

@@ -0,0 +1,47 @@
+import { render, screen } from '@tests/utils/test-utils';
+import { TextViewer } from '../../../src/components/TextViewer';
+
+/** create wrapper */
+function createWrapper(props, suspenseFallback) {
+  return render(
+    <TextViewer
+      classes={{}}
+      textOptions={{ crossOrigin: 'anonymous', 'data-testid': 'text' }}
+      {...props}
+    />,
+  );
+}
+
+describe('TextViewer', () => {
+  describe('render', () => {
+    it('textResources as source elements', () => {
+      createWrapper({
+        textResources: [
+          { getFormat: () => 'application/pdf', getType: () => 'Text', id: 1 },
+        ],
+        windowId: 'a',
+      }, true);
+      const text = screen.getByTestId('text');
+      expect(text.querySelector('source:nth-of-type(1)')).toHaveAttribute('type', 'application/pdf'); // eslint-disable-line testing-library/no-node-access
+    });
+    it('passes through configurable options', () => {
+      createWrapper({
+        textResources: [
+          { getFormat: () => 'application/pdf', getType: () => 'Text', id: 1 },
+        ],
+        windowId: 'a',
+      }, true);
+      expect(screen.getByTestId('text')).toHaveAttribute('crossOrigin', 'anonymous');
+    });
+    it('canvas navigation', () => {
+      createWrapper({
+        textResources: [
+          { getFormat: () => 'application/pdf', getType: () => 'Text', id: 1 },
+        ],
+        windowId: 'a',
+      }, true);
+      const text = screen.getByTestId('text');
+      expect(text.querySelector('.mirador-canvas-nav')).toBeDefined(); // eslint-disable-line testing-library/no-node-access
+    });
+  });
+});

__tests__/src/lib/MiradorCanvas.test.js

@@ -7,6 +7,7 @@ import otherContentStringsFixture from '../../fixtures/version-2/BibliographicRe
 import fragmentFixture from '../../fixtures/version-2/hamilton.json';
 import fragmentFixtureV3 from '../../fixtures/version-3/hamilton.json';
 import audioFixture from '../../fixtures/version-3/0002-mvm-audio.json';
+import textFixture from '../../fixtures/version-3/text-pdf.json';
 import videoFixture from '../../fixtures/version-3/0015-start.json';
 import videoWithAnnoCaptions from '../../fixtures/version-3/video_with_annotation_captions.json';
 
@@ -133,4 +134,12 @@ describe('MiradorCanvas', () => {
       expect(instance.v3VttContent.length).toEqual(1);
     });
   });
+  describe('textResources', () => {
+    it('returns text', () => {
+      instance = new MiradorCanvas(
+        Utils.parseManifest(textFixture).getSequences()[0].getCanvases()[0],
+      );
+      expect(instance.textResources.length).toEqual(1);
+    });
+  });
 });

__tests__/src/lib/resourceFilters.test.js

@@ -0,0 +1,31 @@
+import { Utils } from 'manifesto.js';
+import flattenDeep from 'lodash/flattenDeep';
+import manifestFixture019 from '../../fixtures/version-2/019.json';
+import {
+  filterByProfiles, filterByTypes,
+} from '../../../src/lib/resourceFilters';
+
+describe('resourceFilters', () => {
+  let canvas;
+  beforeEach(() => {
+    [canvas] = Utils.parseManifest(manifestFixture019).getSequences()[0].getCanvases();
+  });
+  describe('filterByProfiles', () => {
+    it('filters resources', () => {
+      const services = flattenDeep(canvas.resourceAnnotations.map((a) => a.getResource().getServices()));
+      expect(filterByProfiles(services, 'http://iiif.io/api/image/2/level2.json').map((s) => s.id)).toEqual([
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44',
+      ]);
+      expect(filterByProfiles(services, 'http://nonexistent.io/api/service.json').map((s) => s.id)).toEqual([]);
+    });
+  });
+  describe('filterByTypes', () => {
+    it('filters resources', () => {
+      const resources = flattenDeep(canvas.resourceAnnotations.map((a) => a.getResource()));
+      expect(filterByTypes(resources, 'dctypes:Image').map((r) => r.id)).toEqual([
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/full/0/default.jpg',
+      ]);
+      expect(filterByTypes(resources, 'Nonexistent').map((r) => r.id)).toEqual([]);
+    });
+  });
+});

__tests__/src/selectors/canvases.test.js

@@ -3,6 +3,7 @@ import manifestFixture019 from '../../fixtures/version-2/019.json';
 import minimumRequired from '../../fixtures/version-2/minimumRequired.json';
 import minimumRequired3 from '../../fixtures/version-3/minimumRequired.json';
 import audioFixture from '../../fixtures/version-3/0002-mvm-audio.json';
+import textFixture from '../../fixtures/version-3/text-pdf.json';
 import videoFixture from '../../fixtures/version-3/0015-start.json';
 import videoWithAnnoCaptions from '../../fixtures/version-3/video_with_annotation_captions.json';
 import settings from '../../../src/config/settings';
@@ -15,6 +16,7 @@ import {
   getCanvasLabel,
   selectInfoResponse,
   getVisibleCanvasNonTiledResources,
+  getVisibleCanvasTextResources,
   getVisibleCanvasVideoResources,
   getVisibleCanvasAudioResources,
   getVisibleCanvasCaptions,
@@ -462,4 +464,26 @@ describe('getVisibleCanvasNonTiledResources', () => {
       expect(getVisibleCanvasAudioResources(state, { windowId: 'a' })[0].id).toBe('https://fixtures.iiif.io/audio/indiana/mahler-symphony-3/CD1/medium/128Kbps.mp4');
     });
   });
+
+  describe('getVisibleCanvasTextResources', () => {
+    it('returns canvases resources', () => {
+      const state = {
+        manifests: {
+          'https://iiif.io/api/cookbook/recipe/0001-text-pdf/manifest.json': {
+            id: 'https://iiif.io/api/cookbook/recipe/0001-text-pdf/manifest.json',
+            json: textFixture,
+          },
+        },
+        windows: {
+          a: {
+            manifestId: 'https://iiif.io/api/cookbook/recipe/0001-text-pdf/manifest.json',
+            visibleCanvases: [
+              'https://iiif.io/api/cookbook/recipe/0001-text-pdf/canvas',
+            ],
+          },
+        },
+      };
+      expect(getVisibleCanvasTextResources(state, { windowId: 'a' })[0].id).toBe('https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf');
+    });
+  });
 });

src/components/PrimaryWindow.js

@@ -12,6 +12,7 @@ const GalleryView = lazy(() => import('../containers/GalleryView'));
 const SelectCollection = lazy(() => import('../containers/SelectCollection'));
 const WindowViewer = lazy(() => import('../containers/WindowViewer'));
 const VideoViewer = lazy(() => import('../containers/VideoViewer'));
+const TextViewer = lazy(() => import('../containers/TextViewer'));
 
 GalleryView.displayName = 'GalleryView';
 SelectCollection.displayName = 'SelectCollection';
@@ -25,8 +26,8 @@ const Root = styled('div', { name: 'PrimaryWindow', slot: 'root' })(() => ({
 
 /**  */
 const TypeSpecificViewer = ({
-  audioResources = [], isCollection = false,
-  isFetching = false, videoResources = [], view = undefined, windowId,
+  audioResources = [], isCollection = false, isFetching = false, textResources = [],
+  videoResources = [], view = undefined, windowId,
 }) => {
   if (isCollection) {
     return (
@@ -57,6 +58,13 @@ const TypeSpecificViewer = ({
         />
       );
     }
+    if (textResources.length > 0) {
+      return (
+        <TextViewer
+          windowId={windowId}
+        />
+      );
+    }
     return (
       <WindowViewer
         windowId={windowId}
@@ -70,6 +78,7 @@ TypeSpecificViewer.propTypes = {
   audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   isCollection: PropTypes.bool,
   isFetching: PropTypes.bool,
+  textResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   view: PropTypes.string,
   windowId: PropTypes.string.isRequired,
@@ -80,13 +89,15 @@ TypeSpecificViewer.propTypes = {
  * window. Right now this differentiates between a Image, Video, or Audio viewer.
  */
 export function PrimaryWindow({
-  audioResources = undefined, isCollection = false, isFetching = false, videoResources = undefined,
-  view = undefined, windowId, isCollectionDialogVisible = false, children = null, className = undefined,
+  audioResources = undefined, children = null, className = undefined, isCollection = false,
+  isCollectionDialogVisible = false, isFetching = false, textResources = undefined, videoResources = undefined,
+  view = undefined, windowId,
 }) {
   const viewerProps = {
     audioResources,
     isCollection,
     isFetching,
+    textResources,
     videoResources,
     view,
     windowId,
@@ -111,6 +122,7 @@ PrimaryWindow.propTypes = {
   isCollection: PropTypes.bool,
   isCollectionDialogVisible: PropTypes.bool,
   isFetching: PropTypes.bool,
+  textResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   view: PropTypes.string,
   windowId: PropTypes.string.isRequired,

src/components/TextViewer.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
+
+const StyledContainer = styled('div')(() => ({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+}));
+
+const StyledText = styled('div')(() => ({
+  maxHeight: '100%',
+  width: '100%',
+}));
+
+/**
+ * Simple divs with canvas navigation, which should mimic v3 fallthrough to WindowViewer
+ * with non-image resources and provide a target for plugin overrides with minimal disruption.
+ */
+export function TextViewer({ textOptions = {}, textResources = [], windowId }) {
+  return (
+    <StyledContainer>
+      <StyledText {...textOptions}>
+        {textResources.map(text => (
+          <source key={text.id} src={text.id} type={text.getFormat()} />
+        ))}
+        <WindowCanvasNavigationControls windowId={windowId} />
+      </StyledText>
+    </StyledContainer>
+  );
+}
+
+TextViewer.propTypes = {
+  textOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  textResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+  windowId: PropTypes.string.isRequired,
+};

src/containers/PrimaryWindow.js

@@ -2,7 +2,8 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import {
-  getManifestoInstance, getVisibleCanvasAudioResources, getVisibleCanvasVideoResources, getWindow,
+  getManifestoInstance, getVisibleCanvasAudioResources, getVisibleCanvasTextResources,
+  getVisibleCanvasVideoResources, getWindow,
 } from '../state/selectors';
 import { PrimaryWindow } from '../components/PrimaryWindow';
 
@@ -13,6 +14,7 @@ const mapStateToProps = (state, { windowId }) => {
     audioResources: getVisibleCanvasAudioResources(state, { windowId }) || [],
     isCollection: manifestoInstance && manifestoInstance.isCollection(),
     isCollectionDialogVisible: getWindow(state, { windowId }).collectionDialogOn,
+    textResources: getVisibleCanvasTextResources(state, { windowId }) || [],
     videoResources: getVisibleCanvasVideoResources(state, { windowId }) || [],
   };
 };

src/containers/TextViewer.js

@@ -0,0 +1,19 @@
+import { compose } from 'redux';
+import { withPlugins } from '../extend/withPlugins';
+import { TextViewer } from '../components/TextViewer';
+
+/** */
+const mapStateToProps = (state, { windowId }) => (
+  {
+    textOptions: getConfig(state).textOptions,
+    textResources: getVisibleCanvasTextResources(state, { windowId }) || [],
+  }
+);
+
+const enhance = compose(
+  connect(mapStateToProps, null),
+  withPlugins('TextViewer'),
+  // further HOC go here
+);
+
+export default enhance(TextViewer);