Adds support for 3d views. Updates combined 2d/3d view.

amplify/backend/api/collectionarchives/schema.graphql

@@ -14,6 +14,7 @@ interface Object {
   location: [String!]
   modified_date: String
   parent_collection: [String!]
+  parent_collection_identifer: [String!]
   provenance: [String!]
   relation: [String!]
   rights_holder: [String!]
@@ -58,6 +59,7 @@ type Collection implements Object
   modified_date: String
   ownerinfo: AWSJSON
   parent_collection: [String!]
+  parent_collection_identifer: [String!]
   provenance: [String!]
   relation: [String!]
   rights_holder: [String!]
@@ -130,6 +132,7 @@ type Archive implements Object
   date: [String!]
   description: [String!]
   display_date: [String!]
+  download_link:[String!]
   end_date: String
   explicit: Boolean
   extent: [String!]
@@ -149,11 +152,12 @@ type Archive implements Object
   license: [String!]
   location: [String!]
   manifest_file_characterization: AWSJSON
-  manifest_url: String!
+  manifest_url: String
   medium: [String!]
   modified_date: String
   other_identifier: [String!]
   parent_collection: [String!]
+  parent_collection_identifer: [String!]
   provenance: [String!]
   publisher: [String!]
   references: [String!]

src/components/CollapsibleCards.js

@@ -2,25 +2,17 @@ import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
-import CardMedia from "@mui/material/CardMedia";
 import CardContent from "@mui/material/CardContent";
 import CardActions from "@mui/material/CardActions";
 import Collapse from "@mui/material/Collapse";
-import Avatar from "@mui/material/Avatar";
 import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import { red } from "@mui/material/colors";
-import FavoriteIcon from "@mui/icons-material/Favorite";
-import ShareIcon from "@mui/icons-material/Share";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import InfoIcon from "@mui/icons-material/Info";
 import CopyrightIcon from "@mui/icons-material/Copyright";
 import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
 import { LeafletThumb } from "./LeafletThumb";
 import Citation from "../components/Citation";
-import { useNavigate } from "react-router-dom";
 
 import "../css/CollapsibleCards.scss";
 
@@ -58,6 +50,7 @@ const multi_value_headers = [
   "date",
   "description",
   "display_date",
+  "download_link",
   "extent",
   "format",
   "has_format",
@@ -108,7 +101,6 @@ const getMarker = (marker) => {
 };
 
 const getLocationData = (data) => {
-  console.log(data.location);
   return (
     <>
       {data.location ? (
@@ -123,7 +115,7 @@ const getLocationData = (data) => {
 };
 
 const modifyKey = (key) => {
-  if (key == "display_date") {
+  if (key === "display_date") {
     return "Date";
   }
   const newKey = key
@@ -185,7 +177,6 @@ export default function CollapsibleCard({
     setExpanded(!expanded);
   };
 
-  const navigate = useNavigate();
   let facetSearchItems = ["format", "medium", "type", "tags"];
 
   const renderContent = (key, value, index) => {
@@ -205,7 +196,7 @@ export default function CollapsibleCard({
           </a>
         </div>
       );
-    } else if (key == "language") {
+    } else if (key === "language") {
       return (
         <div key={index}>
           <a
@@ -223,7 +214,6 @@ export default function CollapsibleCard({
   };
 
   const getAboutData = (data) => {
-    console.log("about: ", data);
     let items = [
       "description",
       "date",

src/components/ThreeD2DiiifHandler/ThreeD2DiiifHandler.tsx

@@ -58,7 +58,6 @@ export const ThreeD2DiiifHandler: FC<Props> = ({ item, site }) => {
 
     return () => {
       if (x3dElement) {
-        console.log("Removing event listeners");
         x3dElement.removeEventListener("mousedown", handleMouseDown);
         x3dElement.removeEventListener("touchstart", handleMouseDown);
       }
@@ -120,17 +119,19 @@ export const ThreeD2DiiifHandler: FC<Props> = ({ item, site }) => {
               </div>
             )}
           </div>
-          <div
-            style={{ height: height, width: width }}
-            hidden={threeD === "primary"}
-          >
-            <MiradorViewer
-              item={item}
-              site={site}
-              type="3d_2diiif"
+          {item.manifest_url && (
+            <div
+              style={{ height: height, width: width }}
               hidden={threeD === "primary"}
-            />
-          </div>
+            >
+              <MiradorViewer
+                item={item}
+                site={site}
+                type="3d_2diiif"
+                hidden={threeD === "primary"}
+              />
+            </div>
+          )}
         </>
       );
     } catch (e) {
@@ -198,9 +199,11 @@ export const ThreeD2DiiifHandler: FC<Props> = ({ item, site }) => {
       <div className="image-wrapper" id="image-wrapper">
         {primarySectionContent()}
       </div>
-      <div className="thumbnail-wrapper" id="thumbnail-wrapper">
-        {secondarySectionContent()}
-      </div>
+      {item.manifest_url && (
+        <div className="thumbnail-wrapper" id="thumbnail-wrapper">
+          {secondarySectionContent()}
+        </div>
+      )}
     </div>
   );
 };

src/components/Thumbnail/Thumbnail.tsx

@@ -2,6 +2,8 @@ import { FC } from "react";
 import "../../css/Thumbnail.scss";
 import { useSignedLink } from "../../hooks/useSignedLink";
 
+const THUMBNAIL_FALLBACK = "/images/fallback_thumbnail.jpg";
+
 type Props = {
   item: Collection | Archive;
   site: Site;
@@ -24,17 +26,19 @@ export const Thumbnail: FC<Props> = ({
     "image",
     site?.siteId
   );
-  if (!image) {
-    return null;
-  }
+
   return (
     <div className="image-container">
       {category && (
         <div className={`${category}-label`}>
           <p>{category === "collection" ? "Collection" : "Item"}</p>
         </div>
       )}
-      <img className={className} src={image} alt={altText ? item.title : ""} />
+      <img
+        className={className}
+        src={image || THUMBNAIL_FALLBACK}
+        alt={altText ? item.title : ""}
+      />
     </div>
   );
 };

src/css/RelatedItems.scss

@@ -1,5 +1,6 @@
 .related-items-wrapper {
   background-color: var(--light-gray);
+  margin-top: 40px;
   padding: 40px;
   width: 100%;
   overflow: hidden;

src/graphql/mutations.js

@@ -27,6 +27,7 @@ export const createCollection = /* GraphQL */ `
       modified_date
       ownerinfo
       parent_collection
+      parent_collection_identifer
       provenance
       relation
       rights_holder
@@ -87,6 +88,7 @@ export const updateCollection = /* GraphQL */ `
       modified_date
       ownerinfo
       parent_collection
+      parent_collection_identifer
       provenance
       relation
       rights_holder
@@ -147,6 +149,7 @@ export const deleteCollection = /* GraphQL */ `
       modified_date
       ownerinfo
       parent_collection
+      parent_collection_identifer
       provenance
       relation
       rights_holder
@@ -214,6 +217,7 @@ export const createCollectionmap = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder
@@ -270,6 +274,7 @@ export const updateCollectionmap = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder
@@ -326,6 +331,7 @@ export const deleteCollectionmap = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder
@@ -483,6 +489,7 @@ export const createArchive = /* GraphQL */ `
       date
       description
       display_date
+      download_link
       end_date
       explicit
       extent
@@ -506,6 +513,7 @@ export const createArchive = /* GraphQL */ `
       modified_date
       other_identifier
       parent_collection
+      parent_collection_identifer
       provenance
       publisher
       references
@@ -544,6 +552,7 @@ export const createArchive = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder
@@ -588,6 +597,7 @@ export const updateArchive = /* GraphQL */ `
       date
       description
       display_date
+      download_link
       end_date
       explicit
       extent
@@ -611,6 +621,7 @@ export const updateArchive = /* GraphQL */ `
       modified_date
       other_identifier
       parent_collection
+      parent_collection_identifer
       provenance
       publisher
       references
@@ -649,6 +660,7 @@ export const updateArchive = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder
@@ -693,6 +705,7 @@ export const deleteArchive = /* GraphQL */ `
       date
       description
       display_date
+      download_link
       end_date
       explicit
       extent
@@ -716,6 +729,7 @@ export const deleteArchive = /* GraphQL */ `
       modified_date
       other_identifier
       parent_collection
+      parent_collection_identifer
       provenance
       publisher
       references
@@ -754,6 +768,7 @@ export const deleteArchive = /* GraphQL */ `
         modified_date
         ownerinfo
         parent_collection
+        parent_collection_identifer
         provenance
         relation
         rights_holder