[Feature Request] Parallel Coordinate Plot Deselected Line Colour

Hi Team,

TL;DR: Please expose the deselected line colour as a property for the Parallel Coordinate Plot graph object.

I work with the parallel coordinate plot quite frequently (the plotly graph objects version) outside of dash.

Often, end-users request that the grey colouring used for the deselected lines be removed for clarity. Currently this is not a default property exposed by the plotly graph object. The default colouring for the deselected lines is grey and the opacity I believe is determined by some logic depending on how many of the deselected lines overlap, although I could be wrong.

My work-around for this problem to date when working with static HTML files has been to open the HTML and simply find and replace any reference to deselected line colouring either manually or with python, changing the colour from the default to rgba(0,0,0,0).

This works for static HTML files, but having recently developed a tool in dash I cannot use the same work-around.

Instead, I have tried using a client-side call-back to modify the JavaScript code:

app.clientside_callback(
    """
    function (a, themeToggle) {
        // update deselected line colours
        Array.from(document.getElementsByClassName("parcoords-control-view"))[0].__data__.model.deselectedLines.color = [0,0,0,0];
        
        // update the brush colouring from magenta to grey
        Array.from(document.getElementsByClassName("highlight")).map(line => line.attributes.stroke.nodeValue = "grey");
    }
    """,
    Output(component_id='blank_output_2', component_property='children'),
    [
        Input(component_id='parallelcoord', component_property='figure'),
        Input(component_id='theme', component_property='value')
    ],
    prevent_inital_callback=True
)

This works on first load, however when a separate python call-back is triggered that updates the Parallel Coordinate Plot Figure component, the deselected grey line colouring returns, even though the client-side call-back is triggered to execute after the Parallel Coordinate Plot Figure component is updated (it is an input to this call-back).

When looking at the browser console, I can see that the client-side call-back has infact been executed and the colour property for the deselected lines is now rgba(0,0,0,0). But looking at the plot, the deselected lines are still grey until I make some adjustment to anything on the plot.

It is almost like a cached image of the plot is left on the screen which does not re-render until user input. Interestingly, other colouring / css properties altered through the same client-side call-back such as the brush colouring as shown in the above call-back will function without issue. It is just the deselected line colouring that does not update until I move something.

The video below shows the behaviour I am describing. Ultimately, exposing the deselected line colour as a property in the plotly graph object for the parallel coordinate would solve this error. However, if anyone else out there knows of a work-around in dash applications or has any ideas, please let me know.

https://user-images.githubusercontent.com/28840236/172745075-66919d6a-1007-4dde-985d-13c4ca433d37.mp4

[archmoj]

Hi @archmoj, thanks for getting onto this. Will this PR carry through into Dash or just Plotly.js?

The feature would be available in Dash after being implemented in plotly.js.

[mahannya]

Hi ! By when is the new version expected to release tentatively. Thanks