Working version of screened opacity for properties

[rosecers]

This is a resurrection of #81, which addresses #79, ascribing selective opacity to points in the main trace. I've opened a new pull request because I've taken a different approach than in #81.

Here is the reasoning behind the design choices:

1. We would like to keep all of the main points in a single trace to make them clickable/discoverable.
2. Plotly does not allow varying opacity in a single trace. Therefore, in order to vary opacity in a single trace, we must convert the colormap to an RGBA (vs RGB).
3. The way I've done (2) is by stacking a bunch of RGBA colormaps of discrete opacities on top of each other (see screenshot). Because of this, I've separated the coloraxis for the colorbar, so it only appears with the full-opacity colormap.

User Functionality Questions: What types of selective opacities do we envision? Here are some I anticipate:

1. Only highlight a structure / environment / all structures in the widget (trivial)
2. Scale the opacity with some property (trivial)
3. Render invisible any point which doesn't have the property solicited by x, y, z, or color (trivial)

Thoughts? Any other use cases we should anticipate

[ceriottm]

Thanks Rose. Looks very nice in 2D. The 3D version though is not so great is there a fundamental reason? Should we just disable opacity in 3D?

[rosecers]

@Luthaf and I were discussing 3D, and didn't come to a final decision, so I didn't test specifically for 3D. On one hand, it would be very nice to "mask" some points in 3D, aka set them to near or fully transparent, but the overlaying of the points by plotly is non-trivial. Let me see if I can make a few edits and see what it'd look like.

[rosecers]

@ceriottm I don't know if turning opacity on/off for 3D with my original solution is trivial, and upon further reflection came up with another approach. From the commit message:

This is another option for the opacity approach. IMO, I think this approach is overall simpler and leads to greater ease in the future, but will prohibit us from one key functionality: opacity scaled with a property. In this approach, rather than using stacked colormaps, I've created a background trace. This will incur some lag, as based upon how the values for each scatter point are stored, with each update we need to recompute which points fall into each trace multiple times. However, this does enable "ghosting" of points in 3D, and quite nicely, which I anticipate will be a more desirable feature than the scaled opacity. Let me know which approach you all prefer and I'll move forward.

[rosecers]

@Luthaf reviving this PR before it becomes stale

[Luthaf]

Trying to run this code gives me this error whenever I load a dataset

AssertionErrorERR_ASSERTIONisFinite(min) && isFinite(max)
Backtrace

Wrapper@http://localhost:8080/chemiscope.min.js:1728:473
AssertionError@http://localhost:8080/chemiscope.min.js:2073:80
innerOk@http://localhost:8080/chemiscope.min.js:1208:15
ok@http://localhost:8080/chemiscope.min.js:1227:11
arrayMaxMin@http://localhost:8080/chemiscope.min.js:149249:14
./src/map/map.ts/PropertiesMap</PropertiesMap.prototype._connectSettings@http://localhost:8080/chemiscope.min.js:145182:33
PropertiesMap@http://localhost:8080/chemiscope.min.js:144953:14
DefaultVisualizer@http://localhost:8080/chemiscope.min.js:143079:20
./src/index.ts/DefaultVisualizer</DefaultVisualizer.load/<@http://localhost:8080/chemiscope.min.js:143123:30
./src/index.ts/DefaultVisualizer</DefaultVisualizer.load@http://localhost:8080/chemiscope.min.js:143122:16
setupChemiscope@http://localhost:8080/static/js/default.js:91:34
loadExample/<@http://localhost:8080/static/js/default.js:178:40

Could you look if you can reproduce this? I'll have a look at the code in the meantime

[rosecers]

@Luthaf can we push this through at some point?

[Luthaf]

Can you rebase & fix CI? After that I remember the main part of work remaining with this feature was the user interface side of it. Do you have some time today/next week to discuss it in person?

[rosecers]

Can you rebase & fix CI? After that I remember the main part of work remaining with this feature was the user interface side of it. Do you have some time today/next week to discuss it in person?

I can chat this afternoon for sure -- as for the eslint / prettier, I'm running eslint on my end and prettier, but it still fails in test. Is there a new style file that has to be updated locally?

[Luthaf]

as for the eslint / prettier, I'm running eslint on my end and prettier, but it still fails in test. Is there a new style file that has to be updated locally?

No, but you may want to update your prettier version: rm -rf node_modules && npm ci. npm ci will install the exact same version used in CI.

[Luthaf]

@rosecers what should we do with this code? Do you still want this feature and should we try to revive the branch, or should this mainly be kept around as an example in case someone else wants to revive it later?

[rosecers]

I think we ultimately chose to leave it here for posterity.

[Luthaf]

Let's close the PR and keep the branch around in case someone wants to revive this.