COLUMBIA: Refactor download, related links, and XML plugins for consi…

…stency in rendering vs seeAlso

- do not render canvas download list if canvas does not enable
- consistent organization of selectors
- deduplication of some selectors across plugins

src/culPlugins/mirador-canvasRelatedLinks/state/selectors.js → src/culPlugins/mirador-canvasRelatedLinks/state/selectors/index.js

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
 import { PropertyValue } from 'manifesto.js';
-import asArray from '../../../lib/asArray';
-import { getCurrentCanvas, getManifestLocale } from '../../../state/selectors';
+import asArray from '../../../../lib/asArray';
+import { getCurrentCanvas, getManifestLocale } from '../../../../state/selectors';
 
 /** */
 function getProperty(property) {

src/culPlugins/mirador-downloaddialog/components/DownloadDialog.js

@@ -20,12 +20,13 @@ import CanvasDownloadLinks from './dialog/CanvasDownloadLinks';
 /** */
 const DownloadDialog = ({
   canvasLabel,
+  canvasRenderings,
   children,
   config,
   containerId,
   infoResponse,
+  manifestRenderings,
   manifestUrl,
-  seeAlso,
   t,
   updateConfig,
   visibleCanvases,
@@ -59,6 +60,7 @@ const DownloadDialog = ({
         {visibleCanvases.map((canvas) => (
           <CanvasDownloadLinks
             canvas={canvas}
+            canvasRenderings={canvasRenderings}
             key={canvas.id}
             label={canvasLabel(canvas.id)}
             sizes={infoResponse(canvas.id).json?.sizes}
@@ -90,8 +92,7 @@ const DownloadDialog = ({
                     </Link>
                   </Box>
                 </ListItem>
-                {seeAlso
-                  .filter(({ format }) => format !== 'text/html')
+                {manifestRenderings?.filter(({ format }) => format !== 'text/html')
                   .map(({ label, value }) => (
                     <ListItem dense key={value}>
                       <Box
@@ -119,28 +120,36 @@ const DownloadDialog = ({
 };
 
 DownloadDialog.defaultProps = {
+  canvasRenderings: [],
   children: undefined,
+  manifestRenderings: [],
   manifestUrl: undefined,
-  seeAlso: [],
 };
 
 DownloadDialog.propTypes = {
   canvasLabel: PropTypes.func.isRequired,
+  canvasRenderings: PropTypes.arrayOf(
+    PropTypes.shape({
+      format: PropTypes.string,
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
   children: PropTypes.element,
   config: PropTypes.shape({
     dialogOpen: PropTypes.bool.isRequired,
     enabled: PropTypes.bool.isRequired,
   }).isRequired,
   containerId: PropTypes.string.isRequired,
   infoResponse: PropTypes.func.isRequired,
-  manifestUrl: PropTypes.string,
-  seeAlso: PropTypes.arrayOf(
+  manifestRenderings: PropTypes.arrayOf(
     PropTypes.shape({
       format: PropTypes.string,
       label: PropTypes.string,
       value: PropTypes.string,
     }),
   ),
+  manifestUrl: PropTypes.string,
   t: PropTypes.func.isRequired,
   updateConfig: PropTypes.func.isRequired,
   visibleCanvases: PropTypes.arrayOf(

src/culPlugins/mirador-downloaddialog/components/dialog/CanvasDownloadLinks.js

@@ -1,56 +1,71 @@
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import Link from '@mui/material/Link';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 
-import ImageLink from './ImageLink';
+import { anyImageServices } from '../../../../lib/typeFilters';
+
+import ImageDownloadLinks from './ImageDownloadLinks';
+
+/**
+ * Filter the misnamed imageResources property to actual imageResources
+ */
+const anyImageResources = (imageResources) => (imageResources || []).filter((r) => anyImageServices(r).length > 0);
 
 /** */
 const CanvasDownloadLinks = ({
-  canvas, label, sizes, t,
-}) => (
-  <Card className="mb-3" raised>
-    <CardContent>
-      <Typography component="h5" style={{ textTransform: 'none' }} variant="h6">
-        <Box fontWeight="fontWeightBold" textTransform="none">
-          {`${t(
-            'image',
-          )}: ${label}`}
-        </Box>
-      </Typography>
-      <List>
-        {sizes
-          .sort((a, b) => b.width - a.width)
-          .slice(1)
-          .reduce(
-            (acc, { height, width }) => {
-              // only take sizes, where the difference between the last taken width
-              // and the current one is bigger than 500 pixels
-              if (acc[acc.length - 1].width - width >= 500) {
-                acc.push({ height, width });
-              }
-              return acc;
-            },
-            // this represents the full size
-            [{ height: canvas.getHeight(), width: canvas.getWidth() }],
-          )
-          .map(({ height, width }) => (
-            <ListItem dense key={`${height}x${width}`}>
-              <ImageLink
-                height={height}
-                linkTarget={canvas.getCanonicalImageUri(width)}
-                t={t}
-                width={width}
-              />
-            </ListItem>
-          ))}
-      </List>
-    </CardContent>
-  </Card>
-);
+  canvas, canvasRenderings, label, sizes, t,
+}) => {
+  const theme = useTheme();
+  const behaviors = canvas?.behaviors || [];
+  if (behaviors.includes('no-download')) return null;
+
+  if (anyImageResources(canvas?.imageResources).length > 0) {
+    return (
+      <ImageDownloadLinks
+        canvas={canvas}
+        key={canvas.id}
+        label={label}
+        sizes={sizes}
+        t={t}
+      />
+    );
+  }
+
+  if (!canvasRenderings || canvasRenderings.length < 1) return null;
+
+  return (
+    <Card className="mb-3" raised>
+      <CardContent>
+        <Typography component="h5" style={{ textTransform: 'none' }} variant="h6">
+          <Box fontWeight="fontWeightBold" textTransform="none">
+            {label}
+          </Box>
+        </Typography>
+        <List>
+          {canvasRenderings?.filter(({ format }) => format !== 'text/html')
+            .map((link) => (
+              <ListItem dense key={link.value}>
+                <Box
+                  fontFamily={theme.typography.fontFamily ?? 'sans-serif'}
+                  fontSize="0.75rem"
+                >
+                  <Link href={link.value} rel="noopener" target="_blank">
+                    {link.label}
+                  </Link>
+                </Box>
+              </ListItem>
+            ))}
+        </List>
+      </CardContent>
+    </Card>
+  );
+};
 
 CanvasDownloadLinks.defaultProps = {
   sizes: [],

src/culPlugins/mirador-downloaddialog/components/dialog/ImageDownloadLinks.js

@@ -0,0 +1,79 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
+
+import ImageLink from './ImageLink';
+
+/** */
+const ImageDownloadLinks = ({
+  canvas, label, sizes, t,
+}) => {
+  const behaviors = canvas?.behaviors || [];
+  if (behaviors.includes('no-download')) return null;
+  return (
+    <Card className="mb-3" raised>
+      <CardContent>
+        <Typography component="h5" style={{ textTransform: 'none' }} variant="h6">
+          <Box fontWeight="fontWeightBold" textTransform="none">
+            {`${t(
+              'image',
+            )}: ${label}`}
+          </Box>
+        </Typography>
+        <List>
+          {sizes
+            .sort((a, b) => b.width - a.width)
+            .slice(1)
+            .reduce(
+              (acc, { height, width }) => {
+                // only take sizes, where the difference between the last taken width
+                // and the current one is bigger than 500 pixels
+                if (acc[acc.length - 1].width - width >= 500) {
+                  acc.push({ height, width });
+                }
+                return acc;
+              },
+              // this represents the full size
+              [{ height: canvas.getHeight(), width: canvas.getWidth() }],
+            )
+            .map(({ height, width }) => (
+              <ListItem dense key={`${height}x${width}`}>
+                <ImageLink
+                  height={height}
+                  linkTarget={canvas.getCanonicalImageUri(width)}
+                  t={t}
+                  width={width}
+                />
+              </ListItem>
+            ))}
+        </List>
+      </CardContent>
+    </Card>
+  );
+};
+
+ImageDownloadLinks.defaultProps = {
+  sizes: [],
+};
+
+ImageDownloadLinks.propTypes = {
+  canvas: PropTypes.shape({
+    getCanonicalImageUri: PropTypes.func.isRequired,
+    getHeight: PropTypes.func.isRequired,
+    getWidth: PropTypes.func.isRequired,
+  }).isRequired,
+  label: PropTypes.oneOfType(PropTypes.number, PropTypes.string).isRequired,
+  sizes: PropTypes.arrayOf(
+    PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }),
+  ),
+  t: PropTypes.func.isRequired,
+};
+
+export default ImageDownloadLinks;

src/culPlugins/mirador-downloaddialog/index.js

@@ -6,9 +6,11 @@ import {
   selectInfoResponse,
 } from '../../state/selectors/canvases';
 import {
-  getManifestRelatedContent,
   getManifestUrl,
 } from '../../state/selectors/manifests';
+import {
+  getCanvasRenderings, getManifestRenderings,
+} from '../state/selectors';
 
 import DownloadButton from './components/DownloadButton';
 import DownloadDialog from './components/DownloadDialog';
@@ -42,11 +44,12 @@ export default [
     }),
     mapStateToProps: (state, { windowId }) => ({
       canvasLabel: (canvasId) => getCanvasLabel(state, { canvasId, windowId }),
+      canvasRenderings: getCanvasRenderings(state, { windowId }),
       config: getPluginConfig(state, { windowId }),
       containerId: getContainerId(state),
       infoResponse: (canvasId) => selectInfoResponse(state, { canvasId, windowId }) ?? {},
+      manifestRenderings: getManifestRenderings(state, { windowId }),
       manifestUrl: getManifestUrl(state, { windowId }),
-      seeAlso: getManifestRelatedContent(state, { windowId }),
       visibleCanvases: getVisibleCanvases(state, { windowId }),
     }),
     mode: 'add',

src/culPlugins/mirador-downloaddialog/state/selectors.js → src/culPlugins/mirador-downloaddialog/state/selectors/index.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { getWindowConfig } from '../../../state/selectors';
+import { getWindowConfig } from '../../../../state/selectors';
 
 const defaultConfig = {
   // Open the download dialog

src/culPlugins/mirador-hinting-sidebar/state/selectors.js → src/culPlugins/mirador-hinting-sidebar/state/selectors/index.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
-import { getCanvasesContentTypes, getCanvasSeeAlso } from '../../state/selectors';
-import { getWindow } from '../../../state/selectors';
+import { getCanvasesContentTypes, getCanvasSeeAlso } from '../../../state/selectors';
+import { getWindow } from '../../../../state/selectors';
 
 const getHasOpenSideBar = createSelector(
   [getWindow],

src/culPlugins/mirador-viewXml/MiradorViewXmlDialog.js

@@ -21,7 +21,7 @@ const MiradorViewXmlDialog = ({
   config,
   containerId,
   manifestId,
-  seeAlso,
+  relatedLinks,
   updateConfig,
   windowId,
 }) => {
@@ -33,7 +33,7 @@ const MiradorViewXmlDialog = ({
   const xmlLink = (function link(relateds) {
     if (!relateds) return null;
     return relateds.find(ref => ref.schema === 'http://www.loc.gov/mods/v3')?.id;
-  }(seeAlso));
+  }(relatedLinks));
 
   if (!xmlLink) return null;
 
@@ -93,7 +93,7 @@ MiradorViewXmlDialog.propTypes = {
   }).isRequired,
   containerId: PropTypes.string.isRequired,
   manifestId: PropTypes.string,
-  seeAlso: PropTypes.arrayOf(
+  relatedLinks: PropTypes.arrayOf(
     PropTypes.shape({
       format: PropTypes.string,
       label: PropTypes.string,
@@ -108,7 +108,7 @@ MiradorViewXmlDialog.propTypes = {
 
 MiradorViewXmlDialog.defaultProps = {
   manifestId: '',
-  seeAlso: [],
+  relatedLinks: [],
 };
 
 export default MiradorViewXmlDialog;

src/culPlugins/mirador-viewXml/index.js

@@ -1,10 +1,10 @@
 import { updateWindow } from '../../state/actions';
 import { getContainerId } from '../../state/selectors';
 import { getManifestUrl } from '../../state/selectors/manifests';
-
+import { getManifestRelatedLinks } from '../state/selectors';
 import MiradorViewXmlPlugin from './MiradorViewXmlPlugin';
 import MiradorViewXmlDialog from './MiradorViewXmlDialog';
-import { getManifestSeeAlso, getPluginConfig } from './state/selectors';
+import { getPluginConfig } from './state/selectors';
 
 export {
   MiradorViewXmlPlugin,
@@ -42,7 +42,7 @@ export default [
       config: getPluginConfig(state, { windowId }),
       containerId: getContainerId(state),
       manifestId: getManifestUrl(state, { windowId }),
-      seeAlso: getManifestSeeAlso(state, { windowId }),
+      relatedLinks: getManifestRelatedLinks(state, { windowId }),
     }),
     mode: 'add',
     name: 'MiradorViewXmlDialog',