[TSPS-635] Add Job Details view for Teaspoons jobs #5468

MatthewBemis · 2025-12-15T16:54:42Z

Jira Ticket: https://broadworkbench.atlassian.net/browse/TSPS-635

Summary of changes:

What

Adds a new Job Details view, allowing users to more easily view their job inputs and outputs. In the future, a Job Timeline will also be including (as a follow-up PR)

(ignore the default notation on the inputs in these screenshots, that has since been removed per recent team discussions)

screencapture-localhost-3000-2025-12-16-10_00_18

screencapture-localhost-3000-2025-12-15-11_55_28

screencapture-localhost-3000-2025-12-16-13_11_03

screencapture-localhost-3000-2026-01-06-16_00_44

Why

Testing strategy

MatthewBemis · 2025-12-16T20:59:13Z

src/pages/scientificServices/pipelines/tabs/history/modals/ViewOutputsModal.tsx

  onDismiss: () => void;
 }

-const getFileSize = async (url: string): Promise<string> => {


moved to util file so job details page can use it

MatthewBemis · 2026-01-06T19:42:09Z

src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx

        return <JobIdCell pipelineRun={paginatedRuns[rowIndex]} />;
      },
-      size: { basis: 140 },
+      size: { basis: 250 },


tweaked the width of some of the columns to keep things more appropriately distributed

MatthewBemis · 2026-01-06T19:43:02Z

src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx

  }
 };

-const pipelineNameToColor = (pipelineRun: PipelineRun): string => {


moved to pipeline-style-utils

MatthewBemis · 2026-01-06T19:47:41Z

src/pages/scientificServices/pipelines/utils/AoUStylizedString.tsx

+        return (
+          <span style={{ whiteSpace: 'pre-wrap' }} key={`span-${key}`}>
+            {part}
+          </span>
+        );


i needed this fix to use the stylized string inside of a header tag, otherwise the browser would remove any whitespace immediately after this span. without it, the job details page would display the pipeline name as "All of Us+ AnVIL Array Imputation"

the gift that keeps on giving

jsotobroad

nice this looks really cool, just a couple of comments

jsotobroad · 2026-01-06T20:27:44Z

src/libs/ajax/teaspoons/teaspoons-models.ts

  causes: string[];
 }

 export interface PipelineRunReport {


its definitely too late to do this now but OoC would there be a way to generate these models from the api yml like we do for the python client?

yes it's possible to do that. that would be a great thing to consider doing if/when we ever break the teaspoons UI out of terra-ui and into our own codebase

jsotobroad · 2026-01-06T20:33:14Z

src/pages/scientificServices/pipelines/tabs/history/details/sections/io/JobInputsView.tsx

+          })}
+        </div>
+      ) : (
+        <div style={{ color: colors.dark(0.6), fontSize: '0.875rem' }}>There are no inputs to display</div>


so this state should never be possible right? Do we want to display this more prominently as an error rather than a job that has no inputs?

jsotobroad · 2026-01-06T20:43:43Z

src/pages/scientificServices/pipelines/tabs/history/details/sections/io/JobOutputsView.tsx

+      ).toLocaleDateString()} and are no longer available.`;
+    }
+    if (isSucceeded) {
+      return 'This job succeeded, but did not produce any outputs.';


similar question here, should this also be treated as more of an error state?

jsotobroad · 2026-01-06T20:52:53Z

src/pages/scientificServices/pipelines/utils/AoUStylizedString.tsx

+        return (
+          <span style={{ whiteSpace: 'pre-wrap' }} key={`span-${key}`}>
+            {part}
+          </span>
+        );


the gift that keeps on giving

jsotobroad · 2026-01-06T20:55:20Z

src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx

-        >
-          {pipelineRun.jobId}
-        </TooltipCell>
+        {canViewDetails ? (


can you add a screenshot showing these changes as well

👍 added to description

I might be going crazy but I can't see this change in the Job History screenshot. should I be able to see something? maybe it needs a video if it's just the link?

ah my b i thought jose meant just show the jobhistory.tsx changes generally since the columns have new widths.

for these specific changes, it's basically just "is the job ID a link to details or not". here's what that looks like:

mmorgantaylor · 2026-01-07T16:40:22Z

src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx

-        >
-          {pipelineRun.jobId}
-        </TooltipCell>
+        {canViewDetails ? (


I might be going crazy but I can't see this change in the Job History screenshot. should I be able to see something? maybe it needs a video if it's just the link?

mmorgantaylor · 2026-01-07T16:41:52Z

src/pages/scientificServices/pipelines/tabs/history/details/sections/JobDetailsHeader.tsx

+    <div
+      style={{
+        width: '100%',
+        background: `linear-gradient(to right, #f5f6f9, ${getPipelineStatusColor(


this gradient is swanky

mmorgantaylor · 2026-01-07T16:44:49Z

src/pages/scientificServices/pipelines/tabs/history/details/sections/io/JobInputsView.tsx

+    <div style={{ flex: 1 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
+        <h4 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>Inputs</h4>
+        <TooltipTrigger content='Inputs include both values you provided and defaults for any parameters you did not specify.'>


does this show up when you hover in the Inputs text? I don't see a tooltip icon in the screenshot

yeah sorry- slightly outdated screenshot in the description.

very nice, thanks!

mmorgantaylor · 2026-01-07T16:46:19Z

src/pages/scientificServices/pipelines/tabs/history/details/sections/JobIOView.tsx

+    pipelineRunResult.pipelineRunReport.pipelineVersion
+  );
+
+  const inputDefinitions = pipelineDetails?.inputs || [];


related to Jose's comment, I don't think we should have a default to none here. if there are no inputs, something went wrong.

That makes complete sense- i will change these cases to display an error instead

sonarqubecloud · 2026-01-07T20:52:13Z

Quality Gate passed

Issues
8 New issues
0 Accepted issues

Measures
0 Security Hotspots
91.4% Coverage on New Code
2.0% Duplication on New Code

See analysis details on SonarQube Cloud

mmorgantaylor

thank you, looks great to me!

jsotobroad

this is great!

MatthewBemis added 5 commits December 12, 2025 10:59

new branch

980f8ac

break out some common status stuff

860edc0

simplify

645b077

cleanup

26199ff

some cleanup

23146c0

broadbot temporarily deployed to pr-1 December 15, 2025 17:04 Inactive

break out inputs view

f44ac12

broadbot temporarily deployed to pr-1 December 15, 2025 21:00 Inactive

MatthewBemis added 2 commits December 16, 2025 09:35

rename

50c0fb9

show defaults

d7b3cc3

broadbot temporarily deployed to pr-1 December 16, 2025 15:33 Inactive

cleanup

a29d4ef

broadbot temporarily deployed to pr-1 December 16, 2025 17:37 Inactive

tweaks

69ece79

broadbot temporarily deployed to pr-1 December 16, 2025 18:26 Inactive

just use current download flow

7447f03

MatthewBemis commented Dec 16, 2025

View reviewed changes

broadbot temporarily deployed to pr-1 December 16, 2025 21:12 Inactive

change defualt input behav

d138dad

broadbot temporarily deployed to pr-1 January 5, 2026 19:16 Inactive

job inputs view tests

8fe3fef

broadbot temporarily deployed to pr-1 January 5, 2026 20:05 Inactive

MatthewBemis added 2 commits January 5, 2026 15:53

outputs view tests

0146435

fix render warning

55fa3e0

broadbot temporarily deployed to pr-1 January 5, 2026 21:08 Inactive

more tests

cd87122

broadbot temporarily deployed to pr-1 January 5, 2026 22:06 Inactive

job details main component tests

cd15956

broadbot temporarily deployed to pr-1 January 5, 2026 22:30 Inactive

test combined io view

5a85e70

broadbot temporarily deployed to pr-1 January 5, 2026 23:07 Inactive

Merge branch 'dev' into mb-tsps-635-details-page-latest

991b588

broadbot temporarily deployed to pr-1 January 5, 2026 23:48 Inactive

MatthewBemis changed the title ~~[TSPS-635] Add Job Details view for Teaspoons jobs [WIP - do not merge until 2026]~~ [TSPS-635] Add Job Details view for Teaspoons jobs Jan 6, 2026

Update JobInputsView.test.tsx

a40e934

MatthewBemis commented Jan 6, 2026

View reviewed changes

MatthewBemis added 2 commits January 6, 2026 15:18

bunch of cleanup from self-review

4cbf04e

more cleanup

f791cf2

MatthewBemis marked this pull request as ready for review January 6, 2026 20:21

MatthewBemis requested a review from a team as a code owner January 6, 2026 20:21

MatthewBemis requested review from jsotobroad and mmorgantaylor January 6, 2026 20:21

broadbot temporarily deployed to pr-1 January 6, 2026 20:34 Inactive

jsotobroad reviewed Jan 6, 2026

View reviewed changes

mmorgantaylor reviewed Jan 7, 2026

View reviewed changes

pr feedback re: nonsense states

ad31233

MatthewBemis requested review from jsotobroad and mmorgantaylor January 7, 2026 20:40

broadbot deployed to pr-1 January 7, 2026 20:52 View deployment

mmorgantaylor approved these changes Jan 7, 2026

View reviewed changes

jsotobroad approved these changes Jan 7, 2026

View reviewed changes

[TSPS-635] Add Job Details view for Teaspoons jobs #5468

Are you sure you want to change the base?

[TSPS-635] Add Job Details view for Teaspoons jobs #5468

Uh oh!

Conversation

MatthewBemis commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira Ticket: https://broadworkbench.atlassian.net/browse/TSPS-635

Summary of changes:

What

Why

Testing strategy

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!

jsotobroad 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!

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!

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!

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!

sonarqubecloud bot commented Jan 7, 2026

Quality Gate passed

Uh oh!

mmorgantaylor left a comment

Choose a reason for hiding this comment

Uh oh!

jsotobroad left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MatthewBemis commented Dec 15, 2025 •

edited

Loading