From dcad39b5e67b5c19a0b7832b55b7bbd3d9d46fa0 Mon Sep 17 00:00:00 2001
From: Bryan Chu <bchu@chanzuckerberg.com>
Date: Thu, 26 Sep 2024 12:58:14 -0700
Subject: [PATCH] both

---
 .../Download/Tomogram/TomogramSelectorOption.tsx           | 7 ++++++-
 .../data-portal/app/components/TomogramTypeBadge.tsx       | 5 ++++-
 frontend/packages/data-portal/app/constants/idPrefixes.ts  | 1 +
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
index 98a450f93..dedfe6a6a 100644
--- a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
+++ b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
@@ -1,3 +1,5 @@
+import { TomogramTypeBadge } from 'app/components/TomogramTypeBadge'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { TomogramV2 } from 'app/types/gqlResponseTypes'
 import { getTomogramName } from 'app/utils/tomograms'
@@ -15,7 +17,10 @@ export function TomogramSelectorOption({
     <div>
       <div className="font-semibold">{getTomogramName(tomogram)}</div>
       <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
-        {t('tomogramId')}: {tomogram.id}
+        {t('tomogramId')}: {IdPrefix.Tomogram}-{tomogram.id}{' '}
+        {tomogram.isStandardized && (
+          <TomogramTypeBadge type="standard" size="small" />
+        )}
       </div>
       <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramSampling')}:{' '}
diff --git a/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx b/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
index 5637eed71..cf176779b 100644
--- a/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
+++ b/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
@@ -6,11 +6,13 @@ import { Tooltip } from './Tooltip'
 
 export interface TomogramTypeBadgeProps {
   type: 'standard' | 'author'
+  size?: 'default' | 'small'
   showTooltip?: boolean
 }
 
 export function TomogramTypeBadge({
   type,
+  size = 'default',
   showTooltip,
 }: TomogramTypeBadgeProps) {
   const { t } = useI18n()
@@ -18,7 +20,8 @@ export function TomogramTypeBadge({
   const badge = (
     <div
       className={cns(
-        'h-[20px] px-sds-xs py-sds-xxxs !text-sds-body-xxxs text-[#002660] leading-sds-body-xxxs rounded inline-flex bg-[#e9f1ff]',
+        'inline-flex items-center px-sds-xs py-sds-xxxs !text-sds-body-xxxs text-[#002660] leading-sds-body-xxxs rounded bg-[#e9f1ff]',
+        size === 'small' ? 'h-[16px]' : 'h-[20px]',
         showTooltip && 'cursor-pointer',
       )}
     >
diff --git a/frontend/packages/data-portal/app/constants/idPrefixes.ts b/frontend/packages/data-portal/app/constants/idPrefixes.ts
index c3d480cff..2aaf20718 100644
--- a/frontend/packages/data-portal/app/constants/idPrefixes.ts
+++ b/frontend/packages/data-portal/app/constants/idPrefixes.ts
@@ -5,4 +5,5 @@ export enum IdPrefix {
   Deposition = 'CZCDP',
   Run = 'RN',
   TiltSeries = 'TS',
+  Tomogram = 'TM',
 }