feat!(website): SeqSet details page graphs and layout updates #6173
Merged
feat!(website): SeqSet details page graphs and layout updates #6173
Conversation
…tails and citations into separate sections, moved action buttons
claude
Bot
added
website
## Summary - Replaces `colors.cjs` with `colors.json`, which is natively importable by both `require()` (Tailwind config) and ESM `import` (Astro/Vite) - Removes the custom `inline-colors-cjs` Vite plugin and `createRequire` workaround from `astro.config.mjs` - Removes the `src/colors.ts` re-export wrapper (no longer needed) - Updates `.dockerignore` allowlist accordingly Net result: -20 lines of bridging code, same behavior. ## Test plan - [ ] Verify Tailwind classes using `primary-*` colors still work (the JSON is the same palette) - [ ] Verify the SeqSet detail page bar charts still pick up the correct color - [ ] Verify Docker build still includes the color config 🤖 Generated with [Claude Code](https://claude.com/claude-code) 🚀 Preview: Add `preview` label to enable Co-authored-by: theosanderson-agent <theo@theo.io> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 1, 2026
anna-parker
reviewed
Apr 7, 2026
anna-parker
reviewed
Apr 7, 2026
anna-parker
approved these changes
Apr 7, 2026
Contributor
anna-parker
left a comment
anna-parker
left a comment
There was a problem hiding this comment.
This looks great!
As discussed lets add the multiple metadata fields option to the seqSet metadata table as well in a later PR :-)
Co-authored-by: Anna (Anya) Parker <50943381+anna-parker@users.noreply.github.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
This PR addresses #5916 by adding configurable graphs for SeqSets, with preset graphs for collection dates, countries and use terms, as well as adding a few layout changes to the SeqSet details page generally. The graphs are made configurable under the
seqSetssection in thevalues.yaml.A preview SeqSet can be found here: https://seqset-details-update.loculus.org/seqsets/LOC_SS_11.3
Breaking changes
colors.cjsfile into acolors.jsonfile, which will need updating in Pathoplexus and other loculus instances. This is done to support the bar charts being themed correctly. The ChartJS library can't use tailwind classes for styling, and we don't want to hardcode any styles as these change between loculus instances. So I wanted to import colours directly from thecolors.cjsfile, but this is not easily imported (even when you get it working withrequire, it breaks in a build of the site). Switching the file to json means the colour can be imported directly and is added to the build.Notes
<= 60days, it displaysyyyy-mm-dd, if the range is<= 365days, it displaysyyyy-mm, if its a greater difference it displays dates asyyyy.Other (n)value.Screenshot
Existing SeqSet details page:
This PR changes it to:
PR Checklist
🚀 Preview: https://seqset-details-update.loculus.org