From 420acdd2999e4261214a9475c9a6d37b1c85ef28 Mon Sep 17 00:00:00 2001
From: bchu1 <151689101+bchu1@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:15:27 -0700
Subject: [PATCH] feat: Add Tomograms table (#988)

closes #995

Barebones initial table (UX not finalized yet, waiting until then to do
fit & finish). Metadata drawer is empty. Download modal does not target
the selected tomogram yet.

Query changes:
- Added an `is_canonical` check to the existing
`tomogram_voxel_spacings` field (which we can delete after launch) so
that if we need to turn off the flag, the UI will still only display the
canonical `tomogram`.
- Replaced `tomogram_stats` count with top-level `tomograms_aggregate`
count that doesn't require FE summing.

BE pieces not supported yet:
 - Distinguish between Portal Standard and Author Submitted tomograms.
 - Deposition date.
 - Alignment ID.


![image](https://github.com/user-attachments/assets/db706cf9-09d7-46bc-ae0a-b0f591c2d529)
---
 .../data-portal/app/components/PageHeader.tsx |   2 +-
 .../app/components/Run/RunHeader.tsx          |   8 +-
 .../app/components/Run/RunMetadataDrawer.tsx  |   4 +-
 .../components/Run/TomogramMetadataDrawer.tsx |  23 ++
 .../app/components/Run/TomogramTable.tsx      | 199 ++++++++++++++++++
 ...Table.tsx => TomogramsMetadataSection.tsx} |   2 +-
 .../app/components/ViewTomogramButton.tsx     |   5 +-
 .../data-portal/app/constants/table.ts        |  12 ++
 .../app/graphql/getRunById.server.ts          |  54 ++++-
 .../app/hooks/useMetadataDrawer.ts            |   1 +
 .../data-portal/app/hooks/useRunById.ts       |   6 +
 .../data-portal/app/routes/runs.$id.tsx       |  12 +-
 .../app/state/metadataDrawerTomogram.ts       |   8 +
 .../packages/data-portal/app/utils/url.ts     |   6 +
 .../public/locales/en/translation.json        |   4 +
 15 files changed, 321 insertions(+), 25 deletions(-)
 create mode 100644 frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
 create mode 100644 frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
 rename frontend/packages/data-portal/app/components/Run/{TomogramsTable.tsx => TomogramsMetadataSection.tsx} (97%)
 create mode 100644 frontend/packages/data-portal/app/state/metadataDrawerTomogram.ts

diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx
index 286412689..2272f7bcf 100644
--- a/frontend/packages/data-portal/app/components/PageHeader.tsx
+++ b/frontend/packages/data-portal/app/components/PageHeader.tsx
@@ -27,7 +27,7 @@ export function PageHeader({
   const { t } = useI18n()
 
   return (
-    <div className="flex flex-auto justify-center">
+    <div className="flex flex-auto justify-center grow-0">
       <header className="flex flex-col items-center w-full min-h-[48px]">
         <div className="flex flex-col justify-start w-full pb-sds-xl">
           <div
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
index 46ee2801e..f77233246 100644
--- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -1,5 +1,4 @@
 import { Button, Icon } from '@czi-sds/components'
-import { sum } from 'lodash-es'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
 import { I18n } from 'app/components/I18n'
@@ -42,7 +41,7 @@ function FileSummary({ data }: { data: FileSummaryData[] }) {
 
 export function RunHeader() {
   const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
-  const { run, annotationFilesAggregates } = useRunById()
+  const { run, annotationFilesAggregates, tomogramsCount } = useRunById()
   const { toggleDrawer } = useMetadataDrawer()
   const { t } = useI18n()
 
@@ -56,11 +55,6 @@ export function RunHeader() {
 
   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 = annotationFilesAggregates.totalCount
 
   return (
diff --git a/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx
index 310ae86c7..846f82bd9 100644
--- a/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx
@@ -6,7 +6,7 @@ import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
 
 import { RunTiltSeriesTable } from './RunTiltSeriesTable'
-import { TomogramsTable } from './TomogramsTable'
+import { TomogramsMetadataSection } from './TomogramsMetadataSection'
 
 export function RunMetadataDrawer() {
   const { run } = useRunById()
@@ -27,7 +27,7 @@ export function RunMetadataDrawer() {
         initialOpen={false}
       />
       <RunTiltSeriesTable />
-      <TomogramsTable />
+      <TomogramsMetadataSection />
     </MetadataDrawer>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
new file mode 100644
index 000000000..6d5967d72
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -0,0 +1,23 @@
+import { useAtom } from 'jotai'
+
+import { useI18n } from 'app/hooks/useI18n'
+import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
+import { metadataDrawerTomogramAtom } from 'app/state/metadataDrawerTomogram'
+
+import { MetadataDrawer } from '../MetadataDrawer'
+
+export function TomogramMetadataDrawer() {
+  const { t } = useI18n()
+  const [metadataDrawerTomogram] = useAtom(metadataDrawerTomogramAtom)
+
+  return (
+    <MetadataDrawer
+      title={metadataDrawerTomogram?.id.toString() ?? ''}
+      label={t('tomogramDetails')}
+      disabled={metadataDrawerTomogram === undefined}
+      drawerId={MetadataDrawerId.Tomogram}
+    >
+      <></>
+    </MetadataDrawer>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
new file mode 100644
index 000000000..865061d9c
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -0,0 +1,199 @@
+/* eslint-disable react/no-unstable-nested-components */
+
+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'
+import { TomogramTableWidths } from 'app/constants/table'
+import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
+import { useI18n } from 'app/hooks/useI18n'
+import {
+  MetadataDrawerId,
+  useMetadataDrawer,
+} from 'app/hooks/useMetadataDrawer'
+import { useRunById } from 'app/hooks/useRunById'
+import {
+  metadataDrawerTomogramAtom,
+  Tomogram,
+} from 'app/state/metadataDrawerTomogram'
+import { getNeuroglancerUrl } from 'app/utils/url'
+
+import { AuthorList } from '../AuthorList'
+import { KeyPhoto } from '../KeyPhoto'
+
+export function TomogramsTable() {
+  const { t } = useI18n()
+  const { tomograms } = useRunById()
+
+  const { toggleDrawer } = useMetadataDrawer()
+  const [, setMetadataDrawerTomogram] = useAtom(metadataDrawerTomogramAtom)
+
+  const { openTomogramDownloadModal } = useDownloadModalQueryParamState()
+
+  const openMetadataDrawer = useCallback(
+    (tomogram: Tomogram) => {
+      setMetadataDrawerTomogram(tomogram)
+      toggleDrawer(MetadataDrawerId.Tomogram)
+    },
+    [setMetadataDrawerTomogram, toggleDrawer],
+  )
+
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<Tomogram>()
+    return [
+      columnHelper.accessor('key_photo_url', {
+        header: () => <CellHeader width={TomogramTableWidths.photo} />,
+        cell: ({ row: { original } }) => (
+          <TableCell width={TomogramTableWidths.photo}>
+            <KeyPhoto
+              className="max-w-[134px]"
+              title={original.name}
+              src={original.key_photo_thumbnail_url ?? undefined}
+            />
+          </TableCell>
+        ),
+      }),
+      columnHelper.accessor('id', {
+        header: () => (
+          <CellHeader width={TomogramTableWidths.id}>
+            {t('tomogramId')}
+          </CellHeader>
+        ),
+        cell: ({ row: { original } }) => (
+          <TableCell
+            className="flex flex-col gap-sds-xxxs !items-start"
+            width={TomogramTableWidths.id}
+          >
+            <div className="flex gap-sds-xs items-center">
+              <p className="text-sds-body-m leading-sds-body-m font-semibold text-ellipsis line-clamp-1 break-all">
+                {original.id}
+              </p>
+            </div>
+            <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+              <AuthorList authors={original.authors} compact />
+            </div>
+          </TableCell>
+        ),
+      }),
+      // TODO(bchu): Switch to deposition_date when available.
+      columnHelper.accessor('name', {
+        id: 'deposition_date',
+        header: () => (
+          <CellHeader
+            className="whitespace-nowrap text-ellipsis"
+            width={TomogramTableWidths.depositionDate}
+          >
+            {t('depositionDate')}
+          </CellHeader>
+        ),
+        cell: ({ getValue }) => (
+          <TableCell width={TomogramTableWidths.depositionDate}>
+            <div>{getValue()}</div>
+          </TableCell>
+        ),
+      }),
+      // TODO(bchu): Switch to alignment_id when available.
+      columnHelper.accessor('name', {
+        header: () => (
+          <CellHeader width={TomogramTableWidths.alignment}>
+            {t('alignmentId')}
+          </CellHeader>
+        ),
+        cell: ({ getValue }) => (
+          <TableCell width={TomogramTableWidths.alignment}>
+            <div>{getValue()}</div>
+          </TableCell>
+        ),
+      }),
+      columnHelper.accessor('voxel_spacing', {
+        header: () => (
+          <CellHeader width={TomogramTableWidths.voxelSpacing}>
+            {t('voxelSpacing')}
+          </CellHeader>
+        ),
+        cell: ({ getValue, row: { original } }) => (
+          <TableCell width={TomogramTableWidths.voxelSpacing}>
+            {t('unitAngstrom', { value: getValue() })}
+            <div className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+              ({original.size_x}, {original.size_y}, {original.size_z})px
+            </div>
+          </TableCell>
+        ),
+      }),
+      columnHelper.accessor('reconstruction_method', {
+        header: () => (
+          <CellHeader width={TomogramTableWidths.reconstructionMethod}>
+            {t('reconstructionMethod')}
+          </CellHeader>
+        ),
+        cell: ({ getValue }) => (
+          <TableCell width={TomogramTableWidths.reconstructionMethod}>
+            <div>{getValue()}</div>
+          </TableCell>
+        ),
+      }),
+      columnHelper.accessor('processing', {
+        header: () => (
+          <CellHeader width={TomogramTableWidths.postProcessing}>
+            {t('postProcessing')}
+          </CellHeader>
+        ),
+        cell: ({ getValue }) => (
+          <TableCell width={TomogramTableWidths.postProcessing}>
+            <div>{startCase(getValue())}</div>
+          </TableCell>
+        ),
+      }),
+      columnHelper.display({
+        id: 'tomogram-actions',
+        header: () => <CellHeader width={TomogramTableWidths.actions} />,
+        cell: ({ row: { original } }) => (
+          <TableCell width={TomogramTableWidths.actions}>
+            <div className="flex flex-col gap-sds-xs items-start">
+              {original.is_canonical &&
+                original.neuroglancer_config != null && (
+                  <Button
+                    sdsType="primary"
+                    sdsStyle="rounded"
+                    to={getNeuroglancerUrl(original.neuroglancer_config)}
+                    startIcon={
+                      <Icon sdsIcon="table" sdsSize="s" sdsType="button" />
+                    }
+                  >
+                    {t('viewTomogram')}
+                  </Button>
+                )}
+              <Button
+                sdsType="primary"
+                sdsStyle="minimal"
+                className="!justify-start !ml-sds-l"
+                onClick={() => openMetadataDrawer(original)}
+                startIcon={
+                  <Icon sdsIcon="infoCircle" sdsSize="s" sdsType="button" />
+                }
+              >
+                <span>{t('info')}</span>
+              </Button>
+              <Button
+                sdsType="primary"
+                sdsStyle="minimal"
+                className="!justify-start !ml-sds-l"
+                onClick={openTomogramDownloadModal}
+                startIcon={
+                  <Icon sdsIcon="download" sdsSize="s" sdsType="button" />
+                }
+              >
+                {t('download')}
+              </Button>
+            </div>
+          </TableCell>
+        ),
+      }),
+    ] as ColumnDef<Tomogram>[] // https://github.com/TanStack/table/issues/4382
+  }, [openMetadataDrawer, openTomogramDownloadModal, t])
+
+  return <PageTable data={tomograms} columns={columns} hoverType="none" />
+}
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramsTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramsMetadataSection.tsx
similarity index 97%
rename from frontend/packages/data-portal/app/components/Run/TomogramsTable.tsx
rename to frontend/packages/data-portal/app/components/Run/TomogramsMetadataSection.tsx
index 4ad5b22e2..e6d1ccf26 100644
--- a/frontend/packages/data-portal/app/components/Run/TomogramsTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/TomogramsMetadataSection.tsx
@@ -6,7 +6,7 @@ import { isFiducial } from 'app/utils/tomograms'
 
 import { Matrix4x4 } from './Matrix4x4'
 
-export function TomogramsTable() {
+export function TomogramsMetadataSection() {
   const { run } = useRunById()
 
   const tomo = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0)
diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
index 46e706c7e..a64f7baf1 100644
--- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
+++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
@@ -2,6 +2,7 @@ import { Button, ButtonProps } from '@czi-sds/components'
 
 import { useI18n } from 'app/hooks/useI18n'
 import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible'
+import { getNeuroglancerUrl } from 'app/utils/url'
 
 import { Link } from './Link'
 
@@ -45,9 +46,7 @@ export function ViewTomogramButton({
       onMouseLeave={() => setIsHoveringOver?.(false)}
     >
       <Button
-        to={`https://neuroglancer-demo.appspot.com/#!${encodeURIComponent(
-          neuroglancerConfig,
-        )}`}
+        to={getNeuroglancerUrl(neuroglancerConfig)}
         component={Link}
         {...buttonProps}
       >
diff --git a/frontend/packages/data-portal/app/constants/table.ts b/frontend/packages/data-portal/app/constants/table.ts
index c63b7289c..c42913454 100644
--- a/frontend/packages/data-portal/app/constants/table.ts
+++ b/frontend/packages/data-portal/app/constants/table.ts
@@ -31,6 +31,18 @@ export const AnnotationTableWidths = {
   actions: { min: 120, max: 120 },
 }
 
+// TODO(bchu): Finalize these numbers.
+export const TomogramTableWidths = {
+  photo: PHOTO_COLUMN_WIDTH,
+  id: { min: 250 },
+  depositionDate: { min: 91, max: 120 },
+  alignment: { min: 120, max: 130 },
+  voxelSpacing: { min: 120, max: 400 },
+  reconstructionMethod: { min: 120, max: 400 },
+  postProcessing: { min: 81, max: 120 },
+  actions: { min: 175, max: 120 },
+}
+
 export const RunTableWidths = {
   photo: PHOTO_COLUMN_WIDTH,
   name: { min: 400 },
diff --git a/frontend/packages/data-portal/app/graphql/getRunById.server.ts b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
index b7a3b496a..bae17f96d 100644
--- a/frontend/packages/data-portal/app/graphql/getRunById.server.ts
+++ b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
@@ -103,7 +103,14 @@ const GET_RUN_BY_ID_QUERY = gql(`
         }
       }
 
-      tomogram_voxel_spacings(limit: 1) {
+      tomogram_voxel_spacings(
+        limit: 1
+        where: {
+          tomograms: {
+            is_canonical: { _eq: true}
+          }
+        }
+      ) {
         id
         s3_prefix
 
@@ -141,12 +148,6 @@ const GET_RUN_BY_ID_QUERY = gql(`
           }
         }
 
-        tomograms_aggregate {
-          aggregate {
-            count
-          }
-        }
-
         tomogram_processing: tomograms(distinct_on: processing) {
           processing
         }
@@ -263,6 +264,38 @@ const GET_RUN_BY_ID_QUERY = gql(`
       }
     }
 
+    # Tomograms table:
+    tomograms(where: { tomogram_voxel_spacing: { run_id: { _eq: $id }}}) {
+      affine_transformation_matrix
+      ctf_corrected
+      fiducial_alignment_status
+      id
+      is_canonical
+      key_photo_thumbnail_url
+      key_photo_url
+      name
+      neuroglancer_config
+      processing
+      processing_software
+      reconstruction_method
+      reconstruction_software
+      size_x
+      size_y
+      size_z
+      voxel_spacing
+      tomogram_voxel_spacing {
+        id
+        s3_prefix
+      }
+      authors {
+        primary_author_status
+        corresponding_author_status
+        name
+        email
+        orcid
+      }
+    }
+
     # Annotation counts:
     annotation_files_aggregate_for_total: annotation_files_aggregate(
       where: {
@@ -340,6 +373,13 @@ const GET_RUN_BY_ID_QUERY = gql(`
         count
       }
     }
+
+    # Tomogram counts:
+    tomograms_aggregate(where: { tomogram_voxel_spacing: { run_id: { _eq: $id }}}) {
+      aggregate {
+        count
+      }
+    }
   }
 `)
 
diff --git a/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts b/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
index 2cc34bca5..c3cdf58b1 100644
--- a/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
+++ b/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
@@ -9,6 +9,7 @@ export enum MetadataDrawerId {
   Dataset = 'dataset',
   Deposition = 'deposition',
   Run = 'run',
+  Tomogram = 'tomogram',
 }
 
 export enum MetadataTab {
diff --git a/frontend/packages/data-portal/app/hooks/useRunById.ts b/frontend/packages/data-portal/app/hooks/useRunById.ts
index ca110d700..7c95caae4 100644
--- a/frontend/packages/data-portal/app/hooks/useRunById.ts
+++ b/frontend/packages/data-portal/app/hooks/useRunById.ts
@@ -10,6 +10,8 @@ export function useRunById() {
 
   const annotationFiles = data.annotation_files
 
+  const { tomograms } = data
+
   const objectNames = useMemo(
     () =>
       Array.from(
@@ -61,12 +63,16 @@ export function useRunById() {
     otherCount: data.annotation_files_aggregate_for_other.aggregate?.count ?? 0,
   }
 
+  const tomogramsCount = data.tomograms_aggregate.aggregate?.count ?? 0
+
   return {
     run,
     annotationFiles,
+    tomograms,
     objectNames,
     objectShapeTypes,
     annotationSoftwares,
     annotationFilesAggregates,
+    tomogramsCount,
   }
 }
diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
index f8208f247..75a29ad0c 100644
--- a/frontend/packages/data-portal/app/routes/runs.$id.tsx
+++ b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -14,6 +14,8 @@ import { RunHeader } from 'app/components/Run'
 import { AnnotationDrawer } from 'app/components/Run/AnnotationDrawer'
 import { AnnotationTable } from 'app/components/Run/AnnotationTable'
 import { RunMetadataDrawer } from 'app/components/Run/RunMetadataDrawer'
+import { TomogramMetadataDrawer } from 'app/components/Run/TomogramMetadataDrawer'
+import { TomogramsTable } from 'app/components/Run/TomogramTable'
 import { QueryParams } from 'app/constants/query'
 import { getRunById } from 'app/graphql/getRunById.server'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
@@ -75,7 +77,8 @@ export function shouldRevalidate(args: ShouldRevalidateFunctionArgs) {
 
 export default function RunByIdPage() {
   const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
-  const { run, annotationFiles, annotationFilesAggregates } = useRunById()
+  const { run, annotationFiles, annotationFilesAggregates, tomogramsCount } =
+    useRunById()
 
   const allTomogramResolutions = run.tomogram_stats.flatMap((stats) =>
     stats.tomogram_resolutions.map((tomogram) => tomogram),
@@ -162,10 +165,10 @@ export default function RunByIdPage() {
           ? [
               {
                 title: t('tomograms'),
-                table: <AnnotationTable />,
+                table: <TomogramsTable />,
                 pageQueryParamKey: QueryParams.TomogramsPage,
-                filteredCount: annotationFilesAggregates.filteredCount,
-                totalCount: annotationFilesAggregates.totalCount,
+                filteredCount: tomogramsCount,
+                totalCount: tomogramsCount,
                 countLabel: t('tomograms'),
               },
             ]
@@ -221,6 +224,7 @@ export default function RunByIdPage() {
         <>
           <RunMetadataDrawer />
           <AnnotationDrawer />
+          <TomogramMetadataDrawer />
         </>
       }
     />
diff --git a/frontend/packages/data-portal/app/state/metadataDrawerTomogram.ts b/frontend/packages/data-portal/app/state/metadataDrawerTomogram.ts
new file mode 100644
index 000000000..c609c4322
--- /dev/null
+++ b/frontend/packages/data-portal/app/state/metadataDrawerTomogram.ts
@@ -0,0 +1,8 @@
+import { atom } from 'jotai'
+
+import { GetRunByIdQuery } from 'app/__generated__/graphql'
+
+export type Tomogram = GetRunByIdQuery['tomograms'][number]
+
+/** Tomogram row selected to be opened in the metadata sidebar. */
+export const metadataDrawerTomogramAtom = atom<Tomogram | undefined>(undefined)
diff --git a/frontend/packages/data-portal/app/utils/url.ts b/frontend/packages/data-portal/app/utils/url.ts
index f63fbb66c..186bb9102 100644
--- a/frontend/packages/data-portal/app/utils/url.ts
+++ b/frontend/packages/data-portal/app/utils/url.ts
@@ -33,3 +33,9 @@ export function createUrl(urlOrPath: string, baseUrl?: string): URL {
 
   return new URL(urlOrPath, base)
 }
+
+export function getNeuroglancerUrl(config: string): string {
+  return `https://neuroglancer-demo.appspot.com/#!'${encodeURIComponent(
+    config,
+  )}`
+}
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
index 15c407e48..ef473a546 100644
--- a/frontend/packages/data-portal/public/locales/en/translation.json
+++ b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -16,6 +16,7 @@
   "affineTransformationMatrix": "Affine Transformation Matrix",
   "alignedTiltSeriesBinning": "Aligned Tilt Series Binning",
   "alignmentFile": "Alignment File",
+  "alignmentId": "Alignment ID",
   "all": "All",
   "allDatasets": "All Datasets",
   "allDepositions": "All Depositions",
@@ -247,6 +248,7 @@
   "plusMore": "+{{count}} More",
   "point": "Point",
   "poor": "Poor",
+  "postProcessing": "Post Processing",
   "precision": "Precision",
   "precisionTooltip": "<semibold>Precision:</semibold> Percentage of true positives among the total number of positive predictions. A value of 100% means everything found is actually the object of interest. <url to='/faq?accordion=tilt-series'>Learn More</url>",
   "preferToDownloadViaApi": "<semibold>Prefer to download via our API?</semibold> Record the IDs below and visit our <url to='$t(apiDocLink)'>API documentation</url> to learn how.",
@@ -327,6 +329,7 @@
   "tissueName": "Tissue Name",
   "title": "CryoET Data Portal",
   "tomogram": "Tomogram",
+  "tomogramDetails": "Tomogram Details",
   "tomogramId": "Tomogram ID",
   "tomogramMetadata": "Tomogram Metadata",
   "tomogramProcessing": "Tomogram Processing",
@@ -355,6 +358,7 @@
   "viewAndDownloadDatasets": "View and Download Datasets",
   "viewDatasetsCta": "Find and visualize cryoET datasets in the portal and download to use for your work.",
   "viewTomogram": "View Tomogram",
+  "voxelSpacing": "Voxel Spacing",
   "voxelSpacingId": "Voxel Spacing ID",
   "website": "Website",
   "withDepositionData": "With deposition data",