ColorPicker widget doesn't display an alpha of 0 correctly

[bwarne]

Setting the alpha of the ColorPicker widget to 0 correctly updates the alpha in the Plotly chart, but is shown as alpha of 100% in the Color Picker widget.

Currently the render() method of ColorPicker is stripping the alpha component when encoding selectedColor to a string and the alpha is 0.

react-chart-editor/src/components/widgets/ColorPicker.js

Line 80 in acdf2ce

selectedColor._a !== 0

This appears to be causing problems with the react-color CustomPicker which interprets an rgbString lacking an explicit alpha as having an alpha set to 100%. I'm not sure what the benefit is of removing the explicit alpha value but this issue appears to be fixed by changing the line to selectedColor._a !== 1 so that the string encodes the alpha unless it is set to 1 or alternatively by always encoding the alpha by replacing lines 79-82 with const rgbString = selectedColor.toRgbString();.

The attached image shows the result of setting the alpha to 0, which the widget displays as 100, but is rendered as alpha 0 in the chart.

[dmt0]

Not sure why alpha was pinned to 0, it might've been because plotly.js didn't properly support alpha: plotly/plotly.js#4120. That has been fixed now, so doing simply const rgbString = selectedColor.toRgbString(); doesn't seem to cause any issues.