table definition header

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>
   )
 }

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]"
     />
   )
 }

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-l px-sds-xxl">
+      <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>
+  )
+}

frontend/packages/data-portal/app/components/TablePageLayout/index.ts

@@ -1 +1,3 @@
+export * from './TableHeader'
+export * from './TableHeaderDefinition'
 export * from './TablePageLayout'

frontend/packages/data-portal/app/routes/browse-data.datasets.tsx

@@ -4,9 +4,14 @@ import { json, LoaderFunctionArgs } from '@remix-run/node'
 import { Order_By } from 'app/__generated__/graphql'
 import { apolloClient } from 'app/apollo.server'
 import { DatasetTable } from 'app/components/BrowseData'
+import { BrowseDataSearch } from 'app/components/BrowseData/BrowseDataSearch'
 import { DatasetFilter } from 'app/components/DatasetFilter'
 import { NoFilteredResults } from 'app/components/NoFilteredResults'
-import { TablePageLayout } from 'app/components/TablePageLayout'
+import {
+  TableHeaderDefinition,
+  TableHeaderProps,
+  TablePageLayout,
+} from 'app/components/TablePageLayout'
 import { DATASET_FILTERS } from 'app/constants/filterQueryParams'
 import { QueryParams } from 'app/constants/query'
 import { getBrowseDatasets } from 'app/graphql/getBrowseDatasets.server'
@@ -49,6 +54,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
   })
 }
 
+function BrowseDatasetTableHeader(props: TableHeaderProps) {
+  return <TableHeaderDefinition {...props} search={<BrowseDataSearch />} />
+}
+
 export default function BrowseDatasetsPage() {
   const { datasetCount, filteredDatasetCount } = useDatasets()
   const { t } = useI18n()
@@ -74,6 +83,7 @@ export default function BrowseDatasetsPage() {
           filteredCount: filteredDatasetCount,
           totalCount: datasetCount,
           countLabel: t('datasets'),
+          Header: BrowseDatasetTableHeader,
         },
       ]}
     />

frontend/packages/data-portal/app/routes/browse-data.depositions.tsx

@@ -4,7 +4,10 @@ import { json, LoaderFunctionArgs, redirect } from '@remix-run/node'
 import { Order_By } from 'app/__generated__/graphql'
 import { apolloClient } from 'app/apollo.server'
 import { DepositionTable } from 'app/components/BrowseData/DepositionTable'
-import { TablePageLayout } from 'app/components/TablePageLayout'
+import {
+  TableHeaderDefinition,
+  TablePageLayout,
+} from 'app/components/TablePageLayout'
 import { QueryParams } from 'app/constants/query'
 import { getBrowseDepositions } from 'app/graphql/getBrowseDepositions.server'
 import { useDepositions } from 'app/hooks/useDepositions'
@@ -63,6 +66,7 @@ export default function BrowseDepositionsPage() {
           filteredCount: filteredDepositionCount,
           totalCount: depositionCount,
           countLabel: t('depositions'),
+          Header: TableHeaderDefinition,
         },
       ]}
     />

frontend/packages/data-portal/public/locales/en/translation.json

@@ -127,7 +127,7 @@
   "depositionOnly": "Deposition only",
   "depositionOverview": "Deposition Overview",
   "depositions": "Depositions",
-  "depositionsDescription": "Depositions are collections of datasets, annotations, and/or (in the future) tomograms contributed by the same author(s). The website currently shows only depositions that include annotations.",
+  "depositionsDescription": "Depositions are collections of annotations, or imaging datasets containing annotations created using one or more methods contributed at once.",
   "depositionsTab": "Depositions {{count}}",
   "description": "Description",
   "developAMLModel": "Develop a ML model for annotating subcellular structures and proteins in CryoET data",
@@ -340,6 +340,7 @@
   "samplePreparation": "Sample Preparation",
   "sampleType": "Sample Type",
   "search": "Search",
+  "searchByDatasetName": "Search by Dataset Name",
   "segmentationMask": "Segmentation Mask",
   "segmentationMasks": "Segmentation Masks",
   "selectASpecificTomogram": "Select a specific tomogram from this run to download.",