Merge pull request plotly#484 from plotly/loading-states-uneditable

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

Author: Shammamah Hossain

Diff for: packages/dash-table/CHANGELOG.md

@@ -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)

Diff for: packages/dash-table/package.json

@@ -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",

Diff for: packages/dash-table/src/dash-table/components/CellDropdown/index.tsx

@@ -16,6 +16,7 @@ interface IProps {
     dropdown?: IDropdownValue[];
     onChange: (e: ChangeEvent) => void;
     value: any;
+    disabled?: boolean;
 }
 
 export default class CellDropdown extends PureComponent<IProps> {
@@ -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'>
@@ -41,6 +43,7 @@ export default class CellDropdown extends PureComponent<IProps> {
                 options={dropdown}
                 placeholder={''}
                 value={value}
+                disabled={disabled}
             />
         </div>);
     }

Diff for: packages/dash-table/src/dash-table/components/CellFactory.tsx

@@ -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() {
@@ -51,7 +53,8 @@ export default class CellFactory {
             style_data,
             style_data_conditional,
             virtualized,
-            visibleColumns
+            visibleColumns,
+            loading_state
         } = this.props;
 
         const relevantStyles = this.relevantStyles(
@@ -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
         );
 
         const cellContents = this.cellContents.get(
@@ -128,7 +134,8 @@ export default class CellFactory {
             virtualized.data,
             virtualized.offset,
             !!is_focused,
-            dropdowns
+            dropdowns,
+            data_loading
         );
 
         const ops = this.getDataOpCells(

Diff for: packages/dash-table/src/dash-table/components/ControlledTable/index.tsx

@@ -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%'
 };
@@ -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;
         }
 
@@ -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,
@@ -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' : '',
@@ -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];

Diff for: packages/dash-table/src/dash-table/components/Table/controlledPropsHelper.ts

@@ -112,4 +112,4 @@ export default () => {
             }
         ]) as ControlledTableProps;
     };
-};
+};

Diff for: packages/dash-table/src/dash-table/components/Table/props.ts

@@ -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>[];
@@ -307,6 +313,8 @@ export interface IProps {
     style_header_conditional?: Headers;
     style_table?: Table;
     virtualization?: boolean;
+
+    loading_state?: ILoadingState;
 }
 
 interface IDefaultProps {
@@ -401,6 +409,8 @@ export type ControlledTableProps = SanitizedProps & IState & {
     virtual: IDerivedData;
     virtual_selected_rows: Indices;
     virtualized: IVirtualizedDerivedData;
+
+    loading_state: ILoadingState | undefined;
 };
 
 export type SetFilter = (
@@ -468,4 +478,6 @@ export interface ICellFactoryProps {
     virtualization: boolean;
     virtualized: IVirtualizedDerivedData;
     visibleColumns: Columns;
+
+    loading_state?: ILoadingState;
 }

Diff for: packages/dash-table/src/dash-table/dash/DataTable.js

@@ -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;

Diff for: packages/dash-table/src/dash-table/derived/cell/contents.tsx

@@ -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;
     }
 }
 
@@ -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);
 
@@ -76,7 +78,8 @@ class Contents {
                     columnIndex,
                     rowIndex,
                     datum,
-                    formatters
+                    formatters,
+                    data_loading
                 ), columns), data);
     });
 
@@ -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;
@@ -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:
@@ -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

Diff for: packages/dash-table/src/dash-table/derived/table/data_loading.ts

@@ -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);
+}

Diff for: packages/dash-table/tests/cypress/dash/v_copy_paste.py

@@ -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
@@ -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__":