FIREFLY-2021: Improve job monitor UI by loitly · Pull Request #1986 · Caltech-IPAC/firefly

loitly · 2026-07-23T22:59:22Z

Ticket https://jira.ipac.caltech.edu/browse/FIREFLY-2021

Preserve sort and filter state across automatic refreshes
Add a clear filter button when filters are active
Show a loading indicator while data is being refreshed
Highlight newly added job after sort/filter is applied instead of always placing it at the top

Test:
https://firefly-2021-job-monitor-update.irsakubedev.ipac.caltech.edu/applications/spherex/
https://firefly-2021-job-monitor-update.irsakubedev.ipac.caltech.edu/firefly/

Addressed the issues reported in the ticket:

I was able to stop a job and then delete it successfully. Could you please test this again?
Added a Clear Filters button next to the filter inputs. Let me know if you think it would be better placed elsewhere.
Newly created jobs no longer automatically appear at the top of the table now that sort and filter state is preserved across refreshes. Instead, the new job is highlighted after the current sort and filter are applied. This behavior change should be documented if the previous behavior was documented.

Additional Changes after PR:

Moved the Job Summary into the table toolbar, enabling use of the built-in Filter and Clear Filter actions.
Removed data types from the table headers.
Cleaned up the table header layout so header heights render consistently regardless of the show/hide options.

Test URL instances updated with the latest change. Please test again.

lrebull · 2026-07-24T18:02:49Z

Having trouble running sp jobs in your build. They fail so quickly I had to work to get this shot with one in progress. I can't test some of the other things while jobs are running or queued. I appear to be able to delete failed jobs but that was never the problem on ops. I see why you put the cancel filters where you did, and I agree that that's the best place for it, given the layout, but I bet others will... Have Opinions.

Can you fix it so that I can run sp jobs? Then I can test the rest of the issues.

jaladh-singhal

@loitly this is working as expected. Clear filter looks correct as in other tables.

However I noticed a bug: Apply any filter to enum type columns -> click on clear filter button -> the enum selection (▼) disappears. Sometimes they come back after a delay though (can't reliably reproduce the delay duration)

jaladh-singhal · 2026-07-27T18:47:58Z

-        <Stack sx = {{[`& .${badgeClasses.root}`]: {margin: '1px 3px 0 0'}}}>
-            <ClearFilterButton iconButtonSize='34px' onClick={clearFilters}
+        <Stack sx={{[`& .${badgeClasses.root}`]: {margin: '1px 3px 0 0'}}} {...props}>
+            <ClearFilterButton iconButtonSize={iconButtonSize} onClick={clearFilters}


I'd rather pass props to ClearFilterButton and maybe a slotProp.root to the Stack - this way you can override tip too. I don't think the default tooltip makes sense for job monitor but @lrebull can verify the wording.

jaladh-singhal · 2026-07-27T20:46:52Z

+    return (
+        <Stack alignItems='center' justifyContent='space-between' height={1} mt='1px'>
+            <HeaderText val={col?.label || col?.name} level='title-sm'/>
+            <OptionsFilterStats tbl_id={jobHistoryTblId}  alignSelf='start'/>


I liked it better as center aligned (or similar to how Control Rendered places its cell contents - with same margin/padding)

Another placement of this button could be:
2. in the job summary area below/right of time zone
3. bring the table toolbar back and let it show filter controls how we do elsewhere?

I'm honestly not sure which one is better since this is not a typical table.

I don't like the center align too much because it seems awkward to have clear filter there.
Another option:
Move the entire ‘Job Summary’ row to the Table’s header and enable it with filter. It’s a bigger change, but worth doing. I will give it a try, but will require scientist to approve new look.

- Preserve sort and filter state across automatic refreshes - Add a clear filter button when filters are active - Show a loading indicator while data is being refreshed - Highlight newly added job after sort/filter is applied instead of always placing it at the top

…lter/clear-filter

jaladh-singhal

@loitly I like your updated layout utilizing table toolbar, also the conditional notification part looks clean and separate now.

I've left some stylistic/CSS improvement comments - none of them are dealbreaker for merging this as-is.

jaladh-singhal · 2026-07-31T00:09:25Z

                                      onFilterSelected, sx}) {
    return (
-        <Stack alignItems='center' height={1} justifyContent='space-between' py='2px' sx={sx}>
+        <Stack alignItems='center' height={1} justifyContent='space-between' pt='4px' pb='2px' sx={sx}>


Suggested change

<Stack alignItems='center' height={1} justifyContent='space-between' pt='4px' pb='2px' sx={sx}>

<Stack alignItems='center' height={1} justifyContent='space-between' pt={0.5} pb={0.25} sx={sx}>

jaladh-singhal · 2026-07-31T00:11:07Z

+ * total height up front, so these must match what HeaderCell renders.  HeaderText's font size is
+ * pinned to headerFontSize so the text rows stay in sync; headers do not scale with the font .
+ */
+export const headerFontSize = 12.25;                                // Joy's fontSize.sm at firefly's root size


I wonder if we can pull it from joy ui theme instead of hardcoding this. What happens if Rubin or someone else configures Firefly to render different than our default font at a different size?

jaladh-singhal · 2026-07-31T00:11:47Z

+    label:  22,
+    units:  headerLineHeight,
+    types:  headerLineHeight,
+    filter: 25,


same here for label and filter.

jaladh-singhal · 2026-07-31T00:15:11Z

+                            sx={{'& .fixedDataTableCellGroupLayout_cellGroup > :last-child': {borderRight: 'none'}, ...sx}}
+                            showToolbar={true}
+                            showTitle={false}
+                            leftButtons={[() => <JobSummary jobs={jobs} overflow={overflow}/>]}


[No fix required] Just noticed that JobSummary doesn't wrap in smaller than default width of this table. Although this is how ops behaves too.

jaladh-singhal · 2026-07-31T00:20:19Z

However I noticed a bug: Apply any filter to enum type columns -> click on clear filter button -> the enum selection (▼) disappears. Sometimes they come back after a delay though (can't reliably reproduce the delay duration)

@loitly not sure if you noticed this issue - it happens intermittently for me.

loitly added this to the 2026.2 milestone Jul 23, 2026

loitly requested a review from jaladh-singhal July 23, 2026 22:59

loitly self-assigned this Jul 23, 2026

loitly added the enhancement label Jul 23, 2026

jaladh-singhal requested changes Jul 27, 2026

View reviewed changes

loitly added 2 commits July 30, 2026 08:40

- Moved Job Summary into the Table's header allowing native use of fi…

3cdc055

…lter/clear-filter

loitly force-pushed the FIREFLY-2021-job-monitor-update branch from a6e81bb to 3cdc055 Compare July 30, 2026 15:41

jaladh-singhal approved these changes Jul 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FIREFLY-2021: Improve job monitor UI - #1986

FIREFLY-2021: Improve job monitor UI#1986
loitly wants to merge 2 commits into
devfrom
FIREFLY-2021-job-monitor-update

loitly commented Jul 23, 2026 •

edited

Loading

Uh oh!

lrebull commented Jul 24, 2026

Uh oh!

jaladh-singhal left a comment

Uh oh!

jaladh-singhal Jul 27, 2026 •

edited

Loading

Uh oh!

jaladh-singhal Jul 27, 2026

Uh oh!

jaladh-singhal Jul 27, 2026

Uh oh!

loitly Jul 28, 2026

Uh oh!

jaladh-singhal left a comment

Uh oh!

jaladh-singhal Jul 31, 2026

Uh oh!

jaladh-singhal Jul 31, 2026

Uh oh!

jaladh-singhal Jul 31, 2026

Uh oh!

jaladh-singhal Jul 31, 2026 •

edited

Loading

Uh oh!

jaladh-singhal commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<Stack alignItems='center' height={1} justifyContent='space-between' pt='4px' pb='2px' sx={sx}>
	<Stack alignItems='center' height={1} justifyContent='space-between' pt={0.5} pb={0.25} sx={sx}>

Uh oh!

Conversation

loitly commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lrebull commented Jul 24, 2026

Uh oh!

jaladh-singhal left a comment

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

loitly Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal left a comment

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jaladh-singhal commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

loitly commented Jul 23, 2026 •

edited

Loading

jaladh-singhal Jul 27, 2026 •

edited

Loading

jaladh-singhal Jul 31, 2026 •

edited

Loading