feat: Finish run page migration to V2 (#1577)

* fix authors * fix test
chanzuckerberg · Feb 4, 2025 · 14d3439 · 14d3439
1 parent 8795234
commit 14d3439
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 87 deletions.
diff --git a/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.test.tsx b/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.test.tsx
@@ -50,13 +50,13 @@ it('should have icon if user is corresponding author', () => {
 it('should use regular icon size', () => {
   render(<AuthorLink author={pick(DEFAULT_AUTHOR, 'name')} />)
 
-  const text = screen.getByText(DEFAULT_AUTHOR.name)
+  const text = screen.getByText(DEFAULT_AUTHOR.name!)
   expect(text).toHaveClass('text-xs')
 })
 
 it('should use large icon size', () => {
   render(<AuthorLink author={pick(DEFAULT_AUTHOR, 'name')} large />)
 
-  const text = screen.getByText(DEFAULT_AUTHOR.name)
+  const text = screen.getByText(DEFAULT_AUTHOR.name!)
   expect(text).toHaveClass('text-sm')
 })
diff --git a/frontend/packages/data-portal/app/components/AuthorLink/types.ts b/frontend/packages/data-portal/app/components/AuthorLink/types.ts
@@ -1,23 +1,12 @@
-export type AuthorInfo =
-  | {
-      corresponding_author_status?: boolean | null
-      email?: string | null
-      name: string
-      orcid?: string | null
-      primary_author_status?: boolean | null
-    }
-  | AuthorInfoV2
+import { DeepPartial } from 'utility-types'
 
-export type AuthorInfoV2 = {
-  correspondingAuthorStatus?: boolean | null
-  email?: string | null
-  name: string
-  orcid?: string | null
-  primaryAuthorStatus?: boolean | null
-}
+import { Dataset_Authors } from 'app/__generated__/graphql'
+import { Author } from 'app/types/gql/genericTypes'
+
+export type AuthorInfo = DeepPartial<Dataset_Authors> | Author
 
 // TODO(kira-api-migration): Delete this when everything migrated.
-export function convertToAuthorInfoV2(author: AuthorInfo): AuthorInfoV2 {
+export function convertToAuthorInfoV2(author: AuthorInfo): Author {
   return 'corresponding_author_status' in author ||
     'primary_author_status' in author
     ? {

diff --git a/frontend/packages/data-portal/app/components/AuthorList/AuthorList.test.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.test.tsx
@@ -1,10 +1,11 @@
 import { render, screen } from '@testing-library/react'
 
-import { AuthorInfoV2, MockAuthorLink } from 'app/components/AuthorLink'
+import { MockAuthorLink } from 'app/components/AuthorLink'
+import { AuthorInfoType } from 'app/types/authorInfo'
 
 import { AuthorList } from './AuthorList'
 
-const DEFAULT_AUTHORS: AuthorInfoV2[] = [
+const DEFAULT_AUTHORS: AuthorInfoType[] = [
   { name: 'Foo', correspondingAuthorStatus: true },
   { name: 'Bar' },
   { name: 'Foo Bar', primaryAuthorStatus: true },

diff --git a/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
@@ -7,14 +7,16 @@ import {
 } from 'app/components/AuthorLink'
 import { cns } from 'app/utils/cns'
 
-function getAuthorKey(author: AuthorInfo) {
-  return author.name + author.email
+function getAuthorKey(author: AuthorInfo): string {
+  return `${author.name}-${author.email}`
 }
 
 const SEPARATOR = `, `
 
 function getAuthorIds(authors: AuthorInfo[]) {
-  return authors.map((author) => author.name + author.email + author.orcid)
+  return authors.map(
+    (author) => `${author.name} - ${author.email} - ${author.orcid}`,
+  )
 }
 
 export function AuthorList({

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -3,7 +3,6 @@ import { isString } from 'lodash-es'
 
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
-import { AuthorInfo } from 'app/components/AuthorLink'
 import { AuthorList } from 'app/components/AuthorList'
 import { DatabaseEntryList } from 'app/components/DatabaseEntry'
 import { Link } from 'app/components/Link'
@@ -27,8 +26,10 @@ export function DatasetMetadataTable({
   const { t } = useI18n()
   const isV2 = isV2Dataset(dataset)
 
-  const numAuthors =
-    (isV2 ? dataset.authors?.edges?.length : dataset.authors?.length) ?? 0
+  const authors =
+    (isV2
+      ? dataset.authors?.edges?.map((author) => author.node).filter(isDefined)
+      : dataset.authors) ?? []
 
   const datasetMetadata = getTableData(
     !!showAllFields && {
@@ -91,10 +92,10 @@ export function DatasetMetadataTable({
     },
 
     !!showAllFields && {
-      label: numAuthors === 1 ? t('author') : t('authors'),
+      label: authors.length === 1 ? t('author') : t('authors'),
       labelExtra: <AuthorLegend inline />,
       renderValue: () => {
-        return <AuthorList authors={dataset.authors as AuthorInfo[]} large />
+        return <AuthorList authors={authors} large />
       },
       values: [],
       className: 'leading-sds-body-s',

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -352,7 +352,7 @@ export function AnnotationTable() {
                 sdsStyle="minimal"
                 onClick={() => {
                   openAnnotationDownloadModal({
-                    datasetId: run.dataset.id,
+                    datasetId: run.dataset?.id,
                     runId: run.id,
                     annotationId: annotationShape.annotation?.id,
                     referenceTomogramId: tomograms.find(
@@ -387,7 +387,7 @@ export function AnnotationTable() {
     t,
     openAnnotationDrawer,
     openAnnotationDownloadModal,
-    run.dataset.id,
+    run.dataset?.id,
     run.id,
     tomograms,
   ])

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -36,9 +36,7 @@ export function RunHeader() {
   const { toggleDrawer } = useMetadataDrawer()
   const { t } = useI18n()
 
-  const tiltSeries = run.tiltseries[0]
-
-  const tomogram = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0)
+  const tiltSeries = run.tiltseries.edges[0]?.node
 
   // Use author submitted tomogram if available, otherwise default to the first one
   const tomogramV2 =
@@ -50,8 +48,8 @@ export function RunHeader() {
 
   const { openRunDownloadModal } = useDownloadModalQueryParamState()
 
-  const framesCount = run.tiltseries_aggregate.aggregate?.sum?.frames_count ?? 0
-  const tiltSeriesCount = run.tiltseries_aggregate.aggregate?.count ?? 0
+  const framesCount = run.framesAggregate?.aggregate?.[0]?.count ?? 0
+  const tiltSeriesCount = run.tiltseriesAggregate?.aggregate?.[0]?.count ?? 0
   const annotationsCount = annotationFilesAggregates.totalCount
 
   return (
@@ -68,10 +66,10 @@ export function RunHeader() {
             }}
             tooltipPlacement="bottom"
             event={{
-              datasetId: run.dataset.id,
-              organism: run.dataset.organism_name ?? 'None',
+              datasetId: run.dataset?.id ?? 0,
+              organism: run.dataset?.organismName ?? 'None',
               runId: run.id,
-              tomogramId: tomogram?.id ?? 'None',
+              tomogramId: tomogramV2?.id?.toString() ?? 'None',
               type: 'run',
             }}
           />
@@ -82,7 +80,7 @@ export function RunHeader() {
             sdsStyle="rounded"
             onClick={() =>
               openRunDownloadModal({
-                datasetId: run.dataset.id,
+                datasetId: run.dataset?.id,
                 runId: run.id,
               })
             }
@@ -91,11 +89,11 @@ export function RunHeader() {
           </Button>
         </div>
       }
-      releaseDate={run.dataset.release_date}
-      lastModifiedDate={
-        run.dataset.last_modified_date ?? run.dataset.deposition_date
+      releaseDate={run.dataset?.releaseDate.split('T')[0]}
+      lastModifiedDate={run.dataset?.lastModifiedDate.split('T')[0]}
+      breadcrumbs={
+        run.dataset != null && <Breadcrumbs variant="run" data={run.dataset} />
       }
-      breadcrumbs={<Breadcrumbs variant="run" data={run.dataset} />}
       metadata={[{ key: t('runId'), value: `${IdPrefix.Run}-${run.id}` }]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Run)}
       title={run.name}
@@ -164,8 +162,8 @@ export function RunHeader() {
                     // hack to align with score badge
                     labelExtra: <span className="mt-sds-xxxs h-[18px]" />,
                     values:
-                      typeof tiltSeries?.tilt_series_quality === 'number'
-                        ? [String(tiltSeries.tilt_series_quality)]
+                      tiltSeries?.tiltSeriesQuality !== undefined
+                        ? [String(tiltSeries.tiltSeriesQuality)]
                         : [],
                     renderValue: (value) => (
                       <TiltSeriesQualityScoreBadge score={+value} />
@@ -174,22 +172,25 @@ export function RunHeader() {
                   {
                     label: t('tiltRange'),
                     values:
-                      typeof tiltSeries?.tilt_min === 'number' &&
-                      typeof tiltSeries?.tilt_max === 'number'
+                      tiltSeries?.tiltRange !== undefined &&
+                      tiltSeries.tiltMin !== undefined &&
+                      tiltSeries.tiltMax !== undefined
                         ? [
                             getTiltRangeLabel(
                               t,
-                              tiltSeries.tilt_min,
-                              tiltSeries.tilt_max,
+                              tiltSeries.tiltRange,
+                              tiltSeries.tiltMin,
+                              tiltSeries.tiltMax,
                             ),
                           ]
                         : [],
                   },
                   {
                     label: i18n.tiltScheme,
-                    values: tiltSeries?.tilting_scheme
-                      ? [tiltSeries.tilting_scheme]
-                      : [],
+                    values:
+                      tiltSeries?.tiltingScheme !== undefined
+                        ? [tiltSeries.tiltingScheme]
+                        : [],
                   },
                 ]}
               />

diff --git a/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx
@@ -19,15 +19,19 @@ export function RunMetadataDrawer() {
       label={i18n.runDetails}
       idInfo={{ label: 'runId', text: `${IdPrefix.Run}-${run.id}` }}
     >
-      <DatasetMetadataTable
-        showAllFields
-        dataset={run.dataset}
-        initialOpen={false}
-      />
-      <SampleAndExperimentConditionsTable
-        dataset={run.dataset}
-        initialOpen={false}
-      />
+      {run.dataset != null && (
+        <>
+          <DatasetMetadataTable
+            showAllFields
+            dataset={run.dataset}
+            initialOpen={false}
+          />
+          <SampleAndExperimentConditionsTable
+            dataset={run.dataset}
+            initialOpen={false}
+          />
+        </>
+      )}
       <RunTiltSeriesTable />
       <TomogramsSummarySection />
     </MetadataDrawer>

diff --git a/frontend/packages/data-portal/app/components/Run/RunTiltSeriesTable.tsx b/frontend/packages/data-portal/app/components/Run/RunTiltSeriesTable.tsx
@@ -32,7 +32,7 @@ export function RunTiltSeriesTable() {
 
   return (
     <TiltSeriesTable
-      tiltSeriesData={run.tiltseries[0]}
+      tiltSeriesData={run.tiltseries.edges[0]?.node}
       fields={SELECT_FIELDS}
     />
   )

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -61,7 +61,7 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('publications'),
-            values: [run.dataset.dataset_publications ?? ''],
+            values: [run.dataset?.datasetPublications ?? ''],
             renderValue: (value: string) => (
               <DatabaseEntryList entries={value} />
             ),

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -200,8 +200,8 @@ export function TomogramsTable() {
                   }}
                   tooltipPlacement="top"
                   event={{
-                    datasetId: run.dataset.id,
-                    organism: run.dataset.organism_name ?? 'None',
+                    datasetId: run.dataset?.id ?? 0,
+                    organism: run.dataset?.organismName ?? 'None',
                     runId: run.id,
                     tomogramId: original.id,
                     type: 'tomogram',
@@ -226,7 +226,7 @@ export function TomogramsTable() {
                 onClick={() => {
                   openTomogramDownloadModal({
                     tomogramId: original.id,
-                    datasetId: run.dataset.id,
+                    datasetId: run.dataset?.id,
                     runId: run.id,
                   })
                 }}
@@ -243,8 +243,8 @@ export function TomogramsTable() {
     ] as ColumnDef<TomogramV2>[] // https://github.com/TanStack/table/issues/4382
   }, [
     run.id,
-    run.dataset.id,
-    run.dataset.organism_name,
+    run.dataset?.id,
+    run.dataset?.organismName,
     openMetadataDrawer,
     openTomogramDownloadModal,
     t,

diff --git a/frontend/packages/data-portal/app/components/TiltSeriesTable/useTiltSeriesValueMappings.tsx b/frontend/packages/data-portal/app/components/TiltSeriesTable/useTiltSeriesValueMappings.tsx
@@ -28,6 +28,7 @@ export function useTiltSeriesValueMappings(
   const tiltAxis = isV2 ? tiltSeries.tiltAxis : tiltSeries?.tilt_axis
   const tiltMin = isV2 ? tiltSeries.tiltMin : tiltSeries?.tilt_min
   const tiltMax = isV2 ? tiltSeries.tiltMax : tiltSeries?.tilt_max
+  const tiltRange = isV2 ? tiltSeries.tiltRange : tiltMax! - tiltMin!
   const tiltStep = isV2 ? tiltSeries.tiltStep : tiltSeries?.tilt_step
 
   return useMemo<Record<TiltSeriesKeys, TableData>>(
@@ -201,8 +202,10 @@ export function useTiltSeriesValueMappings(
       [TiltSeriesKeys.TiltRange]: {
         label: t('tiltRange'),
         values: [
-          tiltMin !== undefined && tiltMax !== undefined
-            ? getTiltRangeLabel(t, tiltMin, tiltMax)
+          tiltMin !== undefined &&
+          tiltMax !== undefined &&
+          tiltRange !== undefined
+            ? getTiltRangeLabel(t, tiltRange, tiltMin, tiltMax)
             : '--',
         ],
       },
@@ -237,6 +240,7 @@ export function useTiltSeriesValueMappings(
       tiltAxis,
       tiltMax,
       tiltMin,
+      tiltRange,
       tiltStep,
     ],
   )

diff --git a/frontend/packages/data-portal/app/context/DownloadModal.context.ts b/frontend/packages/data-portal/app/context/DownloadModal.context.ts
@@ -20,7 +20,6 @@ export interface DownloadModalContextValue {
   runName?: string
   s3Path?: string
   tomogramId?: number
-  tomogramVoxelId?: number
   type: DownloadModalType
 }
 

diff --git a/frontend/packages/data-portal/app/hooks/useRunById.ts b/frontend/packages/data-portal/app/hooks/useRunById.ts
@@ -1,16 +1,14 @@
 import { useTypedLoaderData } from 'remix-typedjson'
 
-import { GetRunByIdQuery } from 'app/__generated__/graphql'
 import { GetRunByIdV2Query } from 'app/__generated_v2__/graphql'
 import { isDefined } from 'app/utils/nullish'
 
 export function useRunById() {
-  const { v1, v2 } = useTypedLoaderData<{
-    v1: GetRunByIdQuery
+  const { v2 } = useTypedLoaderData<{
     v2: GetRunByIdV2Query
   }>()
 
-  const run = v1.runs[0]
+  const run = v2.runs[0]
 
   const { tomograms, annotationShapes } = v2