hook up single run metadata drawer and open key photo in new tab (#138)

chanzuckerberg · Nov 15, 2023 · 0747e76 · 0747e76
1 parent 8c9f9a4
commit 0747e76
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -1,6 +1,7 @@
 import { Button, Icon } from '@czi-sds/components'
 import { sum } from 'lodash-es'
 
+import { Link } from 'app/components/Link'
 import { PageHeader } from 'app/components/PageHeader'
 import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
@@ -15,6 +16,7 @@ export function RunHeader() {
   const drawer = useDrawer()
 
   const tiltSeries = run.tiltseries[0]
+  const keyPhotoURL = 'https://cataas.com/cat'
 
   return (
     <PageHeader
@@ -79,7 +81,9 @@ export function RunHeader() {
     >
       <div className="flex gap-sds-xxl p-sds-xl border-t-[3px] border-sds-gray-200">
         <div className="max-w-[300px] max-h-[212px] flex-shrink-0">
-          <KeyPhoto title={run.name} src="https://cataas.com/cat" />
+          <Link to={keyPhotoURL}>
+            <KeyPhoto title={run.name} src={keyPhotoURL} />
+          </Link>
         </div>
 
         <div className="flex gap-sds-xxl flex-col lg:flex-row">

diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -8,6 +8,7 @@ import { apolloClient } from 'app/apollo.server'
 import { FilterPanel } from 'app/components/FilterPanel'
 import { RunHeader } from 'app/components/Run'
 import { AnnotationTable } from 'app/components/Run/AnnotationTable'
+import { RunMetadataDrawer } from 'app/components/Run/RunMetadataDrawer'
 import { TablePageLayout } from 'app/components/TablePageLayout'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { useRunById } from 'app/hooks/useRunById'
@@ -201,6 +202,7 @@ export default function RunByIdPage() {
 
   return (
     <TablePageLayout
+      drawer={<RunMetadataDrawer />}
       filteredCount={totalCount}
       filterPanel={<FilterPanel />}
       header={<RunHeader />}

diff --git a/frontend/packages/data-portal/package.json b/frontend/packages/data-portal/package.json
@@ -25,11 +25,10 @@
     "test": "NODE_OPTIONS='--experimental-vm-modules' jest",
     "type-check": "tsc -p tsconfig.json --noEmit"
   },
-  "//": "note: SDS 18.1.2 has bug in Button component",
   "dependencies": {
     "@apollo/client": "^3.8.5",
     "@babel/runtime": "^7.23.2",
-    "@czi-sds/components": "18.1.1",
+    "@czi-sds/components": "^18.1.2",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml