fix: column sort in experiments table by shivoomiess · Pull Request #1576 · UserOfficeProject/user-office-core

shivoomiess · 2026-06-15T13:24:03Z

Description

This PR fixes the issue of column sorting not working properly in the Experiments Table.

Motivation and Context

The column sorting feature in the Experiments Table was not functioning as expected, leading to a less intuitive and potentially confusing user experience. This fix is necessary to ensure that users can sort data in a logical and predictable manner, improving the usability of the table.

Changes

Debugging capabilities were added to React and the local backend to better facilitate future troubleshooting efforts.
The backend's dev script was updated to include the --inspect flag, allowing for easier debugging.
The ExperimentDataSource.ts file was updated to include a map of fields that can be sorted. This provides explicit control over which columns can have their sorting functionality enabled.
The experiments.cy.ts e2e test file was updated to include tests for the sorting functionality of each column in the visit table. This ensures that our sorting feature works as expected in the future.

How Has This Been Tested?

Fixes Jira Issue

https://jira.ess.eu//browse/SWAP-5630

Depends On

Tests included/Docs Updated?

I have added tests to cover my changes.
All relevant doc has been updated

yoganandaness · 2026-06-15T13:46:12Z

    "build": "npm run build:validation && npm run generate:uows && rm -rf ./build && tsc",
    "postinstall": "npm run build:validation",
-    "dev": "docker compose up -d --remove-orphans && ts-node-dev -r tsconfig-paths/register --respawn -T ./index.ts",
+    "dev": "docker compose up -d --remove-orphans && ts-node-dev --inspect=9229 -r tsconfig-paths/register --respawn -T ./index.ts",


Do we need to update readme about this? @jekabs-karklins

I think we should not add it here, because we already have the "debug" script. Does that work for you @shivoomiess

I think that runs a separate instance of the frontend dev server while reusing existing docker containers? Haven't tried using the debug script separately; we could:

either add a port number for the inspect in debug

or make the dev server debuggable (should be fine since we're already in dev?)

We can add 9229 to the --inspect, however it is the default port, but we can be explicit.

the "debug" script just starts the index.ts with the debug port open, you do need to run docker compose up before running npm run debug

@shivoomiess FYI

yoganandaness · 2026-07-01T13:21:53Z

+  endsAt = 'endsAt',
+}
+
+registerEnumType(ExperimentTableSortField, {


Can we do this in apps/backend/src/resolvers/registerEnums.ts

yoganandaness · 2026-07-01T13:22:24Z

  to?: Date;
 }

+export enum ExperimentTableSortField {


Would prefer to have this in Experiment Model, so it can be used in other queries in the future. Let me know your thoughts.

Copilot

Pull request overview

This PR fixes broken column sorting in the Experiments table by introducing a typed sort-field enum end-to-end (frontend → GraphQL → backend → DB column mapping) and updating UI/test behavior around sortable vs non-sortable columns.

Changes:

Replaced the experiments sortField GraphQL argument from String to a dedicated ExperimentTableSortField enum and threaded the type through resolvers/queries/datasources.
Added explicit mappings for sortable fields (UI column field → GraphQL enum → DB column) and disabled sorting for columns not supported at the DB layer.
Updated Cypress e2e coverage around experiments table sorting interactions and added local debugging configuration/script changes.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
apps/frontend/src/graphql/experiment/getAllExperiments.graphql	Changes `sortField` variable type to `ExperimentTableSortField` to match backend typing.
apps/frontend/src/components/experiment/ExperimentsTable.tsx	Maps MaterialTable column fields to sort enum values and disables sorting for unsupported columns.
apps/e2e/cypress/e2e/experiments.cy.ts	Adds/adjusts e2e coverage for experiments table sorting for multiple roles.
apps/backend/src/resolvers/queries/ExperimentsQuery.ts	Introduces `ExperimentTableSortField` enum and uses it for `sortField` argument typing.
apps/backend/src/queries/ExperimentQueries.ts	Updates `getExperiments` signature to accept the new sort-field enum.
apps/backend/src/datasources/postgres/ExperimentDataSource.ts	Adds enum→DB-column map and uses it to build the SQL `ORDER BY`.
apps/backend/src/datasources/mockups/ExperimentDataSource.ts	Updates mock datasource signature to the new enum sort-field type.
apps/backend/src/datasources/ExperimentDataSource.ts	Updates datasource interface signature to the new enum sort-field type.
apps/backend/package.json	Adds `--inspect=9229` to backend `dev` for easier debugging.
.zed/debug.json	Adds Zed editor debug configurations (currently needs JSON validity fix).

+[
+    {
+        "label": "Launch Debug React in Chrome",
+        "adapter": "JavaScript",
+        "type": "chrome",
+        "request": "launch",
+        "console": "integratedTerminal",
+        "url": "http://localhost:3000",
+        "webRoot": "$ZED_WORKTREE_ROOT/apps/frontend",
+        "skipFiles": ["<node_internals>/**"],
+    },
+    {
+        "label": "Debug Local Backend {attach} (npm run dev)",
+        "adapter": "JavaScript",
+        "type": "node",
+        "request": "attach",
+        "port": 9229,
+        "address": "localhost",
+        "restart": true,
+        "localRoot": "$ZED_WORKTREE_ROOT/apps/backend",
+        "skipFiles": ["<node_internals>/**"],
+    },
+]


+      cy.get(
+        'div[data-rfd-draggable-id="1"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="2"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="3"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="4"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();


+      cy.get(
+        'div[data-rfd-draggable-id="1"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="2"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="3"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="4"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();


+      cy.get(
+        'div[data-rfd-draggable-id="1"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="2"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="3"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();
+
+      cy.get(
+        'div[data-rfd-draggable-id="4"] [data-testid="mtableheader-sortlabel"]'
+      ).click();
+      cy.get('span[aria-sort="ascending"]').click();
+      cy.get('span[aria-sort="descending"]').click();


+          tableValue = [...tableValue, $el.text().toString()];
+        })
+        .then(() => {
+          // Explanation: The table has 7 columns. We will sort each column in ascending and descending order and check if the table is sorted correctly.


+registerEnumType(ExperimentTableSortField, {
+  name: 'ExperimentTableSortField',
+  description: 'Experiment table columns that support sorting',
+});


shivoomiess added 2 commits June 15, 2026 12:59

fix: Experiment table sorting not working

bd70d54

chore: add e2e tests for experiment table sorting

78eaffc

shivoomiess requested a review from a team as a code owner June 15, 2026 13:24

shivoomiess requested review from ChongJiaChua, jekabs-karklins and yoganandaness and removed request for a team and ChongJiaChua June 15, 2026 13:24

shivoomiess self-assigned this Jun 15, 2026

Merge branch 'develop' into SWAP-5630-fix

02a280c

shivoomiess changed the title ~~Fix: Column sorting not working Experiments Table~~ fix: Column sorting not working Experiments Table Jun 15, 2026

shivoomiess changed the title ~~fix: Column sorting not working Experiments Table~~ fix: column sorting not working in Experiments table Jun 15, 2026

shivoomiess changed the title ~~fix: column sorting not working in Experiments table~~ fix: column sort in experiments table Jun 15, 2026

yoganandaness requested changes Jun 15, 2026

View reviewed changes

shivoomiess and others added 3 commits June 15, 2026 17:05

chore(types): add type for permissible columns names to sort Experiments

5044b1e

chore: add e2e for instrument sc and exp safety reviewer

5e909fb

fix: add sort by enum to GQL endpoint

9dece97

jekabs-karklins reviewed Jun 16, 2026

View reviewed changes

Comment thread apps/e2e/cypress/e2e/experiments.cy.ts Outdated

shivoomiess and others added 3 commits June 17, 2026 16:40

fix(typo): Reviewer Spelling Fixed

b94d09a

Merge branch 'SWAP-5630-fix' into SWAP-5630-improve-gql-input-datatype

2045e4b

chore: add sort by enum to GQL endpoint (#1585)

b8d1d07

yoganandaness requested changes Jul 1, 2026

View reviewed changes

yoganandaness requested review from TCMeldrum and Copilot July 1, 2026 14:20

Copilot started reviewing on behalf of yoganandaness July 1, 2026 14:21 View session

Copilot AI reviewed Jul 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: column sort in experiments table#1576

fix: column sort in experiments table#1576
shivoomiess wants to merge 9 commits into
developfrom
SWAP-5630-fix

shivoomiess commented Jun 15, 2026 •

edited by github-actions Bot

Loading

Uh oh!

yoganandaness Jun 15, 2026

Uh oh!

jekabs-karklins Jun 26, 2026

Uh oh!

shivoomiess Jun 26, 2026

Uh oh!

jekabs-karklins Jun 29, 2026

Uh oh!

yoganandaness Jul 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yoganandaness Jul 1, 2026

Uh oh!

yoganandaness Jul 1, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

shivoomiess commented Jun 15, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

Changes

How Has This Been Tested?

Fixes Jira Issue

Depends On

Tests included/Docs Updated?

Uh oh!

yoganandaness Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

jekabs-karklins Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

shivoomiess Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

jekabs-karklins Jun 29, 2026

Choose a reason for hiding this comment

Uh oh!

yoganandaness Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yoganandaness Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

yoganandaness Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

shivoomiess commented Jun 15, 2026 •

edited by github-actions Bot

Loading