Get multi-sequences to work for v3 ranges/seqs

__tests__/fixtures/version-3/001.json

@@ -240,7 +240,11 @@
     {
       "id": "https://iiif.bodleian.ox.ac.uk/iiif/canvas/9cca8fdd-4a61-4429-8ac1-f648764b4d6d.json",
       "type": "Canvas",
-      "label": "Whole Page",
+      "label": {
+        "en": [
+          "Whole Page"
+        ]
+      },
       "width": 5776,
       "height": 9125,
       "items": [
@@ -360,4 +364,4 @@
       ]
     }
   ]
-}
+}

__tests__/fixtures/version-3/multipleSequences.json

@@ -0,0 +1,59 @@
+{
+    "@context": [
+      "http://iiif.io/api/presentation/3/context.json"
+    ],
+    "id": "http://foo.test/1/manifest",
+    "type": "Manifest",
+    "label": {
+      "none": ["Version 3 manifest for multiple ranges (sequences behavior) related tests"]
+    },
+    "items": [
+      {
+        "id": "http://foo.test/1/canvas/c1",
+        "type": "Canvas",
+        "label":{"none":["Test Canvas 1"]}
+      },
+      {
+        "id": "http://foo.test/1/canvas/c2",
+        "type": "Canvas",
+        "label":{"none":["Test Canvas 2"]}
+      },
+      {
+        "id": "http://foo.test/1/canvas/c3",
+        "type": "Canvas",
+        "label":{"none":["Test Canvas 3"]}
+      }
+    ],
+    "structures": [
+      {
+        "id": "http://foo.test/1/range/root",
+        "type": "Range",
+        "behavior": "sequence",
+        "items": [
+          {
+            "id": "http://foo.test/1/canvas/c1",
+            "type": "Canvas",
+            "label":{"none":["Test Canvas 1"]}
+          }
+        ]
+      },
+      {
+        "id": "http://foo.test/1/range/second",
+        "type": "Range",
+        "behavior": "sequence",
+        "items": [
+          {
+            "id": "http://foo.test/1/canvas/c2",
+            "type": "Canvas",
+            "label":{"none":["Test Canvas 2"]}
+          },
+          {
+            "id": "http://foo.test/1/canvas/c3",
+            "type": "Canvas",
+            "label":{"none":["Test Canvas 3"]}
+          }
+        ]
+      }
+    ]
+  }
+

__tests__/integration/mirador/sequence_switching_v3.test.js

@@ -0,0 +1,34 @@
+/* global miradorInstance */
+
+describe('Window Sidebar Sequence Dropdown v3', () => {
+  beforeAll(async () => {
+    await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/blank.html');
+
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'http://localhost:4488/__tests__/fixtures/version-3/multipleSequences.json');
+    await expect(page).toClick('#fetchBtn');
+
+    await expect(page).toMatchElement('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/multipleSequences.json"] button');
+    await expect(page).toClick('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/multipleSequences.json"] button');
+  });
+
+  it('allows the user to switch the v3 ranges (behavior sequences)', async () => {
+    const windows = await page.evaluate(() => (
+      miradorInstance.store.getState().windows
+    ));
+
+    const windowId = Object.values(windows)
+      .find(window => window.manifestId === 'http://localhost:4488/__tests__/fixtures/version-3/multipleSequences.json')
+      .id;
+
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Toggle sidebar"]`);
+    await expect(page).toClick(`#${windowId} button[aria-label="Toggle sidebar"]`);
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Index"]`);
+    await expect(page).toClick(`#${windowId} button[aria-label="Index"]`);
+    await expect(page).toClick('#mui-component-select-sequenceId');
+    await expect(page).toMatchElement('[data-value="http://foo.test/1/range/second"]');
+    await expect(page).toClick('[data-value="http://foo.test/1/range/second"]');
+    await expect(page).toMatchElement('p', { text: 'Test Canvas 2' });
+  });
+});

__tests__/src/selectors/sequences.test.js

@@ -13,6 +13,8 @@ import {
   getSequenceBehaviors,
 } from '../../../src/state/selectors/sequences';
 
+jest.mock('uuid', () => ({ v4: () => '00000000-0000-0000-0000-000000000000' }));
+
 describe('getSequences', () => {
   describe('with a v2 manifest', () => {
     const state = { manifests: { x: { json: manifestFixtureGau } } };
@@ -49,7 +51,7 @@ describe('getSequences', () => {
     const state = { manifests: { x: { json: manifest } } };
     const sequences = getSequences(state, { manifestId: 'x' });
     expect(sequences.length).toEqual(3);
-    expect(sequences.map(s => s.id)).toEqual([undefined, 'a', 'b']);
+    expect(sequences.map(s => s.id)).toEqual(['00000000-0000-0000-0000-000000000000', 'a', 'b']);
   });
 });
 

src/components/WindowSideBarCanvasPanel.js

@@ -88,7 +88,6 @@ export class WindowSideBarCanvasPanel extends Component {
         />
       );
     }
-
     return (
       <CompanionWindow
         title={t('canvasIndex')}
@@ -100,7 +99,7 @@ export class WindowSideBarCanvasPanel extends Component {
           <>
             {
               sequences && sequences.length > 1 && (
-                <FormControl>
+                <FormControl className={classes.formControl}>
                   <Select
                     MenuProps={{
                       anchorOrigin: {
@@ -110,7 +109,7 @@ export class WindowSideBarCanvasPanel extends Component {
                       getContentAnchorEl: null,
                     }}
                     displayEmpty
-                    value={sequenceId}
+                    value={sequenceId || ''}
                     onChange={this.handleSequenceChange}
                     name="sequenceId"
                     classes={{ select: classes.select }}

src/containers/WindowSideBarCanvasPanel.js

@@ -65,15 +65,24 @@ const styles = theme => ({
   collectionNavigationButton: {
     textTransform: 'none',
   },
+  formControl: {
+    maxWidth: 190,
+  },
   label: {
     paddingLeft: theme.spacing(1),
   },
   select: {
+    '& .MuiSelect-icon': {
+      backgroundColor: theme.palette.background.paper,
+    },
     '&:focus': {
       backgroundColor: theme.palette.background.paper,
     },
   },
   selectEmpty: {
+    '& .MuiSelect-icon': {
+      backgroundColor: theme.palette.background.paper,
+    },
     backgroundColor: theme.palette.background.paper,
   },
   variantTab: {

src/state/sagas/annotations.js

@@ -8,8 +8,10 @@ import MiradorCanvas from '../../lib/MiradorCanvas';
 
 /** Fetch annotations for a given canvas */
 export function* fetchCanvasAnnotations({ canvasId, windowId }) {
-  const canvas = yield select(getCanvas, { canvasId, windowId });
+  let canvas = yield select(getCanvas, { canvasId, windowId });
   const annotations = yield select(getAnnotations);
+
+  canvas = Array.isArray(canvas) ? canvas[0] : canvas;
   const miradorCanvas = new MiradorCanvas(canvas);
 
   return yield all([

src/state/sagas/windows.js

@@ -20,6 +20,7 @@ import {
   getCanvasGrouping, getWindow, getManifestoInstance,
   getCompanionWindowIdsForPosition, getManifestSearchService,
   getCanvasForAnnotation,
+  getSequence,
   getSelectedContentSearchAnnotationIds,
   getSortedSearchAnnotationsForCompanionWindow,
   getVisibleCanvasIds,
@@ -35,6 +36,9 @@ export function* fetchWindowManifest(action) {
   const {
     collectionPath, id, manifestId,
   } = action.payload || action.window;
+  const {
+    canvasId, canvasIndex, sequenceId, manifestId
+  } = action.payload || action.window;
 
   if (!manifestId) return;
 
@@ -98,16 +102,29 @@ export function* setWindowStartingCanvas(action) {
     );
     yield put(thunk);
   } else {
-    const manifestoInstance = yield select(getManifestoInstance, { manifestId });
-    if (manifestoInstance) {
-      // set the startCanvas
-      const miradorManifest = new MiradorManifest(manifestoInstance);
-      const startCanvas = miradorManifest.startCanvas
-        || miradorManifest.canvasAt(canvasIndex || 0)
-        || miradorManifest.canvasAt(0);
+    const currentSequence = yield select(getSequence, { windowId, sequenceId });
+
+    if(currentSequence){
+      let cIndex = canvasIndex ? canvasIndex : 0
+      const startCanvas = currentSequence.getCanvasByIndex(cIndex)
+
       if (startCanvas) {
-        const thunk = yield call(setCanvas, windowId, startCanvas.id);
-        yield put(thunk);
+       const thunk = yield call(setCanvas, windowId, startCanvas.id);
+       yield put(thunk);
+      }
+    } else {
+      const manifestoInstance = yield select(getManifestoInstance, { manifestId });
+
+      if (manifestoInstance) {
+        // set the startCanvas
+        const miradorManifest = new MiradorManifest(manifestoInstance);
+        const startCanvas = miradorManifest.startCanvas
+          || miradorManifest.canvasAt(canvasIndex || 0)
+          || miradorManifest.canvasAt(0);
+        if (startCanvas) {
+          const thunk = yield call(setCanvas, windowId, startCanvas.id);
+          yield put(thunk);
+        }
       }
     }
   }

src/state/selectors/canvases.js

@@ -12,7 +12,8 @@ export const selectInfoResponses = state => miradorSlice(state).infoResponses;
 
 export const getCanvases = createSelector(
   [getSequence],
-  sequence => (sequence && sequence.getCanvases()) || [],
+  sequence => (sequence && ((sequence.getCanvases && sequence.getCanvases()) || sequence.items))
+    || [],
 );
 
 /**
@@ -29,9 +30,16 @@ export const getCanvas = createSelector(
     (state, { canvasId }) => canvasId,
   ],
   (sequence, canvasId) => {
+    let canvas;
     if (!sequence || !canvasId) return undefined;
 
-    return sequence.getCanvasById(canvasId);
+    if (typeof sequence.getCanvasById == 'function') {
+      canvas = sequence.getCanvasById(canvasId);
+    } else if (sequence.items) {
+      canvas = sequence.items.filter(c => c.id === canvasId) || [];
+    }
+
+    return canvas;
   },
 );
 
@@ -43,9 +51,21 @@ export const getCurrentCanvas = createSelector(
   (sequence, window) => {
     if (!sequence || !window) return undefined;
 
-    if (!window.canvasId) return sequence.getCanvasByIndex(0);
+    if (!window.canvasId && (typeof sequence.getCanvasByIndex == 'function')) {
+      return sequence.getCanvasByIndex(0);
+    }
+
+    if (!window.canvasId) {
+      const { items } = sequence;
+      const [firstCanvas] = items;
+      return firstCanvas;
+    }
+
+    if (typeof sequence.getCanvasById == 'function') {
+      return sequence.getCanvasById(window.canvasId);
+    }
 
-    return sequence.getCanvasById(window.canvasId);
+    return sequence.items.filter(c => c.id === window.canvasId) || [];
   },
 );
 

src/state/selectors/sequences.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import { TreeNode } from 'manifesto.js/dist-esmodule/TreeNode';
+import { v4 as uuid } from 'uuid';
 import {
   getManifestoInstance,
 } from './manifests';
@@ -16,11 +17,45 @@ export const getSequences = createSelector(
 
     if (v2TopRanges.length === 0 && topRangesOrRoot.length === 1) {
       v3RangeSequences = topRangesOrRoot[0].getRanges().filter(r => r.getBehavior() === 'sequence');
+
+      /**  Add manifesto canvases (items) to the ranges if 'items' property of ranges
+       *  is empty
+       */
+      if (v3RangeSequences.length > 0 && manifest.items && manifest.items.length > 0
+          && manifest.items[0].items && manifest.items[0].items.length > 0) {
+        /** Use manifesto canvases provided in manifest 'items' property to populate
+         * range 'items'/canvases
+        */
+        const canvases = manifest.items[0].items;
+
+        v3RangeSequences.map((sequence) => {
+          if (sequence.items.length === 0) {
+            const updatedSequence = sequence;
+            updatedSequence.items = sequence.canvases.map(canvasId => {
+              const fullCanvas = canvases.find(c => c.id === canvasId);
+              return fullCanvas;
+            });
+            return updatedSequence;
+          }
+          return sequence;
+        });
+      }
     }
 
+      /** v3 sequence (not range sequence): assign id if not there
+       * Case: only sequence (not range) for v3 manifest is created by manifesto from all
+       * the items/canvases to display as default; this has id listed as undefined
+      */
+      const manifestSequences = manifest.getSequences();
+      if (v3RangeSequences && manifestSequences && manifestSequences.length > 0
+        && !manifestSequences[0].id) {
+          manifestSequences[0].id = uuid();
+          manifestSequences[0].label = 'Table of Contents';
+        }
+
     const sequences = [].concat(
       // v2: multi-sequence manifests, or v3: items
-      manifest.getSequences(),
+      manifestSequences,
       // v3: all top-level ranges with behavior=sequence
       v3RangeSequences,
     );
@@ -37,10 +72,8 @@ export const getSequence = createSelector(
   ],
   (sequences, window, sequenceId) => {
     if (!sequences) return null;
-
     if (sequenceId || (window && window.sequenceId)) {
       const currentSequence = sequences.find(s => s.id === (sequenceId || window.sequenceId));
-
       if (currentSequence) return currentSequence;
     }
 
@@ -58,10 +91,15 @@ export const getCanvasIndex = createSelector(
     getWindow,
     getSequence,
   ],
-  (window, sequence) => (
-    (sequence && window && window.canvasId
-      && sequence.getCanvasById(window.canvasId))
-    || {}).index || 0,
+  (window, sequence) => {
+    let canvas = {};
+
+    if (sequence && window && window.canvasId
+      && typeof sequence.getCanvasById === 'function') {
+      canvas = sequence.getCanvasById(window.canvasId);
+    }
+    return canvas.index || 0;
+   },
 );
 
 /**