feat: deposition metadata drawer updates (#1824)

* refactor metadata drawer to use render props

* drawer set active tab state

* refactor metadata drawer structure + annotation method metadata table

* table spacing

* tomogram methods metadata table

* share mock data + interfaces

* acquisition methods metadata table

* experimental conditions metadata table

* chore: Updated [rdev] values.yaml image tags to sha-030ca2d

* use component props

* chore: Updated [rdev] values.yaml image tags to sha-ce989df

---------

Co-authored-by: czi-github-helper[bot] <+czi-github-helper[bot]@users.noreply.github.com>

Author: codemonkey800

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     frontend:
       image:
-        tag: sha-4c4295a
+        tag: sha-ce989df
       replicaCount: 1
       env:
         - name: API_URL_V2

frontend/packages/data-portal/app/components/Dataset/DatasetMetadataDrawer.tsx

@@ -18,10 +18,19 @@ export function DatasetMetadataDrawer() {
       title={dataset.title}
       label={t('datasetDetails')}
       idInfo={{ label: 'datasetId', text: `${IdPrefix.Dataset}-${dataset.id}` }}
-    >
+      MetadataTabComponent={MetadataTab}
+    />
+  )
+}
+
+function MetadataTab() {
+  const { dataset } = useDatasetById()
+
+  return (
+    <>
       <DatasetMetadataTable dataset={dataset} />
       <SampleAndExperimentConditionsTable dataset={dataset} />
       <DatasetTiltSeriesTable />
-    </MetadataDrawer>
+    </>
   )
 }

frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer.tsx

@@ -0,0 +1,45 @@
+import { ACQUISITION_METHOD_MOCK_DATA } from 'app/components/Deposition/mock'
+import { useI18n } from 'app/hooks/useI18n'
+import { getTableData } from 'app/utils/table'
+
+import { MethodTableList } from './MethodTableList'
+
+export function AcquisitionMethodsMetadataTable() {
+  const { t } = useI18n()
+
+  return (
+    <MethodTableList
+      accordionId="acquisition-methods-table"
+      data={ACQUISITION_METHOD_MOCK_DATA}
+      header="acquisitionMethods"
+      getTableData={(data) =>
+        getTableData(
+          {
+            label: t('microscope'),
+            values: [data.microscope],
+          },
+          {
+            label: t('camera'),
+            values: [data.camera],
+          },
+          {
+            label: t('tiltingScheme'),
+            values: [data.tiltingScheme],
+          },
+          {
+            label: t('pixelSize'),
+            values: [data.pixelSize],
+          },
+          {
+            label: t('electronOptics'),
+            values: [data.electronOptics],
+          },
+          {
+            label: t('phasePlate'),
+            values: [data.phasePlate],
+          },
+        )
+      }
+    />
+  )
+}

frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer/AcquisitionMethodsMetadataTable.tsx

@@ -0,0 +1,74 @@
+import {
+  Annotation_Method_Link_Type_Enum,
+  Annotation_Method_Type_Enum,
+} from 'app/__generated_v2__/graphql'
+import type { AnnotationMethodMetadata } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import { getTableData } from 'app/utils/table'
+
+import { MethodLinkList } from '../MethodLinks/MethodLinkList'
+import { MethodTableList } from './MethodTableList'
+
+const MOCK_DATA: AnnotationMethodMetadata[] = Array(2)
+  .fill(null)
+  .map(() => ({
+    annotationMethod: 'Lorem ipsum dolor sit amet',
+    count: 30,
+    annotationSoftware: '',
+    methodType: Annotation_Method_Type_Enum.Hybrid,
+    methodLinks: [
+      {
+        name: 'Link 1',
+        linkType: Annotation_Method_Link_Type_Enum.Website,
+        link: 'https://example.com',
+      },
+      {
+        name: 'Link 2',
+        linkType: Annotation_Method_Link_Type_Enum.ModelsWeights,
+        link: 'https://example.com',
+      },
+      {
+        name: 'Link 3',
+        linkType: Annotation_Method_Link_Type_Enum.Documentation,
+        link: 'https://example.com',
+      },
+    ],
+  }))
+
+export function AnnotationsMethodsMetadataTable() {
+  const { t } = useI18n()
+
+  return (
+    <MethodTableList
+      accordionId="annotation-methods-table"
+      data={MOCK_DATA}
+      header="annotationMethods"
+      getTableData={(data) =>
+        getTableData(
+          {
+            label: t('annotations'),
+            values: [data.count],
+          },
+          {
+            label: t('methodType'),
+            values: [data.methodType ?? ''],
+          },
+          {
+            label: t('methodDetails'),
+            values: [data.annotationMethod],
+          },
+          {
+            label: t('methodLinks'),
+            values: [],
+            renderValues: () => (
+              <MethodLinkList
+                annotationMethod={data.annotationMethod}
+                methodLinks={data.methodLinks}
+              />
+            ),
+          },
+        )
+      }
+    />
+  )
+}

frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer/AnnotationsMethodsMetadataTable.tsx

@@ -0,0 +1,59 @@
+import { MethodLinksMetadataTable } from 'app/components/Deposition/MethodLinks/MethodLinksMetadataTable'
+import { MetadataDrawer } from 'app/components/MetadataDrawer'
+import { IdPrefix } from 'app/constants/idPrefixes'
+import { useDepositionById } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
+import { useFeatureFlag } from 'app/utils/featureFlags'
+
+import { AcquisitionMethodsMetadataTable } from './AcquisitionMethodsMetadataTable'
+import { AnnotationsMethodsMetadataTable } from './AnnotationsMethodsMetadataTable'
+import { AnnotationsSummaryMetadataTable } from './AnnotationsSummaryMetadataTable'
+import { DepositionMetadataTable } from './DepositionMetadataTable'
+import { ExperimentalConditionsMetadataTable } from './ExperimentalConditionsMetadataTable'
+import { TomogramMethodsMetadataTable } from './TomogramMethodsMetadataTable'
+
+export function DepositionMetadataDrawer() {
+  const { t } = useI18n()
+  const { deposition } = useDepositionById()
+  const isExpandDepositions = useFeatureFlag('expandDepositions')
+
+  return (
+    <MetadataDrawer
+      drawerId={MetadataDrawerId.Deposition}
+      title={deposition?.title ?? ''}
+      label={t('depositionDetails')}
+      idInfo={{
+        label: 'depositionId',
+        text: `${IdPrefix.Deposition}-${deposition?.id}`,
+      }}
+      MetadataTabComponent={MetadataTab}
+      HowToCiteTabComponent={isExpandDepositions ? HowToCiteTab : undefined}
+    />
+  )
+}
+
+function MetadataTab() {
+  const { deposition } = useDepositionById()
+  const isExpandDepositions = useFeatureFlag('expandDepositions')
+
+  return (
+    <>
+      <DepositionMetadataTable deposition={deposition} />
+      <AnnotationsSummaryMetadataTable />
+
+      {!isExpandDepositions && <MethodLinksMetadataTable />}
+    </>
+  )
+}
+
+function HowToCiteTab() {
+  return (
+    <>
+      <AnnotationsMethodsMetadataTable />
+      <TomogramMethodsMetadataTable />
+      <AcquisitionMethodsMetadataTable />
+      <ExperimentalConditionsMetadataTable />
+    </>
+  )
+}

…tion/AnnotationsSummaryMetadataTable.tsx …awer/AnnotationsSummaryMetadataTable.tsxfrontend/packages/data-portal/app/components/Deposition/AnnotationsSummaryMetadataTable.tsx renamed to frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer/AnnotationsSummaryMetadataTable.tsx frontend/packages/data-portal/app/components/Deposition/AnnotationsSummaryMetadataTable.tsx renamed to frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer/AnnotationsSummaryMetadataTable.tsx

@@ -0,0 +1,41 @@
+import { EXPERIMENTAL_CONDITIONS_MOCK_DATA } from 'app/components/Deposition/mock'
+import { useI18n } from 'app/hooks/useI18n'
+import { getTableData } from 'app/utils/table'
+
+import { MethodTableList } from './MethodTableList'
+
+export function ExperimentalConditionsMetadataTable() {
+  const { t } = useI18n()
+
+  return (
+    <MethodTableList
+      accordionId="experimental-conditions-table"
+      data={EXPERIMENTAL_CONDITIONS_MOCK_DATA}
+      header="experimentalConditions"
+      getTableData={(data) =>
+        getTableData(
+          {
+            label: t('sampleType'),
+            values: [data.sampleType],
+          },
+          {
+            label: t('samplePreparation'),
+            values: [data.samplePreparation],
+          },
+          {
+            label: t('pixelSize'),
+            values: [data.pixelSize],
+          },
+          {
+            label: t('gridPreparation'),
+            values: [data.gridPreparation],
+          },
+          {
+            label: t('runs'),
+            values: [data.runs],
+          },
+        )
+      }
+    />
+  )
+}

frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer/DepositionMetadataDrawer.tsx

@@ -0,0 +1,50 @@
+import { Accordion } from 'app/components/Accordion'
+import { MetadataTable } from 'app/components/Table'
+import { useI18n } from 'app/hooks/useI18n'
+import type { I18nKeys } from 'app/types/i18n'
+import type { TableData } from 'app/types/table'
+import { cns } from 'app/utils/cns'
+
+export function MethodTableList<T>({
+  data,
+  getTableData,
+  accordionId,
+  header,
+}: {
+  accordionId: string
+  data: T[]
+  header: I18nKeys
+  getTableData(data: T): TableData[]
+}) {
+  const { t } = useI18n()
+
+  return (
+    <Accordion header={t(header)} id={accordionId} initialOpen>
+      <div className="flex flex-col gap-3.5">
+        {data.map((d, index) => {
+          const tableData = getTableData(d)
+
+          return (
+            // safe to use index as key since list never changes
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={`method-table-${index}`}>
+              <div className="flex items-center gap-[10px]">
+                <p
+                  className={cns(
+                    'uppercase !text-sds-caps-xxxs-600-wide leading-sds-caps-xxxs',
+                    'font-semibold text-light-sds-color-primitive-gray-600',
+                  )}
+                >
+                  {t('methodCount', { value: index + 1 })}
+                </p>
+                <div className="flex-grow h-[1px] bg-light-sds-color-primitive-gray-300" />
+              </div>
+
+              <MetadataTable data={tableData} invertRowColor />
+            </div>
+          )
+        })}
+      </div>
+    </Accordion>
+  )
+}