Get multi-sequences to work for v3 ranges/seqs

__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: 'white',
+    },
     '&:focus': {
       backgroundColor: theme.palette.background.paper,
     },
   },
   selectEmpty: {
+    '& .MuiSelect-icon': {
+      backgroundColor: 'white',
+    },
     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/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;
   },
 );
 
@@ -41,11 +49,24 @@ export const getCurrentCanvas = createSelector(
     getWindow,
   ],
   (sequence, window) => {
+    let canvas;
     if (!sequence || !window) return undefined;
 
-    if (!window.canvasId) return sequence.getCanvasByIndex(0);
+    if (!window.canvasId && (typeof sequence.getCanvasByIndex == 'function')) {
+      canvas = sequence.getCanvasByIndex(0);
+    } else if (!window.canvasId) {
+      const { items } = sequence;
+      const [firstCanvas] = items;
+      canvas = firstCanvas;
+    }
+
+    if (typeof sequence.getCanvasById == 'function') {
+      canvas = sequence.getCanvasById(window.canvasId);
+    } else if (sequence.items) {
+      canvas = sequence.items.filter(c => c.id === window.canvasId) || [];
+    }
 
-    return sequence.getCanvasById(window.canvasId);
+    return canvas;
   },
 );
 

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,35 @@ export const getSequences = createSelector(
 
     if (v2TopRanges.length === 0 && topRangesOrRoot.length === 1) {
       v3RangeSequences = topRangesOrRoot[0].getRanges().filter(r => r.getBehavior() === 'sequence');
+
+      if (v3RangeSequences.length > 0 && manifest.items && manifest.items.length > 0
+          && manifest.items[0].items && manifest.items[0].items.length > 0) {
+        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
+    const manifestSequences = manifest.getSequences();
+    if (v3RangeSequences && manifestSequences && manifestSequences.length > 0
+       && !manifestSequences[0].id) {
+      manifestSequences[0].id = uuid();
     }
 
     const sequences = [].concat(
       // v2: multi-sequence manifests, or v3: items
-      manifest.getSequences(),
+      manifestSequences,
       // v3: all top-level ranges with behavior=sequence
       v3RangeSequences,
     );
@@ -37,10 +62,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 +81,18 @@ 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);
+    } else {
+      canvas = {};
+    }
+
+    return canvas.index || 0;
+  },
 );
 
 /**