[TTAHUB-5340] AR vs TR graph by AdamAdHocTeam · Pull Request #3667 · HHS/Head-Start-TTADP

AdamAdHocTeam · 2026-06-02T13:50:04Z

Description of change

This PR add the 'Approved Activity Reports and Training Session Reports by goal category' graph to the TTA History page. It also adds the table view.

How to test

Review the code
Make sure we match the design on both the graph and table

Issue(s)

https://jira.acf.gov/browse/TTAHUB-5340

Checklists

Every PR

Before merge to main

OHS demo complete
Ready to create production PR

Production Deploy

PR created as Draft
Staging smoke test completed
PR transitioned to Open (this ready_for_review transition triggers the Slack/Jira automation)
Reviewer added after the PR is Open (elainaparrish is the authorized approver under normal circumstances)
- Sequence: Draft PR → Smoke test → Open PR (automation runs) → Add reviewer
- Confirm that the Slack notification was sent after the PR was opened
- Confirm that linked Jira ticket(s) transitioned as expected; if not, review the GitHub Actions workflow logs

After merge/deploy

Update JIRA ticket status

github-actions · 2026-06-02T13:50:18Z

⚠️ Diff size advisory: This PR is 1589 lines (1369+, 220−), exceeding the 500-line guideline. Consider splitting into smaller changes.

github-actions · 2026-06-02T13:50:19Z

⚠️ Review count advisory: 1 of 2 required human approvals. 1 more needed. Current approvers: thewatermethod.

Copilot

Pull request overview

This PR adds a new “Approved Activity Reports and Training Session Reports by goal category” widget to the Recipient Record → TTA History page, including both a Plotly horizontal bar chart view and a sortable/exportable table view. On the backend, it adjusts the Training Report (TR) portion of the widget query to scope sessions to recipient grants using sessionReports.data.recipients rather than a join table.

Impact assessment

Benefits: Medium — delivers a new analytics view (graph + table + export) directly on TTA History and expands TR scoping logic to match current data shape.
Risks: Medium — backend query now embeds a dynamically generated grant ID list into raw SQL literals (potential for very large SQL strings and loss of parameterization); also recipientId.ctn behavior for grants is newly introduced without direct test coverage.

Changes:

Adds a new frontend widget (graph + table) for approved AR/TR counts by goal category and wires it into the TTA History page.
Updates backend TR counting logic to filter sessions by data.recipients with additional date validation guards.
Extends grants scope parsing to support recipientId.ctn and updates table widget styling/behavior to support bold totals and border tweaks.

Reviewed changes

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

Show a summary per file

File	Description
src/widgets/approvedARAndTRByGoalCategory.ts	Updates TR query to filter by `sessionReports.data.recipients` and hardens date parsing.
src/widgets/approvedARAndTRByGoalCategory.test.js	Adjusts fixtures for new recipient scoping and adds multiple edge-case TR tests.
src/scopes/grants/index.js	Adds `recipientId.ctn` mapping for grant scoping.
frontend/src/widgets/HorizontalTableWidget.scss	Restores bold styling for cells with `text-bold` inside USWDS tables.
frontend/src/widgets/HorizontalTableWidget.js	Allows per-cell classNames to be merged with sticky-column classes.
frontend/src/widgets/BarGraph.css	Adds a scoped override for first-column border styling in the new table view.
frontend/src/widgets/approvedARAndTRByGoalCategoryHelpers.js	New helper module for chart sorting/layout and table shaping.
frontend/src/widgets/ApprovedARAndTRByGoalCategory.js	New widget implementation (graph/table toggle, sorting, export, Plotly rendering).
frontend/src/widgets/tests/ApprovedARAndTRByGoalCategory.js	New unit tests covering widget rendering and basic interactions.
frontend/src/pages/RecipientRecord/pages/TTAHistory.js	Adds the new widget to the TTA History page layout.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

thewatermethod · 2026-06-04T14:52:25Z

Screen.Recording.2026-06-04.at.10.51.30.AM.mov

note the weird interaction on the side label and the bar height when I toggle things on and off

thewatermethod · 2026-06-04T14:53:33Z

Data seems to be missing - I can see that there is a completed session here: /training-report/R01-PD-25-25011/session/294/session-summary with recipient /recipient-tta-records/965/region/1/tta-history but they have nothing on their chart at all

thewatermethod · 2026-06-04T14:54:25Z

Table headings don't match design

thewatermethod · 2026-06-04T14:55:23Z

Also, capitalization in dropdown doesn't match design

thewatermethod · 2026-06-04T14:59:16Z

+  TABLE_HEADINGS,
+  WIDGET_HEADINGS,
+} from './approvedARAndTRByGoalCategoryHelpers';
+import './BarGraph.css';


There isn't a need to re-import this file. I would, however, separate out the change you made into it's own file and import that instead.

thewatermethod · 2026-06-04T15:01:01Z

+    const layout = buildPlotlyChartLayout(xRangeMax, width, height);
+    const bottomAxisLayout = buildPlotlyBottomAxisLayout(xRangeMax, width);
+
+    import('plotly.js-basic-dist').then((Plotly) => {


why do import we plotly dynamically? Correct me if I'm wrong, but isn't it already in the bundle?

The dynamic import is intentional for bundle splitting. plotly.js-basic-dist is large (~1MB+ minified), so
import('plotly.js-basic-dist') tells the bundler (webpack/craco) to split it into a separate chunk that's only downloaded when this
widget actually renders. Without the dynamic import, Plotly would be included in the main bundle and every user would pay that cost on
initial load, even if they never view this widget.

thanks claude

thewatermethod · 2026-06-04T15:01:41Z

  recipientId: {
    in: (query) => withRecipientId(query),
    nin: (query) => withoutRecipientId(query),
+    ctn: (query) => withRecipientId(query),


Curious as to why we're creating another filter instead of using the existing 'in'?

The page was already using the ctn.

Gotcha, any thought to just fixing it there? Either is fine with me

thewatermethod · 2026-06-04T15:06:09Z

          data: { status: TRAINING_REPORT_STATUSES.COMPLETE },
-          [Op.and]: sequelize.literal(`TO_DATE("sessionReports"."data"->>'startDate', 'MM/DD/YYYY') >= '${GOAL_CUTOFF_DATE.toISOString().split('T')[0]}'::date`),
+          [Op.and]: [
+            sequelize.literal(`


You don't need this for session reports, we didn't collect goal templates on sessions before the cutoff date. I'd remove this and just add a comment saying so

thewatermethod · 2026-06-04T15:07:19Z

+    return items;
+  }, [showTabularData, capture, exportRows]);
+
+  useEffect(() => {


The robot notes this:

Plotly newPlot never purged — memory leak

File: frontend/src/widgets/ApprovedARAndTRByGoalCategory.js (line ~107–126)

Problem: The useEffect that calls Plotly.newPlot has no cleanup function. Each time the effect re-runs (on data change, resize, filter change, checkbox toggle), Plotly creates a new plot on the same DOM node without destroying the previous one. Additionally, when the component unmounts, the Plotly instance is never released.

// Current — no cleanup: useEffect(() => { if (showTabularData || !data || data.length === 0) return; // ... import('plotly.js-basic-dist').then((Plotly) => { if (chartRef.current) { Plotly.newPlot(chartRef.current, traces, layout, { displayModeBar: false }); } // ... }); }, [data, sortedDataForChart, showAR, showTR, width, showTabularData]);

Impact: Memory accumulates whenever filters change or the component re-renders. On a long-lived TTA History page session with many filter interactions, this will grow noticeably.

Suggested Fix:

useEffect(() => { if (showTabularData || !data || data.length === 0) return; let cancelled = false; const traces = buildPlotlyTraces(sortedDataForChart, showAR, showTR); const { height, xRangeMax } = computeChartDimensions(sortedDataForChart, showAR, showTR); const layout = buildPlotlyChartLayout(xRangeMax, width, height); const bottomAxisLayout = buildPlotlyBottomAxisLayout(xRangeMax, width); import('plotly.js-basic-dist').then((Plotly) => { if (cancelled) return; if (chartRef.current) { Plotly.newPlot(chartRef.current, traces, layout, { displayModeBar: false }); } if (bottomAxisRef.current) { Plotly.newPlot(bottomAxisRef.current, [{ mode: 'bar' }], bottomAxisLayout, { displayModeBar: false, responsive: true, }); } }); return () => { cancelled = true; // Purge on cleanup to release Plotly memory import('plotly.js-basic-dist').then((Plotly) => { if (chartRef.current) Plotly.purge(chartRef.current); if (bottomAxisRef.current) Plotly.purge(bottomAxisRef.current); }); }; }, [data, sortedDataForChart, showAR, showTR, width, showTabularData]);

thewatermethod · 2026-06-04T15:08:58Z

+    });
+  }, [data, sortedDataForChart, showAR, showTR, width, showTabularData]);
+
+  const subtitle = (


Robot says:

subtitle JSX block recreated on every render

File: frontend/src/widgets/ApprovedARAndTRByGoalCategory.js (line ~131–167)

Problem: const subtitle = (...) is a plain JSX expression defined directly in the component body. It is recreated on every render. Since it is passed as a prop to WidgetContainer, it will also cause WidgetContainer to re-render whenever the parent re-renders (even if subtitle's deps haven't changed).

Suggested Fix: Wrap in useMemo:

const subtitle = useMemo(() => ( <> <WidgetContainerSubtitle> Data reflects activity starting on 09/01/2025. </WidgetContainerSubtitle> <DrawerTriggerButton drawerTriggerRef={drawerTriggerRef} customClass="margin-left-1 margin-bottom-2"> About this data </DrawerTriggerButton> <div className="display-flex flex-align-center" data-testid="goal-category-sort-container"> <Label htmlFor="goal-category-sort" className="margin-y-0 margin-right-1 text-no-wrap"> Sort by </Label> <Dropdown id="goal-category-sort" name="goal-category-sort" onChange={(e) => setSortOption(e.target.value)} value={sortOption} className="margin-top-0 width-auto" > {SORT_OPTIONS.map((opt) => ( <option key={opt.value} value={opt.value}>{opt.label}</option> ))} </Dropdown> </div> </> ), [sortOption, drawerTriggerRef]);

AdamAdHocTeam · 2026-06-04T19:19:52Z

Data seems to be missing - I can see that there is a completed session here: /training-report/R01-PD-25-25011/session/294/session-summary with recipient /recipient-tta-records/965/region/1/tta-history but they have nothing on their chart at all

There is no template linked to this session report. We bucket based on Goal Template standard.

AdamAdHocTeam · 2026-06-04T19:20:51Z

Table headings don't match design

updated both columns and action items.

thewatermethod · 2026-06-05T14:52:12Z

Alignment off on the sort

AdamAdHocTeam · 2026-06-05T19:37:40Z

Alignment off on the sort

This should be fixed now.

kryswisnaskas

Adding three inline review comments from Codex.

kryswisnaskas · 2026-06-05T22:08:47Z

@@ -110,18 +118,25 @@ async function getApprovedTRCountsByCategory(
        required: true,
        where: {
          data: { status: TRAINING_REPORT_STATUSES.COMPLETE },


Codex said: The TR side no longer enforces the 09/01/2025 session cutoff it still claims to represent. The new sessionReports filter only checks status plus recipient membership from data.recipients; the previous startDate >= 2025-09-01 predicate is gone. That means any complete session with a matching recipient and a goal-template junction will now count even if it is pre-cutoff or has an invalid/missing startDate. The revised tests no longer protect that rule either: the “old session” setup deliberately omits a junction row, so the test passes without exercising the regression. Restore a session-level date predicate here, ideally using the same tolerant date parsing approach already used in sessionReports.ts, and add coverage with actual goal-template junctions for pre-cutoff / malformed-date sessions.

kryswisnaskas · 2026-06-05T22:08:47Z

            <TargetPopulationsTable filters={filtersToApply} />
          </Grid>
        </Grid>
+        <ApprovedARAndTRByGoalCategory filters={filtersToApply} />


Codex said: The recipient-page integration tests were not updated for the new widget fetch path, so the endpoint name and filter wiring are effectively untested. TTAHistory now mounts ApprovedARAndTRByGoalCategory, but the recipient-page tests still mock/assert the legacy widget requests only. That leaves regressions in /api/widgets/approvedARAndTRByGoalCategory, recipientId.ctn, and combined role/date filters uncaught. Add fetch mocks and at least one assertion that this widget receives the same page filters as the other TTA History widgets.

thewatermethod

Approved pending the resolution of Krys's comments

added v1 of graph

8691c05

AdamAdHocTeam added 3 commits June 3, 2026 10:55

fixes for how we join recipients tests and cleanup

903757b

clean up and create helper for widget

8e6e54f

clean up css

3fe1478

AdamAdHocTeam requested a review from Copilot June 3, 2026 19:15

Copilot started reviewing on behalf of AdamAdHocTeam June 3, 2026 19:15 View session

AdamAdHocTeam requested review from Andrew565, hardwarehuman, kryswisnaskas, thewatermethod and tommaroh June 3, 2026 19:15

AdamAdHocTeam marked this pull request as ready for review June 3, 2026 19:15

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Comment thread src/widgets/approvedARAndTRByGoalCategory.ts Outdated

Comment thread src/widgets/approvedARAndTRByGoalCategory.ts

Comment thread src/scopes/grants/index.js

AdamAdHocTeam and others added 2 commits June 3, 2026 15:30

Potential fix for pull request finding

64720af

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

db71838

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of AdamAdHocTeam June 3, 2026 19:31 View session

Add grants scope test for recipientId.ctn filter

455ecfc

Copilot finished work on behalf of AdamAdHocTeam June 3, 2026 19:37

AdamAdHocTeam added 3 commits June 3, 2026 15:55

add test

e34a7b8

add test

994c941

Increase FE coverage

71a1ccd

thewatermethod reviewed Jun 4, 2026

View reviewed changes

Comment thread src/widgets/approvedARAndTRByGoalCategory.ts

thewatermethod reviewed Jun 4, 2026

View reviewed changes

AdamAdHocTeam added 4 commits June 4, 2026 13:49

fix graph jump

8533762

fix column headers spelling and action menu items

6ac1c94

Fixes and updates for BE and FE graph flickr

74fc639

reorg

f313221

AdamAdHocTeam requested a review from thewatermethod June 4, 2026 19:21

AdamAdHocTeam added 6 commits June 4, 2026 15:47

fix BE tests

c5c0222

fix join to session templates and templates

d82ab09

fix label positon

31fc6d9

put back label pos on y axis

de8e05e

fixes

466b1b3

fix horiz squish overflow of actions and toggles

1f4a402

AdamAdHocTeam added 2 commits June 5, 2026 14:55

merge main

5943e7b

fix sort by alignment

96f5c86

y axis label padding

e9a1498

kryswisnaskas reviewed Jun 5, 2026

View reviewed changes

AdamAdHocTeam added 2 commits June 8, 2026 09:51

fix table tie breaker sorting

0ffc36d

hook up drawer

87952bb

thewatermethod approved these changes Jun 8, 2026

View reviewed changes

AdamAdHocTeam added 4 commits June 8, 2026 12:14

remove column sort and persist sort option between views

127959e

hide fitler help link

670b1b6

hide actions with no reults

a5b7715

address issues found by Krys

859c849

Conversation

AdamAdHocTeam commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of change

How to test

Issue(s)

Checklists

Every PR

Before merge to main

Production Deploy

After merge/deploy

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thewatermethod commented Jun 4, 2026

Uh oh!

thewatermethod commented Jun 4, 2026

Uh oh!

thewatermethod commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thewatermethod commented Jun 4, 2026

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!

Uh oh!

thewatermethod Jun 4, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Robot says:

Uh oh!

AdamAdHocTeam commented Jun 4, 2026

Uh oh!

AdamAdHocTeam commented Jun 4, 2026

Uh oh!

thewatermethod commented Jun 5, 2026

Uh oh!

AdamAdHocTeam commented Jun 5, 2026

Uh oh!

kryswisnaskas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AdamAdHocTeam commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

thewatermethod commented Jun 4, 2026 •

edited

Loading

thewatermethod Jun 4, 2026 •

edited

Loading