COLUMBIA: SelectCollectionFolders uses window state instead of local …

…state

- configurable collection nav button in top bar
- clean up unused imports

__tests__/integration/mirador/cul.html

@@ -17,10 +17,6 @@
          transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
        },
        windows: [
-       {
-         manifestId: 'https://dlc-staging.library.columbia.edu/iiif/3/presentation/10.7916/nxfz-7b23/collection',
-         thumbnailNavigationPosition: 'far-bottom',
-       },
        {
          manifestId: 'https://dlc-staging.library.columbia.edu/iiif/3/presentation/10.7916/72a8-rn85/collection',
          thumbnailNavigationPosition: 'far-bottom',
@@ -41,6 +37,9 @@
          { manifestId: 'https://dlc-staging.library.columbia.edu/iiif/3/presentation/10.7916/d8-346v-m088/manifest', provider: 'Columbia community AV canvas examples'},
          { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843', provider: 'Other Organization' },
        ],
+       window: {
+        allowTopCollectionButton: true,
+       }
      },
      [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin]).concat([...Mirador.culPlugins.hintingSideBar]).concat([...Mirador.culPlugins.viewerNavigation]).concat([...Mirador.culPlugins.collectionFoldersPlugin])
      );

src/culPlugins/mirador-hinting-sidebar/components/HintingTopBar.js

@@ -6,6 +6,7 @@ import CloseIcon from '@mui/icons-material/CloseSharp';
 import Toolbar from '@mui/material/Toolbar';
 import AppBar from '@mui/material/AppBar';
 import classNames from 'classnames';
+import { TopCollectionButton } from './TopCollectionButton';
 import { WindowTopBarHeavyTitle } from './WindowTopBarHeavyTitle';
 import WindowTopMenuButton from '../../../containers/WindowTopMenuButton';
 import WindowTopBarPluginArea from '../../../containers/WindowTopBarPluginArea';
@@ -40,7 +41,7 @@ export const HintingTopBar = (props) => {
     removeWindow, windowId, toggleWindowSideBar, t,
     maximizeWindow, maximized, minimizeWindow, allowClose, allowMaximize,
     focusWindow, allowFullscreen, allowTopMenuButton, allowWindowSideBar,
-    component, hasOpenSideBar, hintSideBar,
+    component, hasOpenSideBar, allowTopCollectionButton, hintSideBar,
   } = props;
 
   const BadgeProps = {
@@ -79,6 +80,9 @@ export const HintingTopBar = (props) => {
         )}
         <WindowTopBarPluginArea windowId={windowId} />
         <WindowTopBarPluginMenu windowId={windowId} />
+        {allowTopCollectionButton && (
+          <TopCollectionButton className={ns('window-menu-btn')} color={hintingButtonColor} windowId={windowId} />
+        )}
         {allowMaximize && (
           <MiradorMenuButton
             aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
@@ -109,6 +113,7 @@ HintingTopBar.propTypes = {
   allowClose: PropTypes.bool,
   allowFullscreen: PropTypes.bool,
   allowMaximize: PropTypes.bool,
+  allowTopCollectionButton: PropTypes.bool,
   allowTopMenuButton: PropTypes.bool,
   allowWindowSideBar: PropTypes.bool,
   component: PropTypes.elementType,
@@ -128,6 +133,7 @@ HintingTopBar.defaultProps = {
   allowClose: true,
   allowFullscreen: false,
   allowMaximize: true,
+  allowTopCollectionButton: false,
   allowTopMenuButton: true,
   allowWindowSideBar: true,
   component: 'nav',

src/culPlugins/mirador-hinting-sidebar/components/TopCollectionButton.js

@@ -0,0 +1,50 @@
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { useDispatch, useSelector } from 'react-redux';
+import { Utils } from 'manifesto.js';
+import { getCollectionPath } from '../../state/selectors';
+import { getManifest, getManifestoInstance } from '../../../state/selectors';
+import { updateWindow } from '../../../state/actions';
+import MiradorMenuButton from '../../../containers/MiradorMenuButton';
+import ns from '../../../config/css-ns';
+
+/** render a topbar button that returns to a view of the containing collection */
+export const TopCollectionButton = (props) => {
+  const { className, color, windowId } = props;
+  const collectionPath = useSelector((state) => getCollectionPath(state, { windowId }));
+
+  /** compare o(ld) manifest and n(ew) manifest to see if difference should update state */
+  const equalManifest = (o, n) => {
+    if (!o && !n) return true;
+    if (!o || !n) return false;
+    if (o?.id !== n?.id) return false;
+    if (o?.isFetching !== n?.isFetching) return false;
+    return true;
+  };
+
+  const manifest = useSelector(state => getManifest(state, { windowId }), equalManifest);
+  const dispatch = useDispatch();
+
+  const manifestoObject = manifest ? Utils.parseManifest(manifest.json, undefined) : false;
+  if (!manifestoObject || manifestoObject.isCollection()) return false;
+
+  const disableButton = !collectionPath?.at(0);
+
+  /** onclick to update collection data on window and return to collection view */
+  const clickHandler = () => {
+    if (!manifestoObject || disableButton) return;
+    const update = { collectionPath: collectionPath.slice(0, -1), manifestId: collectionPath.at(-1) };
+    dispatch(updateWindow(windowId, update));
+  };
+
+  return (
+    <MiradorMenuButton
+      aria-label="View Collection"
+      className={className || ns('window-menu-btn')}
+      color={color}
+      disabled={disableButton}
+      onClick={clickHandler}
+    >
+      <AccountTreeIcon />
+    </MiradorMenuButton>
+  );
+};

src/culPlugins/mirador-hinting-sidebar/index.js

@@ -1,6 +1,6 @@
 import { updateWindow } from '../../state/actions';
 import {
-  getConfig, getContainerId,
+  getConfig, getContainerId, getWindowConfig,
 } from '../../state/selectors';
 import {
   getCanvasesContentTypes, getCanvasSeeAlso,
@@ -27,14 +27,18 @@ export default [
         return dispatch(updateWindow(windowId, { openPanel }));
       },
     }),
-    mapStateToProps: (state, { windowId }) => ({
-      canvasContentTypes: getCanvasesContentTypes(state, { windowId }),
-      containerId: getContainerId(state),
-      hasOpenSideBar: getHasOpenSideBar(state, { windowId }),
-      hintSideBar: getHintSideBar(state, { windowId }),
-      translations: getConfig(state).translations,
-      windowId,
-    }),
+    mapStateToProps: (state, { windowId }) => {
+      const windowConfig = getWindowConfig(state, { windowId });
+      return {
+        allowTopCollectionButton: windowConfig.allowTopCollectionButton,
+        canvasContentTypes: getCanvasesContentTypes(state, { windowId }),
+        containerId: getContainerId(state),
+        hasOpenSideBar: getHasOpenSideBar(state, { windowId }),
+        hintSideBar: getHintSideBar(state, { windowId }),
+        translations: getConfig(state).translations,
+        windowId,
+      };
+    },
     mode: 'wrap',
     name: 'HintingTopBar',
     target: 'WindowTopBar',

src/culPlugins/mirador-selectCollectionFolders/components/CollectionListItem.js

@@ -1,4 +1,4 @@
-import { Component, useEffect, useState } from 'react';
+import { Component, useEffect } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import Folder from '@mui/icons-material/Folder';
@@ -9,7 +9,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Skeleton from '@mui/material/Skeleton';
 import { Img } from 'react-image';
-import { getManifest, getManifestoInstance } from '../../../state/selectors';
+import { getManifest } from '../../../state/selectors';
 import IIIFThumbnail from '../../../containers/IIIFThumbnail';
 import ManifestListItemError from '../../../containers/ManifestListItemError';
 import ns from '../../../config/css-ns';

src/culPlugins/mirador-selectCollectionFolders/components/SelectCollectionFolders.js

@@ -1,5 +1,5 @@
-import { Component, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { Component, useEffect } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBackSharp';
@@ -10,6 +10,7 @@ import { CollectionListHeaders } from './CollectionListHeaders';
 import { CollectionListItem } from './CollectionListItem';
 import { CollectionDialog } from '../../../components/CollectionDialog';
 import { collectionDataEqual, getCollectionData } from '../state/selectors';
+import { getManifest } from '../../../state/selectors';
 
 const Root = styled(Paper, { name: 'GalleryView', slot: 'root' })(({ theme }) => ({
   alignItems: 'flex-start',
@@ -25,72 +26,38 @@ const Root = styled(Paper, { name: 'GalleryView', slot: 'root' })(({ theme }) =>
 /** SelectCollections slot that displays navigable icons of folders and thumbnails */
 export const SelectCollectionFolders = (props) => {
   const {
-    collectionId: originalCollectionId,
+    collectionId,
     fetchManifest,
-    getCollection,
     getCollectionManifesto,
     updateWindow,
     windowId,
   } = props;
 
   const windowCollectionData = useSelector((state) => getCollectionData(state, { windowId }), collectionDataEqual);
+  const { collectionPath } = windowCollectionData;
 
-  const [collectionData, setCollectionData] = useState({
-    collectionId: originalCollectionId,
-    collectionPath: windowCollectionData.collectionPath,
-    collectionResource: getCollection(originalCollectionId),
-    rootManifestId: windowCollectionData.manifestId,
-  });
-
-  const { collectionId, collectionPath, collectionResource } = collectionData;
+  const collectionResource = useSelector((state) => getManifest(state, { manifestId: collectionId }), shallowEqual);
 
   const collection = collectionResource && getCollectionManifesto(collectionId);
 
-  if (collectionData.rootManifestId !== windowCollectionData.manifestId) {
-    // the collection manifest has been changed by another widget
-    setCollectionData({
-      collectionId: windowCollectionData.manifestId,
-      collectionPath: windowCollectionData.collectionPath,
-      collectionResource: getCollection(windowCollectionData.manifestId),
-      rootManifestId: windowCollectionData.manifestId,
-    });
-  }
-
-  if (!collection && !collectionResource?.isFetching) {
-    setCollectionData({
-      ...collectionData,
-      collectionResource: fetchManifest(collectionId),
-    });
-  }
-  if (collectionResource?.isFetching && getCollection(collectionId)) {
-    setCollectionData({
-      ...collectionData,
-      collectionResource: getCollection(collectionId),
-    });
-  }
+  useEffect(() => {
+    if (!collection && !collectionResource?.isFetching) {
+      fetchManifest(collectionId);
+    }
+  }, [collection, collectionId, collectionResource, fetchManifest]);
 
   /** */
   const backToCollection = ({ collection: newCollection, collectionPath: oldCollectionPath }) => {
     const pathIndex = oldCollectionPath.indexOf(newCollection.id);
     const newCollectionPath = (pathIndex > 0) ? oldCollectionPath.slice(0, pathIndex) : [];
-    const update = { ...collectionData, collectionId: newCollection.id, collectionPath: newCollectionPath };
-    update.collectionResource = getCollection(newCollection.id);
-    if (!update.collectionResource) {
-      fetchManifest(newCollection.id);
-      update.collectionResource = { ...newCollection, isFetching: true };
-    }
-    setCollectionData(update);
+    const update = { collectionPath: newCollectionPath, manifestId: newCollection.id };
+    updateWindow(windowId, update);
   };
 
   /** */
   const setCollection = ({ collection: newCollection, collectionPath: newCollectionPath }) => {
-    const update = { ...collectionData, collectionId: newCollection.id, collectionPath: newCollectionPath };
-    update.collectionResource = getCollection(newCollection.id);
-    if (!update.collectionResource) {
-      fetchManifest(newCollection.id);
-      update.collectionResource = { ...newCollection, isFetching: true };
-    }
-    setCollectionData(update);
+    const update = { collectionPath: newCollectionPath, manifestId: newCollection.id };
+    updateWindow(windowId, update);
   };
 
   const items = collection?.items;