mirador/src/components/WindowSideBarCanvasPanel.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { useId, useRef } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import ItemListIcon from '@mui/icons-material/ReorderSharp';
import TocIcon from '@mui/icons-material/SortSharp';
import ThumbnailListIcon from '@mui/icons-material/ViewListSharp';
import Typography from '@mui/material/Typography';
import ArrowForwardIcon from '@mui/icons-material/ArrowForwardSharp';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { useTranslation } from 'react-i18next';
import CompanionWindow from '../containers/CompanionWindow';
import SidebarIndexList from '../containers/SidebarIndexList';
import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfContents';
import { IIIFResourceLabel } from './IIIFResourceLabel';

const StyledBreak = styled('div')(() => ({
  flexBasis: '100%',
  height: 0,
}));

/**
 * a panel showing the canvases for a given manifest
 */
export function WindowSideBarCanvasPanel({
  collection = null,
  id,
  showMultipart,
  sequenceId = null,
  sequences = [],
  variant,
  showToc = false,
  updateSequence,
  updateVariant,
  windowId,
}) {
  const { t } = useTranslation();
  const containerRef = useRef();
  const tabPanelId = useId();

  /** */
  const handleSequenceChange = (event) => {
    updateSequence(event.target.value);
  };

  /** */
  const handleVariantChange = (event, value) => {
    updateVariant(value);
  };

  let listComponent;

  if (variant === 'tableOfContents') {
    listComponent = <SidebarIndexTableOfContents id={id} containerRef={containerRef} windowId={windowId} />;
  } else {
    listComponent = <SidebarIndexList id={id} containerRef={containerRef} windowId={windowId} />;
  }

  return (
    <CompanionWindow
      title={t('canvasIndex')}
      id={id}
      windowId={windowId}
      ref={containerRef}
      titleControls={
        <>
          {sequences && sequences.length > 1 && (
            <FormControl>
              <Select
                MenuProps={{
                  anchorOrigin: {
                    horizontal: 'left',
                    vertical: 'bottom',
                  },
                }}
                displayEmpty
                value={sequenceId}
                onChange={handleSequenceChange}
                name="sequenceId"
                sx={{
                  '&.MuiSelect-select': {
                    '&:focus': {
                      backgroundColor: 'background.paper',
                    },
                  },
                  backgroundColor: 'background.paper',
                }}
                data-testid="sequence-select"
              >
                {sequences.map((s, i) => (
                  <MenuItem value={s.id} key={s.id}>
                    <Typography variant="body2">
                      <IIIFResourceLabel resource={s} />
                    </Typography>
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}
          <StyledBreak />
          <Tabs value={variant} onChange={handleVariantChange} variant="fullWidth" indicatorColor="primary" textColor="primary">
            {showToc && (
              <Tooltip title={t('tableOfContentsList')} value="tableOfContents">
                <Tab
                  sx={{ minWidth: 'auto' }}
                  value="tableOfContents"
                  aria-label={t('tableOfContentsList')}
                  aria-controls={tabPanelId}
                  icon={<TocIcon style={{ transform: 'scale(-1, 1)' }} />}
                />
              </Tooltip>
            )}
            <Tooltip title={t('itemList')} value="item">
              <Tab
                sx={{ minWidth: 'auto' }}
                value="item"
                aria-label={t('itemList')}
                aria-controls={tabPanelId}
                icon={<ItemListIcon />}
              />
            </Tooltip>
            <Tooltip title={t('thumbnailList')} value="thumbnail">
              <Tab
                sx={{ minWidth: 'auto' }}
                value="thumbnail"
                aria-label={t('thumbnailList')}
                aria-controls={tabPanelId}
                icon={<ThumbnailListIcon />}
              />
            </Tooltip>
          </Tabs>
        </>
      }
    >
      <div id={tabPanelId}>
        {collection && (
          <Button fullWidth onClick={showMultipart} endIcon={<ArrowForwardIcon />}>
            <Typography sx={{ textTransform: 'none' }}>
              <IIIFResourceLabel resource={collection} />
            </Typography>
          </Button>
        )}
        {listComponent}
      </div>
    </CompanionWindow>
  );
}

WindowSideBarCanvasPanel.propTypes = {
  collection: PropTypes.object,
  id: PropTypes.string.isRequired,
  sequenceId: PropTypes.string,
  sequences: PropTypes.arrayOf(PropTypes.object),
  showMultipart: PropTypes.func.isRequired,
  showToc: PropTypes.bool,
  updateSequence: PropTypes.func.isRequired,
  updateVariant: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(['item', 'thumbnail', 'tableOfContents']).isRequired,
  windowId: PropTypes.string.isRequired,
};