From ea1598d3cafc4a72e0e2eddb319b1a5fdfe786ec Mon Sep 17 00:00:00 2001 From: Bryan Chu <151689101+bchu1@users.noreply.github.com> Date: Tue, 1 Oct 2024 12:23:15 -0700 Subject: [PATCH] feat: Undo changes for transforming annotations and add new callout for 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. image image --- .../Download/AnnotationAlignmentCallout.tsx | 60 +++++++++++++++++ .../ConfigureAnnotationDownloadContent.tsx | 31 +++------ .../Download/DownloadOptionsContent.tsx | 65 +++++++------------ .../e2e/pageObjects/downloadDialog/types.ts | 6 +- .../public/locales/en/translation.json | 3 +- 5 files changed, 98 insertions(+), 67 deletions(-) create mode 100644 frontend/packages/data-portal/app/components/Download/AnnotationAlignmentCallout.tsx diff --git a/frontend/packages/data-portal/app/components/Download/AnnotationAlignmentCallout.tsx b/frontend/packages/data-portal/app/components/Download/AnnotationAlignmentCallout.tsx new file mode 100644 index 000000000..9ecb6410a --- /dev/null +++ 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 ( + + +

+ {t('annotationsMayRequireTransformation')} +

+ +

+ {t('alignmentId')} +

+ +

+ +

+
+ {misalignedTomograms?.map((tomogram) => ( +
+
{getTomogramName(tomogram)}
+
+ Tomogram ID: {IdPrefix.Tomogram}-{tomogram.id} +
+ {tomogram.alignment != null && ( +
+ Alignment ID: {IdPrefix.Alignment}-{tomogram.alignment.id} +
+ )} +
+ ))} +
+ + ) +} diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureAnnotationDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureAnnotationDownloadContent.tsx index d46961336..8292a379b 100644 --- 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( () => @@ -26,19 +20,14 @@ export function ConfigureAnnotationDownloadContent() { return ( <> - {multipleTomogramsEnabled && ( - } - className="pt-sds-m" - selectedTomogram={allTomograms.find( - (tomogram) => tomogram.id.toString() === referenceTomogramId, - )} - allTomograms={allTomograms} - onSelectTomogramId={setReferenceTomogramId} - /> - )} + ) } diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx index 78e61e523..3b96d65b4 100644 --- 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 = { @@ -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() { - {multipleTomogramsEnabled && ( + {multipleTomogramsEnabled && annotationToDownload !== undefined ? ( + + ) : ( {t('annotationsMayRequireTransformation')} @@ -180,7 +184,6 @@ function getDownloadTabs( type: DownloadModalType, fileFormat: string | null, t: TFunction<'translation', undefined>, - multipleTomogramsEnabled: boolean, ): Array> { 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: , // TODO(bchu): is_portal_standard - }, - { - value: DownloadTab.Curl, - label: t('viaCurl'), - disabled: true, // TODO(bchu): is_portal_standard - tooltip: , // 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 index d9ae46d01..bb92e6aae 100644 --- 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 index aa5daf9dd..42d9aa2f3 100644 --- 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": "Alignment ID: 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 requires transformation if used with any of these tomograms:", "tiltAxis": "Tilt Axis", "tiltOffset": "Tilt Offset", "tiltQuality": "Tilt Quality",