Extract IIIFResourceLabel component for rendering the contextually appropriate label for a IIIF resource.

Author: cbeer

__tests__/src/components/GalleryViewThumbnail.test.js

@@ -73,6 +73,7 @@ describe('GalleryView', () => {
   describe('on-demand annotation fetching', () => {
     const canvas = {
       getHeight: () => 50,
+      getLabel: () => ({ getValue: () => 'label' }),
       getServices: vi.fn(),
       getThumbnail: vi.fn(),
       getType: vi.fn(),

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -13,8 +13,8 @@ function createWrapper(props) {
   let sequences;
 
   if (props.multipleSequences) {
-    sequences = [{ id: 'a', label: 'seq1' },
-      { id: 'b', label: 'seq2' }];
+    sequences = [{ getLabel: () => ({ getValue: () => undefined }), id: 'a', label: 'seq1' },
+      { getLabel: () => ({ getValue: () => undefined }), id: 'b', label: 'seq2' }];
   } else {
     sequences = Utils.parseManifest(manifestJson).getSequences();
   }

src/components/CanvasLayers.js

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 const StyledDragHandle = styled('div')(({ theme }) => ({
   alignItems: 'center',
@@ -40,15 +41,6 @@ const reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
-/** */
-function getUseableLabel(resource, index) {
-  return (resource
-    && resource.getLabel
-    && resource.getLabel().length > 0)
-    ? resource.getLabel().getValue()
-    : String(index + 1);
-}
-
 /** @private */
 function Layer({
   resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToTop,
@@ -78,7 +70,7 @@ function Layer({
           component="div"
           variant="body1"
         >
-          {getUseableLabel(resource, index)}
+          <IIIFResourceLabel resource={resource} fallback={index + 1} />
           <div>
             <MiradorMenuButton aria-label={t(layer.visibility ? 'layer_hide' : 'layer_show')} edge="start" size="small" onClick={() => { setLayerVisibility(resource.id, !layer.visibility); }}>
               { layer.visibility ? <VisibilityIcon /> : <VisibilityOffIcon /> }

src/components/CollectionDialog.js

@@ -21,6 +21,7 @@ import CollapsibleSection from '../containers/CollapsibleSection';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 import ManifestInfo from '../containers/ManifestInfo';
 import WorkspaceContext from '../contexts/WorkspaceContext';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(() => ({
   padding: (theme) => theme.spacing(1),
@@ -38,15 +39,6 @@ const StyledCollectionFilter = styled('div')(() => ({
   paddingTop: 0,
 }));
 
-/** */
-function getUseableLabel(resource, index) {
-  return (resource
-    && resource.getLabel
-    && resource.getLabel().length > 0)
-    ? resource.getLabel().getValue()
-    : String(index + 1);
-}
-
 /** */
 const Placeholder = ({ onClose, container }) => (
   <Dialog
@@ -149,7 +141,7 @@ export function CollectionDialog({
           { t(isMultipart ? 'multipartCollection' : 'collection') }
         </Typography>
         <Typography component="div" variant="h3">
-          {getUseableLabel(manifest)}
+          <IIIFResourceLabel resource={manifest} />
         </Typography>
       </DialogTitle>
       <StyledScrollIndicatedDialogContent>
@@ -158,7 +150,7 @@ export function CollectionDialog({
             startIcon={<ArrowBackIcon />}
             onClick={() => goToPreviousCollection()}
           >
-            {getUseableLabel(collection)}
+            <IIIFResourceLabel resource={collection} />
           </Button>
         )}
 
@@ -204,7 +196,7 @@ export function CollectionDialog({
                   onClick={() => { selectCollection(c); }}
                   variant="multiline"
                 >
-                  {getUseableLabel(c)}
+                  <IIIFResourceLabel resource={c} />
                 </MenuItem>
               ))
             }
@@ -219,7 +211,7 @@ export function CollectionDialog({
                   onClick={() => { selectManifest(m); }}
                   variant="multiline"
                 >
-                  {getUseableLabel(m)}
+                  <IIIFResourceLabel resource={m} />
                 </MenuItem>
               ))
             }

src/components/IIIFResourceLabel.js

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  getLocale,
+} from '../state/selectors';
+import LocaleContext from '../contexts/LocaleContext';
+
+/**
+ * Render the contextually appropriate label for the resource
+ */
+export function IIIFResourceLabel({ fallback, resource }) {
+  const contextLocale = useContext(LocaleContext);
+  const fallbackLocale = useSelector(state => getLocale(state, {}));
+
+  if (!resource) return fallback;
+
+  const label = resource.getLabel();
+
+  if (!label) return fallback;
+
+  return label.getValue(contextLocale || fallbackLocale || '') ?? (fallback || resource.id);
+}
+
+IIIFResourceLabel.propTypes = {
+  fallback: PropTypes.string,
+  resource: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};

src/components/IIIFThumbnail.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { useInView } from 'react-intersection-observer';
 import getThumbnail from '../lib/ThumbnailFactory';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 const Root = styled('div', { name: 'IIIFThumbnail', slot: 'root' })({});
 
@@ -129,14 +130,6 @@ LazyLoadedImage.propTypes = {
   }),
   thumbnailsConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
-/** */
-function getUseableLabel(resource, index) {
-  return (resource
-    && resource.getLabel
-    && resource.getLabel().length > 0)
-    ? resource.getLabel().getValue()
-    : String(index + 1);
-}
 
 const defaultPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMMDQmtBwADgwF/Op8FmAAAAABJRU5ErkJggg==';
 
@@ -173,7 +166,7 @@ export function IIIFThumbnail({
 
       { labelled && (
         <Label ownerState={ownerState}>
-          {label || getUseableLabel(resource)}
+          {label || <IIIFResourceLabel resource={resource} />}
         </Label>
       )}
       {children}

src/components/WindowSideBarCanvasPanel.js

@@ -17,21 +17,13 @@ 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,
 }));
 
-/** */
-function getUseableLabel(resource, index) {
-  return (resource
-    && resource.getLabel
-    && resource.getLabel().length > 0)
-    ? resource.getLabel().getValue()
-    : resource.id;
-}
-
 /**
  * a panel showing the canvases for a given manifest
  */
@@ -113,7 +105,7 @@ export function WindowSideBarCanvasPanel({
                   }}
                   data-testid="sequence-select"
                 >
-                  { sequences.map((s, i) => <MenuItem value={s.id} key={s.id}><Typography variant="body2">{ getUseableLabel(s, i) }</Typography></MenuItem>) }
+                  { sequences.map((s, i) => <MenuItem value={s.id} key={s.id}><Typography variant="body2"><IIIFResourceLabel resource={s} /></Typography></MenuItem>) }
                 </Select>
               </FormControl>
             )
@@ -143,7 +135,7 @@ export function WindowSideBarCanvasPanel({
             endIcon={<ArrowForwardIcon />}
           >
             <Typography sx={{ textTransform: 'none' }}>
-              {getUseableLabel(collection)}
+              <IIIFResourceLabel resource={collection} />
             </Typography>
           </Button>
         )}

src/components/WindowSideBarCollectionPanel.js

@@ -11,15 +11,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpwardSharp';
 import { useTranslation } from 'react-i18next';
 import CompanionWindow from '../containers/CompanionWindow';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
-
-/** */
-function getUseableLabel(resource, index) {
-  return (resource
-    && resource.getLabel
-    && resource.getLabel().length > 0)
-    ? resource.getLabel().getValue()
-    : resource.id;
-}
+import { IIIFResourceLabel } from './IIIFResourceLabel';
 
 /** */
 function Item({
@@ -46,7 +38,7 @@ function Item({
           />
         </ListItemIcon>
       )}
-      <ListItemText>{getUseableLabel(manifest)}</ListItemText>
+      <ListItemText><IIIFResourceLabel resource={manifest} /></ListItemText>
     </MenuItem>
   );
 }
@@ -105,13 +97,13 @@ export function WindowSideBarCollectionPanel({
                   <ArrowUpwardIcon />
                 </ListItemIcon>
                 <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
-                  {getUseableLabel(parentCollection)}
+                  <IIIFResourceLabel resource={parentCollection} />
                 </ListItemText>
               </ListItem>
             </List>
           )}
           <Typography variant="h6">
-            { collection && getUseableLabel(collection)}
+            { collection && <IIIFResourceLabel resource={collection} />}
             { isFetching && <Skeleton variant="text" />}
           </Typography>
         </>

src/lib/MiradorCanvas.js

@@ -177,9 +177,9 @@ export default class MiradorCanvas {
   /**
    * Get the canvas label
    */
-  getLabel() {
+  getLabel(locale = undefined) {
     return this.canvas.getLabel().length > 0
-      ? this.canvas.getLabel().getValue()
+      ? this.canvas.getLabel().getValue(locale)
       : String(this.canvas.index + 1);
   }
 }

src/state/selectors/manifests.js

@@ -20,7 +20,7 @@ function createManifestoInstance(json, locale) {
 }
 
 /** */
-const getLocale = createSelector(
+export const getLocale = createSelector(
   [
     getCompanionWindow,
     getConfig,