NSP3 visualization is broken in some browsers, showing sad face

corneliusroemer commented 9 months ago

I noticed that nsp3 (and only nsp3) viz is broken:

https://jbloomlab.github.io/SARS2-mut-fitness/nsp3.html

Others work just fine, e.g

Strangely it's browser dependent:

Brave: doesn't work (also not incognito) Version 1.60.118 Chromium: 119.0.6045.163 (Official Build) (arm64) https://brave.com/latest/)
Chrome: works Version 119.0.6045.199 (Official Build) (arm64)
Firefox: doesn't work Version 120.0, also not incognito

Console logs might help:

Firefox:

WARN Infinite extent for field "fitness": [Infinity, -Infinity] 2 [vega@5:1:1379](https://cdn.jsdelivr.net/npm//vega@5)
ERROR NS_ERROR_FAILURE: 
    resize https://cdn.jsdelivr.net/npm//vega@5:1
    resize https://cdn.jsdelivr.net/npm//vega@5:1
    evaluate https://cdn.jsdelivr.net/npm//vega@5:1
    evaluate https://cdn.jsdelivr.net/npm//vega@5:1
[vega@5:1:1379](https://cdn.jsdelivr.net/npm//vega@5)
Uncaught NS_ERROR_FAILURE: 
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    Sm https://cdn.jsdelivr.net/npm//vega@5:1
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    pickEvent https://cdn.jsdelivr.net/npm//vega@5:1
    wv https://cdn.jsdelivr.net/npm//vega@5:1
    xv https://cdn.jsdelivr.net/npm//vega@5:1
[vega@5:1](https://cdn.jsdelivr.net/npm//vega@5)
ERROR NS_ERROR_FAILURE: 
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    Fm https://cdn.jsdelivr.net/npm//vega@5:1
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    _render https://cdn.jsdelivr.net/npm//vega@5:1
    _call https://cdn.jsdelivr.net/npm//vega@5:1
    render https://cdn.jsdelivr.net/npm//vega@5:1
    renderAsync https://cdn.jsdelivr.net/npm//vega@5:1
    evaluate https://cdn.jsdelivr.net/npm//vega@5:1
[vega@5:1:1379](https://cdn.jsdelivr.net/npm//vega@5)
ERROR NS_ERROR_FAILURE: 
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    Fm https://cdn.jsdelivr.net/npm//vega@5:1
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    draw https://cdn.jsdelivr.net/npm//vega@5:1
    _render https://cdn.jsdelivr.net/npm//vega@5:1
    _call https://cdn.jsdelivr.net/npm//vega@5:1
    render https://cdn.jsdelivr.net/npm//vega@5:1
    renderAsync https://cdn.jsdelivr.net/npm//vega@5:1
    evaluate https://cdn.jsdelivr.net/npm//vega@5:1
[vega@5:1:1379](https://cdn.jsdelivr.net/npm//vega@5)
Uncaught NS_ERROR_FAILURE: 
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    Sm https://cdn.jsdelivr.net/npm//vega@5:1
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    pick https://cdn.jsdelivr.net/npm//vega@5:1
    pickEvent https://cdn.jsdelivr.net/npm//vega@5:1
    wv https://cdn.jsdelivr.net/npm//vega@5:1
    xv https://cdn.jsdelivr.net/npm//vega@5:1

Chrome:

vega@5:1 WARN Infinite extent for field "fitness": [Infinity, -Infinity]
m @ vega@5:1
/favicon.ico:1 

       Failed to load resource: the server responded with a status of 404 ()

So the vega warning doesn't seem to be the root cause

Brave:

vega@5:1 WARN Infinite extent for field "fitness": [Infinity, -Infinity]
m @ vega@5:1
12:56:40.421 vega@5:1 WARN Infinite extent for field "fitness": [Infinity, -Infinity]
m @ vega@5:1

No difference in logs between Brave and Chrome, no errors in Brave as opposed to Firefox, still doesn't show.

corneliusroemer commented 9 months ago

This might be what's happening: https://stackoverflow.com/questions/57839322/sad-face-on-canvas-in-chrome

jbloom commented 9 months ago

Yes, this is a good observation! We have also observed browser-specific effects for sufficiently large altair plots (it used to work on Safari but not Chrome, but now seems to work on Chrome I guess).

I think the real root of this problem is probably in the upstream altair or vega-lite packages, which is beyond scope of what I know how to fix.

There may be some way to refactor the way our plotting calls altair to fix it by changing how plot is rendered in vega-lite, but I'm not sure how?

corneliusroemer commented 9 months ago

Thanks! nsp3 is the biggest protein, 1800 long in total, I didn't have that on my radar, embarassingly

I found these vega(-lite) issues:

Seems like vega can't/won't fix this, but a workaround might be to test the max size of the canvas and at least show an error message when the canvas size is exceeded or even change how the plot is rendered. Might not be worth the hassle however. See: https://github.com/jhildenbiddle/canvas-size#canvas-size

Another workaround may be "If you use SVG, the chart should render." "Easiest solution is probs adding a canvas/SVG toggle and noting somewhere clear that "HEY IF THE PLOT GETS CUT OFF TRY SVG" (from https://github.com/biocore/qurro/issues/121)

jbloomlab / SARS2-mut-fitness

NSP3 visualization is broken in some browsers, showing sad face #47