3.1 props refactoring

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+# Version 3.0 (ALPHA)
+
+Version 3.0 of the Dash-Table expands vastly on the capability of the 2.x table and provides features:
+
+    - visually freezing rows and/or columns
+    - filtering in either FE or BE, basic filtering UI
+    - sorting in either FE or BE, basic sorting UI
+    - pagination in either FE or BE, basic pagination UI
+    - performance optimizations
+    - basic coverage through e2e, integration and unit tests
+
 ## RC1, RC2, RC3, RC4 (Virtualization, Freeze, Deletable & Editable Columns, Performance)
 
 ### Virtualization
@@ -188,3 +199,37 @@
     Issue: https://github.com/plotly/dash-table/issues/91
 
     Sorting arrow will no longer highlight.
+
+# Version 3.1 (BETA)
+
+Version 3.1 of the Dash-Table builds upon the 3.0 table and solidifies the external facing API of the table
+
+    - introducing the notion of derived properties
+
+    - virtual and viewport dataframe and indices for more flexibility
+    - code refactoring to simplify and improve the existing implementation / prepare for the future
+    - documentation of the API and table features
+    - additional e2e, integration and unit tests for a more mature development platform
+
+### Derived Properties
+
+Derived properties are new to 3.1
+They are readonly properties that represent a transform from multiple 'first-class' properties of the component.
+
+For example, derived_viewport_dataframe is a readonly view based on
+    f(dataframe, filtering params, sorting params, pagination params) --> derived_viewport_dataframe
+
+Derived properties allow the component to expose complex state that can be useful for a Dash Server developer but without introducing dual states, a situation where multiple properties may represent the same state within the component, making it necessary to reconcile them on each prop update.
+
+## RC1 - Virtual and Viewport Dataframe
+
+    - 4 new external facing derived properties and 4 internal facing controlled properties that represent:
+        1. the filtered and sorted dataframe and the indices mapping
+        2. the filtered, sorted and paginated dataframe and the indices mapping
+
+        - derived_viewport_dataframe
+        - derived_viewport_indices
+        - derived_virtual_dataframe
+        - derived_virtual_indices
+
+        In the event where sorting, filtering or pagination is done on the Dash Server, it is possible that some or all derived dataframes will be equal to the dataframe prop.

dash_table/metadata.json

@@ -227,7 +227,7 @@
           "computed": false
         }
       },
-      "virtualization": {
+      "pagination_mode": {
         "type": {
           "name": "enum",
           "value": [
@@ -256,7 +256,7 @@
           "computed": false
         }
       },
-      "virtualization_settings": {
+      "pagination_settings": {
         "type": {
           "name": "shape",
           "value": {
@@ -647,7 +647,7 @@
         "required": false,
         "description": ""
       },
-      "virtual_dataframe": {
+      "derived_viewport_dataframe": {
         "type": {
           "name": "arrayOf",
           "value": {
@@ -661,7 +661,7 @@
           "computed": false
         }
       },
-      "virtual_dataframe_indices": {
+      "derived_viewport_indices": {
         "type": {
           "name": "arrayOf",
           "value": {
@@ -675,51 +675,44 @@
           "computed": false
         }
       },
-      "dropdown_properties": {
+      "derived_virtual_dataframe": {
         "type": {
-          "name": "any"
+          "name": "arrayOf",
+          "value": {
+            "name": "object"
+          }
         },
         "required": false,
-        "description": ""
-      },
-      "column_conditional_styles": {
+        "description": "",
         "defaultValue": {
           "value": "[]",
           "computed": false
-        },
-        "required": false
-      },
-      "changed_data": {
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        },
-        "required": false
+        }
       },
-      "index_name": {
-        "defaultValue": {
-          "value": "''",
-          "computed": false
+      "derived_virtual_indices": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
         },
-        "required": false
-      },
-      "types": {
+        "required": false,
+        "description": "",
         "defaultValue": {
-          "value": "{}",
+          "value": "[]",
           "computed": false
-        },
-        "required": false
+        }
       },
-      "merged_styles": {
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
+      "dropdown_properties": {
+        "type": {
+          "name": "any"
         },
-        "required": false
+        "required": false,
+        "description": ""
       },
-      "base_styles": {
+      "column_conditional_styles": {
         "defaultValue": {
-          "value": "{\n    numeric: {\n        'text-align': 'right',\n        'font-family': `'Droid Sans Mono', Courier, monospace`\n    },\n\n    string: {\n        'text-align': 'left'\n    },\n\n    input: {\n        padding: 0,\n        margin: 0,\n        width: '80px',\n        border: 'none',\n        'font-size': '1rem'\n    },\n\n    'input-active': {\n        outline: '#7FDBFF auto 3px'\n    },\n\n    table: {},\n\n    thead: {},\n\n    th: {},\n\n    td: {}\n}",
+          "value": "[]",
           "computed": false
         },
         "required": false

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc22",
+  "version": "3.1.0rc1",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc22",
+  "version": "3.1.0rc1",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/core/memoizer.ts

@@ -1,6 +1,12 @@
 import { isEqualArgs } from 'core/comparer';
 import { ResultFn } from 'core/generic';
 
+interface ICachedResultFn<TEntry> {
+    result: TEntry;
+    cached: boolean;
+    first: boolean;
+}
+
 export function memoizeOne<
     TArgs extends any[],
     TEntry
@@ -15,6 +21,31 @@ export function memoizeOne<
     };
 }
 
+export function memoizeOneFactory<
+    TArgs extends any[],
+    TEntry
+    >(fn: ResultFn<TArgs, TEntry>): () => ResultFn<TArgs, TEntry> {
+    return () => memoizeOne(fn);
+}
+
+export function memoizeOneWithFlag<
+    TArgs extends any[],
+    TEntry
+    >(fn: ResultFn<TArgs, TEntry>): ResultFn<TArgs, ICachedResultFn<TEntry>> {
+    let lastArgs: any[] | null = null;
+    let lastResult: any;
+    let isFirst = true;
+
+    return (...args: TArgs): ICachedResultFn<TEntry> => {
+        let res = isEqualArgs(lastArgs, args) ?
+            { cached: true, first: isFirst, result: lastResult } :
+            { cached: false, first: isFirst, result: (lastArgs = args) && (lastResult = fn(...args)) };
+        isFirst = false;
+
+        return res;
+    };
+}
+
 export function memoizeAll<
     TArgs extends any[],
     TEntry

src/dash-table/Table.js

@@ -12,8 +12,8 @@ export default class Table extends Component {
 }
 
 export const defaultProps = {
-    virtualization: 'fe',
-    virtualization_settings: {
+    pagination_mode: 'fe',
+    pagination_settings: {
         displayed_pages: 1,
         current_page: 0,
         page_size: 250
@@ -28,8 +28,10 @@ export const defaultProps = {
     sorting_type: 'single',
     sorting_settings: [],
 
-    virtual_dataframe: [],
-    virtual_dataframe_indices: [],
+    derived_viewport_dataframe: [],
+    derived_viewport_indices: [],
+    derived_virtual_dataframe: [],
+    derived_virtual_indices: [],
 
     column_conditional_dropdowns: [],
     column_static_dropdown: [],
@@ -40,48 +42,14 @@ export const defaultProps = {
     row_conditional_styles: [],
     row_static_style: {},
 
-    changed_data: {},
     dataframe: [],
     columns: [],
     editable: false,
     active_cell: [],
-    index_name: '',
-    types: {},
-    merged_styles: {},
     selected_cell: [[]],
     selected_rows: [],
     row_selectable: false,
-    table_style: [],
-    base_styles: {
-        numeric: {
-            'text-align': 'right',
-            'font-family': `'Droid Sans Mono', Courier, monospace`
-        },
-
-        string: {
-            'text-align': 'left'
-        },
-
-        input: {
-            padding: 0,
-            margin: 0,
-            width: '80px',
-            border: 'none',
-            'font-size': '1rem'
-        },
-
-        'input-active': {
-            outline: '#7FDBFF auto 3px'
-        },
-
-        table: {},
-
-        thead: {},
-
-        th: {},
-
-        td: {}
-    }
+    table_style: []
 };
 
 export const propTypes = {
@@ -111,8 +79,8 @@ export const propTypes = {
         rule: PropTypes.string
     })),
 
-    virtualization: PropTypes.oneOf(['fe', 'be', true, false]),
-    virtualization_settings: PropTypes.shape({
+    pagination_mode: PropTypes.oneOf(['fe', 'be', true, false]),
+    pagination_settings: PropTypes.shape({
         displayed_pages: PropTypes.number,
         current_page: PropTypes.number,
         page_size: PropTypes.number
@@ -171,8 +139,10 @@ export const propTypes = {
     })),
     sorting_treat_empty_string_as_none: PropTypes.bool,
 
-    virtual_dataframe: PropTypes.arrayOf(PropTypes.object),
-    virtual_dataframe_indices: PropTypes.arrayOf(PropTypes.number),
+    derived_viewport_dataframe: PropTypes.arrayOf(PropTypes.object),
+    derived_viewport_indices: PropTypes.arrayOf(PropTypes.number),
+    derived_virtual_dataframe: PropTypes.arrayOf(PropTypes.object),
+    derived_virtual_indices: PropTypes.arrayOf(PropTypes.number),
 
     dropdown_properties: PropTypes.any,
 };

src/dash-table/components/CellFactory.tsx

@@ -217,19 +217,17 @@ export default class CellFactory {
             row_deletable,
             row_selectable,
             selected_cell,
-            virtualizer
+            viewport
         } = this.props;
 
-        const { dataframe, indices } = virtualizer;
-
         const visibleColumns = columns.filter(column => !column.hidden);
 
         const offset =
             (row_deletable ? 1 : 0) +
             (row_selectable ? 1 : 0);
 
-        return dataframe.map((datum, virtualIdx) => {
-            const realIdx = indices[virtualIdx];
+        return viewport.dataframe.map((datum, viewportIdx) => {
+            const realIdx = viewport.indices[viewportIdx];
 
             const deleteCell = this.rowDeleteCell(realIdx);
             const selectCell = this.rowSelectCell(realIdx);
@@ -267,20 +265,20 @@ export default class CellFactory {
 
                 return (<Cell
                     key={`${column.id}-${visibleIndex}`}
-                    active={active_cell[0] === virtualIdx && active_cell[1] === index + offset}
+                    active={active_cell[0] === viewportIdx && active_cell[1] === index + offset}
                     classes={classes}
                     clearable={column.clearable}
                     conditionalDropdowns={conditionalDropdowns}
                     conditionalStyles={conditionalStyles}
                     datum={datum}
                     editable={editable}
                     focused={!!is_focused}
-                    onClick={this.getEventHandler(this.handleClick, virtualIdx, index)}
-                    onDoubleClick={this.getEventHandler(this.handleDoubleClick, virtualIdx, index)}
+                    onClick={this.getEventHandler(this.handleClick, viewportIdx, index)}
+                    onDoubleClick={this.getEventHandler(this.handleDoubleClick, viewportIdx, index)}
                     onPaste={this.handlePaste}
                     onChange={this.getEventHandler(this.handleChange, realIdx, index)}
                     property={column.id}
-                    selected={R.contains([virtualIdx, index + offset], selected_cell)}
+                    selected={R.contains([viewportIdx, index + offset], selected_cell)}
                     staticDropdown={staticDropdown}
                     staticStyle={staticStyle}
                     tableId={id}