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

Add loading states and prevent cells from being edited when table is loading.#484

Merged
shammamah-zz merged 18 commits into from
Sep 12, 2019
Merged

Add loading states and prevent cells from being edited when table is loading. #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
1bb06ab
Add loading state to DataTable props; add loading state interface.
Sep 9, 2019
41a3f2a
Use loading state to compute cell type (label or input).
Sep 9, 2019
051954e
Update copy-paste server test with cy.wait.
Sep 9, 2019
e029f1b
Add tests for uneditable loading states.
Sep 9, 2019
2a48aa0
Update src/dash-table/components/CellFactory.tsx
Sep 10, 2019
2da14e0
Prevent pasting when table data are loading.
Sep 10, 2019
f81a3dd
Wait for inputs to appear before pasting.
Sep 11, 2019
8dd3fe6
Move computation of data loading to separate file, and remove from Co…
Sep 11, 2019
8d67c79
Add entry to CHANGELOG.
Sep 11, 2019
80966c4
Add state and CSS selector for editable cells.
Sep 12, 2019
8d36fdb
Update Cypress tests.
Sep 12, 2019
1c1f2c8
Fix Python apps used in server test.
Sep 12, 2019
b465203
Add default test for delete_cells_test.
Sep 12, 2019
042a1b0
Move loading state out of calls to cellContents and partialGet.
Sep 12, 2019
40722c1
Always pass in false for data_loading in partialGet.
Sep 12, 2019
2d15ca4
Disable dropdowns when data are loading.
Sep 12, 2019
b8fd905
Add visual tests for disabled dropdowns.
Sep 12, 2019
c77b2cd
Add unit test for data_loading.
Sep 12, 2019
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
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
"private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
"private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
"private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
"private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
"private::host_dash8085": "python tests/cypress/dash/v_default.py",
"private::host_js": "http-server ./dash_table -c-1 --silent",
"private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
"private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
"private::wait_dash8081": "wait-on http://localhost:8081",
"private::wait_dash8082": "wait-on http://localhost:8082",
"private::wait_dash8083": "wait-on http://localhost:8083",
"private::wait_dash8084": "wait-on http://localhost:8084",
"private::wait_dash8085": "wait-on http://localhost:8085",
"private::wait_js": "wait-on http://localhost:8080",
"private::opentests": "cypress open",
"private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down
5 changes: 4 additions & 1 deletion src/dash-table/components/CellDropdown/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
dropdown?: IDropdownValue[];
onChange: (e: ChangeEvent) => void;
value: any;
disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
clearable,
dropdown,
onChange,
value
value,
disabled
} = this.props;

return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
options={dropdown}
placeholder={''}
value={value}
disabled={disabled}
/>
</div>);
}
Expand Down
13 changes: 10 additions & 3 deletions src/dash-table/components/CellFactory.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
style_data,
style_data_conditional,
virtualized,
visibleColumns
visibleColumns,
loading_state
} = this.props;

const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
selected_cells
);

const data_loading = dataLoading(loading_state);

const partialCellContents = this.cellContents.partialGet(
visibleColumns,
virtualized.data,
virtualized.offset,
!!is_focused,
dropdowns
dropdowns,
data_loading

@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.

@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!

);

const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
virtualized.data,
virtualized.offset,
!!is_focused,
dropdowns
dropdowns,
data_loading
);

const ops = this.getDataOpCells(
Expand Down
13 changes: 10 additions & 3 deletions src/dash-table/components/ControlledTable/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
sort_by,
viewport,
visibleColumns,
include_headers_on_copy_paste
include_headers_on_copy_paste,
loading_state
} = this.props;

if (!editable || !active_cell) {
if (!editable || !active_cell || dataLoading(loading_state)) {
return;
}

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
filter_action,
fixed_columns,
fixed_rows,
loading_state,
scrollbarWidth,
style_as_list_view,
style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
visibleColumns
} = this.props;

const isLoading = dataLoading(loading_state);

const fragmentClasses = [
[
fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
...(visibleColumns.length ? [] : ['dash-no-columns']),
...(virtualized.data.length ? [] : ['dash-no-data']),
...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
...(fill_width ? ['dash-fill-width'] : [])
...(fill_width ? ['dash-fill-width'] : []),
...(isLoading ? ['dash-loading'] : [])
];

const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down
2 changes: 1 addition & 1 deletion src/dash-table/components/Table/controlledPropsHelper.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
}
]) as ControlledTableProps;
};
};
};
12 changes: 12 additions & 0 deletions src/dash-table/components/Table/props.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
name: string | string[];
}

export interface ILoadingState {
is_loading: boolean;
prop_name: string | undefined;
component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
style_header_conditional?: Headers;
style_table?: Table;
virtualization?: boolean;

loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
virtual: IDerivedData;
virtual_selected_rows: Indices;
virtualized: IVirtualizedDerivedData;

loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
virtualization: boolean;
virtualized: IVirtualizedDerivedData;
visibleColumns: Columns;

loading_state?: ILoadingState;
}
21 changes: 20 additions & 1 deletion src/dash-table/dash/DataTable.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
*/
derived_virtual_selected_row_ids: PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.string, PropTypes.number])
)
),

/**
* Object that holds the loading state object coming from dash-renderer
*/
loading_state: PropTypes.shape({
/**
* Determines if the component is loading or not
*/
is_loading: PropTypes.bool,
/**
* Holds which property is loading
*/
prop_name: PropTypes.string,
/**
* Holds the name of the component that is loading
*/
component_name: PropTypes.string
})

};

DataTable.defaultProps = defaultProps;
Expand Down
25 changes: 16 additions & 9 deletions src/dash-table/derived/cell/contents.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
active: boolean,
editable: boolean,
dropdown: IDropdownValue[] | undefined,
presentation: Presentation | undefined
presentation: Presentation | undefined,
is_loading: boolean
): CellType {
switch (presentation) {
case Presentation.Input:
return (!active || !editable) ? CellType.Label : CellType.Input;
return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
case Presentation.Dropdown:
return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
default:
return (!active || !editable) ? CellType.Label : CellType.Input;
return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;

@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?

@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly

@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.

@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props

It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/

image

}
}

Expand All@@ -62,7 +63,8 @@ class Contents {
data: Data,
_offset: IViewportOffset,
isFocused: boolean,
dropdowns: (IDropdown | undefined)[][]
dropdowns: (IDropdown | undefined)[][],
data_loading: boolean
): JSX.Element[][] => {
const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
columnIndex,
rowIndex,
datum,
formatters
formatters,
data_loading
), columns), data);
});

Expand All@@ -87,7 +90,8 @@ class Contents {
data: Data,
offset: IViewportOffset,
isFocused: boolean,
dropdowns: (IDropdown | undefined)[][]
dropdowns: (IDropdown | undefined)[][],
data_loading: boolean
): JSX.Element[][] => {
if (!activeCell) {
return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
jActive,
iActive,
data[i],
formatters
formatters,
data_loading
);

return contents;
});

private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

const className = [
...(active ? ['input-active'] : []),
isFocused ? 'focused' : 'unfocused',
'dash-cell-value'
].join(' ');

const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

switch (cellType) {
case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
dropdown={dropdown && dropdown.options}
onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
value={datum[column.id]}
disabled={data_loading}
/>);
case CellType.Input:
return (<CellInput
Expand Down
7 changes: 7 additions & 0 deletions src/dash-table/derived/table/data_loading.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
loading_state: ILoadingState | undefined
) {
return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}
10 changes: 8 additions & 2 deletions tests/cypress/dash/v_copy_paste.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
# pylint: enable=unused-argument
if current is None or previous is None:
return current
if timestamp is None or current is None or previous is None:
raise PreventUpdate

modified = False
if len(current) == len(previous):
for (i, datum) in enumerate(current):
previous_datum = previous[i]
if datum[0] != previous_datum[0]:
modified = True
datum[1] = "MODIFIED"

if not modified:
raise PreventUpdate

return current

if __name__ == "__main__":
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

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

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

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

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading

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

Skip to content

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

Add loading states and prevent cells from being edited when table is loading.#484
 Merged

shammamah-zz
merged 18 commits into

from

Sep 12, 2019
 Merged


Add loading states and prevent cells from being edited when table is loading.
#484
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


18 commits


Select commit
Hold shift + click to select a range
1bb06ab

Add loading state to DataTable props; add loading state interface.

Sep 9, 2019
41a3f2a

Use loading state to compute cell type (label or input).

Sep 9, 2019
051954e

Update copy-paste server test with cy.wait.

Sep 9, 2019
e029f1b

Add tests for uneditable loading states.

Sep 9, 2019
2a48aa0

Update src/dash-table/components/CellFactory.tsx

Sep 10, 2019
2da14e0

Prevent pasting when table data are loading.

Sep 10, 2019
f81a3dd

Wait for inputs to appear before pasting.

Sep 11, 2019
8dd3fe6

Move computation of data loading to separate file, and remove from Co…

Sep 11, 2019
8d67c79

Add entry to CHANGELOG.

Sep 11, 2019
80966c4

Add state and CSS selector for editable cells.

Sep 12, 2019
8d36fdb

Update Cypress tests.

Sep 12, 2019
1c1f2c8

Fix Python apps used in server test.

Sep 12, 2019
b465203

Add default test for delete_cells_test.

Sep 12, 2019
042a1b0

Move loading state out of calls to cellContents and partialGet.

Sep 12, 2019
40722c1

Always pass in false for data_loading in partialGet.

Sep 12, 2019
2d15ca4

Disable dropdowns when data are loading.

Sep 12, 2019
b8fd905

Add visual tests for disabled dropdowns.

Sep 12, 2019
c77b2cd

Add unit test for data_loading.

Sep 12, 2019

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


5 changes: 5 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
[#18](https://github.com/plotly/dash-table/issues/18)
- Fix row selection vertical and horizontal alignment

### Added
[#319](https://github.com/plotly/dash-table/issues/319)
- New 'loading_state' prop that contains information about which prop, if any, is being computed.
- Table no longer allows for editing while the `data` prop is loading.

## [4.2.0] - 2019-08-27
### Added
[#317](https://github.com/plotly/dash-table/issues/317)
Expand Down

4 changes: 4 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,12 +25,16 @@
 "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
 "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
 "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
 "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
 "private::host_dash8085": "python tests/cypress/dash/v_default.py",
 "private::host_js": "http-server ./dash_table -c-1 --silent",
 "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
 "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
 "private::wait_dash8081": "wait-on http://localhost:8081",
 "private::wait_dash8082": "wait-on http://localhost:8082",
 "private::wait_dash8083": "wait-on http://localhost:8083",
 "private::wait_dash8084": "wait-on http://localhost:8084",
 "private::wait_dash8085": "wait-on http://localhost:8085",
 "private::wait_js": "wait-on http://localhost:8080",
 "private::opentests": "cypress open",
 "private::test.python": "python -m unittest tests/unit/format_test.py",
Expand Down

5 changes: 4 additions & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,7 @@ interface IProps {
 dropdown?: IDropdownValue[];
 onChange: (e: ChangeEvent) => void;
 value: any;
 disabled?: boolean;
}

export default class CellDropdown extends PureComponent<IProps> {
Expand All@@ -24,7 +25,8 @@ export default class CellDropdown extends PureComponent<IProps> {
 clearable,
 dropdown,
 onChange,
 value
 value,
 disabled
 } = this.props;

 return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
Expand All@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 options={dropdown}
 placeholder={''}
 value={value}
 disabled={disabled}
 />
 </div>);
 }
Expand Down

13 changes: 10 additions & 3 deletions
src/dash-table/components/CellFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
import { memoizeOne } from 'core/memoizer';
import memoizerCache from 'core/cache/memoizer';

import dataLoading from 'dash-table/derived/table/data_loading';

export default class CellFactory {

 private get props() {
Expand DownExpand Up@@ -51,7 +53,8 @@ export default class CellFactory {
 style_data,
 style_data_conditional,
 virtualized,
 visibleColumns
 visibleColumns,
 loading_state
 } = this.props;

 const relevantStyles = this.relevantStyles(
Expand DownExpand Up@@ -113,12 +116,15 @@ export default class CellFactory {
 selected_cells
 );

 const data_loading = dataLoading(loading_state);

 const partialCellContents = this.cellContents.partialGet(
 visibleColumns,
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Better, but what I meant is that we can omit this parameter completely for partialGet at the moment.
@shammamah-zzshammamah-zzSep 12, 2019

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.

Right, that makes sense!
 );

 const cellContents = this.cellContents.get(
Expand All@@ -128,7 +134,8 @@ export default class CellFactory {
 virtualized.data,
 virtualized.offset,
 !!is_focused,
 dropdowns
 dropdowns,
 data_loading
 );

 const ops = this.getDataOpCells(
Expand Down

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

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,8 @@ import TableTooltip from './fragments/TableTooltip';

import queryLexicon from 'dash-table/syntax-tree/lexicon/query';

import dataLoading from 'dash-table/derived/table/data_loading';

const DEFAULT_STYLE = {
 width: '100%'
};
Expand DownExpand Up@@ -581,10 +583,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 sort_by,
 viewport,
 visibleColumns,
 include_headers_on_copy_paste
 include_headers_on_copy_paste,
 loading_state
 } = this.props;

 if (!editable || !active_cell) {
 if (!editable || !active_cell || dataLoading(loading_state)) {
 return;
 }

Expand DownExpand Up@@ -718,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 filter_action,
 fixed_columns,
 fixed_rows,
 loading_state,
 scrollbarWidth,
 style_as_list_view,
 style_table,
Expand All@@ -733,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 visibleColumns
 } = this.props;

 const isLoading = dataLoading(loading_state);

 const fragmentClasses = [
 [
 fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
Expand DownExpand Up@@ -763,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ...(visibleColumns.length ? [] : ['dash-no-columns']),
 ...(virtualized.data.length ? [] : ['dash-no-data']),
 ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
 ...(fill_width ? ['dash-fill-width'] : [])
 ...(fill_width ? ['dash-fill-width'] : []),
 ...(isLoading ? ['dash-loading'] : [])
 ];

 const containerClasses = ['dash-spreadsheet-container', ...classes];
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Table/controlledPropsHelper.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -112,4 +112,4 @@ export default () => {
 }
 ]) as ControlledTableProps;
 };
};
};

12 changes: 12 additions & 0 deletions
src/dash-table/components/Table/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,6 +164,12 @@ export interface IBaseColumn {
 name: string | string[];
}

export interface ILoadingState {
 is_loading: boolean;
 prop_name: string | undefined;
 component_name: string | undefined;
}

export type ConditionalDropdowns = IConditionalDropdown[];
export type DataDropdowns = Partial<IDataDropdowns>[];
export type DataTooltips = Partial<ITableTooltips>[];
Expand DownExpand Up@@ -307,6 +313,8 @@ export interface IProps {
 style_header_conditional?: Headers;
 style_table?: Table;
 virtualization?: boolean;

 loading_state?: ILoadingState;
}

interface IDefaultProps {
Expand DownExpand Up@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
 virtual: IDerivedData;
 virtual_selected_rows: Indices;
 virtualized: IVirtualizedDerivedData;

 loading_state: ILoadingState | undefined;
};

export type SetFilter = (
Expand DownExpand Up@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
 virtualization: boolean;
 virtualized: IVirtualizedDerivedData;
 visibleColumns: Columns;

 loading_state?: ILoadingState;
}

21 changes: 20 additions & 1 deletion
src/dash-table/dash/DataTable.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1206,7 +1206,26 @@ export const propTypes = {
 */
 derived_virtual_selected_row_ids: PropTypes.arrayOf(
 PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 )
 ),

 /**
 * Object that holds the loading state object coming from dash-renderer
 */
 loading_state: PropTypes.shape({
 /**
 * Determines if the component is loading or not
 */
 is_loading: PropTypes.bool,
 /**
 * Holds which property is loading
 */
 prop_name: PropTypes.string,
 /**
 * Holds the name of the component that is loading
 */
 component_name: PropTypes.string
 })

};

DataTable.defaultProps = defaultProps;
Expand Down

25 changes: 16 additions & 9 deletions
src/dash-table/derived/cell/contents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -35,15 +35,16 @@ function getCellType(
 active: boolean,
 editable: boolean,
 dropdown: IDropdownValue[] | undefined,
 presentation: Presentation | undefined
 presentation: Presentation | undefined,
 is_loading: boolean
): CellType {
 switch (presentation) {
 case Presentation.Input:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
 case Presentation.Dropdown:
 return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
 default:
 return (!active || !editable) ? CellType.Label : CellType.Input;
 return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

As is, won't the dropdowns still be editable when the table is loading?
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Making it a label has UI/presentation implications though.. I don't remember if the dropdown library we use allows us to make the dropdown readonly
@shammamah-zzshammamah-zzSep 12, 2019

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.

That's why I left the loading states info out of the dropdowns -- wasn't sure exactly what would happen or what "editing" means in that case.
@Marc-Andre-RivetMarc-Andre-RivetSep 12, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looking at the documentation for react-select there seems to be a isDisabled prop
https://react-select.com/props
It reacts somewhat like we would want I think -- except maybe for default styling
https://jedwatson.github.io/react-select/
image
 }
}

Expand All@@ -62,7 +63,8 @@ class Contents {
 data: Data,
 _offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 const formatters = R.map(getFormatter, columns);

Expand All@@ -76,7 +78,8 @@ class Contents {
 columnIndex,
 rowIndex,
 datum,
 formatters
 formatters,
 data_loading
 ), columns), data);
 });

Expand All@@ -87,7 +90,8 @@ class Contents {
 data: Data,
 offset: IViewportOffset,
 isFocused: boolean,
 dropdowns: (IDropdown | undefined)[][]
 dropdowns: (IDropdown | undefined)[][],
 data_loading: boolean
 ): JSX.Element[][] => {
 if (!activeCell) {
 return contents;
Expand All@@ -112,20 +116,22 @@ class Contents {
 jActive,
 iActive,
 data[i],
 formatters
 formatters,
 data_loading
 );

 return contents;
 });

 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
 private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {

 const className = [
 ...(active ? ['input-active'] : []),
 isFocused ? 'focused' : 'unfocused',
 'dash-cell-value'
 ].join(' ');

 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
 const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);

 switch (cellType) {
 case CellType.Dropdown:
Expand All@@ -136,6 +142,7 @@ class Contents {
 dropdown={dropdown && dropdown.options}
 onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
 value={datum[column.id]}
 disabled={data_loading}
 />);
 case CellType.Input:
 return (<CellInput
Expand Down

7 changes: 7 additions & 0 deletions
src/dash-table/derived/table/data_loading.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import { ILoadingState } from 'dash-table/components/Table/props';

export default function dataLoading(
 loading_state: ILoadingState | undefined
) {
 return (loading_state && loading_state.is_loading && (loading_state.prop_name === 'data' || loading_state.prop_name === '' || loading_state.prop_name === undefined) ? true : false);
}

10 changes: 8 additions & 2 deletions
tests/cypress/dash/v_copy_paste.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_html_components as html
import os
import pandas as pd
Expand DownExpand Up@@ -85,15 +86,20 @@
# pylint: disable=unused-argument
def updateData(timestamp, current, previous):
 # pylint: enable=unused-argument
 if current is None or previous is None:
return current
 if timestamp is None or current is None or previous is None:
raise PreventUpdate

 modified = False
 if len(current) == len(previous):
 for (i, datum) in enumerate(current):
 previous_datum = previous[i]
 if datum[0] != previous_datum[0]:
 modified = True
 datum[1] = "MODIFIED"

 if not modified:
 raise PreventUpdate

 return current

if __name__ == "__main__":
Expand Down
Loading