3.1 props fixes

CHANGELOG.md

@@ -266,4 +266,8 @@ Derived properties allow the component to expose complex state that can be usefu
         * (CLASS) dash-freeze-top
         * (CLASS) dash-spreadsheet
         * (CLASS) dash-spreadsheet-container
-        * (CLASS) dash-spreadsheet-inner
+        * (CLASS) dash-spreadsheet-inner
+
+## RC3 - Miscellaneous fixes for pagination, virtual df and viewport df
+
+    Issue: https://github.com/plotly/dash-table/pull/112

dash_table/package.json

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

package.json

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

src/dash-table/components/FilterFactory.tsx

@@ -24,7 +24,7 @@ export interface IFilterOptions {
 
 export default class FilterFactory {
     private readonly handlers = new Map();
-    private readonly ops = new Map<ColumnId, string>();
+    private readonly ops = new Map<string, string>();
 
     private get props() {
         return this.propsFn();
@@ -40,9 +40,9 @@ export default class FilterFactory {
         const value = ev.target.value.trim();
 
         if (value && value.length) {
-            ops.set(columnId, value);
+            ops.set(columnId.toString(), value);
         } else {
-            ops.delete(columnId);
+            ops.delete(columnId.toString());
         }
 
         setFilter(R.map(
@@ -142,13 +142,13 @@ export default class FilterFactory {
     }
 
     private isFragmentValidOrNull(columnId: ColumnId) {
-        const op = this.ops.get(columnId);
+        const op = this.ops.get(columnId.toString());
 
         return !op || !op.trim().length || this.isFragmentValid(columnId);
     }
 
     private isFragmentValid(columnId: ColumnId) {
-        const op = this.ops.get(columnId);
+        const op = this.ops.get(columnId.toString());
 
         const lexerResult = lexer(`${columnId} ${op}`);
         const syntaxerResult = syntaxer(lexerResult);
@@ -182,7 +182,7 @@ export default class FilterFactory {
                     isValid={this.isFragmentValidOrNull(column.id)}
                     property={column.id}
                     setFilter={this.getEventHandler(this.onChange, column.id, this.ops, setFilter)}
-                    value={this.ops.get(column.id)}
+                    value={this.ops.get(column.id.toString())}
                 />);
             }, columns) :
             [(<AdvancedFilter

src/dash-table/components/Table/index.tsx

@@ -29,6 +29,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
         super(props);
 
         this.controlled = this.getControlledProps(this.props);
+        this.updateDerivedProps();
     }
 
     componentWillReceiveProps(nextProps: PropsWithDefaultsAndDerived) {
@@ -84,7 +85,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
             pagination_mode,
             pagination_settings,
             setProps,
-            viewport.dataframe
+            virtual.dataframe
         );
 
         const visibleColumns = this.visibleColumns(columns);

src/dash-table/components/Table/props.ts

@@ -6,6 +6,11 @@ export enum FilteringType {
     Basic = 'basic'
 }
 
+export interface IDerivedDataframe {
+    dataframe: Dataframe;
+    indices: Indices;
+}
+
 export type ActiveCell = CellCoordinates | [];
 export type CellCoordinates = [number, number];
 export type ColumnId = string | number;
@@ -142,15 +147,9 @@ export type ControlledTableProps = PropsWithDefaults & {
     setProps: SetProps;
 
     columns: VisibleColumns;
-    paginator: IPaginator
-    viewport: {
-        dataframe: Dataframe,
-        indices: Indices
-    },
-    virtual: {
-        dataframe: Dataframe,
-        indices: Indices
-    }
+    paginator: IPaginator;
+    viewport: IDerivedDataframe;
+    virtual: IDerivedDataframe;
 };
 
 export interface ICellFactoryOptions {
@@ -173,9 +172,5 @@ export interface ICellFactoryOptions {
     selected_cell: SelectedCells;
     selected_rows: number[];
     setProps: SetProps;
-
-    viewport: {
-        dataframe: Dataframe,
-        indices: Indices
-    };
+    viewport: IDerivedDataframe;
 }

src/dash-table/derived/paginator.ts

@@ -1,3 +1,5 @@
+import * as R from 'ramda';
+
 import { memoizeOneFactory } from 'core/memoizer';
 
 import {
@@ -35,25 +37,31 @@ function getBackEndPagination(
 function getFrontEndPagination(
     pagination_settings: IPaginationSettings,
     setProps: SetProps,
-    virtual_dataframe: Dataframe
+    dataframe: Dataframe
 ) {
     return {
         loadNext: () => {
-            let maxPageIndex = Math.floor(virtual_dataframe.length / pagination_settings.page_size);
+            let maxPageIndex = Math.floor(dataframe.length / pagination_settings.page_size);
 
             if (pagination_settings.current_page >= maxPageIndex) {
                 return;
             }
 
-            pagination_settings.current_page++;
+            pagination_settings = R.merge(pagination_settings, {
+                current_page: pagination_settings.current_page + 1
+            });
+
             setProps({ pagination_settings });
         },
         loadPrevious: () => {
             if (pagination_settings.current_page <= 0) {
                 return;
             }
 
-            pagination_settings.current_page--;
+            pagination_settings = R.merge(pagination_settings, {
+                current_page: pagination_settings.current_page - 1
+            });
+
             setProps({ pagination_settings });
         }
     };
@@ -70,14 +78,14 @@ const getter = (
     pagination_mode: PaginationMode,
     pagination_settings: IPaginationSettings,
     setProps: SetProps,
-    virtual_dataframe: Dataframe
+    dataframe: Dataframe
 ): IPaginator => {
     switch (pagination_mode) {
         case false:
             return getNoPagination();
         case true:
         case 'fe':
-            return getFrontEndPagination(pagination_settings, setProps, virtual_dataframe);
+            return getFrontEndPagination(pagination_settings, setProps, dataframe);
         case 'be':
             return getBackEndPagination(pagination_settings, setProps);
         default:

src/dash-table/derived/viewportDataframe.ts

@@ -4,19 +4,15 @@ import {
     Dataframe,
     Indices,
     IPaginationSettings,
-    PaginationMode
+    PaginationMode,
+    IDerivedDataframe
 } from 'dash-table/components/Table/props';
 
-interface IResult {
-    dataframe: Dataframe;
-    indices: Indices;
-}
-
-function getNoPagination(dataframe: Dataframe, indices: Indices): IResult {
+function getNoPagination(dataframe: Dataframe, indices: Indices): IDerivedDataframe {
     return { dataframe, indices };
 }
 
-function getFrontEndPagination(settings: IPaginationSettings, dataframe: Dataframe, indices: Indices): IResult {
+function getFrontEndPagination(settings: IPaginationSettings, dataframe: Dataframe, indices: Indices): IDerivedDataframe {
     let currentPage = Math.min(
         settings.current_page,
         Math.floor(dataframe.length / settings.page_size)
@@ -34,7 +30,7 @@ function getFrontEndPagination(settings: IPaginationSettings, dataframe: Datafra
     };
 }
 
-function getBackEndPagination(dataframe: Dataframe, indices: Indices): IResult {
+function getBackEndPagination(dataframe: Dataframe, indices: Indices): IDerivedDataframe {
     return { dataframe, indices };
 }
 
@@ -43,7 +39,7 @@ const getter = (
     pagination_settings: IPaginationSettings,
     dataframe: Dataframe,
     indices: Indices
-): IResult => {
+): IDerivedDataframe => {
     switch (pagination_mode) {
         case false:
             return getNoPagination(dataframe, indices);

src/dash-table/derived/virtualDataframe.ts

@@ -6,24 +6,19 @@ import SyntaxTree from 'core/syntax-tree';
 import {
     Dataframe,
     Datum,
-    Indices,
     Filtering,
+    IDerivedDataframe,
     Sorting
 } from 'dash-table/components/Table/props';
 
-interface IResult {
-    dataframe: Dataframe;
-    indices: Indices;
-}
-
 const getter = (
     dataframe: Dataframe,
     filtering: Filtering,
     filtering_settings: string,
     sorting: Sorting,
     sorting_settings: SortSettings = [],
     sorting_treat_empty_string_as_none: boolean
-): IResult => {
+): IDerivedDataframe => {
     const map = new Map<Datum, number>();
     R.addIndex(R.forEach)((datum, index) => {
         map.set(datum, index);

tests/e2e/cypress/integration/unit/derivedViewport_test.ts

@@ -0,0 +1,71 @@
+import * as R from 'ramda';
+
+import derivedViewportDataframe from 'dash-table/derived/viewportDataframe';
+
+describe.only('derived viewport', () => {
+    const viewportDataframe = derivedViewportDataframe();
+
+    describe('virtual dataframe <= page size', () => {
+        describe('with no pagination', () => {
+            it('returns entire dataframe', () => {
+                const result = viewportDataframe(
+                    false,
+                    { displayed_pages: 1, current_page: 0, page_size: 250 },
+                    R.map(() => { }, R.range(0, 5)),
+                    R.range(0, 5)
+                );
+
+                expect(result.dataframe.length).to.equal(5);
+                expect(result.indices.length).to.equal(5);
+            });
+        });
+
+        describe('with fe pagination', () => {
+            it('returns entire dataframe', () => {
+                const result = viewportDataframe(
+                    'fe',
+                    { displayed_pages: 1, current_page: 0, page_size: 250 },
+                    R.map(() => { }, R.range(0, 5)),
+                    R.range(0, 5)
+                );
+
+                expect(result.dataframe.length).to.equal(5);
+                expect(result.indices.length).to.equal(5);
+            });
+        });
+
+        describe('with be pagination', () => {
+            it('returns entire dataframe', () => {
+                const result = viewportDataframe(
+                    'be',
+                    { displayed_pages: 1, current_page: 0, page_size: 250 },
+                    R.map(() => { }, R.range(0, 5)),
+                    R.range(0, 5)
+                );
+
+                expect(result.dataframe.length).to.equal(5);
+                expect(result.indices.length).to.equal(5);
+            });
+        });
+    });
+
+    describe('virtual dataframe > page size', () => {
+        describe('with fe pagination', () => {
+            it('returns slice of dataframe', () => {
+                const result = viewportDataframe(
+                    'fe',
+                    { displayed_pages: 1, current_page: 0, page_size: 250 },
+                    R.map(idx => ({ idx }), R.range(0, 500)),
+                    R.range(0, 500)
+                );
+
+                expect(result.dataframe.length).to.equal(250);
+                expect(result.indices.length).to.equal(250);
+                expect(result.dataframe[0].idx).to.equal(0);
+                expect(result.dataframe[249].idx).to.equal(249);
+                expect(result.indices[0]).to.equal(0);
+                expect(result.indices[249]).to.equal(249);
+            });
+        });
+    });
+});