Merge branch 'main' into bug_viewer_crash

Author: lutzhelm

__tests__/fixtures/config/export.example.json

@@ -179,7 +179,8 @@
     "thumbnailNavigation": {
       "defaultPosition": "far-bottom",
       "height": 150,
-      "width": 100
+      "width": 100,
+      "showThumbnailLabels": true
     },
     "workspace": {
       "type": "mosaic"

__tests__/src/components/ThumbnailCanvasGrouping.test.js

@@ -18,6 +18,7 @@ function createWrapper(props) {
         top: 0,
         width: 100,
       }}
+      showThumbnailLabels
       {...props}
     />,
   );

__tests__/src/selectors/manifests.test.js

@@ -509,7 +509,7 @@ describe('getManifestSearchService', () => {
   });
 
   it('supports v1 of the search spec', () => {
-    const v1 = JSON.parse(JSON.stringify(manifestFixtureFg165hz3589));
+    const v1 = structuredClone(manifestFixtureFg165hz3589);
     v1.service[0].profile = 'http://iiif.io/api/search/1/search';
     const state = { manifests: { x: { json: v1 } } };
     expect(getManifestSearchService(state, { manifestId: 'x' }).id).toEqual('https://contentsearch.stanford.edu/fg165hz3589/search');
@@ -528,7 +528,7 @@ describe('getManifestAutocompleteService', () => {
   });
 
   it('supports v1 of the search spec', () => {
-    const v1 = JSON.parse(JSON.stringify(manifestFixtureFg165hz3589));
+    const v1 = structuredClone(manifestFixtureFg165hz3589);
     v1.service[0].profile = 'http://iiif.io/api/search/1/search';
     v1.service[0].service.profile = 'http://iiif.io/api/search/1/autocomplete';
     const state = { manifests: { x: { json: v1 } } };

src/components/ThumbnailCanvasGrouping.js

@@ -39,7 +39,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
   /** */
   render() {
     const {
-      index, style, data, currentCanvasId,
+      index, style, data, currentCanvasId, showThumbnailLabels,
     } = this.props;
     const {
       canvasGroupings, position, height,
@@ -87,7 +87,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
             <IIIFThumbnail
               key={canvas.id}
               resource={canvas}
-              labelled
+              labelled={showThumbnailLabels}
               maxHeight={(position === 'far-right') ? style.height - (1.5 * SPACING) : height - (1.5 * SPACING)}
               variant="inside"
             />
@@ -103,5 +103,6 @@ ThumbnailCanvasGrouping.propTypes = {
   data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   index: PropTypes.number.isRequired,
   setCanvas: PropTypes.func.isRequired,
+  showThumbnailLabels: PropTypes.bool.isRequired,
   style: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };

src/components/WorkspaceAdd.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
@@ -44,6 +44,14 @@ export function WorkspaceAdd({
   const { t } = useTranslation();
   const [addResourcesOpen, setAddResourcesVisibility] = useState(false);
   const ref = useRef();
+  const [refWidth, setRefWidth] = useState('100%');
+
+  /** */
+  const updateRefWidth = () => {
+    if (ref.current) {
+      setRefWidth(ref.current.offsetWidth);
+    }
+  };
 
   /** */
   const handleDrop = ({ manifestId, manifestJson }, props, monitor) => {
@@ -84,9 +92,19 @@ export function WorkspaceAdd({
     addResource, catalog, setWorkspaceAddVisibility, t, ...rest,
   };
 
+  useEffect(() => {
+    window.addEventListener('resize', updateRefWidth);
+
+    updateRefWidth();
+
+    return () => {
+      window.removeEventListener('resize', updateRefWidth);
+    };
+  }, []);
+
   return (
     <IIIFDropTarget onDrop={handleDrop}>
-      <StyledWorkspaceAdd ref={ref} className={classNames(ns('workspace-add'))}>
+      <StyledWorkspaceAdd className={classNames(ns('workspace-add'))} ref={ref}>
         {catalog.length < 1 ? (
           <Grid
             alignItems="center"
@@ -138,10 +156,8 @@ export function WorkspaceAdd({
           sx={theme => ({
             '.MuiDrawer-paper': {
               borderTop: '0',
-              left: '0',
-              [theme.breakpoints.up('sm')]: {
-                left: '65px',
-              },
+              left: 'unset',
+              width: refWidth,
             },
             ...(!addResourcesOpen && {
               display: 'none',

src/config/settings.js

@@ -515,15 +515,16 @@ export default {
     defaultPosition: 'off', // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
     displaySettings: true, // Display the settings for this in WindowTopMenu
     height: 130, // height of entire ThumbnailNavigation area when position is "far-bottom"
+    showThumbnailLabels: true, // Configure if thumbnail labels should be displayed
     width: 100, // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
   },
   workspace: {
-    draggingEnabled: true,
     allowNewWindows: true,
-    id: uuid(),
-    isWorkspaceAddVisible: false, // Catalog/Workspace add window feature visible by default
+    draggingEnabled: true,
     exposeModeOn: false, // unused?
     height: 5000, // height of the elastic mode's virtual canvas
+    id: uuid(),
+    isWorkspaceAddVisible: false, // Catalog/Workspace add window feature visible by default
     showZoomControls: true, // Configure if zoom controls should be displayed by default
     type: 'mosaic', // Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used.
     viewportPosition: { // center coordinates for the elastic mode workspace

src/containers/ThumbnailCanvasGrouping.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getCurrentCanvas } from '../state/selectors';
+import { getCurrentCanvas, getConfig } from '../state/selectors';
 import { ThumbnailCanvasGrouping } from '../components/ThumbnailCanvasGrouping';
 
 /**
@@ -21,6 +21,7 @@ const mapDispatchToProps = (dispatch, { data }) => ({
  */
 const mapStateToProps = (state, { data }) => ({
   currentCanvasId: (getCurrentCanvas(state, { windowId: data.windowId }) || {}).id,
+  showThumbnailLabels: getConfig(state).thumbnailNavigation.showThumbnailLabels,
 });
 
 const enhance = compose(

src/state/selectors/manifests.js

@@ -9,8 +9,8 @@ import { getConfig } from './config';
 /** */
 function createManifestoInstance(json, locale) {
   if (!json) return undefined;
-  // Use JSON stringify/parse to create a deep copy and prevent Manifesto from mutating the json
-  const manifestoObject = Utils.parseManifest(JSON.parse(JSON.stringify(json)), locale ? { locale } : undefined);
+  // Use structuredClone to create a deep copy and prevent Manifesto from mutating the json
+  const manifestoObject = Utils.parseManifest(structuredClone(json), locale ? { locale } : undefined);
   if (manifestoObject) {
     // Local patching of Manifesto so that when its a Collection, it behaves similarly
     if (typeof manifestoObject.getSequences != 'function') {