Plotly.js: Parallel coordinates not working when Chrome hardware acceleration disabled

[Nimrod007]

Parallel coordinates not rendering with exception:

Uncaught TypeError: Cannot read property 'buffer' of null
    at plotly-latest.min.js:7
    at e.exports (plotly-latest.min.js:7)
    at HTMLCanvasElement.<anonymous> (plotly-latest.min.js:7)
    at plotly-latest.min.js:7
    at ut (plotly-latest.min.js:7)
    at Array.Y.each (plotly-latest.min.js:7)
    at e.exports (plotly-latest.min.js:7)
    at e.exports (plotly-latest.min.js:7)
    at Object.r.plot (plotly-latest.min.js:7)
    at r.drawData (plotly-latest.min.js:7)

System details:

• Google Chrome Version 70.0.3538.110 (Official Build) (64-bit)
• Chrome hardware acceleration disabled.
• macOS Mojave 10.14

How to reproduce?

• in chrome disable hardware acceleration, go to chrome://settings/?search=Use+hardware+acceleration+when+available and switch it off.
• go to : https://plot.ly/javascript/parallel-coordinates-plot/#basic-parallel-coordinates-plot
• the parallel coordinates wont plot and console will show error

might be related to issue: https://github.com/plotly/plotly.js/issues/2582 (dont know if you prefer to reopen it or open a new one)

[alexcjohnson]

parcoords traces use WebGL, so if that's not available they will fail. But the manner of failure is different - and worse because it halts rather than just showing the "WebGL not supported" message - using the built files than in our development environment. So thanks for bringing this up!

It turns out the minified version of regl does different error handling than the development version. Here's the code in the dev version that we relied on to throw an error:
https://github.com/regl-project/regl/blob/8c4b9c1bf78ff9a85366bf3441c084a1cd8b1f2c/dist/regl.js#L886-L890

And here's the equivalent in "regl.unchecked.js" that seems to be what gets compressed to the minified one (which is used even in the un-minified built files plotly-latest.js etc):
https://github.com/regl-project/regl/blob/8c4b9c1bf78ff9a85366bf3441c084a1cd8b1f2c/dist/regl.unchecked.js#L233-L237

Both of these end up here:
https://github.com/plotly/plotly.js/blob/ed9ad69877fa66ff6039ac4063703dea08e9763d/src/lib/prepare_regl.js#L38-L50

@etpinard do you see any issue with simply adding if(!d.regl) success = false; in there? That would fix this particular issue; it's a bit unfortunate though that the error behavior of the built and dev code is different.

[shanebdavis]

We ran into this same problem running plotly in chromium. Here are a few more data-points:

The problem reliably happens in Chrome 75.0.3770.100 (Official Build) (64-bit) windows or mac - when hardware acceleration is off. Chrome appears to not have a software renderer:

# chrome://gpu
Canvas: Software only. Hardware acceleration disabled
Flash: Software only. Hardware acceleration disabled
Flash Stage3D: Software only. Hardware acceleration disabled
Flash Stage3D Baseline profile: Software only. Hardware acceleration disabled
Compositing: Software only. Hardware acceleration disabled
Multiple Raster Threads: Disabled
Native GpuMemoryBuffers: Software only. Hardware acceleration disabled
Out-of-process Rasterization: Disabled
Hardware Protected Video Decode: Disabled
Rasterization: Software only. Hardware acceleration disabled
Skia Renderer: Disabled
Surface Control: Disabled
Surface Synchronization: Enabled
Video Decode: Software only. Hardware acceleration disabled
Viz Service Display Compositor: Enabled
Viz Hit-test Surface Layer: Disabled
WebGL: Disabled
WebGL2: Disabled

Here is a quick way to test if WebGL is available. If you turn on hardware acceleration in chrome it works, if you turn it off, it says WebGL is not available:

canvas = document.createElement('canvas');
if (canvas.getContext('webgl')) {
  console.log("webgl IS available");
} else {
  console.log("webgl is NOT available");
}

You can toggle hardware acceleration in chrome by navigating to this url in chrome:

chrome://settings/?search=hardware

Here is a quick code-pen that makes reproducing the bug easy:

https://codepen.io/shanebdavis/pen/QXMaWg