feat: single deposition table updates #1852

codemonkey800 · 2025-06-18T16:41:39Z

Issue: #1827
Depends on: #1851

Follow up PR that implements the updated single deposition page using code from #1851. This makes the following changes;

Updates queries to fetch data for tomograms and annotations.
- I also updated the loader function to return tomograms and annotations data only if the tab has loaded.
- Right now the depositions query is untouched since we still need some data for the overview.
- After release we should clean up the query so we're not fetching unnecessary data.
Adds deposition tabs to left sidebar
Implements annotations / tomograms table using columns from previous PR.

Copilot

Pull Request Overview

This PR implements updates to the single deposition page by adding new queries and UI components to support separate views for tomograms and annotations. It updates the loader to conditionally fetch additional data, adds deposition tabs to the sidebar, and introduces new table renderers for annotations and tomograms.

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
locales/en/translation.json	Adds new translation keys for data contents and deposited data/information.
app/routes/depositions.$id.tsx	Updates the loader function to conditionally fetch tomograms and annotations data using ts-pattern and adjusts query parameters in the revalidation function.
app/hooks/useDepositionTab.ts	Introduces the DepositionTab enum and related hook for handling deposition tabs.
app/hooks/useDepositionById.ts	Adds annotations and tomograms data along with count aggregations from the backend.
app/graphql/*	Adds new GraphQL queries for fetching deposition tomograms and annotations along with count aggregations.
app/constants/table.ts	Defines new column width constants for deposition tables.
app/components/Deposition/*	Adds new components including the deposition tabs, table renderers, filters, and deposited-in table cell with updated UI logic.

frontend/packages/data-portal/app/components/Deposition/DepositionFilters.tsx

tihuan

Looks fantastic 🏎️ 🏁 🥇 !! LGTMMM

frontend/packages/data-portal/app/components/Deposition/DepositedInTableCell.tsx

tihuan · 2025-06-20T15:07:54Z

frontend/packages/data-portal/app/components/Deposition/DepositionTomogramTable.tsx

+)
+
+export function DepositionTomogramTable() {
+  const { tomograms } = useDepositionById()


rainandbare

WEEEEEHOOOOO! SO exciting! It is taking shape! Really nice work. A few non-blocking comments - see which ones work for you.

rainandbare · 2025-06-20T15:02:09Z

frontend/packages/data-portal/app/routes/depositions.$id.tsx

+          table: isExpandDepositions ? (
+            <DepositionTableRenderer />
+          ) : (
+            <DatasetsTable />
+          ),
+
+          totalCount: match({ isExpandDepositions, tab })
+            .with(
+              { isExpandDepositions: true, tab: DepositionTab.Annotations },
+              () => annotationsCount,
+            )
+            .with(
+              { isExpandDepositions: true, tab: DepositionTab.Tomograms },
+              () => tomogramsCount,
+            )
+            .otherwise(() => totalDatasetsCount),
+
+          // TODO replace annotations and tomograms with filtered counts
+          filteredCount: match({ isExpandDepositions, tab })


👀 oy this is complex with the feature flag!

it'll be cleaner once we remove the feature flag 😆 but yeah imagine how it'd be with nested if statements or ternaries instead! 💀

frontend/packages/data-portal/app/routes/depositions.$id.tsx

rainandbare · 2025-06-20T15:07:59Z

frontend/packages/data-portal/app/components/Deposition/DepositionTomogramTable.tsx

+    ],
+  )
+
+  return (


I am not sure if we expect to see anything here yet or if something is off with my local set up:

ohhh hmm let me take a look, something might not be fetching correctly 🤔

rainandbare · 2025-06-20T15:10:47Z

frontend/packages/data-portal/app/components/Deposition/DepositionTabs.tsx

+  const [tab, setTab] = useDepositionTab()
+  const tabs = useTabs(tab)
+
+  return <Tabs tabs={tabs} value={tab} onChange={setTab} vertical />


Future Nice-to-have suggestion: It would be good if changing tabs didn't bring you to the top of the page and also it might be nice if the headers loaded as well as the data - or maybe they just change to the next tabs head (like if you click on Tomograms then the headers change immediately even while we wait for the data to load

I think there's a way to do that in remix: https://remix.run/docs/en/main/components/scroll-restoration#preventing-scroll-reset

also it might be nice if the headers loaded as well as the data - or maybe they just change to the next tabs head (like if you click on Tomograms then the headers change immediately even while we wait for the data to load

I agree, I think this is limitation to how we implemented the frontend in the beginning because data fetching has to complete before it can show the next page. I think this was before Suspense and Await became more widespread, so we never adopted this pattern in the codebase 😢

I think overall we should look into deferring the data fetches and using Suspense to make the application feel snappier. There's a Remix example of using it here:
https://remix.run/docs/en/main/discussion/pending-ui#deferred-data-loading

I opened an issue to track this: #1861

rainandbare · 2025-06-20T15:12:17Z

frontend/packages/data-portal/app/components/Deposition/DepositionFilters.tsx

+          </div>
+        ))}
+      </div>
+    </div>


need some padding/margin bottom here when there is no data/loading

frontend/packages/data-portal/app/components/Deposition/DepositedInTableCell.tsx

frontend/packages/data-portal/app/components/Deposition/DepositionAnnotationTable.tsx

adding missing commit for #1852

codemonkey800 requested review from tihuan, rainandbare, ehoops-cz and Copilot June 18, 2025 16:41

Copilot AI reviewed Jun 18, 2025

View reviewed changes

frontend/packages/data-portal/app/components/Deposition/DepositionFilters.tsx Outdated Show resolved Hide resolved

codemonkey800 temporarily deployed to local June 18, 2025 16:44 — with GitHub Actions Inactive

codemonkey800 had a problem deploying to local June 18, 2025 16:45 — with GitHub Actions Error

codemonkey800 had a problem deploying to local June 18, 2025 16:45 — with GitHub Actions Failure

codemonkey800 temporarily deployed to local June 18, 2025 16:45 — with GitHub Actions Inactive

codemonkey800 temporarily deployed to local June 18, 2025 20:42 — with GitHub Actions Inactive

codemonkey800 temporarily deployed to local June 18, 2025 20:51 — with GitHub Actions Inactive

tihuan approved these changes Jun 20, 2025

View reviewed changes

rainandbare approved these changes Jun 20, 2025

View reviewed changes

Base automatically changed from jeremy/single-deposition-table-updates-setup to main June 20, 2025 22:26

codemonkey800 added 5 commits June 20, 2025 15:28

i18n

e1cba65

counts + tomograms + annotaitons queries

ad09f35

add query param for deposition tabs

ee2272c

annotations + tomograms table

564df8b

remove extra comma

f443922

codemonkey800 force-pushed the jeremy/single-deposition-table-updates branch from 990a46d to f443922 Compare June 20, 2025 22:28

codemonkey800 temporarily deployed to local June 20, 2025 22:28 — with GitHub Actions Inactive

codemonkey800 temporarily deployed to local June 20, 2025 22:30 — with GitHub Actions Inactive

codemonkey800 temporarily deployed to local June 20, 2025 22:44 — with GitHub Actions Inactive

codemonkey800 merged commit 4ad2cdc into main Jun 24, 2025
21 checks passed

codemonkey800 deleted the jeremy/single-deposition-table-updates branch June 24, 2025 23:17

czi-github-helper bot mentioned this pull request Jun 24, 2025

chore(main): release cryoet-data-portal-frontend 1.73.0 #1849

Open

codemonkey800 added a commit that referenced this pull request Jun 24, 2025

adding missing commit for #1852

d65fb67

codemonkey800 mentioned this pull request Jun 24, 2025

feat: adding missing commit for #1852 #1866

Merged

codemonkey800 added a commit that referenced this pull request Jun 24, 2025

adding missing commit for #1852

18c672a

codemonkey800 added a commit that referenced this pull request Jun 25, 2025

feat: adding missing commit for #1852 (#1866)

43843d2

adding missing commit for #1852

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: single deposition table updates #1852

feat: single deposition table updates #1852

Uh oh!

codemonkey800 commented Jun 18, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

tihuan left a comment

Uh oh!

Uh oh!

tihuan Jun 20, 2025

Uh oh!

rainandbare left a comment

Uh oh!

rainandbare Jun 20, 2025

Uh oh!

codemonkey800 Jun 20, 2025

Uh oh!

Uh oh!

rainandbare Jun 20, 2025

Uh oh!

codemonkey800 Jun 20, 2025

Uh oh!

rainandbare Jun 20, 2025

Uh oh!

codemonkey800 Jun 20, 2025

Uh oh!

codemonkey800 Jun 20, 2025

Uh oh!

rainandbare Jun 20, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: single deposition table updates #1852

feat: single deposition table updates #1852

Uh oh!

Conversation

codemonkey800 commented Jun 18, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

tihuan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rainandbare left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!