Extract business logic from UI routes for dataset page

[shuyangli]

I would like to separate the UI components, routes and loaders, and business logic in the frontend. This takes one step forward (loaders and components are still together, but business logic is split out.

Not fully set on this approach, just want to send it out to get some feedback. If this looks good we can ask the models to do a refactor later.

---

Important

Extracted business logic from UI routes into datapointOperations.ts for better separation of concerns and maintainability.

• Business Logic Extraction:
  • Moved validation (validateJsonOutput), transformation (transformOutputForTensorZero), and core operations (deleteDatapoint, saveDatapoint) to datapointOperations.ts.
  • Updated route.tsx to use extracted functions for handling datapoint actions.
• Functionality:
  • validateJsonOutput checks JSON validity in outputs.
  • hasDatapointChanged checks for changes in input, output, and tags.
  • deleteDatapoint and saveDatapoint handle datapoint deletion and saving, respectively.
• UI Route Changes:
  • route.tsx now imports and uses functions from datapointOperations.ts.
  • Added parseDatapointFormData to parse form data into ParsedDatasetRow.
  • Refactored action function to use new operations for save and delete actions.
    ^{This description was created by for 1c8dcf9663baba577d86f0179fcf3c08e060bec7. You can customize this summary. It will automatically update as commits are pushed.}

[shuyangli]

• Modify update_datapoint_handler to update the entire datapoint in-place #3794 : 2 dependent PRs (#3764 , #3795 )
• Add view-only UI for displaying datapoint names #3756
• Add name to {Chat|Json}InferenceDatapoint (database layer) #3735
• Extract business logic from UI routes for dataset page #3763 👈 (View in Graphite)
• Add a new reusable TableItemText component #3755
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

The base branch was changed.

[shuyangli]

Ok, now it should build. I think what's irking me is that there are too many things happening in these routes - some is UI, some is calling the Rust gateway, and some is handling HTTP actions. I would like to generally separate them more to make FE easier to understand (and generally remove all direct calls to ClickHouse), but will think about the right approach.

[virajmehta]

Seems like some tests timed out in the docker build / compose step; we can rerun just these afterwards then merge.

[github-actions]

TensorZero CI Bot Automated Comment

Thanks for the refactor! CI is currently failing for two reasons:

1. Prettier format check failed in the UI workspace:

   • ui/app/routes/datasets/$dataset_name/datapoint/$id/datapointOperations.server.ts
   • ui/app/routes/datasets/$dataset_name/datapoint/$id/route.tsx

   The validate job stops on this, so TypeScript checks and other validations don't even run. This is the one actionable item in the code right now.

2. E2E ClickHouse and UI jobs hit Docker "DeadlineExceeded: context deadline exceeded" while building/starting containers. Because the build step failed, follow-up steps that create the fixtures .env were skipped, and later "Print logs"/"health" steps then complained about a missing ui/fixtures/.env file. There’s no code error indicated here; it looks like a flake/environment timeout. Once the Prettier issue is fixed and CI re-runs, these steps should proceed normally. If the timeouts persist after formatting passes, try re-running the workflow — we can’t adjust the CI timeouts in this PR.

Summary of what to do:

• Fix formatting in the UI workspace (see command below) and push again.
• Re-run CI. If the Docker compose steps still time out, re-run once; if it persists, we can dig deeper, but nothing in this PR appears to break those jobs.