GMOD / jbrowse-components

Source code for JBrowse 2, a modern React-based genome browser
https://jbrowse.org/jb2
Apache License 2.0
208 stars 62 forks source link

Synteny view drawings can vary slightly between browser and scroll state #4432

Open cmdcolin opened 5 months ago

cmdcolin commented 5 months ago

The linear synteny view with all the polygons uses a render optimization where multiple drawing operations are batched into a single operation (multiple line drawing operations get a single canvas.stroke() and it draws a "polyline")

see https://github.com/GMOD/jbrowse-components/blob/9aaa5ba2ec45c943e2071d298553070f38568b80/plugins/linear-comparative-view/src/LinearSyntenyDisplay/drawSynteny.ts#L90

this does speed it up but it results in different alpha blending on chrome vs firefox sometimes with firefox appearing more "pale" due to the lack of alpha blending on the polyline not stacking up darker and darker alpha blends

options to address this could include

a) do nothing b) gather user feedback to see how much it matters c) remove the optimization, should "fix" it d) fix it some other way that preserves polyline, or only remove polyline on firefox e) don't use the alpha channel at all, and just always use flat colors, or use flat colors by default f) see what the situation looks like after implementing other synteny coloring options

those are not all mutually exclusive...

cmdcolin commented 5 months ago

firefox initial page load

Screenshot 2024-06-10 at 2 52 39 PM

firefox after scrolling around a bit

Screenshot 2024-06-10 at 2 52 27 PM

chrome initial page load

Screenshot 2024-06-10 at 2 53 29 PM
cmdcolin commented 5 months ago

note: i am not exactly sure why scrolling around in firefox starts to enable the alpha blending

cmdcolin commented 5 months ago

note that after " f) see what the situation looks like after implementing other synteny coloring options" it may be harder to do polylines as all the elements of a polylines are a single color