Runs table (#114)

## Description

#33

Implements the runs table on the single dataset page. This refactors
`DatasetTable` component to extract a more generic `Table` component
that is reused for the dataset and runs tables. This uses [Tanstack
Table](https://tanstack.com/table/v8) for abstracting the table logic so
that it's more reusable.

## Demo

<img width="1725" alt="image"
src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/04386ffc-0d26-46c9-a458-268e53980ec6">

frontend/package.json

@@ -10,7 +10,8 @@
     "data-portal": "pnpm --filter data-portal",
     "dev": "pnpm data-portal dev",
     "lint": "pnpm -r lint",
-    "lint:fix": "pnpm -r lint:fix"
+    "lint:fix": "pnpm -r lint:fix",
+    "test": "pnpm -r test"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",

frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx

@@ -0,0 +1,84 @@
+import { Tooltip } from '@czi-sds/components'
+import Paper from '@mui/material/Paper'
+import Skeleton from '@mui/material/Skeleton'
+import { range } from 'lodash-es'
+import { ReactNode } from 'react'
+
+import { ANNOTATED_OBJECTS_MAX } from 'app/constants/pagination'
+import { i18n } from 'app/i18n'
+import { cns } from 'app/utils/cns'
+
+function List({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <ul className={cns('list-none flex flex-col gap-sds-xs', className)}>
+      {children}
+    </ul>
+  )
+}
+
+export function AnnotatedObjectsList({
+  annotatedObjects,
+  isLoading,
+}: {
+  annotatedObjects: string[]
+  isLoading?: boolean
+}) {
+  if (annotatedObjects.length === 0) {
+    return null
+  }
+
+  const nodes = isLoading
+    ? range(0, ANNOTATED_OBJECTS_MAX).map((val) => (
+        <Skeleton key={`skeleton-${val}`} variant="rounded" />
+      ))
+    : annotatedObjects.map((obj) => <li key={obj}>{obj}</li>)
+
+  return (
+    <List>
+      {nodes.slice(
+        0,
+        nodes.length > ANNOTATED_OBJECTS_MAX
+          ? ANNOTATED_OBJECTS_MAX - 1
+          : Infinity,
+      )}
+
+      {nodes.length > ANNOTATED_OBJECTS_MAX && (
+        <li>
+          <Tooltip
+            classes={{ tooltip: '!p-0 !bg-transparent' }}
+            placement="left"
+            title={
+              <Paper className="p-sds-m text-black w-[250px]" elevation={4}>
+                <List className="font-semibold">
+                  {nodes.slice(0, 4)}
+
+                  <li>
+                    really long object with a long name that is long for some
+                    reason other than being long
+                  </li>
+
+                  {nodes.slice(4)}
+                </List>
+              </Paper>
+            }
+          >
+            <div
+              className={cns(
+                'bg-sds-gray-200 text-sds-gray-600 hover:cursor-pointer',
+                'rounded-sds-m py-sds-xxxs px-sds-xxs inline',
+              )}
+            >
+              {i18n.nMoreObjects(nodes.length + 1 - ANNOTATED_OBJECTS_MAX)}
+            </div>
+          </Tooltip>
+        </li>
+      )}
+    </List>
+  )
+}

frontend/packages/data-portal/app/components/BrowseData/BrowseDataFilterCount.tsx

@@ -1,10 +1,10 @@
-import { useLoaderData, useSearchParams } from '@remix-run/react'
+import { useSearchParams } from '@remix-run/react'
 
-import { GetDatasetsDataQuery } from 'app/__generated__/graphql'
+import { useDatasets } from 'app/hooks/useDatasets'
 import { i18n } from 'app/i18n'
 
 export function BrowseDataFilterCount() {
-  const data = useLoaderData<GetDatasetsDataQuery>()
+  const { datasetCount, filteredDatasetCount } = useDatasets()
   const [searchParams] = useSearchParams()
 
   if (!searchParams.get('search')) {
@@ -14,10 +14,7 @@ export function BrowseDataFilterCount() {
   return (
     <div className="w-full pl-sds-s">
       <p className="text-sm text-sds-gray-500">
-        {i18n.datasetCount(
-          data.filtered_datasets_aggregate.aggregate?.count ?? 0,
-          data.datasets_aggregate.aggregate?.count ?? 0,
-        )}
+        {i18n.datasetCount(filteredDatasetCount, datasetCount)}
       </p>
     </div>
   )