Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785

Merged
Marc-Andre-Rivet merged 13 commits into from
Jun 17, 2020
Merged

Re-render on changes to undefined props #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
52b5a36
use dash state-machine branch
May 26, 2020
1defea2
noise
May 27, 2020
36885d7
3.7.6
May 27, 2020
bf0d25c
remove cache
May 27, 2020
dc01001
re-render on previously missing props
May 29, 2020
7b46e05
make sure the graphs are visible before taking snapshot
May 29, 2020
70a038d
noise
Jun 5, 2020
617e1d8
Merge branch 'dev' into state-machine
Marc-Andre-Rivet Jun 5, 2020
74d51ee
noise
Jun 10, 2020
9069a19
Update config.yml
Marc-Andre-Rivet Jun 15, 2020
0488ad2
Merge branch 'dev' into state-machine
Marc-Andre-Rivet Jun 17, 2020
a30121e
Merge branch 'state-machine' of github.com:plotly/dash-table into sta…
Jun 17, 2020
8849e85
unit test table shouldComponentUpdate condition
Jun 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- Clicking on a link in a Markdown cell now requires a single click instead of two
- Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down
10 changes: 3 additions & 7 deletions src/dash-table/components/Table/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
const props: any = this.props;
const state: any = this.state;

return R.any(key =>
!DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
R.keysIn(props)
) || !isEqual(state, nextState);
return shouldComponentUpdate(props, nextProps, state, nextState);
}

render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
private readonly controlledPropsHelper = controlledPropsHelper();
private readonly updateDerivedProps = derivedPropsHelper();
}

14 changes: 14 additions & 0 deletions src/dash-table/components/Table/shouldComponentUpdate.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
props: any,
nextProps: any,
state: any,
nextState: any
) => R.any(
key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);
27 changes: 27 additions & 0 deletions tests/cypress/tests/unit/table_update_test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
it('should update on undefined -> defined props', () => {
assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
});

it('should update on undefined -> defined state', () => {
assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));

@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13

});

it('should update on defined -> undefined props', () => {
assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
});

it('should update on defined -> undefined state', () => {
assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
});

it('should not update on derived props', () => {
assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
});

it('should update on derived state', () => {
assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
});
});
3 changes: 3 additions & 0 deletions tests/integration/review_app/test_app_df_graph.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
dash_duo.wait_for_element("#waitfor")

dash_duo.wait_for_element("#{}".format(IDS["table"]))
dash_duo.wait_for_element("#pop svg")
dash_duo.wait_for_element("#lifeExp svg")
dash_duo.wait_for_element("#gdpPercap svg")

@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready


dash_duo.percy_snapshot("rapp002 - loaded")
, '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" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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('^' + ".*" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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('^' + ".*" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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('^' + ".*" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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('^' + ".*" + '
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")

, '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); }
})();
})();
Re-render on changes to undefined props by Marc-Andre-Rivet · Pull Request #785 · plotly/dash-table · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Re-render on changes to undefined props#785
 Merged

Marc-Andre-Rivet
merged 13 commits into

from

Jun 17, 2020
 Merged


Re-render on changes to undefined props
#785
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
52b5a36

use dash state-machine branch

May 26, 2020
1defea2

noise

May 27, 2020
36885d7

3.7.6

May 27, 2020
bf0d25c

remove cache

May 27, 2020
dc01001

re-render on previously missing props

May 29, 2020
7b46e05

make sure the graphs are visible before taking snapshot

May 29, 2020
70a038d

noise

Jun 5, 2020
617e1d8

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 5, 2020
74d51ee

noise

Jun 10, 2020
9069a19

Update config.yml


Marc-Andre-Rivet Jun 15, 2020
0488ad2

Merge branch 'dev' into state-machine


Marc-Andre-Rivet Jun 17, 2020
a30121e

Merge branch 'state-machine' of github.com:plotly/dash-table into sta…

Jun 17, 2020
8849e85

unit test table shouldComponentUpdate condition

Jun 17, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 3 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Clicking on a link in a Markdown cell now requires a single click instead of two
 - Links in Markdown cells now open a new tab (target="_blank")

### Fixed
- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing

## [4.7.0] - 2020-05-05
### Added
- [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling
Expand Down

10 changes: 3 additions & 7 deletions
src/dash-table/components/Table/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
import './Table.less';
import './style';
import './Dropdown.css';
import { isEqual } from 'core/comparer';
import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
import derivedFilterMap from 'dash-table/derived/filter/map';

import controlledPropsHelper from './controlledPropsHelper';
import derivedPropsHelper from './derivedPropsHelper';
import DOM from 'core/browser/DOM';

const DERIVED_REGEX = /^derived_/;
import shouldComponentUpdate from './shouldComponentUpdate';

export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
 constructor(props: SanitizedAndDerivedProps) {
Expand DownExpand Up@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 const props: any = this.props;
 const state: any = this.state;

 return R.any(key =>
 !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn(props)
 ) || !isEqual(state, nextState);
 return shouldComponentUpdate(props, nextProps, state, nextState);
 }

 render() {
Expand DownExpand Up@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
 private readonly controlledPropsHelper = controlledPropsHelper();
 private readonly updateDerivedProps = derivedPropsHelper();
}


14 changes: 14 additions & 0 deletions
src/dash-table/components/Table/shouldComponentUpdate.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import * as R from 'ramda';
import { isEqual } from 'core/comparer';

const DERIVED_REGEX = /^derived_/;

export default (
 props: any,
 nextProps: any,
 state: any,
 nextState: any
) => R.any(
 key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
 R.keysIn({ ...props, ...nextProps })
) || !isEqual(state, nextState);

27 changes: 27 additions & 0 deletions
tests/cypress/tests/unit/table_update_test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';

describe('shouldComponentUpdate', () => {
 it('should update on undefined -> defined props', () => {
 assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
 });

 it('should update on undefined -> defined state', () => {
 assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
@Marc-Andre-RivetMarc-Andre-RivetJun 17, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test fails without the added ...nextProps8849e85#diff-aa707fa377faf64638e062a12fb52d85R13
 });

 it('should update on defined -> undefined props', () => {
 assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
 });

 it('should update on defined -> undefined state', () => {
 assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
 });

 it('should not update on derived props', () => {
 assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
 });

 it('should update on derived state', () => {
 assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
 });
});

3 changes: 3 additions & 0 deletions
tests/integration/review_app/test_app_df_graph.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
 dash_duo.wait_for_element("#waitfor")

 dash_duo.wait_for_element("#{}".format(IDS["table"]))
 dash_duo.wait_for_element("#pop svg")
 dash_duo.wait_for_element("#lifeExp svg")
 dash_duo.wait_for_element("#gdpPercap svg")
@Marc-Andre-RivetMarc-Andre-RivetJun 11, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight changes in timing / rendering require the test to be more specific and wait for the graph to be ready

 dash_duo.percy_snapshot("rapp002 - loaded")