Line plot customization options

[kylegodbey]

Currently we have limited customization options for BMEX plots:

For comparison sake, it would be nice to have the ability to change line colors, line widths, line styles (solid, dashed, etc) for different datasets. Maybe we can add a drop down to the left sidebar (within the blue area) that says "advanced" or something like that that then opens the ability to change those styling issues. We could also add it to the right sidebar, but we need to make sure that the advanced settings affect the data source of interest (UNEDF or AME2020 in this case)

[dashertr]

I have gotten it so that I can change line color, width, and style for a given data set but when I change tabs, the line resets to default. Could you advise on the best way to properly save and retrieve the selected line color?

For reference, I have added an advanced settings card to sidebar_class.py along with a function and callback to update the line color.

[kylegodbey]

I think you could maybe use dcc.store?

dcc.Store(id='line-styles-store', data={})

and then you can initialize the styles explicitly with a separate function or just do it on plot creation and pass the call-back to it:

@app.callback(
    Output('line-styles-store', 'data'),
    Input('my-graph', 'figure')  # Trigger on initial figure load
)
def initialize_line_styles(fig):
    if fig:
        initial_styles = {}
        for i, trace in enumerate(fig['data']):
            line_id = trace.get('name', f'line-{i}')  # Use trace name or create an ID
            initial_styles[line_id] = {
                'color': 'red',  # Your custom color
                'width': 3,     # Your custom width
                'dash': 'dot'   # Your custom dash style
            }
        return initial_styles
    return {}

Then, whenever the tab changes, whatever code is called to re-render the plot you just need to take the datastore:

@app.callback(
    Output('my-graph', 'figure'),
    Input('some-input', 'value'),  # Input that triggers a view change
    State('my-graph', 'figure'),
    State('line-styles-store', 'data')
)
def update_figure(input_value, fig, stored_styles):
    if fig:
        # ... (Your logic to update the figure data based on input_value) ...

        # Apply stored styles
        for i, trace in enumerate(fig['data']):
            line_id = trace.get('name', f'line-{i}')
            if line_id in stored_styles:
                trace['line'].update(stored_styles[line_id])
        return fig
    return dash.no_update

Finally, you'll need an update_style callback to update when users interact, but it seems like you already have that one.

No guarantee that that code will work, but I think the logic is sound

[dashertr]

I’m trying to use viewsmemory to persist the state of line properties (line_color, line_width, and line_style) across user interactions and tab switches. To achieve this, I added these properties to the default view configuration, ensuring they are included in every new view. When the user interacts with the UI, main_update updates these properties in viewsmemory. The updated viewsmemory is then passed to the View object, where plot() applies the properties to the graph traces. Debugging shows that viewsmemory is updating correctly, the View object receives the updated values, and the traces in figure['data'] reflect the changes. However, the graph itself does not visually reflect these updates, even after trying solutions like uirevision = None and explicitly setting line.color. Do you have any suggestions or ideas?