From 2ab75e8942acf644236011fa27babe941123c437 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 8 May 2024 10:50:21 -0700
Subject: [PATCH] chore: change file summary location (#701)

#595
- changes file summary location + style
- changes style of subtitles in run overview
- fetches frame data
---
 .../app/components/InlineMetadata.tsx         | 67 +++++++++++++++++++
 .../data-portal/app/components/PageHeader.tsx | 32 +--------
 .../app/components/Run/RunHeader.tsx          | 53 ++++++++++++++-
 .../app/components/Table/MetadataTable.tsx    |  2 +-
 .../app/graphql/getRunById.server.ts          | 12 ++++
 .../public/locales/en/translation.json        |  5 +-
 6 files changed, 138 insertions(+), 33 deletions(-)
 create mode 100644 frontend/packages/data-portal/app/components/InlineMetadata.tsx

diff --git a/frontend/packages/data-portal/app/components/InlineMetadata.tsx b/frontend/packages/data-portal/app/components/InlineMetadata.tsx
new file mode 100644
index 000000000..b038c5100
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/InlineMetadata.tsx
@@ -0,0 +1,67 @@
+import { cns } from 'app/utils/cns'
+
+export interface Metadata {
+  key: string
+  value: string
+  uppercase?: boolean
+}
+
+export function InlineMetadata({
+  label,
+  fields,
+  subheader = false,
+}: {
+  label?: string
+  fields: Metadata[]
+  subheader?: boolean
+}) {
+  const fieldsRender = (
+    <ul className="list-none flex gap-sds-l items-baseline">
+      {fields.map(({ key, value, uppercase }) => (
+        <li
+          className={cns(
+            'flex flex-row items-baseline justify-left gap-sds-xxs',
+            subheader && 'text-sds-gray-500',
+          )}
+          key={key + value}
+        >
+          <span
+            className={cns(
+              'font-semibold',
+              subheader
+                ? 'text-sds-gray-600 tracking-sds-caps text-sds-caps-xxs leading-sds-caps-xxs'
+                : 'text-sds-body-xxs leading-sds-body-xxs',
+              uppercase && 'uppercase',
+              subheader && uppercase && 'tracking-sds-caps',
+            )}
+          >
+            {key}:
+          </span>
+
+          <span
+            className={
+              subheader
+                ? 'text-sds-body-s leading-sds-body-s'
+                : 'text-sds-body-xxs leading-sds-body-xxs'
+            }
+          >
+            {value}
+          </span>
+        </li>
+      ))}
+    </ul>
+  )
+
+  if (label) {
+    return (
+      <div className="flex flex-row gap-sds-xl text-sds-gray-black items-baseline">
+        <span className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase tracking-sds-caps">
+          {label}
+        </span>
+        {fieldsRender}
+      </div>
+    )
+  }
+
+  return fieldsRender
+}
diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx
index 189e22675..fae9ceb9f 100644
--- a/frontend/packages/data-portal/app/components/PageHeader.tsx
+++ b/frontend/packages/data-portal/app/components/PageHeader.tsx
@@ -2,16 +2,11 @@ import { Button, Icon } from '@czi-sds/components'
 import { useSearchParams } from '@remix-run/react'
 import { ReactNode } from 'react'
 
+import { InlineMetadata, Metadata } from 'app/components/InlineMetadata'
 import { Link } from 'app/components/Link'
 import { useI18n } from 'app/hooks/useI18n'
 import { cns } from 'app/utils/cns'
 
-interface PageHeaderMetadata {
-  key: string
-  value: string
-  uppercase?: boolean
-}
-
 export function PageHeader({
   actions,
   backToResultsLabel,
@@ -25,7 +20,7 @@ export function PageHeader({
   actions?: ReactNode
   backToResultsLabel?: string
   lastModifiedDate?: string
-  metadata?: PageHeaderMetadata[]
+  metadata?: Metadata[]
   onMoreInfoClick?(): void
   releaseDate?: string
   renderHeader?({ moreInfo }: { moreInfo?: ReactNode }): ReactNode
@@ -86,29 +81,8 @@ export function PageHeader({
                   {title}
                 </h1>
 
-                {/* metadata */}
                 {metadata.length > 0 && (
-                  <ul className="list-none flex gap-sds-l">
-                    {metadata.map(({ key, value, uppercase }) => (
-                      <li
-                        className="flex flex-row items-center justify-left gap-sds-xxs text-sds-gray-500"
-                        key={key + value}
-                      >
-                        <span
-                          className={cns(
-                            'font-semibold text-sds-caps-xxs leading-sds-caps-xxs tracking-[0.3px]',
-                            uppercase && 'uppercase',
-                          )}
-                        >
-                          {key}:
-                        </span>
-
-                        <span className="text-sds-body-s leading-sds-body-s">
-                          {value}
-                        </span>
-                      </li>
-                    ))}
-                  </ul>
+                  <InlineMetadata fields={metadata} subheader />
                 )}
               </div>
 
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
index 289b5f973..eff2cedaf 100644
--- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -1,6 +1,8 @@
 import { Button, Icon } from '@czi-sds/components'
+import { sum } from 'lodash-es'
 
 import { I18n } from 'app/components/I18n'
+import { InlineMetadata } from 'app/components/InlineMetadata'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
 import { PageHeader } from 'app/components/PageHeader'
@@ -18,6 +20,24 @@ import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
 import { getTiltRangeLabel } from 'app/utils/tiltSeries'
 
+interface FileSummaryData {
+  key: string
+  value: number
+}
+
+function FileSummary({ data }: { data: FileSummaryData[] }) {
+  const { t } = useI18n()
+  return (
+    <InlineMetadata
+      label={t('fileSummary')}
+      fields={data.map(({ key, value }) => ({
+        key,
+        value: t('fileCount', { count: value }),
+      }))}
+    />
+  )
+}
+
 export function RunHeader() {
   const { run } = useRunById()
   const { toggleDrawer } = useMetadataDrawer()
@@ -67,7 +87,6 @@ export function RunHeader() {
         </>
       }
       backToResultsLabel={run.dataset.title}
-      lastModifiedDate="2023-12-16"
       metadata={[{ key: t('runId'), value: `${run.id}` }]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Run)}
       title={run.name}
@@ -86,6 +105,38 @@ 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,
+                    ),
+                  ),
+                },
+              ]}
+            />
+
             <div className="flex gap-sds-xxl flex-col lg:flex-row">
               <MetadataTable
                 title={i18n.tiltSeries}
diff --git a/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx b/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
index cfa390669..77b31943b 100644
--- a/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
@@ -23,7 +23,7 @@ export function MetadataTable({
   return (
     <div className="flex flex-col gap-sds-m">
       {title && (
-        <p className="text-sds-header-m leading-sds-header-m font-semibold">
+        <p className="text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps uppercase font-semibold">
           {title}
         </p>
       )}
diff --git a/frontend/packages/data-portal/app/graphql/getRunById.server.ts b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
index a6b1f9381..ce876362a 100644
--- a/frontend/packages/data-portal/app/graphql/getRunById.server.ts
+++ b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
@@ -179,6 +179,12 @@ const GET_RUN_BY_ID_QUERY = gql(`
           }
         }
 
+        tomograms_aggregate {
+          aggregate {
+            count
+          }
+        }
+
         tomogram_processing: tomograms(distinct_on: processing) {
           processing
         }
@@ -201,6 +207,12 @@ const GET_RUN_BY_ID_QUERY = gql(`
           avg {
             tilt_series_quality
           }
+
+          sum {
+            frames_count
+          }
+
+          count
         }
       }
     }
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
index 1ea9e1ee0..cb7c2d40f 100644
--- a/frontend/packages/data-portal/public/locales/en/translation.json
+++ b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -99,8 +99,8 @@
   "false": "False",
   "faq": "FAQ",
   "fiducialAlignmentStatus": "Fiducial Alignment Status",
-  "fileCount_one": "{{count}} File",
-  "fileCount_other": "{{count}} Files",
+  "fileCount_one": "{{count}} file",
+  "fileCount_other": "{{count}} files",
   "fileFormat": "File Format",
   "fileFormatTooltipMrc": "<url to='$t(mrcLink)'>MRC</url>: standard format for CryoET data",
   "fileFormatTooltipNdJson": "<url to='$t(ndJsonLink)'>Newline Delimited JSON</url>: format used for point annotations where each point is a JSON on its own line",
@@ -108,6 +108,7 @@
   "fileMrc": "MRC (.mrc)",
   "fileNdJson": "Newline Delimited JSON (.ndjson)",
   "fileOmeZarr": "OME-ZARR (.zarr)",
+  "fileSummary": "File Summary",
   "filterBy": "Filter by",
   "filterByAnyOfTheFollowing": "Filter by any of the following",
   "filterCountOfMaxType": "{{count}} of {{max}} {{type}}",