feat: Undo changes for transforming annotations and add new callout f…

…or mismatched alignments (#1191) #1046 Transforming annotations is now out of scope. Alignment of annotation has not been integrated with the BE yet, since that requires migrating the entire annotations query. <img width="684" alt="image" src="https://github.com/user-attachments/assets/c613c6f5-c496-4e19-aab8-901c2a8efb73"> <img width="694" alt="image" src="https://github.com/user-attachments/assets/3458a9eb-8b6c-41a6-9fa4-5097d0ab5062">
chanzuckerberg · Oct 1, 2024 · ea1598d · ea1598d
1 parent fad5207
commit ea1598d
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 67 deletions.
diff --git a/frontend/packages/data-portal/app/components/Download/AnnotationAlignmentCallout.tsx b/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>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureAnnotationDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureAnnotationDownloadContent.tsx
@@ -2,19 +2,13 @@ import { useMemo } from 'react'
 
 import { useDownloadModalContext } from 'app/context/DownloadModal.context'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
-import { useI18n } from 'app/hooks/useI18n'
-import { useFeatureFlag } from 'app/utils/featureFlags'
 
-import { I18n } from '../I18n'
+import { AnnotationAlignmentCallout } from './AnnotationAlignmentCallout'
 import { FileFormatDropdown } from './FileFormatDropdown'
-import { TomogramSelector } from './Tomogram/TomogramSelector'
 
 export function ConfigureAnnotationDownloadContent() {
-  const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
-  const { t } = useI18n()
-  const { objectShapeType, referenceTomogramId, setReferenceTomogramId } =
-    useDownloadModalQueryParamState()
-  const { annotationToDownload, allTomograms = [] } = useDownloadModalContext()
+  const { objectShapeType } = useDownloadModalQueryParamState()
+  const { annotationToDownload, allTomograms } = useDownloadModalContext()
 
   const fileFormats = useMemo<string[]>(
     () =>
@@ -26,19 +20,14 @@ export function ConfigureAnnotationDownloadContent() {
 
   return (
     <>
-      {multipleTomogramsEnabled && (
-        <TomogramSelector
-          title={t('referenceTomogram')}
-          tooltip={<I18n i18nKey="selectTheTomogramToReferenceWith" />}
-          className="pt-sds-m"
-          selectedTomogram={allTomograms.find(
-            (tomogram) => tomogram.id.toString() === referenceTomogramId,
-          )}
-          allTomograms={allTomograms}
-          onSelectTomogramId={setReferenceTomogramId}
-        />
-      )}
       <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 ?? []}
+      />
     </>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -18,11 +18,11 @@ 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'
 import { DirectDownloadTab } from './DirectDownloadTab'
-import { DisabledTabTooltip } from './DisabledTabTooltip'
 import { FILE_FORMAT_LABEL_I18N } from './FileFormatDropdown'
 
 const DOWNLOAD_TAB_MAP: Record<DownloadTab, ComponentType> = {
@@ -55,16 +55,12 @@ export function DownloadOptionsContent() {
     objectName,
     runId,
     runName,
+    annotationToDownload,
     tomogramToDownload,
     type,
   } = useDownloadModalContext()
 
-  const downloadTabs = getDownloadTabs(
-    type,
-    fileFormat,
-    t,
-    multipleTomogramsEnabled,
-  )
+  const downloadTabs = getDownloadTabs(type, fileFormat, t)
   const selectedTab =
     downloadTab ?? downloadTabs.find((tab) => !tab.disabled)!.value // Default to first enabled tab
   const referenceTomogram = allTomograms?.find(
@@ -167,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>
@@ -180,7 +184,6 @@ function getDownloadTabs(
   type: DownloadModalType,
   fileFormat: string | null,
   t: TFunction<'translation', undefined>,
-  multipleTomogramsEnabled: boolean,
 ): Array<TabData<DownloadTab>> {
   switch (type) {
     case 'dataset':
@@ -200,40 +203,16 @@ function getDownloadTabs(
         { value: DownloadTab.API, label: t('viaApi') },
       ]
     case 'annotation':
-      return multipleTomogramsEnabled
-        ? [
-            ...(isString(fileFormat) && fileFormat !== 'zarr'
-              ? [
-                  {
-                    value: DownloadTab.Download,
-                    label: t('directDownload'),
-                    disabled: true, // TODO(bchu): is_portal_standard
-                    tooltip: <DisabledTabTooltip />, // TODO(bchu): is_portal_standard
-                  },
-                  {
-                    value: DownloadTab.Curl,
-                    label: t('viaCurl'),
-                    disabled: true, // TODO(bchu): is_portal_standard
-                    tooltip: <DisabledTabTooltip />, // TODO(bchu): is_portal_standard
-                  },
-                ]
-              : []),
-            // eslint-disable-next-line no-constant-condition
-            true // TODO(bchu): is_portal_standard
-              ? { value: DownloadTab.PortalCLI, label: t('viaPortalCli') }
-              : { value: DownloadTab.AWS, label: t('viaAwsS3') },
-            { value: DownloadTab.API, label: t('viaApi') },
-          ]
-        : [
-            ...(isString(fileFormat) && fileFormat !== 'zarr'
-              ? [
-                  { value: DownloadTab.Download, label: t('directDownload') },
-                  { value: DownloadTab.Curl, label: t('viaCurl') },
-                ]
-              : []),
-            { value: DownloadTab.AWS, label: t('viaAwsS3') },
-            { value: DownloadTab.API, label: t('viaApi') },
-          ]
+      return [
+        ...(isString(fileFormat) && fileFormat !== 'zarr'
+          ? [
+              { value: DownloadTab.Download, label: t('directDownload') },
+              { value: DownloadTab.Curl, label: t('viaCurl') },
+            ]
+          : []),
+        { value: DownloadTab.AWS, label: t('viaAwsS3') },
+        { value: DownloadTab.API, label: t('viaApi') },
+      ]
     default:
       return checkExhaustive(type)
   }

diff --git a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/types.ts b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/types.ts
@@ -20,8 +20,10 @@ export const ANNOTATION_STANDARD_TOMOGRAM_DOWNLOAD_TABS = [
   DownloadTab.Download,
 ]
 
-// TODO(bchu): Support disabled tabs.
+// TODO(bchu): Support new tab configuration.
 export const ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS = [
   DownloadTab.API,
-  DownloadTab.PortalCLI,
+  DownloadTab.AWS,
+  DownloadTab.Curl,
+  DownloadTab.Download,
 ]
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -19,7 +19,7 @@
   "alignmentFile": "Alignment File",
   "alignmentId": "Alignment ID",
   "alignmentIdTooltip": "<semibold>Alignment ID:</semibold> ID of the alignment used to generate the tilt series for a given tomogram.",
-  "alignmentType": "AlignmentType",
+  "alignmentType": "Alignment Type",
   "all": "All",
   "allDatasets": "All Datasets",
   "allDepositions": "All Depositions",
@@ -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",