Introduces attribute source to image traces

[antoinerg]

which renders much faster!

Demo: https://codepen.io/antoinerg/full/wvGWgMY

TODO:

• the plot step is now async. Fixed in e4b923b cc @alexcjohnson
• download image in FF (Fixed in e4b923b)
• test in all major browsers and fallback to old rendering method when necessary

[archmoj]

@antoinerg could you possibly add the new mock image_labuda_droplets_source.json to mock_test.js after

plotly.js/test/jasmine/tests/mock_test.js

Line 637 in d45496d

'image_colormodel',

and test it after

plotly.js/test/jasmine/tests/mock_test.js

Line 1684 in d45496d

figs['image_colormodel'] = require('@mocks/image_colormodel');

This is an extra step (until we could find a way to automate it) required to ensure the new mocks pass validation process.

[emmanuelle]

Thank you @antoinerg ! Will there be a way to access the pixel value in a hovertemplate? If the answer is "no only the default hover is possible" it's ok, just wanted to know to adapt the python imshow function.

[antoinerg]

@antoinerg could you possibly add the new mock image_labuda_droplets_source.json to mock_test.js after

plotly.js/test/jasmine/tests/mock_test.js

Line 637 in d45496d

'image_colormodel',

and test it after

plotly.js/test/jasmine/tests/mock_test.js

Line 1684 in d45496d

figs['image_colormodel'] = require('@mocks/image_colormodel');

This is an extra step (until we could find a way to automate it) required to ensure the new mocks pass validation process.

@archmoj I am not familiar with mock_test.js. Is it new? What does it do?

[antoinerg]

Thank you @antoinerg ! Will there be a way to access the pixel value in a hovertemplate? If the answer is "no only the default hover is possible" it's ok, just wanted to know to adapt the python imshow function.

@emmanuelle: yes there is a way! See https://github.com/plotly/plotly.js/pull/5075/files#r470673042

[archmoj]

@archmoj I am not familiar with mock_test.js. Is it new? What does it do?

It is something new added in #4762 a WIP to ensure our mocks pass Plotly.validate step and not to contain any extra info which could be confusing for our users.

[antoinerg]

@archmoj I am not familiar with mock_test.js. Is it new? What does it do?

It is something new added in #4762 a WIP to ensure our mocks pass Plotly.validate step and not to contain any extra info which could be confusing for our users.

Done in e5bc429

cc @archmoj

[archmoj]

Why we need to test for NaNs?
Could we skip this process?

[antoinerg]

Why we need to test for NaNs?
Could we skip this process?

I'm not sure at the moment.

However, this PR didn't change this logic: I simply moved it into a function. Could we maybe revisit this topic in a later PR?

[archmoj]

But they still be called in the case of non-fast-image!
So let's add some logic to skip these isNaN calls when source is present.

if(ipx1 === ipx0 || (
  !hasSource && (isNaN(ipx1) || isNaN(ipx0))
)) continue;

[antoinerg]

I'm not confident about this change. Checking for NaN might be necessary even when the image is defined via source if there are a logarithmic scale and negative values involved (ie. Math.log(-10) is NaN).

cc @archmoj

[archmoj]

Alright. Let's skip this for now.

[antoinerg]

Using the following Codepen: https://codepen.io/antoinerg/full/wvGWgMY

I could test that Firefox, Edge, Chromium, Opera supports pixelated image-rendering on Windows, Mac, and Linux 🎉

Pixelated image rendering does NOT work in:

• Safari (both desktop/mobile)
• Both Chromium/Safari on iOS (so presumably iOS is a no-go regardless)
• IE11

[antoinerg]

Apparently IE11 has issues with onload handler for images and that's a showstopper. Investigating a workaround.

cc @nicolaskruchten @archmoj @alexcjohnson

[antoinerg]

Lib.isIE -> Lib.isIE()

Fixed in f2caed8

[antoinerg]

Apparently IE11 has issues with onload handler for images and that's a showstopper. Investigating a workaround.
cc @nicolaskruchten @archmoj @alexcjohnson

Safari has a similar issue to IE with onload but fortunately it seems restricted to <image> (an SVG element) and not <img> (an HTML element). I got this information from comments in this Stackoverflow thread.

Fixed with f2caed8 ! This also fixes npm run baseline so I could reintroduce image traces with source attribute into the test-image suite 🎉

[archmoj]

Reacting source appears to be working fine | demo.
@nicolaskruchten are there any cases that you would like to be tested?

[nicolaskruchten]

I'll play around with it a bit but I think @emmanuelle will want to recheck her open Python branch against the tip of this one :)

[antoinerg]

@antoinerg
Could you provide source for image_labuda_droplets_source data? Is it a photo you have taken?

A friend of mine took it: https://blogs.royalsociety.org/publishing/oh-boy-quantum-droplets-win-the-2019-royal-society-publishing-photography-competition/

I'm pretty sure it would fall under fair usage but we should probably replace it with an image that is clearly in the public domain. I'm sure @emmanuelle would have good suggestions!

@archmoj I replaced the mock in b586a86

[antoinerg]

In commit 3b75921 I slightly change the code to follow the pattern of if(hasZ) { } elseif(hasSource) {} throughout. It makes it simpler to read and reason about .

[archmoj]

Great addition.
💃 💃 💃
🐢 🐢 🏇
🏇 🏇 🐢