Add multi-seq select option to display..

... all items including ToC for v3, other changes
- Display an option in multi seq select bar that displays all the canvases in v3 sequence along with ToC
- Constrain the size of multi seqs select bar
- Change sequences test to expect uuid instead of undefined id for first v3 sequence
- Add checkes in getSequences selector before setting id for first v3 sequence which has undefined id initially

__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/sequences.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
 import { TreeNode } from 'manifesto.js/dist-esmodule/TreeNode';
-import { v3 } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   getManifestoInstance,
 } from './manifests';
@@ -23,19 +23,29 @@ export const getSequences = createSelector(
         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;
+          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,
     );