feat: Add standard tomogram badge to tomogram selector (#1181)

#1005 The messed up paddings are tracked in #1158 <img width="550" alt="image" src="https://github.com/user-attachments/assets/1cb2150c-a9b8-47bd-ba6f-0ed30048def2">
chanzuckerberg · Sep 30, 2024 · ac4ad27 · ac4ad27
1 parent 5597524
commit ac4ad27
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureTomogramDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureTomogramDownloadContent.tsx
@@ -109,6 +109,7 @@ export function ConfigureTomogramDownloadContent() {
                   selectedTomogram={tomogramToDownload}
                   allTomograms={allTomograms}
                   onSelectTomogramId={setTomogramId}
+                  className="max-w-[450px]"
                 />
               ) : (
                 <>

diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx
@@ -46,7 +46,12 @@ export function TomogramSelector({
       options={allTomograms.map((tomogram) => ({
         key: tomogram.id.toString(),
         value: tomogram.id.toString(),
-        component: <TomogramSelectorOption tomogram={tomogram} />,
+        component: (
+          <TomogramSelectorOption
+            tomogram={tomogram}
+            isSelected={tomogram.id === selectedTomogram?.id}
+          />
+        ),
       }))}
       onChange={onSelectTomogramId}
       showActiveValue={false}

diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx
@@ -1,3 +1,4 @@
+import { TomogramTypeBadge } from 'app/components/TomogramTypeBadge'
 import { useI18n } from 'app/hooks/useI18n'
 import { TomogramV2 } from 'app/types/gqlResponseTypes'
 import { getTomogramName } from 'app/utils/tomograms'
@@ -16,11 +17,14 @@ export function TomogramSelectorInputLabel({
   }
 
   return (
-    <div>
-      {getTomogramName(tomogram)}
-      <span className="text-sds-color-primitive-gray-500 ml-sds-xxs">
+    <div className="flex gap-sds-xxs">
+      <span className="shrink overflow-hidden text-ellipsis">
+        {getTomogramName(tomogram)}
+      </span>
+      <span className="text-sds-color-primitive-gray-500 font-normal">
         {t('unitAngstrom', { value: tomogram.voxelSpacing })}
       </span>
+      {tomogram.isStandardized && <TomogramTypeBadge type="standard" />}
     </div>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
@@ -1,32 +1,40 @@
+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'
 
 export interface TomogramSelectorOptionProps {
   tomogram: TomogramV2
+  isSelected: boolean
 }
 
 export function TomogramSelectorOption({
   tomogram,
+  isSelected,
 }: TomogramSelectorOptionProps) {
   const { t } = useI18n()
 
   return (
     <div>
-      <div className="font-semibold">{getTomogramName(tomogram)}</div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
-        {`${t('tomogramId')}: ${IdPrefix.Tomogram}-${tomogram.id}`}
+      <div className={isSelected ? 'font-semibold' : ''}>
+        {getTomogramName(tomogram)}
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
+        {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 font-normal">
         {t('tomogramSampling')}:{' '}
         {t('unitAngstrom', { value: tomogram.voxelSpacing })} ({tomogram.sizeX},{' '}
         {tomogram.sizeY}, {tomogram.sizeZ})px
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
         {t('reconstructionMethod')}: {tomogram.reconstructionMethod}
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 capitalize">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal capitalize">
         {t('postProcessing')}: {tomogram.processing}
       </div>
     </div>

diff --git a/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx b/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
@@ -6,19 +6,23 @@ 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()
 
   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] font-normal leading-sds-body-xxxs rounded bg-[#e9f1ff]',
+        size === 'small' ? 'h-[16px]' : 'h-[20px]',
         showTooltip && 'cursor-pointer',
       )}
     >