feat: Add multiple tomograms feature flag and gate run header changes…

… by it (#886)
chanzuckerberg · Jul 17, 2024 · f65fa0c · f65fa0c
1 parent 3cf96cb
commit f65fa0c
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 38 deletions.
diff --git a/frontend/packages/data-portal/app/components/InlineMetadata.tsx b/frontend/packages/data-portal/app/components/InlineMetadata.tsx
@@ -1,9 +1,12 @@
-import { cns } from 'app/utils/cns'
+import { cns, cnsNoMerge } from 'app/utils/cns'
 
 export interface Metadata {
   key: string
   value: string
+
   uppercase?: boolean
+  keyClass?: string
+  valueClass?: string
 }
 
 export function InlineMetadata({
@@ -17,7 +20,7 @@ export function InlineMetadata({
 }) {
   const fieldsRender = (
     <ul className="list-none flex gap-sds-l items-baseline">
-      {fields.map(({ key, value, uppercase }) => (
+      {fields.map(({ key, value, uppercase, keyClass, valueClass }) => (
         <li
           className={cns(
             'flex flex-row items-baseline justify-left gap-sds-xxs',
@@ -26,24 +29,26 @@ export function InlineMetadata({
           key={key + value}
         >
           <span
-            className={cns(
+            className={cnsNoMerge(
               'font-semibold',
               subheader
                 ? 'text-sds-gray-600 tracking-sds-body-xxs text-sds-caps-xxs leading-sds-caps-xxs'
                 : 'text-sds-body-xxs leading-sds-body-xxs',
               uppercase && 'uppercase',
               subheader && uppercase && 'tracking-sds-caps',
+              keyClass,
             )}
           >
             {key}:
           </span>
 
           <span
-            className={
+            className={cnsNoMerge(
               subheader
                 ? 'text-sds-body-s leading-sds-body-s'
-                : 'text-sds-body-xxs leading-sds-body-xxs'
-            }
+                : 'text-sds-body-xxs leading-sds-body-xxs',
+              valueClass,
+            )}
           >
             {value}
           </span>

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -19,6 +19,7 @@ import {
 } from 'app/hooks/useMetadataDrawer'
 import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
+import { useFeatureFlag } from 'app/utils/featureFlags'
 import { getTiltRangeLabel } from 'app/utils/tiltSeries'
 
 interface FileSummaryData {
@@ -40,6 +41,7 @@ function FileSummary({ data }: { data: FileSummaryData[] }) {
 }
 
 export function RunHeader() {
+  const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
   const { run } = useRunById()
   const { toggleDrawer } = useMetadataDrawer()
   const { t } = useI18n()
@@ -52,6 +54,19 @@ export function RunHeader() {
 
   const { openTomogramDownloadModal } = useDownloadModalQueryParamState()
 
+  const framesCount = run.tiltseries_aggregate.aggregate?.sum?.frames_count ?? 0
+  const tiltSeriesCount = run.tiltseries_aggregate.aggregate?.count ?? 0
+  const tomogramsCount = sum(
+    run.tomogram_stats.flatMap(
+      (stats) => stats.tomograms_aggregate.aggregate?.count ?? 0,
+    ),
+  )
+  const annotationsCount = sum(
+    run.tomogram_stats.flatMap(
+      (stats) => stats.annotations_aggregate.aggregate?.count ?? 0,
+    ),
+  )
+
   return (
     <PageHeader
       actions={
@@ -110,37 +125,59 @@ export function RunHeader() {
           <div className="flex flex-col gap-sds-xl flex-auto pt-sds-l">
             <PageHeaderSubtitle>{t('runOverview')}</PageHeaderSubtitle>
 
-            <FileSummary
-              data={[
-                {
-                  key: t('frames'),
-                  value:
-                    run.tiltseries_aggregate.aggregate?.sum?.frames_count ?? 0,
-                },
-                {
-                  key: t('tiltSeries'),
-                  value: run.tiltseries_aggregate.aggregate?.count ?? 0,
-                },
-                {
-                  key: t('tomograms'),
-                  value: sum(
-                    run.tomogram_stats.flatMap(
-                      (stats) =>
-                        stats.tomograms_aggregate.aggregate?.count ?? 0,
-                    ),
-                  ),
-                },
-                {
-                  key: t('annotations'),
-                  value: sum(
-                    run.tomogram_stats.flatMap(
-                      (stats) =>
-                        stats.annotations_aggregate.aggregate?.count ?? 0,
-                    ),
-                  ),
-                },
-              ]}
-            />
+            {multipleTomogramsEnabled ? (
+              <InlineMetadata
+                label={t('dataSummary')}
+                fields={[
+                  {
+                    key: t('frames'),
+                    value: framesCount > 0 ? t('available') : t('notSubmitted'),
+                    valueClass:
+                      framesCount > 0 ? undefined : 'text-sds-gray-500',
+                  },
+                  {
+                    key: t('tiltSeries'),
+                    value:
+                      tiltSeriesCount > 0 ? t('available') : t('notSubmitted'),
+                    valueClass:
+                      tiltSeriesCount > 0 ? undefined : 'text-sds-gray-500',
+                  },
+                  {
+                    key: t('alignmentFile'),
+                    value: '', // TODO(bchu): Confirm how this should be counted.
+                  },
+                  {
+                    key: t('tomograms'),
+                    value: tomogramsCount.toString(),
+                  },
+                  {
+                    key: t('annotations'),
+                    value: annotationsCount.toString(),
+                  },
+                ]}
+              />
+            ) : (
+              <FileSummary
+                data={[
+                  {
+                    key: t('frames'),
+                    value: framesCount,
+                  },
+                  {
+                    key: t('tiltSeries'),
+                    value: tiltSeriesCount,
+                  },
+                  {
+                    key: t('tomograms'),
+                    value: tomogramsCount,
+                  },
+                  {
+                    key: t('annotations'),
+                    value: annotationsCount,
+                  },
+                ]}
+              />
+            )}
 
             <div className="flex gap-sds-xxl flex-col lg:flex-row">
               <MetadataTable

diff --git a/frontend/packages/data-portal/app/utils/featureFlags.ts b/frontend/packages/data-portal/app/utils/featureFlags.ts
@@ -4,10 +4,11 @@ import { useEnvironment } from 'app/context/Environment.context'
 
 export type FeatureFlagEnvironment = typeof process.env.ENV
 
-export type FeatureFlagKey = 'depositions'
+export type FeatureFlagKey = 'depositions' | 'multipleTomograms'
 
 export const FEATURE_FLAGS: Record<FeatureFlagKey, FeatureFlagEnvironment[]> = {
   depositions: ['local', 'dev'],
+  multipleTomograms: ['local', 'dev'],
 }
 
 const ENABLE_FEATURE_PARAM = 'enable-feature'

diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -15,6 +15,7 @@
   "affiliationNames": "Affiliation Names",
   "affineTransformationMatrix": "Affine Transformation Matrix",
   "alignedTiltSeriesBinning": "Aligned Tilt Series Binning",
+  "alignmentFile": "Alignment File",
   "all": "All",
   "allDatasets": "All Datasets",
   "annotatedObjects": "Annotated Objects",
@@ -40,6 +41,7 @@
   "authors": "Authors",
   "authorsMaybePlural": "Author(s)",
   "automated": "Automated",
+  "available": "Available",
   "availableFiles": "Available Files",
   "availableProcessing": "Available Processing",
   "awsCliLink": "https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html",
@@ -95,6 +97,7 @@
   "datasetTitle": "Dataset Title",
   "datasets": "Datasets",
   "datasetsTab": "Datasets {{count}}",
+  "dataSummary": "Data Summary",
   "depositionDate": "Deposition Date",
   "depositionId": "Deposition ID",
   "depositionName": "Deposition Name",