Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); [wip] previous state support by chriddyp · Pull Request #140 · plotly/dash · GitHub
Skip to content

[wip] previous state support - #140

Closed
chriddyp wants to merge 1 commit into
masterfrom
previous-state
Closed

[wip] previous state support#140
chriddyp wants to merge 1 commit into
masterfrom
previous-state

Conversation

@chriddyp

@chriddypchriddyp commented Oct 4, 2017

Copy link
Copy Markdown
Member

depends on plotly/dash-renderer#25

experimental usage

# -*- coding: utf-8 -*-importdashfromdash.dependenciesimportInput, Output, PrevInputimportdash_html_componentsashtmlimportdash_core_componentsasdccapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Button('Button 1', id='button-1', n_clicks=0),
html.Button('Button 2', id='button-2', n_clicks=0),
html.Pre(id='output')
])
@app.callback(Output('output', 'children'), [Input('button-1', 'n_clicks'), Input('button-2', 'n_clicks')],prev_inputs=[PrevInput('button-1', 'n_clicks'),PrevInput('button-2', 'n_clicks') ])defupdate_output(b1, b2, prev_b1, prev_b2):
s=''' Button 1 was clicked {} → {} times and Button 2 was clicked {} → {} times '''.format(prev_b1, b1, prev_b2, b2)
ifb1>prev_b1:
s+='\nWhich means that Button 1 was clicked'elifb2>prev_b2:
s+='\nWhich means that Button 2 was clicked'returnsif__name__=='__main__':
app.run_server(debug=True)

previous-state

@chriddypchriddyp changed the title first pass at adding previous state support[wip] previous state supportOct 4, 2017
@chriddypchriddyp mentioned this pull request Nov 7, 2017
@akhmerov

Copy link
Copy Markdown

Isn't figuring out the source of the click a more common pattern than needing the previous state? The alternative to this PR would be to pass the event emitter and event type to the callback.

@mikesmith1611

mikesmith1611 commented Dec 13, 2017

Copy link
Copy Markdown

An alternative would be to allow an Output element to have multiple callbacks assigned to it. This way you can have a callback function for each input separately. Although I have no idea if this is even possible!

@chriddyp

Copy link
Copy Markdown
MemberAuthor

Isn't figuring out the source of the click a more common pattern than needing the previous state?

It may be, but providing the previous state allows you to do both.

An alternative would be to allow an Output element to have multiple callbacks assigned to it.

I'm afraid that this would cause too much ambiguity (for example, what should happen if the same input was in both outputs - would you call both callbacks or just one?) - I think that there was a discussion about this in the community forum somewhere.

@akhmerov

Copy link
Copy Markdown

It may be, but providing the previous state allows you to do both.

Is it guaranteed that all events are possible to get by diffing with the previous state?

@akhmerov

Copy link
Copy Markdown

Another question: is there anything that is not possible to do if the event information is provided to the callback, as opposed to the previous state?

@ned2

ned2 commented Dec 28, 2017

Copy link
Copy Markdown
Contributor

My inclination is that I would also prefer the capacity to determine the origin of the Event/Input/State rather than diffing against a previous state.

Even if you can achieve the desired functionality by diffing a previous state, my hunch is that targeting values based on their source component would provide a more intuitive interface.

As mentioned in #159, I already find the callback function signature a bit unwieldy to keep track of arguments, and the proposed change compounds this issue.

@mattare2

Copy link
Copy Markdown

I have a short-term workaround for this @ned2:

In this scheme, click events are all passed through their individual hidden div functions. The hidden div functions pass a timestamp which in turn is input to my primary callback. Click origins are finally determined by the most recent timestamp passed as input to the primary callback, while their content is passed as a state variable.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Before I just close this stale PR, let me ask @chriddyp and those who've commented on this thread: now that we have an n_clicks_timestamp property everywhere (and corresponding for other event properties) to tell you the most recent event, is there still a use case for knowing the previous state?

@chriddyp

Copy link
Copy Markdown
MemberAuthor

In some components, like datatable, its helpful to know the entire previous property to determine "which cells have changed". We introduced that in the component level with dataframe_previous. I can't think of any other components that have a similar need right now, but there could be in the future.

Re 'determining which property has changed': For usability in the future, I think that some type of first-class "which component has changed" would be a better solution than this previous state idea, perhaps as part of a dash.request. global object (mentioned briefly here: #475 (comment)). That would make it more consistent (we wouldn't be depending on component authors to adhere to the convention of the _timestamp property). Also note that not all event properties have the _timestamp property yet (e.g. all of the value properties in the dash-core-components).

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Thanks @chriddyp - good to know about dataframe_previous. Closing this PR, if anyone has things to add to this discussion - ideally along with a specific use case we are not currently serving well - I would love to hear about it but please open an issue.

@alexcjohnson
alexcjohnson deleted the previous-state branch February 4, 2019 18:01
byronz pushed a commit that referenced this pull request Apr 23, 2019
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
…whitespace
Fix word case and remove whitespace.
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this pull request May 28, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
* Isolate css normalization so it impacts only the dash-table
* increase default styling specificity
* fix visual regression on delete column
HammadTheOne pushed a commit that referenced this pull request Jul 23, 2021
AnnMarieW pushed a commit to AnnMarieW/dash that referenced this pull request Jan 6, 2022
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@chriddyp@akhmerov@mikesmith1611@ned2@mattare2@alexcjohnson