Component | Scatter: MakesizeScale immutable to prevent sizeRange collisions

[reb-dev]

Summary

This PR makes Scatter's sizeScale config property immutable so that if there is a shared instance to config or config.sizeScale, the sizeRange property does not get overridden. More explanation below as it is a bit of an edge case.

Background

When trying to figure out why this scatter gallery example looks wrong (i.e. the minimap's points are too large for sizeRange: [3, 10]), I discovered that the issue comes from using a shared config object between the two charts. Since sizeScale is undefined, when it is initialized with the default value in the first component, that becomes the same instance of sizeScale for both.

This means that despite both components specifying different values for config.sizeRange, when the hidden shared reference to config.sizeScale ends up being mutated in the _updateSizeScale function, it overrides any previous domain or range that was set. For this reason I think we should use a private instance instead of manipulating config.sizeScale directly.

Expected behavior

Given the following two scatters with the same data:

const props = { x: d => d.x, y: d => d.y, size: d => d.x }

{/* Scatter 1 */}
<VisScatter {...props} sizeRange={[2, 10]}/>

{/* Scatter 2 */}
<VisScatter {...props} sizeRange={[4, 32]}/>

We expect the first to have points ranging in radius from 2-10px and the second in from 4-32px.

Before

After

[rokotyan]

@reb-dev This is great that you were able to find the cause of this problem! Apparently it happened when we switched from using config classes to simple objects and I completely missed it. Did you also check other components for similar initializations?

[reb-dev]

@rokotyan Yes, from what I can tell this is the only instance

[lee00678]

Looks good!