don't override document.title if set to None by chriddyp · Pull Request #1343 · plotly/dash

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp · 2020-07-23T16:57:28Z

Edit: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

As requested by a Dash Enterprise customer.

This allows users to override document.title during runtime with a
clientside callback or a special component
(plotly/dash-core-components#833)

Example of modifying during runtime:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
app.clientside_callback(
""" function(tab_value) { console.log(tab_value); document.title = tab_value; return null; // dummy output } """,
Output('dummy', 'children'),
[Input('tabs-example', 'value')]
)
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

Example with custom table title via index string:

importdashimportdash_html_componentsashtmlimportdash_core_componentsasdccfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__, update_title=None)
app.index_string='''<!DOCTYPE html><html> <head> {%metas%} <title>Hello World</title> {%favicon%} {%css%} </head> <body> <div>My Custom header</div> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>My Custom footer</div> </body></html>'''app.layout=app.layout=html.Div([
dcc.Input(id='input'),
html.Div(id='output'),
html.Div(id='dummy'),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('output', 'children'), [Input('input', 'value')])defupdate_output(value):
returnvalueif__name__=='__main__':
app.run_server(debug=True)

This is a follow up of #1315.

This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

Marc-Andre-Rivet · 2020-07-24T01:34:49Z

 UNSAFE_componentWillReceiveProps(props) {
 if (this.state.update_title && props.isLoading) {
 document.title = this.state.update_title;
- } else {


While this allows the clientside callback to set the value, it seems to break existing tests / behavior. Would a better verification be to only revert back to inititalTitle if the value is equal to update_title instead? Possibly the same chekc for update_title - only update if the value is currently initialTitle.

Thanks! I totally misinterpreted what update_title meant. I believe e190cc9 is the logic we're looking for

I think it'd be safer to bail out entirely (before even the props.isLoading test) if !update_title. Then this entire component would be a noop, as it should be in that case; callbacks can do whatever they want with document.title and we won't interfere.
When you do have an update_title, I may agree with @Marc-Andre-Rivet that there needs to be a test when we're reverting back to the non-updating title. Consider a callback chain, where the first callback changes document.title, but we're still in a loading state so DocumentTitle doesn't receive new props and we don't pick up the changed title into this.state. Then after the second callback we reset document.title to this.state.title, losing the callback-provided title.
Seems to me the logic you have right now is fine during loading, but when reverting to this.state.title below it would be better to do something like:
if(document.title===this.state.update_title){document.title=this.state.title;}else{this.setState({title: document.title});}

Thanks @alexcjohnson @Marc-Andre-Rivet ! I believe I have addressed your comments and added the appropriate tests now.

chriddyp · 2020-07-24T01:34:50Z

Huh, odd that pylint would fail. I didn't change any python files.

alexcjohnson · 2020-07-24T14:15:14Z

Tangentially related to this PR - you can set app.title to control the regular page title (which I totally forgot about when reviewing #1315). We use this internally, but I don't see it documented anywhere, and it feels inconsistent with the update_title kwarg. Perhaps we should support title as a kwarg too? Also app.config.update_title works, so it would be nice if app.config.title did too. We could go full symmetry and allow app.update_title, but it might be cleaner to deprecate app.title and encourage both of these to go through kwargs or app.config.

alexcjohnson · 2020-07-24T14:45:59Z

Huh, odd that pylint would fail.

weird, perhaps we somehow got isort v5? Maybe we need to pin it to 4.3.21 in requires_dev.txt? pylint tries to handle that itself, but perhaps someone else brings it in unpinned first?

update: yes, somehow we have isort@5.1.0

️️🏗️ pip dev requirements
...
Requirement already satisfied: isort>=4.2.5 in ./venv/lib/python3.6/site-packages (from pylint==1.9.4->-r requires-dev.txt (line 7)) (5.1.0)

chriddyp · 2020-07-27T15:19:39Z

Perhaps we should support title as a kwarg too?

I added this as well and kept the app.title for backwards compatibility. Also added a unit test here.

chriddyp · 2020-07-27T15:24:26Z

Huh, seeing these re-introduced snapshots on Percy

alexcjohnson · 2020-07-27T15:39:26Z

 renderer = self._generate_renderer()
- title = getattr(self, "title", "Dash")
+
+ # use self.title instead of app.config.title for backwards compatibility


In principle we could make title into a @property that syncs app.title with app.config.title - but not a big deal. Most people should just use the kwarg regardless.

alexcjohnson

LGTM! 💃

alexcjohnson · 2020-07-27T15:43:45Z

Dunno what the deal is with the "reintroduced" percy snapshots - but I'd just ignore it this time and look into it if we see that again.

OverLordGoldDragon · 2020-07-30T20:11:17Z

Isn't below simpler?

definterpolate_index(self, **kwargs):
kwargs['title'] ='Custom Title'returndash.Dash.interpolate_index(self, **kwargs)
app.interpolate_index=interpolate_index.__get__(app)

alexcjohnson · 2020-07-31T02:09:05Z

I'm not sure what you mean @OverLordGoldDragon - simpler than app = dash.Dash(title='Custom Title')?

OverLordGoldDragon · 2020-07-31T12:57:38Z

@alexcjohnson Surely not, but your code blob isn't shown in this PR nor in Releases (it was unclear where the "title parameter" should go) - thanks for clarifying.

alexcjohnson · 2020-07-31T13:21:47Z

OIC - yeah, this PR expanded a bunch from its original purpose, so we never showed the simple examples - sorry for the confusion. We've documented the new behavior at https://dash.plotly.com/external-resources (though @chriddyp it feels to me a bit hidden on that page - maybe time for a dedicated dash.Dash class API reference page?)
As we've discussed, this is a big argument in favor of merging the docs into this repo - then https://github.com/plotly/dash-docs/pull/931 would have been part of this PR.

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

chriddyp requested review from Marc-Andre-Rivet and alexcjohnson as code owners July 23, 2020 16:57

don't override document.title if set to None
66bb5d3
This allows users to override `document.title` during runtime with a clientside callback or a special component (plotly/dash-core-components#833)

chriddyp mentioned this pull request Jul 23, 2020
A dcc.DocumentTitle Component for Updating the Page Title Dynamically plotly/dash-core-components#833
Open

add clientside page title test
2dcc00a

Marc-Andre-Rivet reviewed Jul 24, 2020
View reviewed changes

chriddyp added 3 commits July 23, 2020 19:27

fix logic
e190cc9

fix test
f8216b9

rm comments
104510e

chriddyp added 11 commits July 27, 2020 06:53

add title to dash config & docstrings
84266d7

update logic as per#1343 (comment)
5da53ce

pin isort to fix pylint tests
219a50b

add chained callback test case
e2a2911

get title from config
8e80ad9

threading things through
5f36766

rm undefined variable
864b1fb

id selector
09014a4

fix a couple tests
3a61fd4

fix tests
710269d

update changelog
057dca7

keep app.title backwards compatibility and add test
91a4aa5

trim trailing whitespace
d587495

alexcjohnson reviewed Jul 27, 2020
View reviewed changes

alexcjohnson approved these changes Jul 27, 2020
View reviewed changes

chriddyp merged commit 3435639 into devJul 27, 2020

chriddyp deleted the document-title branch July 27, 2020 15:43

alexcjohnson mentioned this pull request Jul 28, 2020
update_title option plotly/dashR#217
Open

justanothercoder99 mentioned this pull request May 13, 2026
[Feature Request] Customizing Document Title Per Callback #3782
Open

Uh oh!

Uh oh!

Conversation

chriddyp commented Jul 23, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marc-Andre-RivetJul 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jul 24, 2020

Uh oh!

alexcjohnson commented Jul 24, 2020

Uh oh!

alexcjohnson commented Jul 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chriddyp commented Jul 27, 2020

Uh oh!

chriddyp commented Jul 27, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

alexcjohnson commented Jul 27, 2020

Uh oh!

OverLordGoldDragon commented Jul 30, 2020

Uh oh!

alexcjohnson commented Jul 31, 2020

Uh oh!

OverLordGoldDragon commented Jul 31, 2020

Uh oh!

alexcjohnson commented Jul 31, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

chriddyp commented Jul 23, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marc-Andre-RivetJul 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jul 24, 2020

Uh oh!

alexcjohnson commented Jul 24, 2020

Uh oh!

alexcjohnson commented Jul 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chriddyp commented Jul 27, 2020

Uh oh!

chriddyp commented Jul 27, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcjohnson left a comment

chriddyp commented Jul 23, 2020•
edited
Loading

Marc-Andre-RivetJul 24, 2020•
edited
Loading

alexcjohnson commented Jul 24, 2020•
edited
Loading

chriddyp commented Jul 23, 2020•
edited
Loading

Marc-Andre-RivetJul 24, 2020•
edited
Loading

alexcjohnson commented Jul 24, 2020•
edited
Loading

chriddyp commented Jul 23, 2020•
edited
Loading

Marc-Andre-RivetJul 24, 2020•
edited
Loading

alexcjohnson commented Jul 24, 2020•
edited
Loading