Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Parallel Coordinate Plot Deselected Line Colour #6213

Closed
mikesinc opened this issue Jun 9, 2022 · 11 comments · Fixed by #6216
Closed

[Feature Request] Parallel Coordinate Plot Deselected Line Colour #6213

mikesinc opened this issue Jun 9, 2022 · 11 comments · Fixed by #6216

Comments

@mikesinc
Copy link

mikesinc commented Jun 9, 2022

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.

Untitled.1.mp4
@alexcjohnson alexcjohnson transferred this issue from plotly/dash Jun 9, 2022
@archmoj
Copy link
Contributor

archmoj commented Jun 9, 2022

I suggest we simply rework #4635.

@alexcjohnson
Copy link
Collaborator

Oh I forgot about #4635 - yes maybe we can just re-revert it?

@archmoj
Copy link
Contributor

archmoj commented Jun 9, 2022

Revert won't work. But I could open a fresh PR, if you are happy with that?

@alexcjohnson
Copy link
Collaborator

Sure, however you want to do it. As I recall that PR was good, just came at the wrong time?

@mikesinc
Copy link
Author

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

@archmoj
Copy link
Contributor

archmoj commented Jun 10, 2022

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.

@MahanyaKochhar
Copy link

Hi ! Is there any attribute available now that solves this issue in Python . I want to change the unselected line colour from the default grey to another colour. Please let me know .
Thanks.

@archmoj
Copy link
Contributor

archmoj commented Jul 5, 2022

@mahannya this feature would be available in the next plotly.js and plotly.py releases soon.

@MahanyaKochhar
Copy link

Ok. Thanks

@MahanyaKochhar
Copy link

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

@RamenJamen
Copy link

RamenJamen commented Nov 1, 2023

Hi!
What is the status regarding plotly.py and “unselected lines”?

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants