Make HTML report printable and scrollable

[ammaraziz]

Hi Sam,

Two modifications to the html run report template:

• CSS to preserve formatting/color of html document for printing/pdfing
• New div to wrap tables so they're scrollable when the view port is small (eg on mobile devices, don't ask why someone is viewing the report on their mobile)
• Print button that unrolls all the tabs, changes the layout to landscape and removes the background color.

PR checklist

• This comment contains a description of changes (with reason).
• If you've fixed a bug or added code that should be tested, add tests!
• If you've added a new tool - have you followed the pipeline conventions in the contribution docs
• Make sure your code lints (nf-core pipelines lint).
• Ensure the test suite passes (nextflow run . -profile test,docker --outdir <OUTDIR>).
• Check for unexpected warnings in debug mode (nextflow run . -profile debug,test,docker --outdir <OUTDIR>).
• Usage Documentation in docs/usage.md is updated.
• Output Documentation in docs/output.md is updated.
• CHANGELOG.md is updated.
• README.md is updated (including new tool citations and authors/contributors).

[ammaraziz]

Printing works, but only the active tab... let me see how to print all tabs.

[ammaraziz]

See example out of print to pdf
example-print.pdf

Screenshot of the responsive layout (the scroll bar):

[ammaraziz]

@BioWilko Pinging!

[BioWilko]

Okay looking at this now!

[ammaraziz]

Thanks! I should mention that my CSS / JavaScript skills are very poor. Most of this was coded with the help of Kimi K2 chat bot.

[BioWilko]

Thanks! I should mention that my CSS / JavaScript skills are very poor. Most of this was coded with the help of Kimi K2 chat bot.

Hah, how do you think I made the templates in the first place!

[BioWilko]

Okay this is looking good but I'm noticing some issues with the width of plots within tabs, also I'm not particularly keen on the landscape orientation but that's a more minor issue.

Also the run info table is no longer within the header so it can't be seen against the background.

Example artic-network_amplicon-nf QC Run Report.pdf

[ammaraziz]

Good catch, let me fix those issues. I'll add a radio button to switch orientation.

Edit: what browser are you using? I see this issue in firefox.
Edit2: I also see what you mean about landscape... for some reason (cache maybe) it didn't kick in until I removed work and rerun the pipeline. Totally agree landscape is weird format for html. I'll fix that.

[ammaraziz]

I've fixed the weird landscape issue. The HTML report is now back to landscape. When the print button is clicked, it switched to landscape.

[BioWilko]

Some more feedback:

• Print unwraps the tabs in the main view as well which shouldn't happen, the page should not change when the print button is pressed or if it does it should change back immediately.
• The top table is supposed to be in the header, see a report from the previous version
  artic-sars-cov-2_400_v3.0.0_amplicon-nf_run-report.html
• Functionality should be unified across the sample reports and the run reports, if the run report has a print button the sample report should too.

[BioWilko]

I'm not convinced that these reports should be printable, plotly hides a lot of sample names by default when you have a full sized run to prevent overlaps and I think it could confuse users.

[ammaraziz]

Print unwraps the tabs in the main view as well which shouldn't happen, the page should not change when the print button is pressed or if it does it should change back immediately.

That's was a design decision to make every tab on one page. The JavaScript function modifies the DOM, which causes the changes seen after print button is triggered.

I'm not convinced that these reports should be printable, plotly hides a lot of sample names by default when you have a full sized run to prevent overlaps and I think it could confuse users.

I'll try to fix these issues. To answer your question, my lab and I imagine lots of other labs print the results (in this case the html), hand write and highlight pass fail to be combined with other printed docs to form a packet that's archived.

I wish they didn't, but they do.

I would not be upset if you close this pull request as not relevant.

[BioWilko]

Nah that does make sense, so long as the main table is what people really want and the plots are just bonus.