Config not changed by callback

[charleyferrari]

cc @plotly/dash

This was uncovered in the dash community: https://community.plot.ly/t/remove-show-figure-modebar-programatically/12254

I can't see any reason why config wouldn't update like any other prop in dcc.Graph. This is how I've been testing it out, the dropdown should just remove the modebar by updating the config.

The only thing I can think of is the shape of config not being matched, but it works fine when you hardcode config in the dcc.Graph

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(id='dropdown', options=[
        {'label': 'Display Mode Bar', 'value': 'yes'},
        {'label': 'Don\'t display Mode Bar', 'value': 'no'}
    ], value='yes'),
    dcc.Graph(id='fig', figure=go.Figure(
        data=[
            go.Bar(x=['one', 'two', 'three'], y=[1, 2, 3])
        ]
    ))
])


@app.callback(
    Output(component_id='fig', component_property='config'),
    [Input(component_id='dropdown', component_property='value')]
)
def update_config(val):
    if val == 'yes':
        print('yes')
        return {'displayModeBar': True}
    else:
        print('no')
        return {'displayModeBar': False}


if __name__ == '__main__':
    app.run_server()

[chriddyp]

I can't see any reason why config wouldn't update like any other prop in dcc.Graph. This is how I've been testing it out, the dropdown should just remove the modebar by updating the config.

Looking at the code, we're just not handling the config argument:

dash-core-components/src/components/Graph.react.js

Lines 170 to 191 in f9b2e93

	componentWillReceiveProps(nextProps) {
	const idChanged = this.props.id !== nextProps.id;
	if (idChanged) {
	/*
	* then the dom needs to get re-rendered with a new ID.
	* the graph will get updated in componentDidUpdate
	*/
	return;
	}
	const figureChanged = this.props.figure !== nextProps.figure;
	if (figureChanged) {
	this.plot(nextProps);
	}
	}
	componentDidUpdate(prevProps) {
	if (prevProps.id !== this.props.id) {
	this.plot(this.props);
	}
	}

[charleyferrari]

@chriddyp I tried building this myself appending this below the figureChanged logic:

    const configChanged = this.props.figure !== nextProps.config;

    if (configChanged) {
      this.plot(nextProps);
    }

and wasn't getting a modebar change working in a callback.

Do you know if there's something else needed?

[chriddyp]

@charleyferrari - Can you push up a PR? Then I can comment on your code directly.

In particular, this logic looks wrong:

    const configChanged = this.props.figure !== nextProps.config;

it should be

    const configChanged = this.props.config !== nextProps.config;

[luggie]

@chriddyp has there been done any fix on this since then?