Update color-rgba to 3.0.0 to fix hsl color conversion bug

[Lexachoc]

Fix the hsl conversion bug mentioned in #2431.

But the scattergl blurry problem is still out there.

[archmoj]

Thanks for the PR.
Please also commit the changes to package-lock.json file.

[Lexachoc]

done

[alexcjohnson]

@Lexachoc I merged master since there have been some changes particularly with testing recently, but that didn't fix the failures we're seeing on CI, would you be able to look into it? In particular it's showing messages like TypeError: rgba3 is not a function from every test that tries to make a parcoords plot, looks like there may have been a breaking change in the API between v2 and v3? Presumably that'll be an easy fix, then we can see if there's anything left (maybe the change altered the colors in some of our baseline images? That would likely be an improvement but would still need updating in the tests, I can help with that part.

[Lexachoc]

@alexcjohnson I have checked the parcoords mock test.

We're using color-rgba v2.1.1 now which is pretty old (6 years ago).
Luckily, the color-rgba was only used in parcoords throughout the entire source code, which makes debugging easier!

In v3, color-rgba uses ES Module Import instead of CommonJS, that's why we got TypeError: rgba3 is not a function.
I guess this problem occurs when Plotly switch to webpack in Plotly v3 as well?

One solution is to replace this line:

plotly.js/src/traces/parcoords/parcoords.js

Line 7 in 858c3a6

var rgba = require('color-rgba');

with:

import rgba from 'color-rgba';

then, it works. What do you think? Should we simply change the import way to make it work?

[alexcjohnson]

I'd love to update from require to import but I'm nervous to do just one unless we do a bunch of extra manual testing, especially given the other bundling issues we've encountered that only show up in certain environments (like #7361 and plotly/plotly.py#5027, that we just fixed with #7367).

I wonder if instead it would work to change to var rgba = require('color-rgba').default;?

cc @marthacryan

[Lexachoc]

Yes, it also works with

var rgba = require('color-rgba').default;

I have also tested with the change from #7367, both import ways work (tested also when custom bundled).

gl2d_parcoords.json mock

P.S. I tested it with the test dashboard: devtools/test_dashboard/index.html

[alexcjohnson]

Excellent, thanks! Let’s use the require().default form for now, until we get a chance to do more extensive testing. There are a lot of ways people include this library in their projects - lots of build tools and lots of environments - so it’s not a small task to convince ourselves that a change in how files link is OK.

[Lexachoc]

@alexcjohnson Cheers! all tests passed.

[alexcjohnson]

💃 Excellent, thanks!

[emilykl]

Looks good, thanks @Lexachoc 🚀