R6.x HTML Reports

[tombrunet]

Epic Details

• Hill: what does the user need – include some sort of WOW element
• Playback Demonstration: what will you be able to show at the end of the release / point release to demonstrate how you accomplished your user story. If possible, list what you target to demonstrate for each sprint
• Metric: how can we measure the impact of this change
• Comms: when completed who should you communicate this change to, what will you tell them (concisely), and where?

What project/section is the Epic for?

• checker

Related Issues to this Epic:

Please mark as done once the ticket is done and have pass QA testing

• HTML Report Card Changes, and View and Filter menu changes #2024
• HTML Report Include Hidden #2026
• HTML Report Font and CSS Consistency #2035
• [HTML Reports] Update User & Quick guides to match improvements #2048

all in final PR

Definition of Done

• Results are added to the Release Mural with a description of what was accomplished, KPIs, etc
• All content has been reviewed for grammar, spelling, style and technical accuracy
• All code committed to main branch
• All unit tests pass (including accessibility)
• Demo works in staging environment
• At least one performance metric / monitor constructed

[tombrunet]

Basically how the report is built and used by tools:

• The as-is code is in the report-react folder and built with npm run build.
• When the build is run, the report-react/build/genReport.js and genReport.tsx files are created, which contain a function that takes a report as input and creates a stand-alone HTML file for the report as a string (which can then be written as a file)
• You can find how this function is called and the format of the report here: https://github.com/IBMa/equal-access/blob/master/common/module/src/report/ACReporterHTML.ts#L28

How the genReport function is created:

• The skeleton HTML files is at https://github.com/IBMa/equal-access/blob/master/report-react/public/index.html . You'll see ACEREPORT = {}; where the HTML report is injected into the file
• The root react file is https://github.com/IBMa/equal-access/blob/master/report-react/src/index.tsx
• https://github.com/IBMa/equal-access/blob/master/report-react/gulpfile.js takes the built .css and .js files and pushes them into the skeleton HTML file for a single stand-alone file.

Some basic problems with the current solution:

• The current built file is ~1MB (even for an almost empty report), which adds a lot of overhead to the reports
• The report design has not been kept up-to-date with the extension design (see below)

As-is design:

vs extension report designs:

Note: The checkboxes on the reports won't be needed, and the Export XLS also. Perhaps some other items might not make sense in a saved report.

Ideally, we can pull in the same code for both the extension and the report and keep them in sync (minus the checkbox behaviors). We can talk more about design specifics, but this is a general idea of the work needed.

[MHoov]

Notes from 29 August meeting:

• Tom said not to worry about the file size yet - get started with the design. Start with some easy elements
  • date, for example
  • just address the stuff above the table (see image)
• Josiah suggested starting with the cards.
• Create draft issues to plan out the actual work by sprint.

See recording in Teams for additional details.