Merge pull request #3304 from MImranAsghar/multi-seqs-display

Multi seqs display

__tests__/fixtures/version-2/multipleSequences.json

+{
+    "@context": "http://iiif.io/api/presentation/2/context.json",
+    "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json",
+    "@type": "sc:Manifest",
+    "label": "Urn\u00e4sch, Gemeindearchiv Urn\u00e4sch, Fragment",
+    "metadata": [
+        {
+            "label": "Location",
+            "value": "Urn\u00e4sch"
+        }
+    ],
+    "description": [
+        {
+            "@value": "These are two well preserved fragments of a Psalterium iuxta Hebraeos, which were probably written in the 10th century at the monastery of St. Gall, following the model of Cod. Sang. 19. In 1963 both fragments were detached from a messenger bag; they are held in the town archive of Urn\u00e4sch (Appenzell Ausserrhoden).",
+            "@language": "en"
+        }
+    ],
+    "license": "http://creativecommons.org/licenses/by-nc/4.0/",
+    "attribution": "e-codices - Virtual Manuscript Library of Switzerland",
+    "logo": "https://www.e-codices.ch/img/logo-for-iiif-manifest.png",
+    "service": [
+        {
+            "@context": "https://www.w3.org/ns/webmention",
+            "@id": "https://www.e-codices.unifr.ch/webmention/receive",
+            "profile": "https://www.w3.org/ns/webmention",
+            "label": "e-codices Webmention Service"
+        }
+    ],
+    "related": "https://www.e-codices.ch/en/list/one/gau/Fragment",
+    "within": "https://www.e-codices.ch/en/list/gau",
+    "seeAlso": [
+        {
+            "@id": "https://www.e-codices.unifr.ch/xml/tei_published/gau-Fragment_Solovey.xml",
+            "@format": "application/tei+xml"
+        }
+    ],
+    "sequences": [
+        {
+            "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/sequence/Sequence-1740.json",
+            "@type": "sc:Sequence",
+            "label": [
+                {
+                    "@value": "Standard",
+                    "@language": "de"
+                }
+            ],
+            "canvases": [
+                {
+                    "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/canvas/gau-Fragment_frag001a.json",
+                    "@type": "sc:Canvas",
+                    "label": "fragm1a",
+                    "height": 6132,
+                    "width": 8176,
+                    "images": [
+                        {
+                            "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/annotation/gau-Fragment_frag001a.json",
+                            "@type": "oa:Annotation",
+                            "motivation": "sc:painting",
+                            "on": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/canvas/gau-Fragment_frag001a.json",
+                            "resource": {
+                                "@id": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg",
+                                "@type": "dctypes:Image",
+                                "format": "image/jpeg",
+                                "height": 6132,
+                                "width": 8176,
+                                "service": {
+                                    "@context": "http://iiif.io/api/image/2/context.json",
+                                    "@id": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2",
+                                    "profile": "http://iiif.io/api/image/2/level2.json"
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/sequence/Sequence-1741.json",
+            "@type": "sc:Sequence",
+            "label": [
+                {
+                    "@value": "Lesefreundliche Sequenz",
+                    "@language": "de"
+                }
+            ],
+            "canvases": [
+                {
+                    "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/canvas/gau-Fragment_frag001a_1r.json",
+                    "@type": "sc:Canvas",
+                    "label": "fragm1a_1r",
+                    "height": 8176,
+                    "width": 6132,
+                    "images": [
+                        {
+                            "@id": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/annotation/gau-Fragment_frag001a_1r.json",
+                            "@type": "oa:Annotation",
+                            "motivation": "sc:painting",
+                            "on": "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/canvas/gau-Fragment_frag001a_1r.json",
+                            "resource": {
+                                "@id": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a_1r.jp2/full/full/0/default/jpg",
+                                "@type": "dctypes:Image",
+                                "format": "image/jpeg",
+                                "height": 8176,
+                                "width": 6132,
+                                "service": {
+                                    "@context": "http://iiif.io/api/image/2/context.json",
+                                    "@id": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a_1r.jp2",
+                                    "profile": "http://iiif.io/api/image/2/level2.json"
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "structures": []
+}
\ No newline at end of file

__tests__/integration/mirador/sequence_switching.test.js

+/* global miradorInstance */
+
+describe('Window Sidebar Sequence Dropdown', () => {
+  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-2/multipleSequences.json');
+    await expect(page).toClick('#fetchBtn');
+
+    await expect(page).toMatchElement('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-2/multipleSequences.json"] button');
+    await expect(page).toClick('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-2/multipleSequences.json"] button');
+  });
+
+  it('allows the user to switch the sequence', 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-2/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('#sequence-1');
+    await expect(page).toClick('#sequence-1');
+    await expect(page).toMatchElement('p', { text: 'fragm1a_1r' });
+  });
+});

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -12,6 +12,14 @@ import manifestJson from '../../fixtures/version-2/019.json';
  */
 function createWrapper(props) {
   const canvases = Utils.parseManifest(manifestJson).getSequences()[0].getCanvases();
+  let sequences;
+
+  if (props.multipleSequences) {
+    sequences = [{ id: 'a', label: 'seq1' },
+      { id: 'b', label: 'seq2' }];
+  } else {
+    sequences = Utils.parseManifest(manifestJson).getSequences();
+  }
 
   return shallow(
     <WindowSideBarCanvasPanel
@@ -24,6 +32,7 @@ function createWrapper(props) {
       config={{ canvasNavigation: { height: 100 } }}
       updateVariant={() => {}}
       selectedCanvases={[canvases[1]]}
+      sequences={sequences}
       variant="item"
       {...props}
     />,
@@ -32,23 +41,37 @@ function createWrapper(props) {
 
 describe('WindowSideBarCanvasPanel', () => {
   it('renders SidebarIndexList', () => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapper({ multipleSequences: false });
     expect(wrapper.find(CompanionWindow).props().title).toBe('canvasIndex');
     expect(wrapper.find(SidebarIndexList).length).toBe(1);
   });
 
   it('without a treeStructure will not render the table of contents tab', () => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapper({ multipleSequences: false });
     expect(
       compact(wrapper.find(CompanionWindow).props().titleControls.props.children)
         .length,
     ).toBe(2);
   });
 
+  it('renders form control when multiple sequences present', () => {
+    const wrapper = createWrapper({ multipleSequences: true });
+
+    expect(wrapper.find(CompanionWindow).props().titleControls.props.children[0]
+      .type.displayName.includes('FormControl')).toBe(true);
+  });
+
+  it('renders correct number of sequences in form control', () => {
+    const wrapper = createWrapper({ multipleSequences: true });
+
+    expect(wrapper.find(CompanionWindow).props().titleControls.props.children[0]
+      .props.children.props.children.length).toBe(2);
+  });
+
   describe('handleVariantChange', () => {
     it('updates the variant', () => {
       const updateVariant = jest.fn();
-      const wrapper = createWrapper({ updateVariant });
+      const wrapper = createWrapper({ multipleSequences: false, updateVariant });
       wrapper.instance().handleVariantChange({}, 'item');
       expect(updateVariant).toHaveBeenCalledWith('item');
     });

src/components/WindowSideBarCanvasPanel.js

@@ -10,6 +10,9 @@ import TocIcon from '@material-ui/icons/SortSharp';
 import ThumbnailListIcon from '@material-ui/icons/ViewListSharp';
 import Typography from '@material-ui/core/Typography';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForwardSharp';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
 import CompanionWindow from '../containers/CompanionWindow';
 import SidebarIndexList from '../containers/SidebarIndexList';
 import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfContents';
@@ -21,8 +24,13 @@ export class WindowSideBarCanvasPanel extends Component {
   /** */
   constructor(props) {
     super(props);
+    this.handleSequenceChange = this.handleSequenceChange.bind(this);
     this.handleVariantChange = this.handleVariantChange.bind(this);
 
+    this.state = {
+      sequenceSelectionOpened: false,
+    };
+
     this.containerRef = React.createRef();
   }
 
@@ -35,6 +43,18 @@ export class WindowSideBarCanvasPanel extends Component {
       : resource.id;
   }
 
+  /** @private */
+  async handleSequenceChange(event) {
+    const { setCanvas, updateSequence } = this.props;
+    await updateSequence(event.target.value);
+
+    const { windowId, canvases } = this.props;
+    const firstCanvasId = canvases[0].id;
+    setCanvas(windowId, firstCanvasId);
+
+    this.setState({ sequenceSelectionOpened: false });
+  }
+
   /** @private */
   handleVariantChange(event, value) {
     const { updateVariant } = this.props;
@@ -47,16 +67,21 @@ export class WindowSideBarCanvasPanel extends Component {
    */
   render() {
     const {
+      canvases,
       classes,
       collection,
       id,
       showMultipart,
+      sequenceId,
+      sequences,
       t,
+      toggleDraggingEnabled,
       variant,
       showToc,
       windowId,
     } = this.props;
 
+    const { sequenceSelectionOpened } = this.state;
     let listComponent;
 
     if (variant === 'tableOfContents') {
@@ -84,6 +109,40 @@ export class WindowSideBarCanvasPanel extends Component {
           id={id}
           windowId={windowId}
           titleControls={(
+            <>
+              {
+                sequences && sequences.length > 1 && (
+                  <FormControl>
+                    <Select
+                      MenuProps={{
+                        anchorOrigin: {
+                          horizontal: 'left',
+                          vertical: 'bottom',
+                        },
+                        getContentAnchorEl: null,
+                      }}
+                      displayEmpty
+                      value={sequenceId}
+                      onChange={this.handleSequenceChange}
+                      name="sequenceId"
+                      open={sequenceSelectionOpened}
+                      onOpen={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: true });
+                      }}
+                      onClose={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: false });
+                      }}
+                      classes={{ select: classes.select }}
+                      className={classes.selectEmpty}
+                    >
+                      { sequences.map((s, i) => <MenuItem id={`sequence-${i}`} value={s.id} key={s.id}><Typography variant="body2">{ WindowSideBarCanvasPanel.getUseableLabel(s, i) }</Typography></MenuItem>) }
+                    </Select>
+                  </FormControl>
+                )
+              }
+              <div className={classes.break} />
               <Tabs
                 value={variant}
                 onChange={this.handleVariantChange}
@@ -97,6 +156,7 @@ export class WindowSideBarCanvasPanel extends Component {
                 <Tooltip title={t('itemList')} value="item"><Tab className={classes.variantTab} value="item" aria-label={t('itemList')} aria-controls={`tab-panel-${id}`} icon={<ItemListIcon />} /></Tooltip>
                 <Tooltip title={t('thumbnailList')} value="thumbnail"><Tab className={classes.variantTab} value="thumbnail" aria-label={t('thumbnailList')} aria-controls={`tab-panel-${id}`} icon={<ThumbnailListIcon />} /></Tooltip>
               </Tabs>
+            </>
           )}
         >
           <div id={`tab-panel-${id}`}>
@@ -120,18 +180,27 @@ export class WindowSideBarCanvasPanel extends Component {
 }
 
 WindowSideBarCanvasPanel.propTypes = {
+  canvases: PropTypes.arrayOf(PropTypes.object),
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   id: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string,
+  sequences: PropTypes.arrayOf(PropTypes.object),
+  setCanvas: PropTypes.func.isRequired,
   showMultipart: PropTypes.func.isRequired,
   showToc: PropTypes.bool,
   t: PropTypes.func.isRequired,
+  toggleDraggingEnabled: PropTypes.func.isRequired,
+  updateSequence: PropTypes.func.isRequired,
   updateVariant: PropTypes.func.isRequired,
   variant: PropTypes.oneOf(['item', 'thumbnail', 'tableOfContents']).isRequired,
   windowId: PropTypes.string.isRequired,
 };
 
 WindowSideBarCanvasPanel.defaultProps = {
+  canvases: [],
   collection: null,
+  sequenceId: null,
+  sequences: [],
   showToc: false,
 };

src/containers/WindowSideBarCanvasPanel.js

@@ -6,11 +6,14 @@ import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { WindowSideBarCanvasPanel } from '../components/WindowSideBarCanvasPanel';
 import {
+  getCanvases,
   getCompanionWindow,
   getDefaultSidebarVariant,
   getSequenceTreeStructure,
   getWindow,
   getManifestoInstance,
+  getSequence,
+  getSequences,
 } from '../state/selectors';
 
 /**
@@ -24,11 +27,13 @@ const mapStateToProps = (state, { id, windowId }) => {
   const collectionPath = window.collectionPath || [];
   const collectionId = collectionPath && collectionPath[collectionPath.length - 1];
   return {
+    canvases: getCanvases(state, { windowId }),
     collection: collectionId && getManifestoInstance(state, { manifestId: collectionId }),
     config,
+    sequenceId: getSequence(state, { windowId }).id,
+    sequences: getSequences(state, { windowId }),
     showToc: treeStructure && treeStructure.nodes && treeStructure.nodes.length > 0,
-    variant: companionWindow.variant
-      || getDefaultSidebarVariant(state, { windowId }),
+    variant: companionWindow.variant || getDefaultSidebarVariant(state, { windowId }),
   };
 };
 
@@ -43,6 +48,9 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({
     actions.addOrUpdateCompanionWindow(windowId, { content: 'collection', position: 'right' }),
   ),
   toggleDraggingEnabled: () => dispatch(actions.toggleDraggingEnabled()),
+  updateSequence: sequenceId => dispatch(
+    actions.updateWindow(windowId, { sequenceId }),
+  ),
   updateVariant: variant => dispatch(
     actions.updateCompanionWindow(windowId, id, { variant }),
   ),
@@ -53,6 +61,10 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({
  * @param theme
  */
 const styles = theme => ({
+  break: {
+    flexBasis: '100%',
+    height: 0,
+  },
   collectionNavigationButton: {
     textTransform: 'none',
   },