No commit message

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

@@ -0,0 +1,60 @@
+import { Callout, CalloutTitle } from '@czi-sds/components'
+
+import { IdPrefix } from 'app/constants/idPrefixes'
+import { useI18n } from 'app/hooks/useI18n'
+import { TomogramV2 } from 'app/types/gqlResponseTypes'
+import { getTomogramName } from 'app/utils/tomograms'
+
+import { CopyBox } from '../CopyBox'
+import { I18n } from '../I18n'
+
+export interface AnnotationAlignmentCalloutProps {
+  alignmentId: number
+  initialState: 'open' | 'closed'
+  misalignedTomograms: TomogramV2[]
+}
+
+export function AnnotationAlignmentCallout({
+  alignmentId,
+  initialState,
+  misalignedTomograms,
+}: AnnotationAlignmentCalloutProps) {
+  const { t } = useI18n()
+
+  return (
+    <Callout
+      className="!w-full !mt-sds-xl !mb-sds-xxs"
+      intent="notice"
+      expandable
+      sdsStage={initialState}
+    >
+      <CalloutTitle>
+        <p className="text-sds-body-xs leading-sds-body-xs">
+          {t('annotationsMayRequireTransformation')}
+        </p>
+      </CalloutTitle>
+      <p className="text-sds-header-xs leading-sds-header-xs mt-sds-default font-semibold">
+        {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}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </Callout>
+  )
+}

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

@@ -3,11 +3,12 @@ import { useMemo } from 'react'
 import { useDownloadModalContext } from 'app/context/DownloadModal.context'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
 
+import { AnnotationAlignmentCallout } from './AnnotationAlignmentCallout'
 import { FileFormatDropdown } from './FileFormatDropdown'
 
 export function ConfigureAnnotationDownloadContent() {
   const { objectShapeType } = useDownloadModalQueryParamState()
-  const { annotationToDownload } = useDownloadModalContext()
+  const { annotationToDownload, allTomograms } = useDownloadModalContext()
 
   const fileFormats = useMemo<string[]>(
     () =>
@@ -20,6 +21,13 @@ export function ConfigureAnnotationDownloadContent() {
   return (
     <>
       <FileFormatDropdown className="pt-sds-l" fileFormats={fileFormats} />
+      <AnnotationAlignmentCallout
+        // TODO(bchu): Use alignment ID when annotation query is migrated.
+        alignmentId={0}
+        initialState="open"
+        // TODO(bchu): Filter by tomograms that do not have the same annotation ID.
+        misalignedTomograms={allTomograms ?? []}
+      />
     </>
   )
 }

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

@@ -18,6 +18,7 @@ import { checkExhaustive } from 'app/types/utils'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 import { getTomogramName } from 'app/utils/tomograms'
 
+import { AnnotationAlignmentCallout } from './AnnotationAlignmentCallout'
 import { APIDownloadTab } from './APIDownloadTab'
 import { AWSDownloadTab } from './AWSDownloadTab'
 import { CurlDownloadTab } from './CurlDownloadTab'
@@ -54,6 +55,7 @@ export function DownloadOptionsContent() {
     objectName,
     runId,
     runName,
+    annotationToDownload,
     tomogramToDownload,
     type,
   } = useDownloadModalContext()
@@ -161,7 +163,15 @@ export function DownloadOptionsContent() {
 
       <DownloadTabContent />
 
-      {multipleTomogramsEnabled && (
+      {multipleTomogramsEnabled && annotationToDownload !== undefined ? (
+        <AnnotationAlignmentCallout
+          // TODO(bchu): Use alignment ID when annotation query is migrated.
+          alignmentId={0}
+          initialState="closed"
+          // TODO(bchu): Filter by tomograms that do not have the same annotation ID.
+          misalignedTomograms={allTomograms ?? []}
+        />
+      ) : (
         <Callout intent="notice" className="!w-full !mt-sds-xl">
           {t('annotationsMayRequireTransformation')}
         </Callout>

frontend/packages/data-portal/public/locales/en/translation.json

@@ -363,6 +363,7 @@
   "termsOfUse": "Terms of Use",
   "thankYouToOurDataContributors": "Thank You to our Data Contributors…",
   "theseAnnotationsMustBeTransformed": "These annotations must be transformed to be compatible with the selected reference tomogram.",
+  "thisAnnotationRequiresTransformation": "This annotation <semibold>requires</semibold> transformation if used with any of these tomograms:",
   "tiltAxis": "Tilt Axis",
   "tiltOffset": "Tilt Offset",
   "tiltQuality": "Tilt Quality",