hook up key photos (#193)

display key photos instead of cats
chanzuckerberg · Dec 4, 2023 · f6ea1fe · f6ea1fe
1 parent 7b92ee4
commit f6ea1fe
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 15 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -90,8 +90,7 @@ export function DatasetTable() {
             >
               <KeyPhoto
                 title={dataset.title}
-                // TODO use dataset keyphoto
-                src="https://loremflickr.com/400/400/cat"
+                src={dataset.key_photo_thumbnail_url ?? undefined}
                 loading={isLoadingDebounced}
               />
 

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -48,7 +48,7 @@ export function DatasetHeader() {
           <div className="max-w-[465px] w-full inline-block">
             <KeyPhoto
               title={dataset.title}
-              src="https://loremflickr.com/400/400/cat"
+              src={dataset.key_photo_url ?? undefined}
             />
           </div>
         </div>

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -52,8 +52,10 @@ export function RunsTable() {
             >
               <KeyPhoto
                 title={run.name}
-                // TODO use dataset keyphoto
-                src="https://loremflickr.com/400/400/cat"
+                src={
+                  run.tomogram_voxel_spacings[0]?.tomograms[0]
+                    ?.key_photo_thumbnail_url ?? undefined
+                }
                 loading={isLoadingDebounced}
               />
 

diff --git a/frontend/packages/data-portal/app/components/KeyPhoto.tsx b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
@@ -1,7 +1,7 @@
 import Skeleton from '@mui/material/Skeleton'
 import { match, P } from 'ts-pattern'
 
-import { i18n } from 'app/i18n'
+import { KeyPhotoFallbackIcon } from 'app/components/icons'
 import { cns } from 'app/utils/cns'
 
 export function KeyPhoto({
@@ -17,7 +17,7 @@ export function KeyPhoto({
     <div
       className={cns(
         'flex-shrink-0 basis-[134px] aspect-[4/3]',
-        'flex items-center justify-center bg-[#d9d9d9]',
+        'flex items-center justify-center bg-sds-gray-100',
         'rounded-sds-m',
 
         // crop image to container dimensions
@@ -27,10 +27,14 @@ export function KeyPhoto({
       {match([src, loading])
         .with([P._, true], () => <Skeleton variant="rounded" />)
         .with([P.string, false], () => (
-          <img alt={`key visualization for ${title}`} src={src} />
+          <img
+            alt={`key visualization for ${title}`}
+            src={src}
+            className="w-full"
+          />
         ))
         .otherwise(() => (
-          <p className="text-sds-gray-400 text-sm">{i18n.keyPhoto}</p>
+          <KeyPhotoFallbackIcon className="text-sds-gray-200 aspect-square w-1/5" />
         ))}
     </div>
   )

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -18,7 +18,8 @@ export function RunHeader() {
   const { t } = useI18n()
 
   const tiltSeries = run.tiltseries[0]
-  const keyPhotoURL = 'https://loremflickr.com/400/400/cat'
+  const keyPhotoURL =
+    run.tomogram_voxel_spacings[0]?.tomograms[0]?.key_photo_url
 
   const { openTomogramDownloadModal } = useDownloadModalQueryParamState()
   const neuroglancerConfig = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0)
@@ -89,13 +90,17 @@ export function RunHeader() {
       title={run.name}
     >
       <div className="flex gap-sds-xxl p-sds-xl border-t-[3px] border-sds-gray-200">
-        <div className="max-w-[300px] max-h-[213px] overflow-clip rounded-sds-m flex-shrink-0">
-          <Link to={keyPhotoURL}>
-            <KeyPhoto title={run.name} src={keyPhotoURL} />
-          </Link>
+        <div className="max-w-[300px] max-h-[213px] grow overflow-clip rounded-sds-m flex-shrink-0">
+          {keyPhotoURL ? (
+            <Link to={keyPhotoURL}>
+              <KeyPhoto title={run.name} src={keyPhotoURL} />
+            </Link>
+          ) : (
+            <KeyPhoto title={run.name} />
+          )}
         </div>
 
-        <div className="flex gap-sds-xxl flex-col lg:flex-row">
+        <div className="flex flex-1 gap-sds-xxl flex-col lg:flex-row">
           <MetadataTable
             title={i18n.tiltSeries}
             data={[

diff --git a/frontend/packages/data-portal/app/components/icons/KeyPhotoFallbackIcon.tsx b/frontend/packages/data-portal/app/components/icons/KeyPhotoFallbackIcon.tsx
@@ -0,0 +1,21 @@
+import { IconProps } from './icon.types'
+
+export function KeyPhotoFallbackIcon(props: IconProps) {
+  return (
+    <svg
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.382 0H84.7619C92.7179 0 99.4499 6.41667 99.7559 14.6667V84.9444C99.7559 93.1944 93.0239 99.6111 85.0679 99.6111H14.688C6.42599 99.6111 0 92.8889 0 84.9444V14.6667C0 6.41667 6.42599 0 14.382 0ZM84.7619 94.4167C90.2699 94.4167 94.5539 90.1389 94.5539 84.6389H94.8599V77.9167L81.3959 62.6389C80.1719 61.4167 78.3359 60.5 76.4999 60.5C74.9699 60.5 73.7459 60.8056 72.5219 61.7222L57.8339 73.0278C56.9159 73.6389 55.6919 73.9445 54.7739 73.9445H54.1619C52.9379 73.9445 51.7139 73.0278 51.1019 72.1111L35.496 50.1111C34.272 48.5833 32.436 47.3611 30.294 47.3611H29.988C28.152 47.3611 26.316 48.2778 25.092 49.8056L4.59 73.6389V84.6389C4.59 90.1389 8.87399 94.4167 14.382 94.4167H84.7619ZM84.7619 59.2778L94.5539 70.5833H94.8599V14.6667C94.8599 9.16667 90.5759 4.88889 85.0679 4.88889H14.688C9.17999 4.88889 4.896 9.16667 4.896 14.3611V66.3056L21.726 46.75C23.868 44.3056 26.928 42.7778 30.294 42.7778H30.906C34.272 42.7778 37.332 44.6111 39.474 47.3611L55.0799 69.3611L69.7679 58.0556C71.6039 56.5278 74.0519 55.6111 76.4999 55.6111C79.5599 55.6111 82.6199 57.1389 84.7619 59.2778ZM54.7739 29.3335C54.7739 21.0835 61.5059 14.6668 69.4619 14.6668C77.7239 14.6668 84.1499 21.0835 84.1499 29.3335C84.1499 37.5835 77.4179 44.0001 69.4619 44.0001C61.1999 44.0001 54.7739 37.5835 54.7739 29.3335ZM59.3639 29.3335C59.3639 34.8335 63.9539 39.4168 69.4619 39.4168C75.2759 39.4168 79.5599 34.8335 79.5599 29.3335C79.5599 23.8335 74.9699 19.2501 69.4619 19.2501C63.9539 19.2501 59.3639 23.8335 59.3639 29.3335Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/icons/index.ts b/frontend/packages/data-portal/app/components/icons/index.ts
@@ -3,3 +3,4 @@ export * from './CZIIcon'
 export * from './EnvelopeIcon'
 export * from './icon.types'
 export * from './ImageInstituteIcon'
+export * from './KeyPhotoFallbackIcon'
diff --git a/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx b/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx
@@ -39,6 +39,8 @@ const GET_DATASETS_DATA_QUERY = gql(`
       id
       title
       organism_name
+      dataset_publications
+      key_photo_thumbnail_url
       related_database_entries
 
       authors {

diff --git a/frontend/packages/data-portal/app/routes/datasets.$id.tsx b/frontend/packages/data-portal/app/routes/datasets.$id.tsx
@@ -18,6 +18,9 @@ const GET_DATASET_BY_ID = gql(`
     datasets(where: { id: { _eq: $id } }) {
       s3_prefix
 
+      # key photo
+      key_photo_url
+
       # Dataset dates
       last_modified_date
       release_date
@@ -95,6 +98,9 @@ const GET_DATASET_BY_ID = gql(`
           annotations(distinct_on: object_name) {
             object_name
           }
+          tomograms(limit: 1) {
+            key_photo_thumbnail_url
+          }
         }
       }
 

diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -106,6 +106,7 @@ const GET_RUN_BY_ID_QUERY = gql(`
           affine_transformation_matrix
           ctf_corrected
           fiducial_alignment_status
+          key_photo_url
           name
           neuroglancer_config
           processing