feat: definition and search updates (#1298)

#1267 - Refactors the table header into a separate component - Adds new table definition header component for increasing visibility of the dataset / deposition description ## Demos ### Browse Datasets https://dev-table-def.cryoet.dev.si.czi.technology/browse-data/datasets <img width="1728" alt="image" src="https://github.com/user-attachments/assets/51702ce4-6577-4183-aa8f-3e89e788f13a"> ### Browse Depositions https://dev-table-def.cryoet.dev.si.czi.technology/browse-data/depositions <img width="1728" alt="image" src="https://github.com/user-attachments/assets/50f702bc-ac3d-4387-975e-4386f66e7aa1">
chanzuckerberg · Nov 6, 2024 · 58e36ea · 58e36ea
1 parent c31b63b
commit 58e36ea
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 142 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/BrowseDataHeader.tsx b/frontend/packages/data-portal/app/components/BrowseData/BrowseDataHeader.tsx
@@ -1,13 +1,9 @@
-import { BrowseDataSearch } from './BrowseDataSearch'
 import { BrowseDataTabs } from './BrowseDataTabs'
 
 export function BrowseDataHeader() {
   return (
-    <div className="px-sds-xl py-sds-l flex justify-center">
-      <div className="flex gap-sds-xl w-full max-w-content">
-        <BrowseDataSearch />
-        <BrowseDataTabs />
-      </div>
+    <div className="px-sds-xl py-[18px] flex w-full max-w-content">
+      <BrowseDataTabs />
     </div>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/BrowseData/BrowseDataSearch.tsx b/frontend/packages/data-portal/app/components/BrowseData/BrowseDataSearch.tsx
@@ -6,7 +6,7 @@ import { useHydrateAtoms } from 'jotai/utils'
 import { useEffect, useRef } from 'react'
 
 import { QueryParams } from 'app/constants/query'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
 import { searchQueryAtom } from 'app/state/search'
 
 /**
@@ -51,14 +51,17 @@ export function BrowseDataSearch() {
     SEARCH_QUERY_DEBOUNCE_TIME_MS,
   )
 
+  const { t } = useI18n()
+
   return (
     <InputSearch
       id="data-search"
-      label={i18n.search}
-      sdsStyle="rounded"
-      placeholder={i18n.search}
+      label={t('search')}
+      sdsStyle="square"
+      placeholder={t('searchByDatasetName')}
       value={query}
       onChange={(event) => setQuery(event.target.value)}
+      className="!m-0 [&>.MuiInputBase-root]:!min-w-[240px]"
     />
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Table/Table.tsx b/frontend/packages/data-portal/app/components/Table/Table.tsx
@@ -17,7 +17,6 @@ import {
 import { Fragment, ReactNode } from 'react'
 
 import { ErrorBoundary } from 'app/components/ErrorBoundary'
-import { useLayout } from 'app/context/Layout.context'
 import { cns } from 'app/utils/cns'
 
 export interface TableProps<T> {
@@ -46,8 +45,6 @@ export function Table<T>({
   getAfterTableElement,
   onTableRowClick,
 }: TableProps<T>) {
-  const { hasFilters } = useLayout()
-
   const table = useReactTable<T>({
     columns,
     data,
@@ -59,15 +56,7 @@ export function Table<T>({
   }
 
   return (
-    <TableContainer
-      className={cns(
-        classes?.container,
-
-        // Need to subtract 244px from 100vw to account for the sidebar and padding:
-        // sidebar width = 200px, padding = 22px * 2 = 44px
-        hasFilters && 'max-w-[calc(100vw-244px)]',
-      )}
-    >
+    <TableContainer className={classes?.container}>
       <SDSTable {...tableProps} className={cns('!table-auto', classes?.table)}>
         <TableHeader>
           {table.getFlatHeaders().map((header) => {

diff --git a/frontend/packages/data-portal/app/components/Table/index.ts b/frontend/packages/data-portal/app/components/Table/index.ts
@@ -3,5 +3,4 @@ export * from './MetadataTable'
 export * from './PageTable'
 export * from './Table'
 export * from './TableCell'
-export * from './TableCount'
 export * from './TableLink'
diff --git a/...ortal/app/components/Table/TableCount.tsx → ...components/TablePageLayout/TableCount.tsx b/...ortal/app/components/Table/TableCount.tsx → ...components/TablePageLayout/TableCount.tsx
@@ -1,7 +1,7 @@
 import Skeleton from '@mui/material/Skeleton'
 
+import { useI18n } from 'app/hooks/useI18n'
 import { useIsLoading } from 'app/hooks/useIsLoading'
-import { i18n } from 'app/i18n'
 
 export function TableCount({
   filteredCount,
@@ -13,13 +13,18 @@ export function TableCount({
   type: string
 }) {
   const { isLoadingDebounced } = useIsLoading()
+  const { t } = useI18n()
 
   return (
     <p className="text-sds-body-xs text-sds-color-primitive-gray-500 whitespace-nowrap mr-sds-xxl">
       {isLoadingDebounced ? (
         <Skeleton className="max-w-" variant="text" />
       ) : (
-        i18n.filterCount(filteredCount, totalCount, type)
+        t('filterCountOfMaxType', {
+          type,
+          count: filteredCount,
+          max: totalCount,
+        })
       )}
     </p>
   )

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout/TableHeader.tsx b/frontend/packages/data-portal/app/components/TablePageLayout/TableHeader.tsx
@@ -0,0 +1,57 @@
+import { Link } from 'app/components/Link'
+import { TableCount } from 'app/components/TablePageLayout/TableCount'
+import { useI18n } from 'app/hooks/useI18n'
+import { cns } from 'app/utils/cns'
+
+export interface TableHeaderProps {
+  countLabel: string
+  description?: string
+  filteredCount: number
+  title: string
+  totalCount: number
+  learnMoreLink?: string
+}
+
+export function TableHeader({
+  countLabel,
+  description,
+  filteredCount,
+  title,
+  totalCount,
+  learnMoreLink,
+}: TableHeaderProps) {
+  const { t } = useI18n()
+
+  return (
+    <div
+      className={cns(
+        'ml-sds-xl p-sds-m flex items-center gap-x-sds-xl screen-1024:mr-sds-xl',
+        // NOTE: The title background color is gray on the browse datasets and browse depositions pages
+        // If we want to add a description to the single deposition or single run pages, we may need to update this
+        !!description && 'bg-sds-color-primitive-gray-100',
+      )}
+    >
+      <p className="text-sds-header-l leading-sds-header-l font-semibold">
+        {title}
+      </p>
+
+      <TableCount
+        filteredCount={filteredCount}
+        totalCount={totalCount}
+        type={countLabel}
+      />
+
+      <p className="inline">
+        {description}
+        {learnMoreLink && (
+          <Link
+            to={learnMoreLink}
+            className="text-sds-color-primitive-blue-400 ml-sds-xxs"
+          >
+            {t('learnMore')}
+          </Link>
+        )}
+      </p>
+    </div>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/TablePageLayout/TableHeaderDefinition.tsx b/frontend/packages/data-portal/app/components/TablePageLayout/TableHeaderDefinition.tsx
@@ -0,0 +1,55 @@
+import { ReactNode } from 'react'
+
+import { Link } from 'app/components/Link'
+import { useI18n } from 'app/hooks/useI18n'
+
+import { TableCount } from './TableCount'
+import { TableHeaderProps } from './TableHeader'
+
+export function TableHeaderDefinition({
+  countLabel,
+  filteredCount,
+  totalCount,
+  title,
+  description,
+  learnMoreLink,
+  search,
+}: TableHeaderProps & {
+  search?: ReactNode
+}) {
+  const { t } = useI18n()
+
+  return (
+    <div className="pt-sds-s px-sds-xl max-w-content">
+      <h1 className="text-sds-header-xxl leading-sds-header-xxl tracking-sds-header-xxl font-semibold">
+        {title}
+      </h1>
+
+      <p className="text-sds-body-s leading-sds-body-s tracking-sds-body-s max-w-[600px] mt-sds-s">
+        <span className="text-sds-color-semantic-text-base-secondary">
+          {description}
+        </span>
+
+        {learnMoreLink && (
+          <Link
+            className="text-sds-color-semantic-text-action-default hover:text-sds-color-semantic-text-action-hover"
+            to={learnMoreLink}
+          >
+            {' '}
+            {t('learnMore')}
+          </Link>
+        )}
+      </p>
+
+      <div className="flex justify-between items-center mt-sds-xl">
+        <TableCount
+          filteredCount={filteredCount}
+          totalCount={totalCount}
+          type={countLabel}
+        />
+
+        {search}
+      </div>
+    </div>
+  )
+}