fix: address misc UI/UX bugs (#1192)

see https://docs.google.com/document/d/1jJ56MqvTCBGKbj7XOpdhvGH20MYF0F_ndG2T5jOWQsw/edit?usp=sharing
chanzuckerberg · Oct 3, 2024 · 178737d · 178737d
1 parent def942f
commit 178737d
Show file tree

Hide file tree

Showing 19 changed files with 176 additions and 137 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
@@ -278,12 +278,12 @@ export function DepositionTable() {
                   <ul className="list-none flex flex-col gap-sds-xs">
                     {Object.entries(shapeTypeToI18nKey)
                       .filter(([key]) => shapeTypes.includes(key))
-                      .map((entry) => (
+                      .map(([k, v]) => (
                         <li
                           className="whitespace-nowrap overflow-x-hidden overflow-ellipsis"
-                          key={entry[0]}
+                          key={k}
                         >
-                          {t(entry[1])}
+                          {t(v)}
                         </li>
                       ))}
                   </ul>

diff --git a/...d/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx b/...d/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
@@ -137,9 +137,13 @@ export function MethodLinksMetadataTable({
         .map((methodData, i) => (
           <div className="flex flex-col gap-sds-xl">
             <MethodSummarySection
-              label={t('methodCount', {
-                value: startCase(converter.toWords(i + 1)),
-              })}
+              label={
+                deposition.annotation_methods.length === 1
+                  ? undefined
+                  : t('methodCount', {
+                      value: startCase(converter.toWords(i + 1)),
+                    })
+              }
               data={methodData as MethodDataType}
               annotationsCount={
                 annotationMethodCounts.get(methodData.annotation_method) ?? 0

diff --git a/frontend/packages/data-portal/app/components/Filters/AnnotationObjectShapeTypeFilter.tsx b/frontend/packages/data-portal/app/components/Filters/AnnotationObjectShapeTypeFilter.tsx
@@ -1,16 +1,22 @@
 import { useMemo } from 'react'
 
+import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes'
 import { QueryParams } from 'app/constants/query'
 import { useFilter } from 'app/hooks/useFilter'
 import { useI18n } from 'app/hooks/useI18n'
 import { BaseFilterOption } from 'app/types/filter'
+import { ObjectShapeType } from 'app/types/shapeTypes'
 
 import { SelectFilter } from './SelectFilter'
 
 function getObjectShapeTypeOptions(
   objectShapeTypes: string[],
+  t: ReturnType<typeof useI18n>['t'],
 ): BaseFilterOption[] {
-  return objectShapeTypes.map((value) => ({ value }))
+  return objectShapeTypes.map((value) => ({
+    label: t(shapeTypeToI18nKey[value as ObjectShapeType]),
+    value,
+  }))
 }
 
 export function AnnotatedObjectShapeTypeFilter({
@@ -26,13 +32,13 @@ export function AnnotatedObjectShapeTypeFilter({
   } = useFilter()
 
   const objectShapeTypeOptions = useMemo(
-    () => getObjectShapeTypeOptions(allObjectShapeTypes),
-    [allObjectShapeTypes],
+    () => getObjectShapeTypeOptions(allObjectShapeTypes, t),
+    [allObjectShapeTypes, t],
   )
 
   const objectShapeTypeValue = useMemo(
-    () => getObjectShapeTypeOptions(objectShapeTypes),
-    [objectShapeTypes],
+    () => getObjectShapeTypeOptions(objectShapeTypes, t),
+    [objectShapeTypes, t],
   )
 
   return (

diff --git a/...d/packages/data-portal/app/components/Run/AnnotationObjectTable/AnnotationObjectTable.tsx b/...d/packages/data-portal/app/components/Run/AnnotationObjectTable/AnnotationObjectTable.tsx
@@ -1,6 +1,8 @@
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
+import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes'
 import { useI18n } from 'app/hooks/useI18n'
 import { useAnnotation } from 'app/state/annotation'
+import { ObjectShapeType } from 'app/types/shapeTypes'
 import { getTableData } from 'app/utils/table'
 
 import { ObjectIdLink } from './components/ObjectIdLink'
@@ -31,7 +33,7 @@ export function AnnotationObjectTable() {
     },
     {
       label: t('objectShapeType'),
-      values: [annotation.shape_type],
+      values: [t(shapeTypeToI18nKey[annotation.shape_type as ObjectShapeType])],
     },
     {
       label: t('objectState'),

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -22,6 +22,7 @@ import {
   methodTooltipLabels,
   MethodType,
 } from 'app/constants/methodTypes'
+import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { QueryParams } from 'app/constants/query'
 import { AnnotationTableWidths } from 'app/constants/table'
@@ -36,6 +37,7 @@ import {
 import { useRunById } from 'app/hooks/useRunById'
 import { AnnotationRow, useAnnotation } from 'app/state/annotation'
 import { I18nKeys } from 'app/types/i18n'
+import { ObjectShapeType } from 'app/types/shapeTypes'
 import { DASHED_BORDERED_CLASSES } from 'app/utils/classNames'
 import { cns, cnsNoMerge } from 'app/utils/cns'
 
@@ -248,7 +250,7 @@ export function AnnotationTable() {
 
         cell: ({ getValue }) => (
           <TableCell width={AnnotationTableWidths.files}>
-            {getValue()}
+            {t(shapeTypeToI18nKey[getValue() as ObjectShapeType])}
           </TableCell>
         ),
       }),

diff --git a/frontend/packages/data-portal/app/constants/objectShapeTypes.ts b/frontend/packages/data-portal/app/constants/objectShapeTypes.ts
@@ -3,16 +3,16 @@ import { ObjectShapeType } from 'app/types/shapeTypes'
 
 type ShapeTypeToI18nKeyMap = { [key in ObjectShapeType]: I18nKeys }
 
-export const shapeTypeToI18nKey: ShapeTypeToI18nKeyMap = {
+export const shapeTypeToI18nKey = {
   InstanceSegmentation: 'instanceSegmentation',
   OrientedPoint: 'orientedPoint',
   Point: 'point',
   SegmentationMask: 'segmentationMask',
-}
+} as const satisfies ShapeTypeToI18nKeyMap
 
-export const shapeTypeToI18nKeyPlural: ShapeTypeToI18nKeyMap = {
+export const shapeTypeToI18nKeyPlural = {
   InstanceSegmentation: 'instanceSegmentations',
   OrientedPoint: 'orientedPoints',
   Point: 'points',
   SegmentationMask: 'segmentationMasks',
-}
+} as const satisfies ShapeTypeToI18nKeyMap
diff --git a/frontend/packages/data-portal/app/graphql/getDatasetsFilterData.server.ts b/frontend/packages/data-portal/app/graphql/getDatasetsFilterData.server.ts
@@ -1,51 +1,72 @@
 import type { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 
 import { gql } from 'app/__generated__'
-import { Datasets_Bool_Exp } from 'app/__generated__/graphql'
 
 const GET_DATASETS_FILTER_DATA_QUERY = gql(`
   query GetDatasetsFilterData(
-    $filter: datasets_bool_exp,
+    $datasets_filter: datasets_bool_exp,
+    $tiltseries_filter: tiltseries_bool_exp,
+    $tomograms_filter: tomograms_bool_exp,
+    $annotations_filter: annotations_bool_exp,
+    $annotation_files_filter: annotation_files_bool_exp,
   ) {
-    organism_names: datasets(where: $filter, distinct_on: organism_name) {
+    organism_names: datasets(where: $datasets_filter, distinct_on: organism_name) {
       organism_name
     }
 
-    camera_manufacturers: tiltseries(distinct_on: camera_manufacturer) {
+    camera_manufacturers: tiltseries(where: $tiltseries_filter, distinct_on: camera_manufacturer) {
       camera_manufacturer
     }
 
-    reconstruction_methods: tomograms(distinct_on: reconstruction_method) {
+    reconstruction_methods: tomograms(where: $tomograms_filter, distinct_on: reconstruction_method) {
       reconstruction_method
     }
 
-    reconstruction_softwares: tomograms(distinct_on: reconstruction_software) {
+    reconstruction_softwares: tomograms(where: $tomograms_filter, distinct_on: reconstruction_software) {
       reconstruction_software
     }
 
-    object_names: annotations(distinct_on: object_name) {
+    object_names: annotations(where: $annotations_filter, distinct_on: object_name) {
       object_name
     }
 
-    object_shape_types: annotation_files(distinct_on: shape_type) {
+    object_shape_types: annotation_files(where: $annotation_files_filter, distinct_on: shape_type) {
       shape_type
     }
   }
 `)
 
 export async function getDatasetsFilterData({
   client,
-  filter = {},
+  depositionId,
 }: {
   client: ApolloClient<NormalizedCacheObject>
-  filter: Datasets_Bool_Exp
+  depositionId?: number
 }) {
   const start = performance.now()
 
+  const filter = {
+    deposition_id: {
+      _eq: depositionId,
+    },
+  }
+
   const results = await client.query({
     query: GET_DATASETS_FILTER_DATA_QUERY,
     variables: {
-      filter,
+      datasets_filter: depositionId
+        ? {
+            runs: {
+              tomogram_voxel_spacings: {
+                annotations: filter,
+              },
+            },
+          }
+        : {},
+      tiltseries_filter: depositionId ? filter : {},
+      tomograms_filter: depositionId ? filter : {},
+      annotations_filter: depositionId ? filter : {},
+      annotation_files_filter: depositionId ? { annotation: filter } : {},
     },
   })
 

diff --git a/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts b/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts
@@ -60,7 +60,6 @@ const GET_DEPOSITION_BY_ID = gql(`
         annotation_software
         method_links
         method_type
-
       }
 
       annotations_aggregate {

diff --git a/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx b/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx
@@ -41,7 +41,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
       client: apolloClient,
       params: url.searchParams,
     }),
-    getDatasetsFilterData({ client: apolloClient, filter: {} }),
+    getDatasetsFilterData({ client: apolloClient }),
   ])
 
   return json({

diff --git a/frontend/packages/data-portal/app/routes/browse-data.depositions.tsx b/frontend/packages/data-portal/app/routes/browse-data.depositions.tsx
@@ -50,7 +50,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 }
 
 export default function BrowseDepositionsPage() {
-  // TODO: hook up to backend when available
   const { depositionCount, filteredDepositionCount } = useDepositions()
   const { reset } = useFilter()
   const { t } = useI18n()

diff --git a/frontend/packages/data-portal/app/routes/depositions.$id.tsx b/frontend/packages/data-portal/app/routes/depositions.$id.tsx
@@ -69,17 +69,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
     }),
     getDatasetsFilterData({
       client: apolloClient,
-      filter: {
-        runs: {
-          tomogram_voxel_spacings: {
-            annotations: {
-              deposition_id: {
-                _eq: id,
-              },
-            },
-          },
-        },
-      },
+      depositionId: id,
     }),
   ])
 

diff --git a/frontend/packages/data-portal/app/utils/featureFlags.ts b/frontend/packages/data-portal/app/utils/featureFlags.ts
@@ -7,7 +7,7 @@ export type FeatureFlagEnvironment = typeof process.env.ENV
 export type FeatureFlagKey = 'depositions' | 'multipleTomograms'
 
 export const FEATURE_FLAGS: Record<FeatureFlagKey, FeatureFlagEnvironment[]> = {
-  depositions: ['local', 'dev'],
+  depositions: ['local', 'dev', 'staging', 'prod'],
   multipleTomograms: ['local', 'dev'],
 }
 

diff --git a/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts b/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts
@@ -5,11 +5,12 @@ import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage'
 import { serializeAvailableFiles } from 'e2e/pageObjects/filters/utils'
 
 import { QueryParams } from 'app/constants/query'
+import { ObjectShapeType } from 'app/types/shapeTypes'
 import { getPrefixedId } from 'app/utils/idPrefixes'
 
 import { getApolloClient } from './apollo'
 import { BROWSE_DATASETS_URL, E2E_CONFIG, translations } from './constants'
-import { onlyRunIfEnabled } from './utils'
+import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils'
 
 test.describe('Browse datasets page filters', () => {
   let client: ApolloClient<NormalizedCacheObject>
@@ -1156,17 +1157,16 @@ test.describe('Browse datasets page filters', () => {
           getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId),
         )
 
-        // TODO: (kne42) uncomment when hooked up to backend
-        // await filtersActor.expectDataAndDatasetsTableToMatch({
-        //   client,
-        //   url: BROWSE_DATASETS_URL,
-        //   queryParamsList: [
-        //     {
-        //       queryParamKey: QueryParams.DepositionId,
-        //       queryParamValue: E2E_CONFIG.depositionId,
-        //     },
-        //   ],
-        // })
+        await filtersActor.expectDataAndDatasetsTableToMatch({
+          client,
+          url: BROWSE_DATASETS_URL,
+          queryParamsList: [
+            {
+              queryParamKey: QueryParams.DepositionId,
+              queryParamValue: E2E_CONFIG.depositionId,
+            },
+          ],
+        })
       })
       test('should filter when opening URL', async () => {
         await filtersActor.goToFilteredUrl({
@@ -1183,17 +1183,16 @@ test.describe('Browse datasets page filters', () => {
           getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId),
         )
 
-        // TODO: (kne42) uncomment when hooked up to backend
-        // await filtersActor.expectDataAndDatasetsTableToMatch({
-        //   client,
-        //   url: BROWSE_DATASETS_URL,
-        //   queryParamsList: [
-        //     {
-        //       queryParamKey: QueryParams.DepositionId,
-        //       queryParamValue: E2E_CONFIG.depositionId,
-        //     },
-        //   ],
-        // })
+        await filtersActor.expectDataAndDatasetsTableToMatch({
+          client,
+          url: BROWSE_DATASETS_URL,
+          queryParamsList: [
+            {
+              queryParamKey: QueryParams.DepositionId,
+              queryParamValue: E2E_CONFIG.depositionId,
+            },
+          ],
+        })
       })
       test('should disable filter when deselecting', async () => {
         await filtersActor.goToFilteredUrl({
@@ -2485,7 +2484,9 @@ test.describe('Browse datasets page filters', () => {
 
       await filtersActor.addSingleSelectFilter({
         label: translations.objectShapeType,
-        value: E2E_CONFIG.objectShapeType,
+        value: getObjectShapeTypeLabel(
+          E2E_CONFIG.objectShapeType as ObjectShapeType,
+        ),
       })
 
       await filtersActor.expectUrlQueryParamsToBeCorrect({
@@ -2542,7 +2543,9 @@ test.describe('Browse datasets page filters', () => {
         ],
       })
 
-      await filtersPage.removeFilterOption(E2E_CONFIG.objectShapeType)
+      await filtersPage.removeFilterOption(
+        getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType),
+      )
 
       await filtersActor.expectUrlQueryParamsToBeCorrect({
         url: BROWSE_DATASETS_URL,

diff --git a/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts b/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts
@@ -392,7 +392,6 @@ export class FiltersActor {
   }) {
     const { data: datasetsFilterData } = await getDatasetsFilterData({
       client,
-      filter: {},
     })
 
     const organismNames = getFilteredOrganismNamesFromData({