Add More Artworks By Artist to resource detail panel

This commit adds artworks related to the same artist
to given artwork detail panels. It populates these related
galleries using a mix of prefetched and on-demand data
from the arches API.

front-end/src/assets/main.css

@@ -12,3 +12,8 @@
 .v-leave-to {
   opacity: 0;
 }
+
+.resource-link {
+  text-decoration: underline;
+  cursor: pointer;
+}

front-end/src/components/ArtworkDetailItem.vue

@@ -1,48 +1,44 @@
 <template>
-  <ResourceDetailItem :image-url="props.artwork.Photograph?.Image">
-    <template v-if="resourceType !== PANEL_RESOURCE_TYPE.ARTWORK" #item-header-title>
+  <ResourceDetailItem
+    v-if="props.panelResourceType !== undefined"
+    :image-url="props.artwork.Photograph?.Image"
+  >
+    <template v-if="props.panelResourceType !== PANEL_RESOURCE_TYPE.ARTWORK" #item-header-title>
       <p>
-        <span
-          class="resource-link"
-          @click="setActiveResource(props.artworkId, PANEL_RESOURCE_TYPE.ARTWORK)"
-          >{{ artwork.Title }}</span
-        >
+        <span class="resource-link" @click="setActiveResource(props.artworkId)">{{
+          artwork.Title
+        }}</span>
       </p>
     </template>
     <template v-if="artist && structure" #item-header-byline>
       <p>
-        <span v-if="resourceType !== PANEL_RESOURCE_TYPE.ARTIST"
+        <span v-if="props.panelResourceType !== PANEL_RESOURCE_TYPE.ARTIST"
           >by
-          <span
-            class="resource-link"
-            @click="setActiveResource(artist.resourceinstanceid, PANEL_RESOURCE_TYPE.ARTIST)"
-            >{{ artist.displayname }}</span
-          ></span
+          <span class="resource-link" @click="setActiveResource(artist.resourceinstanceid)">{{
+            artist.displayname
+          }}</span></span
         >
-        <span v-if="resourceType !== PANEL_RESOURCE_TYPE.STRUCTURE">
+        <span v-if="props.panelResourceType !== PANEL_RESOURCE_TYPE.STRUCTURE">
           at
-          <span
-            class="resource-link"
-            @click="setActiveResource(structure.resourceinstanceid, PANEL_RESOURCE_TYPE.STRUCTURE)"
-            >{{ structure.displayname }}</span
-          ></span
+          <span class="resource-link" @click="setActiveResource(structure.resourceinstanceid)">{{
+            structure.displayname
+          }}</span></span
         >
       </p>
     </template>
-    <template v-if="photographer && resourceType !== PANEL_RESOURCE_TYPE.PHOTOGRAPHER" #item-credit>
+    <template
+      v-if="photographer && props.panelResourceType !== PANEL_RESOURCE_TYPE.PHOTOGRAPHER"
+      #item-credit
+    >
       <p>
         Photographer
-        <span
-          class="resource-link"
-          @click="
-            setActiveResource(photographer.resourceinstanceid, PANEL_RESOURCE_TYPE.PHOTOGRAPHER)
-          "
-          >{{ photographer.displayname }}</span
-        >
+        <span class="resource-link" @click="setActiveResource(photographer.resourceinstanceid)">{{
+          photographer.displayname
+        }}</span>
       </p>
     </template>
     <template
-      v-if="props.artwork.Description && resourceType === PANEL_RESOURCE_TYPE.ARTWORK"
+      v-if="props.artwork.Description && props.panelResourceType === PANEL_RESOURCE_TYPE.ARTWORK"
       #item-description
     >
       <p>{{ props.artwork.Description }}</p></template
@@ -59,22 +55,17 @@ import { useResourceStore } from '@/stores/resourceStore';
 const props = defineProps<{
   artwork: Artwork;
   artworkId: string;
+  panelResourceType: PANEL_RESOURCE_TYPE;
   resourceRelations: Array<ApiResourceRelation>;
   idReferences: Prefetch['idReferences'];
 }>();
 
 const resourceStore = useResourceStore();
 const { graphIdToNameTable } = props.idReferences;
 
-const { resourceType } = resourceStore;
-
-const setActiveResource = (
-  newResourceId: string,
-  newResourceType: PANEL_RESOURCE_TYPE | undefined
-) => {
+const setActiveResource = (newResourceId: string) => {
   resourceStore.$patch({
-    resourceId: newResourceId,
-    resourceType: newResourceType
+    resourceId: newResourceId
   });
 };
 

front-end/src/components/MoreArtworksByArtist.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-if="artist" class="more-artworks-by-artist-title">
+    More artwork by
+    <span class="resource-link" @click="setActiveResource(artist.resourceinstanceid)">{{
+      artist.displayname
+    }}</span>
+  </div>
+  <div v-if="relatedArtworks" class="more-artworks-by-artist-gallery">
+    <MoreArtworksByArtistItem
+      v-for="artwork in relatedArtworks"
+      :key="artwork.resourceinstanceid"
+      :artwork="artwork"
+      :image-tile-data="
+        getImageTileDataForResource(
+          artwork,
+          props.imagesPrefetch,
+          props.resourceRelationsPrefetch,
+          props.idReferences
+        )
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  ApiResource,
+  ApiResourceRelation,
+  Resource,
+  Prefetch,
+  ResourceXResource,
+  Tile,
+  ImageTileData
+} from '@/types';
+import { useResourceStore } from '@/stores/resourceStore';
+import MoreArtworksByArtistItem from './MoreArtworksByArtistItem.vue';
+import { getImageTileDataForResource, getMoreArtworksByArtist } from '@/utils';
+const props = defineProps<{
+  resource: ApiResource;
+  resourcesPrefetch: Array<Resource>;
+  resourceRelations: Array<ApiResourceRelation>;
+  idReferences: Prefetch['idReferences'];
+  resourceRelationsPrefetch: Array<ResourceXResource>;
+  imagesPrefetch: Array<Tile<ImageTileData[]>>;
+}>();
+
+const resourceStore = useResourceStore();
+
+const artist = props.resourceRelations.find(
+  (resource) => props.idReferences.graphIdToNameTable[resource.graph_id] === 'Artist'
+);
+
+const relatedArtworks = artist
+  ? getMoreArtworksByArtist(
+      artist,
+      props.resourcesPrefetch,
+      props.resourceRelationsPrefetch,
+      props.idReferences
+    )
+  : undefined;
+
+const setActiveResource = (newResourceId: string) => {
+  resourceStore.$patch({
+    resourceId: newResourceId
+  });
+};
+</script>
+<style scoped>
+.more-artworks-by-artist-title {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 100%;
+
+  color: #000000;
+}
+
+.more-artworks-by-artist-gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  padding: 0px;
+  gap: 16px;
+  isolation: isolate;
+}
+</style>

front-end/src/components/MoreArtworksByArtistItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <div @click="setActiveResource(props.artwork.resourceinstanceid)">
+    <img
+      v-if="imageUrl"
+      :class="`more-artwork-image ${resourceStore.resourceId === props.artwork.resourceinstanceid ? 'blocked' : ''}`"
+      loading="lazy"
+      :src="imageUrl"
+      alt="thumbnail image"
+    />
+    <img
+      v-else
+      :class="`more-artwork-image ${resourceStore.resourceId === props.artwork.resourceinstanceid ? 'blocked' : ''}`"
+      :src="isProd ? '/archesdataviewer/noimage.png' : '/noimage.png'"
+      alt="no image available"
+      loading="lazy"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useResourceStore } from '@/stores/resourceStore';
+import type { ImageTileData, Resource } from '@/types';
+
+const resourceStore = useResourceStore();
+const props = defineProps<{
+  artwork: Resource;
+  imageTileData: ImageTileData[] | undefined;
+}>();
+
+console.log(props.artwork);
+const isProd = import.meta.env.PROD;
+
+const imageUrl = props.imageTileData
+  ? import.meta.env.VITE_ARCHES_API_URL + props.imageTileData[0].url
+  : undefined;
+
+const setActiveResource = (newResourceId: string) => {
+  resourceStore.$patch({
+    resourceId: newResourceId
+  });
+};
+</script>
+
+<style scoped>
+.more-artwork-image {
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.more-artwork-image:hover {
+  opacity: 0.5;
+}
+
+.blocked {
+  filter: brightness(50%);
+  pointer-events: none;
+}
+</style>

front-end/src/components/RelatedArtworkDetailItem.vue

@@ -10,17 +10,19 @@
     :artwork-id="resource.resourceinstanceid"
     :resource-relations="resourceRelations"
     :id-references="props.idReferences"
+    :panel-resource-type="props.panelResourceType"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import ArtworkDetailItem from './ArtworkDetailItem.vue';
-import type { ApiResource, Prefetch, ApiResourceRelation } from '@/types';
+import type { ApiResource, Prefetch, ApiResourceRelation, PANEL_RESOURCE_TYPE } from '@/types';
 import { validateArtworkSchema } from '@/types';
 const props = defineProps<{
   relatedArtwork: ApiResourceRelation;
   idReferences: Prefetch['idReferences'];
+  panelResourceType: PANEL_RESOURCE_TYPE;
 }>();
 
 const { graphIdToNameTable } = props.idReferences;

front-end/src/components/ResourceDetail.vue

@@ -9,6 +9,9 @@
   </div>
 
   <slot name="items"></slot>
+  <div v-if="$slots['more-by-artist']" class="resource-detail-more-by-artist">
+    <slot name="more-by-artist"></slot>
+  </div>
 
   <div class="resource-detail-metadata">
     <div class="resource-detail-metadata-title">Arches metadata</div>
@@ -37,6 +40,14 @@
   gap: 16px;
 }
 
+.resource-detail-more-by-artist {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 16px;
+}
+
 .resource-detail-metadata-title {
   font-family: 'Inter';
   font-style: normal;

front-end/src/components/ResourceDetailItem.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
 const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.imageUrl : undefined;
 </script>
 
-<style>
+<style scoped>
 .resource-detail-item {
   display: flex;
   flex-direction: column;
@@ -97,9 +97,4 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
   width: 100%;
   height: 100%;
 }
-
-.resource-link {
-  text-decoration: underline;
-  cursor: pointer;
-}
 </style>

front-end/src/components/ResourcePanel.vue

@@ -16,6 +16,7 @@
           :artwork-id="props.resource.resourceinstanceid"
           :resource-relations="props.resourceRelations"
           :id-references="props.idReferences"
+          :panel-resource-type="PANEL_RESOURCE_TYPE.ARTWORK"
         />
         <RelatedArtworkDetailItem
           v-for="relatedArtwork in resourceRelations.filter(
@@ -28,6 +29,7 @@
           :key="relatedArtwork.graph_id"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
+          :panel-resource-type="PANEL_RESOURCE_TYPE.ARTIST"
         />
         <RelatedArtworkDetailItem
           v-for="relatedArtwork in resourceRelations.filter(
@@ -40,6 +42,7 @@
           :key="relatedArtwork.resourceinstanceid"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
+          :panel-resource-type="PANEL_RESOURCE_TYPE.STRUCTURE"
         />
         <RelatedArtworkDetailItem
           v-for="relatedArtwork in resourceRelations.filter(
@@ -52,6 +55,23 @@
           :key="relatedArtwork.root_ontology_class"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
+          :panel-resource-type="PANEL_RESOURCE_TYPE.PHOTOGRAPHER"
+        />
+      </template>
+      <template
+        v-if="
+          validateArtworkSchema(props.resource.resource) &&
+          graphIdToNameTable[props.resource.graph_id] === 'Artwork'
+        "
+        #more-by-artist
+      >
+        <MoreArtworksByArtist
+          :resource="props.resource"
+          :resource-relations="resourceRelations"
+          :resource-relations-prefetch="props.resourceRelationsPrefetch"
+          :resources-prefetch="props.resourcesPrefetch"
+          :images-prefetch="props.imagesPrefetch"
+          :id-references="props.idReferences"
         />
       </template>
       <template #metadata>
@@ -76,12 +96,14 @@ import {
   validateArtistSchema,
   validateArtworkSchema,
   validateStructureSchema,
-  validatePhotographerSchema
+  validatePhotographerSchema,
+  PANEL_RESOURCE_TYPE
 } from '@/types';
 import { useResourceStore } from '@/stores/resourceStore';
 import ResourceDetail from './ResourceDetail.vue';
 import ArtworkDetailItem from './ArtworkDetailItem.vue';
 import RelatedArtworkDetailItem from './RelatedArtworkDetailItem.vue';
+import MoreArtworksByArtist from './MoreArtworksByArtist.vue';
 
 const resourceStore = useResourceStore();
 const props = defineProps<{