Design refresh #161
Open
Design refresh #161
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* No fixed navbar + sidebar * Updated sidebar with nav and details * Mobile responsive design, using CSS-only approach
ewels
commented
Aug 31, 2025
Contributor
Author
There was a problem hiding this comment.
This is where the bulk of the changes happened. Despite promising you that I'd try to learn Java ~12 years ago, I'm afraid I'm still pretty terrible at it - so apologies if there's some crud in here.
Contributor
Author
There was a problem hiding this comment.
This file wasn't used anywhere that I can see, so I guess it's an artefact left over from a previous refactoring.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I recently saw @barreiro-r's work with fastqcviz and was impressed, and I felt inspired to have a go at modernising the FastQC HTML report a little.
To keep things manageable, I've split what I've done into two PRs. This first one doesn't change the layout of the report or alter the plots at all, but focusses on trying to modernise the HTML and CSS for the report whilst staying true to the original essence of FastQC reports.
The key features I've done in this PR are:
One totally new feature is that I embedded the existing module help text into a toggle-able accordion dropdown for each module. Again this is CSS-only, so no javascript needed.
Example reports: ENCSR000COQ1_1_fastqc_original.html, ENCSR000COQ1_1_fastqc_navigation.html.
Video comparing original report vs. modified from this PR, in both desktop and mobile resolutions:
CleanShot.2025-08-31.at.20.37.50.mp4
I tried to keep the code diff as minimal as possible as I went, but some whitespace-only changes did creep in unfortunately (my IDE tries really hard to remove trailing whitespace). I can attempt to remove this if you like, or alternatively I could put in a separate PR that only does this which could be merged first, to make the diff smaller.
I also ended up doing a little code restructuring to make it easier to edit the report HTML and CSS. Essentially I moved some of the more static report out of the Java XML building into static template fragments with string replacement. I also renamed the CSS template file so that syntax highlighting etc works. Finally I found one or two files that I think are orphaned, which I removed.
Risks to backwards compatability
To the best of my knowledge / testing, the interactive Java application remains unchanged.
Comparing the outputs of all files in the zip file:
summary.txt- changes in capitilisationfastqc_data.txt- changes in capitilisationfastqc.po- changes in capitilisationHopefully these are acceptable and won't break too many people's automation. Alternatively I can revert the case changes (could probably apply them at just the HTML report level perhaps).
Thanks for the inspiration @barreiro-r and happy to hear what you think @s-andrews - if there are parts you like and parts you don't, just shout and I can update the PR accordingly 🙏🏻 Equally, if you'd rather not mess with the reports at all then it's no problem to close this PR, I was really just having fun and won't take offence, promise! 😁