Add topic/reasons graph widget

[jasalisbury]

Description of change

• pull bar graph into it's own component
• bar graph now scrolls just the graph content, allows title/labels to still be shown when the graph is scrolled
• add topic/reason freq widget. Can switch between display of reasons or topics
• added backend test helpers to quickly (as in how long to code) create activity reports and destroy them for tests, along with any needed associations

How to test

Browse to the grantee tta record page

Issue(s)

• https://ocio-jira.acf.hhs.gov/browse/TTAHUB-394

Checklists

Every PR

• Meets issue criteria
• JIRA ticket status updated
• Code is meaningfully tested
• Meets accessibility standards (WCAG 2.1 Levels A, AA)
• API Documentation updated
• Boundary diagram updated
• Logical Data Model updated
• Architectural Decision Records written for major infrastructure decisions

Production Deploy

• Staging smoke test completed

After merge/deploy

• Update JIRA ticket status

[thewatermethod]

Had several comments written when I realized I'll have to restart my computer in order to actually test it out. Looks great so far though!

[thewatermethod]

I actually seem to be running into the same issue as previous, where using the Plot.ly react library crashes my docker container. I'll set aside some time to try and figure out if I can fix this on my setup

I apologize, I should have documented having this issue at the time

• JavaScript heap out of memory error with the quickstart Plot example. plotly/react-plotly.js#135

[jasalisbury]

I actually seem to be running into the same issue as previous, where using the Plot.ly react library crashes my docker container. I'll set aside some time to try and figure out if I can fix this on my setup

I apologize, I should have documented having this issue at the time

• JavaScript heap out of memory error with the quickstart Plot example. plotly/react-plotly.js#135

Strange. Let me know if you can't get it to work, I haven't seen anything like that locally.

[thewatermethod]

I think this is less of a point about this code and more about plot.ly in general but these bundle sizes are kind of absurd.

Before react-plot.ly (17.18 mb)

After react-plot.ly (26.42 mb)

If we are going to need to support low bandwidth users, we may need to find a new library.

[jasalisbury]

I think this is less of a point about this code and more about plot.ly in general but these bundle sizes are kind of absurd.

Before react-plot.ly (17.18 mb)

After react-plot.ly (26.42 mb)

If we are going to need to support low bandwidth users, we may need to find a new library.

Might be time to split up application code from our dependencies, so users only need to download the bigger dependencies bundle when dependencies are updated (which is infrequently). Hopefully react-create-app is easy to configure to do that.

[GarrettEHill]

Not sure if this should be specific to this review, but are we doing any compaction or compression on the js files are all data from the server to reduce bandwidth/download size?

Would incorporating something like https://hub.docker.com/r/tdewolff/minify be a good idea?

[jasalisbury]

Not sure if this should be specific to this review, but are we doing any compaction or compression on the js files are all data from the server to reduce bandwidth/download size?

Would incorporating something like https://hub.docker.com/r/tdewolff/minify be a good idea?

Network tab from the prod site (without caching)

From react-create-app https://create-react-app.dev/docs/production-build

Looks like react-create-app splits out dependencies for us automagically. It also minifies our code for us. Most of the time users are going to be downloading the main.* files as that is where our code/css lives.

(Note this does NOT include the new plotly dependency)

[thewatermethod]

Thanks for taking the time to work on the accessibility!

Re: the bundle size issue - seems like 99% of our users would not experience much of a downside for having a giant bundle. (I would still think that low-bandwidth users might need a more engineered solution, but that's an issue for another day!)

[jasalisbury]

Seems like we have a setting in github where a commit after a review resets the review

[thewatermethod]

🥇