Get multi-sequences to work for v3 ranges/seqs

- Update sequences and canvases selectors to get multi-sequences to work for v3 top-level ranges with behavior sequence, check if full canvases exist in each sequence
- Add integration test for v3 multi sequences

__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' });
+  });
+});

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 { v3 } from 'uuid';
 import {
   getManifestoInstance,
 } from './manifests';
@@ -16,6 +17,20 @@ 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) => {
+          const updatedSequence = sequence;
+          updatedSequence.items = sequence.canvases.map(canvasId => {
+            const fullCanvas = canvases.find(c => c.id === canvasId);
+            return fullCanvas;
+          });
+          return updatedSequence;
+        });
+      }
     }
 
     const sequences = [].concat(
@@ -37,10 +52,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 +71,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;
+  },
 );
 
 /**