demo

frontend/packages/data-portal/app/components/Download/AnnotationAlignmentCallout.tsx

@@ -37,24 +37,30 @@ export function AnnotationAlignmentCallout({
         {t('alignmentId')}
       </p>
       <CopyBox content={alignmentId} />
-      <p className="text-sds-body-xs leading-sds-body-xs mt-[10px]">
-        <I18n i18nKey="thisAnnotationRequiresTransformation" />
-      </p>
-      <div className="bg-[#ffdb97] flex flex-col gap-[12px] mt-sds-xxs p-sds-s rounded-[2px]">
-        {misalignedTomograms?.map((tomogram) => (
-          <div className="text-sds-body-xxs !leading-[18px]">
-            <div className="font-semibold">{getTomogramName(tomogram)}</div>
-            <div>
-              Tomogram ID: {IdPrefix.Tomogram}-{tomogram.id}
-            </div>
-            {tomogram.alignment != null && (
-              <div>
-                Alignment ID: {IdPrefix.Alignment}-{tomogram.alignment.id}
+
+      {misalignedTomograms.length > 0 && (
+        <>
+          <p className="text-sds-body-xs leading-sds-body-xs mt-[10px]">
+            <I18n i18nKey="thisAnnotationRequiresTransformation" />
+          </p>
+
+          <div className="bg-[#ffdb97] flex flex-col gap-[12px] mt-sds-xxs p-sds-s rounded-[2px]">
+            {misalignedTomograms.map((tomogram) => (
+              <div className="text-sds-body-xxs !leading-[18px]">
+                <div className="font-semibold">{getTomogramName(tomogram)}</div>
+                <div>
+                  Tomogram ID: {IdPrefix.Tomogram}-{tomogram.id}
+                </div>
+                {tomogram.alignment != null && (
+                  <div>
+                    Alignment ID: {IdPrefix.Alignment}-{tomogram.alignment.id}
+                  </div>
+                )}
               </div>
-            )}
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      )}
     </Callout>
   )
 }

frontend/packages/data-portal/app/components/Download/ConfigureAnnotationDownloadContent.tsx

@@ -1,13 +1,16 @@
 import { useMemo } from 'react'
+import { DeepPartial } from 'utility-types'
 
+import { AnnotationFileEdge } from 'app/__generated_v2__/graphql'
 import { useDownloadModalContext } from 'app/context/DownloadModal.context'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
+import { useRunById } from 'app/hooks/useRunById'
 
 import { AnnotationAlignmentCallout } from './AnnotationAlignmentCallout'
 import { FileFormatDropdown } from './FileFormatDropdown'
 
 export function ConfigureAnnotationDownloadContent() {
-  const { objectShapeType } = useDownloadModalQueryParamState()
+  const { objectShapeType, fileFormat } = useDownloadModalQueryParamState()
   const { annotationToDownload, allTomograms } = useDownloadModalContext()
 
   const fileFormats = useMemo<string[]>(
@@ -18,15 +21,30 @@ export function ConfigureAnnotationDownloadContent() {
     [annotationToDownload?.files, objectShapeType],
   )
 
+  const { annotationShapes } = useRunById()
+
+  const isMatchingFormat = (file: DeepPartial<AnnotationFileEdge>) =>
+    file?.node?.format === fileFormat
+
+  const alignmentId =
+    annotationShapes
+      .find(
+        (shape) =>
+          shape.annotation?.id === annotationToDownload?.id &&
+          shape.shapeType === objectShapeType &&
+          shape.annotationFiles.edges.some(isMatchingFormat),
+      )
+      ?.annotationFiles.edges.find(isMatchingFormat)?.node.alignmentId ?? 0
+
   return (
     <>
       <FileFormatDropdown className="pt-sds-l" fileFormats={fileFormats} />
       <AnnotationAlignmentCallout
-        // TODO(bchu): Use alignment ID when annotation query is migrated.
-        alignmentId={0}
+        alignmentId={alignmentId}
         initialState="open"
-        // TODO(bchu): Filter by tomograms that do not have the same annotation ID.
-        misalignedTomograms={allTomograms ?? []}
+        misalignedTomograms={(allTomograms ?? []).filter(
+          (tomogram) => tomogram.alignment?.id !== alignmentId,
+        )}
       />
     </>
   )

frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx

@@ -9,10 +9,13 @@ import { ConfigureTomogramDownloadContent } from './ConfigureTomogramDownloadCon
 
 export function ConfigureDownloadContent() {
   const { t } = useI18n()
-  const { datasetTitle, runName, objectName } = useDownloadModalContext()
+
   const { annotationName, annotationId, objectShapeType } =
     useDownloadModalQueryParamState()
 
+  const { annotationToDownload, datasetTitle, runName, objectName } =
+    useDownloadModalContext()
+
   return (
     <>
       <ModalSubtitle label={t('datasetName')} value={datasetTitle} />
@@ -32,6 +35,12 @@ export function ConfigureDownloadContent() {
       {objectShapeType && (
         <ModalSubtitle label={t('objectShapeType')} value={objectShapeType} />
       )}
+      {annotationToDownload !== undefined && (
+        <ModalSubtitle
+          label={t('alignmentId')}
+          value={`${IdPrefix.Alignment}-${annotationToDownload.id}`}
+        />
+      )}
 
       <p className="mt-sds-xl text-sds-body-m leading-sds-body-m font-semibold">
         {t('selectDownload')}

frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx

@@ -132,6 +132,14 @@ export function DownloadOptionsContent() {
           value={tomogramProcessing}
         />
       )}
+      {multipleTomogramsEnabled &&
+        annotationToDownload &&
+        tomogramToDownload?.alignment && (
+          <ModalSubtitle
+            label={t('alignmentId')}
+            value={tomogramToDownload.alignment.id}
+          />
+        )}
       {fileFormat && (
         <ModalSubtitle
           label={t('fileFormat')}
@@ -168,13 +176,13 @@ export function DownloadOptionsContent() {
 
       <DownloadTabContent />
 
-      {multipleTomogramsEnabled && annotationToDownload !== undefined ? (
+      {multipleTomogramsEnabled &&
+      annotationToDownload !== undefined &&
+      tomogramToDownload?.alignment ? (
         <AnnotationAlignmentCallout
-          // TODO(bchu): Use alignment ID when annotation query is migrated.
-          alignmentId={0}
+          alignmentId={tomogramToDownload.alignment.id}
           initialState="closed"
-          // TODO(bchu): Filter by tomograms that do not have the same annotation ID.
-          misalignedTomograms={allTomograms ?? []}
+          misalignedTomograms={[]}
         />
       ) : (
         <Callout intent="notice" className="!w-full !mt-sds-xl">

frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx

@@ -25,6 +25,7 @@ export function TomogramSelectorInputLabel({
         {t('unitAngstrom', { value: tomogram.voxelSpacing })}
       </span>
       {tomogram.isPortalStandard && <TomogramTypeBadge type="standard" />}
+      {tomogram.isAuthorSubmitted && <TomogramTypeBadge type="author" />}
     </div>
   )
 }

frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx

@@ -25,6 +25,9 @@ export function TomogramSelectorOption({
         {tomogram.isPortalStandard && (
           <TomogramTypeBadge type="standard" size="small" />
         )}
+        {tomogram.isAuthorSubmitted && (
+          <TomogramTypeBadge type="author" size="small" />
+        )}
       </div>
       <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
         {t('tomogramSampling')}:{' '}

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

@@ -1,4 +1,5 @@
 import { Button, Icon } from '@czi-sds/components'
+import { match, P } from 'ts-pattern'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
 import { CollapsibleList } from 'app/components/CollapsibleList'
@@ -51,14 +52,28 @@ export function RunHeader() {
     annotationFilesAggregates,
     tomogramsCount,
     alignmentsCount,
+    tomograms,
   } = useRunById()
   const { toggleDrawer } = useMetadataDrawer()
   const { t } = useI18n()
 
   const tiltSeries = run.tiltseries[0]
 
   const tomogram = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0)
-  const keyPhotoURL = tomogram?.key_photo_url ?? undefined
+
+  // Use author submitted tomogram if available, otherwise default to the first one
+  const tomogramV2 =
+    tomograms.find(
+      (currentTomogram) =>
+        currentTomogram.isVisualizationDefault ??
+        currentTomogram.isAuthorSubmitted,
+    ) ?? tomograms.at(0)
+
+  const keyPhotoURL =
+    (multipleTomogramsEnabled
+      ? tomogramV2?.keyPhotoUrl
+      : tomogram?.key_photo_url) ?? undefined
+
   const neuroglancerConfig = tomogram?.neuroglancer_config
 
   const { openRunDownloadModal } = useDownloadModalQueryParamState()
@@ -72,7 +87,20 @@ export function RunHeader() {
       actions={
         <div className="flex items-center gap-2.5">
           <ViewTomogramButton
-            tomogramId={tomogram?.id?.toString()}
+            tomogramId={match({
+              multipleTomogramsEnabled,
+              tomogramV2Id: tomogramV2?.id,
+              tomogramV1Id: tomogram?.id,
+            })
+              .with(
+                { multipleTomogramsEnabled: true, tomogramV2Id: P.number },
+                ({ tomogramV2Id }) => tomogramV2Id.toString(),
+              )
+              .with(
+                { multipleTomogramsEnabled: false, tomogramV1Id: P.number },
+                ({ tomogramV1Id }) => tomogramV1Id.toString(),
+              )
+              .otherwise(() => undefined)}
             neuroglancerConfig={neuroglancerConfig}
             buttonProps={{
               sdsStyle: 'rounded',

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

@@ -4,6 +4,7 @@ import { useAtom } from 'jotai'
 import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
+import { useRunById } from 'app/hooks/useRunById'
 import { metadataDrawerTomogramAtom } from 'app/state/metadataDrawerTomogram'
 import { getTableData } from 'app/utils/table'
 import { getTomogramName, isFiducial } from 'app/utils/tomograms'
@@ -21,6 +22,7 @@ import { IDENTITY_MATRIX_4X4, Matrix4x4 } from './Matrix4x4'
 export function TomogramMetadataDrawer() {
   const { t } = useI18n()
   const [tomogram] = useAtom(metadataDrawerTomogramAtom)
+  const { run } = useRunById()
 
   if (tomogram === undefined) {
     return null
@@ -59,7 +61,7 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('publications'),
-            values: [], // TODO
+            values: [run.dataset.dataset_publications ?? ''],
             renderValue: (value: string) => (
               <DatabaseEntryList entries={value} />
             ),
@@ -73,9 +75,7 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('depositionName'),
-            // TODO(bchu): Uncomment after API field name change is in prod.
-            // values: [tomogram.deposition?.title ?? ''],
-            values: [],
+            values: [tomogram.deposition?.title ?? ''],
             renderValue: (value: string) => (
               <Link
                 className="text-sds-color-primitive-blue-400"

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

@@ -17,11 +17,14 @@ import {
 import { useRunById } from 'app/hooks/useRunById'
 import { metadataDrawerTomogramAtom } from 'app/state/metadataDrawerTomogram'
 import { TomogramV2 } from 'app/types/gqlResponseTypes'
+import { cnsNoMerge } from 'app/utils/cns'
 import { getTomogramName } from 'app/utils/tomograms'
 
 import { AuthorList } from '../AuthorList'
+import { I18n } from '../I18n'
 import { KeyPhoto } from '../KeyPhoto'
 import { TomogramTypeBadge } from '../TomogramTypeBadge'
+import { Tooltip } from '../Tooltip'
 import { ViewTomogramButton } from '../ViewTomogramButton'
 
 export function TomogramsTable() {
@@ -72,9 +75,14 @@ export function TomogramsTable() {
             </div>
             <div className="flex items-center flex-wrap gap-sds-xs text-sds-body-xxs">
               {`${t('tomogramId')}: ${IdPrefix.Tomogram}-${original.id}`}
+
               {original.isPortalStandard && (
                 <TomogramTypeBadge type="standard" showTooltip />
               )}
+
+              {original.isAuthorSubmitted && (
+                <TomogramTypeBadge type="author" showTooltip />
+              )}
             </div>
             <div className=" text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-header-xxs">
               <AuthorList
@@ -106,11 +114,24 @@ export function TomogramsTable() {
             {t('alignmentId')}
           </CellHeader>
         ),
-        cell: ({ getValue }) => (
+        cell: ({ getValue, row: { original: tomogram } }) => (
           <TableCell width={TomogramTableWidths.alignment}>
-            <div>
+            <p>
               {IdPrefix.Alignment}-{getValue()}
-            </div>
+            </p>
+
+            {tomogram.isPortalStandard && (
+              <Tooltip tooltip={<I18n i18nKey="alignmentIdCanonicalTooltip" />}>
+                <p
+                  className={cnsNoMerge(
+                    'text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-secondary',
+                    'underline underline-offset-4 decoration-dashed',
+                  )}
+                >
+                  {t('canonical')}
+                </p>
+              </Tooltip>
+            )}
           </TableCell>
         ),
       }),
@@ -159,7 +180,9 @@ export function TomogramsTable() {
         cell: ({ row: { original } }) => (
           <TableCell width={TomogramTableWidths.actions}>
             <div className="flex flex-col gap-sds-xs items-start">
-              {original.neuroglancerConfig != null && ( // TODO(bchu): Check it's either isPortalStandard or isAuthorSubmitted
+              {/* TODO Use only `isVisualizationDefault` when data is available */}
+              {(original.isVisualizationDefault ??
+                original.isAuthorSubmitted) && (
                 <ViewTomogramButton
                   tomogramId={original.id.toString()}
                   neuroglancerConfig={original.neuroglancerConfig}