Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve visibility of SNPs on alignments track #3534

Merged
merged 3 commits into from
Mar 14, 2023

Conversation

cmdcolin
Copy link
Collaborator

@cmdcolin cmdcolin commented Feb 22, 2023

  1. rounds to nearest px to avoid fractional pixels which can blur color
  2. use orange instead of amber for G
  3. standardize on getContrastText

see '2-way swipes' in the 'files changed' for differences

the amber->orange change increases contrast ratio from 1.09 to 1.44 (amber vs lightgrey -> orange vs lightgrey) according to https://accessibleweb.com/color-contrast-checker/ at possible cost for being closer to red

orange #ff9800
amber #ffc107
lightgrey #d3d3d3

@github-actions github-actions bot added the needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) label Feb 22, 2023
@cmdcolin cmdcolin added enhancement New feature or request and removed needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) labels Feb 22, 2023
@cmdcolin
Copy link
Collaborator Author

note: its quite difficult to get the contrast very good at all with the orange/yellow on grey but it is the 'traditional' color

@codecov
Copy link

codecov bot commented Feb 22, 2023

Codecov Report

Merging #3534 (629a336) into main (9b8fcc9) will decrease coverage by 0.08%.
The diff coverage is 100.00%.

❗ Current head 629a336 differs from pull request most recent head b74e059. Consider uploading reports for the commit b74e059 to get more accurate results

@@            Coverage Diff             @@
##             main    #3534      +/-   ##
==========================================
- Coverage   62.78%   62.70%   -0.08%     
==========================================
  Files         866      866              
  Lines       30271    30282      +11     
  Branches     7295     7290       -5     
==========================================
- Hits        19006    18989      -17     
- Misses      11076    11104      +28     
  Partials      189      189              
Impacted Files Coverage Δ
packages/core/ui/theme.ts 72.97% <ø> (ø)
...gins/alignments/src/PileupRenderer/configSchema.ts 50.00% <ø> (ø)
...ns/alignments/src/PileupRenderer/PileupRenderer.ts 52.43% <100.00%> (+0.19%) ⬆️
...nts/src/SNPCoverageRenderer/SNPCoverageRenderer.ts 74.40% <100.00%> (+0.20%) ⬆️

... and 5 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@cmdcolin
Copy link
Collaborator Author

cmdcolin commented Mar 9, 2023

doing the "swipe" operation on the updated snapshot tests in this PR also show the evolution

@cmdcolin cmdcolin force-pushed the better_contrasts_alignments branch from 0277810 to 629a336 Compare March 9, 2023 19:07
Copy link
Collaborator

@garrettjstevens garrettjstevens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, orange has a lot better contrast, and I think it's still sufficiently different from red.

@cmdcolin cmdcolin force-pushed the better_contrasts_alignments branch 3 times, most recently from c13b69e to 5e1ad3b Compare March 14, 2023 21:40
@cmdcolin
Copy link
Collaborator Author

went back to 1px instead of 1.5px as the fractional could be blurry. should still have better contrast now

@cmdcolin
Copy link
Collaborator Author

also standardizes on theme.palette.contrastColor(...) across both SequenceTrack and AlignmentsTrack...was using a custom util function we wrote @jbrowse/core/util/colors -> contrastingTextColor but I think the built in MUI solution is a bit better (chooses black on orange instead of white on orange for example)

@cmdcolin cmdcolin force-pushed the better_contrasts_alignments branch from 5e1ad3b to bf79fac Compare March 14, 2023 21:52
@cmdcolin cmdcolin merged commit d8d65aa into main Mar 14, 2023
@cmdcolin cmdcolin deleted the better_contrasts_alignments branch March 14, 2023 22:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants