Proposal: Define a custom random pastel color generator using vanilla JavaScript

[prrao87]

Currently, we generate random colors that may or may not be pastel-shades (some colors can be really bright) for nodes in the graph.

In the existing source code for generating random node colors, we set the hue to a random value, meaning we can generate some really ugly colors.

When we have a large number of node/rel tables in the graph, the resulting nodes have colors that can be rather ugly because the hue, saturation and lightness values are all random. See below for the schema of the IMDB graph:

For a good-looking pastel color, the normal recommendation is to use an HSL color scale, where the saturation and lightness are fixed, not random. It's only the hue that's truly random, whereas the saturation and lightness values are fixed to some value.

Proposal

I'm proposing here that we avoid using the randomcolor npm package to generate random hues -- the available options in this library are very limited, and it doesn't generate good-looking colors that are of pastel shades. Instead, we could define a simple JavaScript function that fixes the saturation and lightness values, but randomizes only the hues, as per this StackOverflow answer:

https://stackoverflow.com/a/54279008/1194761

So, something like this:

// Experiment with a lower saturation and lightness too
function randomHSLA(){
    return `hsla(${~~(360 * Math.random())}, 70%,  72%, 1.0)`
}

I tried generating random HSLA colors using the above snippet, and it generates far better looking colors than what we're seeing with the randomcolor package.

Why use pastel colors?

Pastel colors are much more soothing to the eye, and because people can spend a while staring at their graphs, the colors that we auto-generate can help avoid people wasting time in the settings panel customizing the colors of the nodes instead of analyzing their data.

[prrao87]

Additional point why I think better colors are necessary: In the LlamaIndex PropertyGraphIndex that we're integrating to, it's common to have a large number of node/rel tables because the graph schema is dynamically constructed from unstructured text. I'm seeing some rather ugly random colors in cases where I have 10-20 node/rel tables each.