feat: Update Tomogram Processing field format and query (#1031)

closes #993

Changes query to guarantee uniqueness and order.

frontend/packages/data-portal/app/components/Run/RunHeader.tsx

@@ -44,7 +44,8 @@ function FileSummary({ data }: { data: FileSummaryData[] }) {
 
 export function RunHeader() {
   const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
-  const { run, annotationFilesAggregates, tomogramsCount } = useRunById()
+  const { run, processingMethods, annotationFilesAggregates, tomogramsCount } =
+    useRunById()
   const { toggleDrawer } = useMetadataDrawer()
   const { t } = useI18n()
 
@@ -237,9 +238,8 @@ export function RunHeader() {
                   },
                   {
                     label: i18n.tomogramProcessing,
-                    values: run.tomogram_stats
-                      .flatMap((stats) => stats.tomogram_processing)
-                      .map((tomo) => tomo.processing),
+                    values: processingMethods,
+                    className: 'capitalize',
                   },
                   {
                     label: i18n.annotatedObjects,

frontend/packages/data-portal/app/components/Run/TomogramTable.tsx

@@ -3,7 +3,6 @@
 import { Button, Icon } from '@czi-sds/components'
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
 import { useAtom } from 'jotai'
-import { startCase } from 'lodash-es'
 import { useCallback, useMemo } from 'react'
 
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
@@ -143,7 +142,7 @@ export function TomogramsTable() {
         ),
         cell: ({ getValue }) => (
           <TableCell width={TomogramTableWidths.postProcessing}>
-            <div>{startCase(getValue())}</div>
+            <div className="capitalize">{getValue()}</div>
           </TableCell>
         ),
       }),

frontend/packages/data-portal/app/graphql/getRunById.server.ts

@@ -148,10 +148,6 @@ const GET_RUN_BY_ID_QUERY = gql(`
           }
         }
 
-        tomogram_processing: tomograms(distinct_on: processing) {
-          processing
-        }
-
         tomogram_resolutions: tomograms(distinct_on: voxel_spacing) {
           https_mrc_scale0
           id
@@ -296,6 +292,15 @@ const GET_RUN_BY_ID_QUERY = gql(`
       }
     }
 
+    # Distinct tomogram processing methods:
+    tomograms_for_distinct_processing_methods: tomograms(
+      where: { tomogram_voxel_spacing: { run_id: { _eq: $id } } }
+      distinct_on: processing
+      order_by: { processing: asc }
+    ) {
+      processing
+    }
+
     # Annotation counts:
     annotation_files_aggregate_for_total: annotation_files_aggregate(
       where: {

frontend/packages/data-portal/app/hooks/useRunById.ts

@@ -12,6 +12,10 @@ export function useRunById() {
 
   const { tomograms } = data
 
+  const processingMethods = data.tomograms_for_distinct_processing_methods.map(
+    (tomogram) => tomogram.processing,
+  )
+
   const objectNames = useMemo(
     () =>
       Array.from(
@@ -69,6 +73,7 @@ export function useRunById() {
     run,
     annotationFiles,
     tomograms,
+    processingMethods,
     objectNames,
     objectShapeTypes,
     annotationSoftwares,

frontend/packages/data-portal/app/routes/runs.$id.tsx

@@ -77,17 +77,18 @@ export function shouldRevalidate(args: ShouldRevalidateFunctionArgs) {
 
 export default function RunByIdPage() {
   const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
-  const { run, annotationFiles, annotationFilesAggregates, tomogramsCount } =
-    useRunById()
+  const {
+    run,
+    processingMethods,
+    annotationFiles,
+    annotationFilesAggregates,
+    tomogramsCount,
+  } = useRunById()
 
   const allTomogramResolutions = run.tomogram_stats.flatMap((stats) =>
     stats.tomogram_resolutions.map((tomogram) => tomogram),
   )
 
-  const allTomogramProcessing = run.tomogram_stats.flatMap((stats) =>
-    stats.tomogram_processing.map((tomogram) => tomogram.processing),
-  )
-
   const {
     downloadConfig,
     tomogramProcessing,
@@ -178,7 +179,7 @@ export default function RunByIdPage() {
         <DownloadModal
           activeAnnotation={activeAnnotation}
           activeTomogramResolution={activeTomogramResolution}
-          allTomogramProcessing={allTomogramProcessing}
+          allTomogramProcessing={processingMethods}
           allTomogramResolutions={allTomogramResolutions}
           datasetId={run.dataset.id}
           datasetTitle={run.dataset.title}

frontend/packages/data-portal/e2e/pageObjects/singleRunPage.ts

@@ -1,18 +1,47 @@
-import { Locator } from '@playwright/test'
-import { SINGLE_RUN_URL } from 'e2e/constants'
+import {
+  ApolloClient,
+  ApolloQueryResult,
+  NormalizedCacheObject,
+} from '@apollo/client'
+import { Locator, Page } from '@playwright/test'
+import { E2E_CONFIG, SINGLE_RUN_URL } from 'e2e/constants'
+
+import { GetRunByIdQuery } from 'app/__generated__/graphql'
+import { getRunById } from 'app/graphql/getRunById.server'
 
 import { BasePage } from './basePage'
 
 /** /runs/$id */
 export class SingleRunPage extends BasePage {
+  constructor(
+    playwrightPage: Page,
+    private readonly client: ApolloClient<NormalizedCacheObject>,
+  ) {
+    super(playwrightPage)
+  }
+
   goToPage(): Promise<void> {
     return this.goTo(SINGLE_RUN_URL)
   }
 
+  loadData(): Promise<ApolloQueryResult<GetRunByIdQuery>> {
+    return getRunById({
+      client: this.client,
+      id: Number(E2E_CONFIG.runId),
+      annotationsPage: 1,
+    })
+  }
+
   getPrimaryViewTomogramButton(): Locator {
     return this.page.locator('a:has-text("View Tomogram")')
   }
 
+  findProcessingMethodsCell(): Locator {
+    return this.page
+      .locator(`td:has-text("Tomogram Processing")`)
+      .locator('+ td')
+  }
+
   findAnnotatedObjectsCell(): Locator {
     return this.page.locator(`td:has-text("Annotated Objects")`).locator('+ td')
   }

frontend/packages/data-portal/e2e/singleRun.test.ts

@@ -1,21 +1,20 @@
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 import { expect, test } from '@playwright/test'
 
-import { getRunById } from 'app/graphql/getRunById.server'
-
 import { getApolloClient } from './apollo'
-import { E2E_CONFIG } from './constants'
 import { NeuroglancerPage } from './pageObjects/neuroglancerPage'
 import { SingleRunPage } from './pageObjects/singleRunPage'
 
 test.describe('Single run page: ', () => {
   let client: ApolloClient<NormalizedCacheObject>
   let page: SingleRunPage
   let neuroglancerPage: NeuroglancerPage
+
   test.beforeEach(async ({ page: playwrightPage }) => {
     client = getApolloClient()
-    page = new SingleRunPage(playwrightPage)
+    page = new SingleRunPage(playwrightPage, client)
     neuroglancerPage = new NeuroglancerPage(playwrightPage)
+
     await page.goToPage()
   })
 
@@ -41,16 +40,24 @@ test.describe('Single run page: ', () => {
     await expect(neuroglancerPage.findErrorText()).toHaveCount(0)
   })
 
+  test('Processing methods displayed', async () => {
+    const response = (
+      await page.loadData()
+    ).data.tomograms_for_distinct_processing_methods.map(
+      (tomogram) => tomogram.processing,
+    )
+
+    expect(
+      (await page.findProcessingMethodsCell().textContent())!
+        .toLowerCase()
+        .split(','),
+    ).toEqual(response)
+  })
+
   test('Annotated Objects collapse after 7 items', async () => {
     const response = Array.from(
       new Set(
-        (
-          await getRunById({
-            client,
-            id: Number(E2E_CONFIG.runId),
-            annotationsPage: 1,
-          })
-        ).data.runs[0].tomogram_stats
+        (await page.loadData()).data.runs[0].tomogram_stats
           .flatMap((tomogramVoxelSpacing) => tomogramVoxelSpacing.annotations)
           .map((annotation) => annotation.object_name),
       ),