fix: address multiple tomograms feedback (#1261)

Addresses design feedback from #624 (comment) ## Demo https://dev-on.cryoet.dev.si.czi.technology/
chanzuckerberg · Oct 23, 2024 · fce77ad · fce77ad
1 parent 7faa3af
commit fce77ad
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 34 deletions.
diff --git a/frontend/packages/data-portal/app/components/AuthorLink/types.ts b/frontend/packages/data-portal/app/components/AuthorLink/types.ts
@@ -16,7 +16,7 @@ export type AuthorInfoV2 = {
   primaryAuthorStatus?: boolean | null
 }
 
-// TODO(bchu): Delete this when everything migrated.
+// TODO(kira-api-migration): Delete this when everything migrated.
 export function convertToAuthorInfoV2(author: AuthorInfo): AuthorInfoV2 {
   return 'corresponding_author_status' in author ||
     'primary_author_status' in author

diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureTomogramDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureTomogramDownloadContent.tsx
@@ -183,6 +183,7 @@ export function ConfigureTomogramDownloadContent() {
           className="!w-full !mt-sds-xl !mb-sds-xxs"
           intent="info"
           expandable
+          sdsStage="open"
         >
           <CalloutTitle>
             <p className="text-sds-body-xs leading-sds-body-xs">

diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -140,6 +140,12 @@ export function DownloadOptionsContent() {
             value={tomogramToDownload.alignment.id}
           />
         )}
+      {annotationToDownload && (
+        <ModalSubtitle
+          label={t('alignmentId')}
+          value={`${IdPrefix.Alignment}-${annotationToDownload.id}`}
+        />
+      )}
       {fileFormat && (
         <ModalSubtitle
           label={t('fileFormat')}

diff --git a/frontend/packages/data-portal/app/components/Filters/Filters.module.css b/frontend/packages/data-portal/app/components/Filters/Filters.module.css
@@ -53,6 +53,10 @@
   :global(.MuiMenuItem-root) > span:nth-child(1) {
     @apply flex items-center p-0;
   }
+
+  :global(.MuiButtonBase-root) {
+    @apply !px-sds-s !py-sds-xs;
+  }
 }
 
 .inputText {

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -10,6 +10,7 @@ import { MethodLinkDataType } from 'app/components/Deposition/MethodLinks/type'
 import { Link } from 'app/components/Link'
 import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
+import { useRunById } from 'app/hooks/useRunById'
 import { useAnnotation } from 'app/state/annotation'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 
@@ -30,6 +31,13 @@ export function AnnotationOverviewTable() {
     [annotation],
   )
 
+  const { annotationShapes } = useRunById()
+  const v2AnnotationShape = annotationShapes.find(
+    (currentAnnotation) =>
+      currentAnnotation.annotation?.id === annotation?.id &&
+      currentAnnotation.shapeType === annotation?.shape_type,
+  )
+
   if (!annotation) {
     return null
   }
@@ -106,8 +114,10 @@ export function AnnotationOverviewTable() {
                     />
                   </Tooltip>
                 ),
-                // TODO(bchu): Integrate with alignment.id after annotations field migrated.
-                values: [],
+                values: [
+                  v2AnnotationShape?.annotationFiles.edges.at(0)?.node
+                    .alignmentId ?? '--',
+                ],
               },
             ]
           : []),

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -345,7 +345,9 @@ export function AnnotationTable() {
                     datasetId: run.dataset.id,
                     runId: run.id,
                     annotationId: annotation.id,
-                    referenceTomogramId: tomograms[0]?.id, // TODO(bchu): is_portal_standard
+                    referenceTomogramId: tomograms.find(
+                      (tomogram) => tomogram.isPortalStandard,
+                    )?.id,
                     objectShapeType: annotation.shape_type,
                     fileFormat: annotation.format,
                     annotationName: `${annotation.fileId} ${annotation.object_name}`,

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -65,7 +65,7 @@ export function RunHeader() {
   const tomogramV2 =
     tomograms.find(
       (currentTomogram) =>
-        currentTomogram.isVisualizationDefault ??
+        // TODO use `isVisualizationDefault` when data is ready
         currentTomogram.isAuthorSubmitted,
     ) ?? tomograms.at(0)
 

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -68,7 +68,7 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('relatedDatabases'),
-            values: [], // TODO
+            values: [tomogram.relatedDatabaseEntries ?? ''],
             renderValue: (value: string) => (
               <DatabaseEntryList entries={value} />
             ),
@@ -99,11 +99,11 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('releaseDate'),
-            values: [], // TODO
+            values: [tomogram.releaseDate ?? ''],
           },
           {
             label: t('lastModifiedDate'),
-            values: [], // TODO
+            values: [tomogram.lastModifiedDate ?? ''],
           },
         )}
       />
@@ -113,11 +113,11 @@ export function TomogramMetadataDrawer() {
         data={getTableData(
           {
             label: t('portalStandardStatus'),
-            values: [], // TODO
+            values: [tomogram.isPortalStandard ? 'True' : 'False'],
           },
           {
             label: t('submittedByDatasetAuthor'),
-            values: [], // TODO
+            values: [tomogram.isAuthorSubmitted ? 'True' : 'False'],
           },
           {
             label: t('reconstructionSoftware'),
@@ -138,7 +138,7 @@ export function TomogramMetadataDrawer() {
           {
             label: t('voxelSpacing'),
             subLabel: (
-              <div className="text-sds-header-xxs font-normal">
+              <div className="text-sds-header-xxs font-normal text-sds-color-semantic-text-neutral">
                 {t('sizeXYZ')}
               </div>
             ),
@@ -149,7 +149,9 @@ export function TomogramMetadataDrawer() {
             renderValues: (values: string[]) => (
               <ul className="list-none">
                 <li className="leading-[20px]">{values[0]}</li>
-                <li className="text-sds-header-xxs font-normal">{values[1]}</li>
+                <li className="text-sds-header-xxs font-normal text-sds-color-semantic-text-neutral">
+                  {values[1]}
+                </li>
               </ul>
             ),
           },
@@ -194,7 +196,20 @@ export function TomogramMetadataDrawer() {
           },
           {
             label: t('canonicalStatus'),
-            values: [], // TODO
+            values: [tomogram.isPortalStandard ? 'True' : 'False'],
+            labelExtra: (
+              <Tooltip
+                tooltip={<I18n i18nKey="alignmentIdCanonicalTooltip" />}
+                placement="top"
+              >
+                <Icon
+                  sdsIcon="InfoCircle"
+                  sdsSize="s"
+                  className="!fill-sds-color-primitive-gray-500"
+                  sdsType="button"
+                />
+              </Tooltip>
+            ),
           },
           {
             label: t('alignmentType'),

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -67,13 +67,14 @@ export function TomogramsTable() {
         ),
         cell: ({ row: { original } }) => (
           <TableCell
-            className="flex flex-col gap-sds-xxxs !items-start"
+            className="flex flex-col !items-start"
             width={TomogramTableWidths.name}
           >
             <div className="text-sds-body-m leading-sds-body-m font-semibold text-ellipsis line-clamp-1 break-all">
               {getTomogramName(original)}
             </div>
-            <div className="flex items-center flex-wrap gap-sds-xs text-sds-body-xxs">
+
+            <div className="flex items-center flex-wrap gap-sds-xs text-sds-body-xxs mt-sds-xxxs">
               {`${t('tomogramId')}: ${IdPrefix.Tomogram}-${original.id}`}
 
               {original.isPortalStandard && (
@@ -84,7 +85,8 @@ export function TomogramsTable() {
                 <TomogramTypeBadge type="author" showTooltip />
               )}
             </div>
-            <div className=" text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+
+            <div className=" text-sds-color-semantic-text-base-secondary text-sds-body-xxs leading-sds-header-xxs mt-2">
               <AuthorList
                 authors={original.authors.edges.map((edge) => edge.node)}
                 compact
@@ -110,7 +112,10 @@ export function TomogramsTable() {
       }),
       columnHelper.accessor('alignment.id', {
         header: () => (
-          <CellHeader width={TomogramTableWidths.alignment}>
+          <CellHeader
+            width={TomogramTableWidths.alignment}
+            tooltip={<I18n i18nKey="alignmentIdTooltip" />}
+          >
             {t('alignmentId')}
           </CellHeader>
         ),
@@ -144,7 +149,7 @@ export function TomogramsTable() {
         cell: ({ getValue, row: { original } }) => (
           <TableCell width={TomogramTableWidths.voxelSpacing}>
             {t('unitAngstrom', { value: getValue() })}
-            <div className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
+            <div className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-secondary">
               ({original.sizeX}, {original.sizeY}, {original.sizeZ})px
             </div>
           </TableCell>
@@ -180,9 +185,8 @@ export function TomogramsTable() {
         cell: ({ row: { original } }) => (
           <TableCell width={TomogramTableWidths.actions}>
             <div className="flex flex-col gap-sds-xs items-start">
-              {/* TODO Use only `isVisualizationDefault` when data is available */}
-              {(original.isVisualizationDefault ??
-                original.isAuthorSubmitted) && (
+              {/* TODO use `isVisualizationDefault` when data is ready */}
+              {original.isAuthorSubmitted && (
                 <ViewTomogramButton
                   tomogramId={original.id.toString()}
                   neuroglancerConfig={original.neuroglancerConfig}

diff --git a/frontend/packages/data-portal/app/components/Select.tsx b/frontend/packages/data-portal/app/components/Select.tsx
@@ -150,7 +150,15 @@ export function Select({
         onClose={closeDropdown}
         onChange={handleOnChange}
         onClickAway={closeDropdown}
-        classes={dropdownClasses}
+        // This hides the search bar in the dropdown menu since it's not used anywhere yet.
+        className="hidden"
+        classes={{
+          ...dropdownClasses,
+          popper: cns(
+            '[&_.MuiButtonBase-root]:!px-sds-s [&_.MuiButtonBase-root]:!py-sds-xs',
+            dropdownClasses?.popper,
+          ),
+        }}
         PopperBaseProps={{
           ...dropdownPopperBaseProps,
           style: { width: anchorEl?.clientWidth },

diff --git a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
@@ -49,6 +49,9 @@ export function CellHeader({
         verticalAlign: 'top',
       }}
       hideSortIcon={!showSort}
+      className={
+        !tooltip ? 'hover:!text-sds-color-semantic-text-base-secondary' : ''
+      }
     >
       <p className="line-clamp-1">
         <Tooltip

diff --git a/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx b/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
@@ -4,6 +4,7 @@ import TableRow from '@mui/material/TableRow'
 import { ComponentProps } from 'react'
 import { match } from 'ts-pattern'
 
+import { useI18n } from 'app/hooks/useI18n'
 import { TableData } from 'app/types/table'
 import { cns, cnsNoMerge } from 'app/utils/cns'
 
@@ -22,6 +23,8 @@ export function MetadataTable({
   title?: string
   small?: boolean
 }) {
+  const { t } = useI18n()
+
   return (
     <div className="flex flex-col gap-sds-xs">
       {title && (
@@ -72,7 +75,11 @@ export function MetadataTable({
                 >
                   {datum.renderValues?.(values) ??
                     match(values.length)
-                      .with(0, () => null)
+                      .with(0, () => (
+                        <span className="text-sds-color-semantic-text-base-secondary">
+                          {t('notSubmitted')}
+                        </span>
+                      ))
                       .with(1, () => (
                         <span className={datum.className}>
                           {datum.renderValue?.(values[0]) ?? values[0]}

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -178,10 +178,10 @@ function TablePageTabContent({
         >
           <div
             className={cns(
-              'flex flex-col flex-auto w-full',
+              'flex flex-col flex-auto w-full max-w-content',
 
               // Translate to the left by half the filter panel width to align with the header
-              filterPanel && 'screen-2040:translate-x-[-100px] max-w-content',
+              filterPanel && 'screen-2040:translate-x-[-117.5px]',
             )}
           >
             {banner && <div className="flex px-sds-xl">{banner}</div>}

diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx
@@ -67,6 +67,7 @@ export function ViewTomogramButton({
         }}
         onMouseEnter={() => setIsHoveringOver?.(true)}
         onMouseLeave={() => setIsHoveringOver?.(false)}
+        className="min-w-[144px]"
       >
         <Button
           href={enabled ? getNeuroglancerUrl(neuroglancerConfig) : undefined}

diff --git a/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts b/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts
@@ -307,6 +307,9 @@ const GET_RUN_BY_ID_QUERY_V2 = gql(`
         sizeY
         sizeZ
         voxelSpacing
+        releaseDate
+        lastModifiedDate
+        relatedDatabaseEntries
         deposition {
           id
           depositionDate

diff --git a/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/utils.ts b/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/utils.ts
@@ -175,19 +175,21 @@ function getTomogramDrawerTestMetadata(
   tomogram: DeepPartial<Tomogram>,
   dataset: DeepPartial<Dataset> | null | undefined,
 ): DrawerTestMetadata {
+  console.log('breh', tomogram.isAuthorSubmitted)
+
   return {
     authors: tomogram.authors!.edges!.map((edge) => edge.node!.name),
     publications:
       dataset?.datasetPublications?.replaceAll('doi:', 'DOI:').split(', ') ??
       '--',
-    relatedDatabases: '--',
+    relatedDatabases: tomogram.relatedDatabaseEntries ?? '--',
     depositionName: tomogram.deposition?.title ?? '--',
     depositionId: tomogram.deposition?.id ?? '--',
     depositionDate: tomogram.deposition?.depositionDate ?? '--',
-    releaseDate: '--',
-    lastModifiedDate: '--',
-    portalStandardStatus: '--',
-    submittedByDatasetAuthor: '--',
+    releaseDate: tomogram.releaseDate ?? '--',
+    lastModifiedDate: tomogram.lastModifiedDate ?? '--',
+    portalStandardStatus: tomogram.isPortalStandard ? 'True' : 'False',
+    submittedByDatasetAuthor: tomogram.isAuthorSubmitted ? 'True' : 'False',
     reconstructionSoftware: tomogram.reconstructionSoftware,
     reconstructionMethod: tomogram.reconstructionMethod,
     processingSoftware: tomogram.processingSoftware ?? '',
@@ -202,17 +204,17 @@ function getTomogramDrawerTestMetadata(
     ),
     ctfCorrected: tomogram.ctfCorrected ? 'Yes' : 'No',
     alignmentId: tomogram.alignment!.id,
-    canonicalStatus: '--',
+    canonicalStatus: tomogram.isPortalStandard ? 'True' : 'False',
     alignmentType: tomogram.alignment!.alignmentType,
     dimensionXYZ: `${tomogram.alignment!.volumeXDimension}, ${
       tomogram.alignment!.volumeYDimension
     }, ${tomogram.alignment!.volumeZDimension}`,
-    offsetXYZ: '--',
+    offsetXYZ: `${tomogram.alignment?.volumeXOffset}, ${tomogram.alignment?.volumeYOffset}, ${tomogram.alignment?.volumeZOffset}`,
     rotationX: tomogram.alignment!.xRotationOffset,
     tiltOffset: tomogram.alignment!.tiltOffset,
     affineTransformationMatrix:
       tomogram.alignment!.affineTransformationMatrix!.replaceAll(
-        /\[|\]|,|\s/g,
+        /\{|\}|\[|\]|,|\s/g,
         '',
       ),
   }

diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -144,7 +144,7 @@
   "downloadNow": "Download Now",
   "downloadOptions": "Download Options",
   "downloadRunData": "Download Run Data",
-  "downloadTheRunDataToCreateYourOwnAnnotations": "Download the Run data to create your own annotations.",
+  "downloadTheRunDataToCreateYourOwnAnnotations": "Download all Run data via API  to create your own annotations.",
   "downloadThisRun": "Download This Run",
   "downloadTomogram": "Download Tomogram",
   "downloadWillSaveToCurrentDirectory": "Download will save to your current directory. To change save destination, change the current directory in your terminal before continuing.",