Issue 147 - Derived virtual/viewport selected rows (#227)

Author: Marc-Andre-Rivet

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

@@ -2,8 +2,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [3.1.4-rc6] - 2018-11-06
+## [3.1.4] - 2018-11-06
 ### Added
+- New derived props for `selected_rows` [#147](https://github.com/plotly/dash-table/issues/147)
 - Package library the UMD way [#212](https://github.com/plotly/dash-table/issues/212)
 
 ## [3.1.3] - 2018-11-05

Diff for: packages/dash-table/dash_table/bundle.js

@@ -956,6 +956,20 @@
           "computed": false
         }
       },
+      "derived_viewport_selected_rows": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
+        },
+        "required": false,
+        "description": "`derived_viewport_selected_rows` represents the indices of the\n `selected_rows` from the perspective of the `derived_viewport_indices`.",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
       "derived_virtual_data": {
         "type": {
           "name": "arrayOf",
@@ -984,6 +998,20 @@
           "computed": false
         }
       },
+      "derived_virtual_selected_rows": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
+        },
+        "required": false,
+        "description": "`derived_virtual_selected_rows` represents the indices of the\n `selected_rows` from the perspective of the `derived_virtual_indices`.",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
       "dropdown_properties": {
         "type": {
           "name": "any"

Diff for: packages/dash-table/dash_table/demo.js

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.4-rc6",
+  "version": "3.1.4",
   "description": "Dash table",
   "main": "lib/bundle.js",
   "scripts": {
@@ -10,9 +10,11 @@
     "postprivate::build": "cp -R lib/* dash_table",
     "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_js": "http-server ./dash_table -c-1 --silent",
     "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_js": "wait-on http://localhost:8080",
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",

Diff for: packages/dash-table/dash_table/metadata.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.4-rc6",
+  "version": "3.1.4",
   "description": "Dash table",
   "main": "lib/bundle.js",
   "scripts": {
@@ -10,9 +10,11 @@
     "postprivate::build": "cp -R lib/* dash_table",
     "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_js": "http-server ./dash_table -c-1 --silent",
     "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_js": "wait-on http://localhost:8080",
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",

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

@@ -64,8 +64,10 @@ export const defaultProps = {
 
     derived_viewport_data: [],
     derived_viewport_indices: [],
+    derived_viewport_selected_rows: [],
     derived_virtual_data: [],
     derived_virtual_indices: [],
+    derived_virtual_selected_rows: [],
 
     column_conditional_dropdowns: [],
     column_static_dropdown: [],
@@ -702,6 +704,12 @@ export const propTypes = {
      */
     derived_viewport_indices: PropTypes.arrayOf(PropTypes.number),
 
+    /**
+     * `derived_viewport_selected_rows` represents the indices of the
+     *  `selected_rows` from the perspective of the `derived_viewport_indices`.
+     */
+    derived_viewport_selected_rows: PropTypes.arrayOf(PropTypes.number),
+
     /**
      * This property represents the visible state of `data`
      * across all pages after the front-end sorting and filtering
@@ -717,7 +725,13 @@ export const propTypes = {
      */
     derived_virtual_indices: PropTypes.arrayOf(PropTypes.number),
 
-     /**
+    /**
+     * `derived_virtual_selected_rows` represents the indices of the
+     *  `selected_rows` from the perspective of the `derived_virtual_indices`.
+     */
+    derived_virtual_selected_rows: PropTypes.arrayOf(PropTypes.number),
+
+    /**
       * DEPRECATED
       * Subscribe to [https://github.com/plotly/dash-table/issues/168](https://github.com/plotly/dash-table/issues/168)
       * for updates on the dropdown API.

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

@@ -6,6 +6,7 @@ import { memoizeOne, memoizeOneWithFlag } from 'core/memoizer';
 import ControlledTable from 'dash-table/components/ControlledTable';
 
 import derivedPaginator from 'dash-table/derived/paginator';
+import derivedSelectedRows from 'dash-table/derived/selectedRows';
 import derivedViewportData from 'dash-table/derived/data/viewport';
 import derivedVirtualData from 'dash-table/derived/data/virtual';
 import derivedVisibleColumns from 'dash-table/derived/column/visible';
@@ -60,6 +61,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
             filtering_settings,
             pagination_mode,
             pagination_settings,
+            selected_rows,
             sorting,
             sorting_settings,
             sorting_treat_empty_string_as_none
@@ -81,6 +83,16 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
             virtual.indices
         );
 
+        const virtual_selected_rows = this.virtualSelectedRows(
+            virtual.indices,
+            selected_rows
+        );
+
+        const viewport_selected_rows = this.viewportSelectedRows(
+            viewport.indices,
+            selected_rows
+        );
+
         const paginator = this.paginator(
             pagination_mode,
             pagination_settings,
@@ -97,17 +109,33 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
                 paginator,
                 setProps,
                 viewport,
-                virtual
+                viewport_selected_rows,
+                virtual,
+                virtual_selected_rows
             }
         ]);
     }
 
     private updateDerivedProps() {
-        const { filtering, filtering_settings, pagination_mode, pagination_settings, sorting, sorting_settings, viewport, virtual } = this.controlled;
+        const {
+            filtering,
+            filtering_settings,
+            pagination_mode,
+            pagination_settings,
+            sorting,
+            sorting_settings,
+            viewport,
+            viewport_selected_rows,
+            virtual,
+            virtual_selected_rows
+        } = this.controlled;
 
         const viewportCached = this.viewportCache(viewport).cached;
         const virtualCached = this.virtualCache(virtual).cached;
 
+        const viewportSelectedRowsCached = this.viewportSelectedRowsCache(viewport_selected_rows).cached;
+        const virtualSelectedRowsCached = this.virtualSelectedRowsCache(virtual_selected_rows).cached;
+
         const invalidatedFilter = this.filterCache(filtering_settings);
         const invalidatedPagination = this.paginationCache(pagination_settings);
         const invalidatedSort = this.sortCache(sorting_settings);
@@ -117,10 +145,6 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
             (!invalidatedPagination.cached && !invalidatedPagination.first && pagination_mode === 'be') ||
             (!invalidatedSort.cached && !invalidatedSort.first && sorting === 'be');
 
-        if (virtualCached && viewportCached && !invalidateSelection) {
-            return;
-        }
-
         const { setProps } = this;
         let newProps: Partial<PropsWithDefaultsAndDerived> = {};
 
@@ -134,12 +158,24 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
             newProps.derived_viewport_indices = viewport.indices;
         }
 
+        if (!virtualSelectedRowsCached) {
+            newProps.derived_virtual_selected_rows = virtual_selected_rows;
+        }
+
+        if (!viewportSelectedRowsCached) {
+            newProps.derived_viewport_selected_rows = viewport_selected_rows;
+        }
+
         if (invalidateSelection) {
             newProps.active_cell = undefined;
             newProps.selected_cells = undefined;
             newProps.selected_rows = undefined;
         }
 
+        if (!R.keys(newProps).length) {
+            return;
+        }
+
         setTimeout(() => setProps(newProps), 0);
     }
 
@@ -162,12 +198,16 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
 
     private readonly paginator = derivedPaginator();
     private readonly viewport = derivedViewportData();
+    private readonly viewportSelectedRows = derivedSelectedRows();
     private readonly virtual = derivedVirtualData();
+    private readonly virtualSelectedRows = derivedSelectedRows();
     private readonly visibleColumns = derivedVisibleColumns();
 
     private readonly filterCache = memoizeOneWithFlag(filter => filter);
     private readonly paginationCache = memoizeOneWithFlag(pagination => pagination);
     private readonly sortCache = memoizeOneWithFlag(sort => sort);
     private readonly viewportCache = memoizeOneWithFlag(viewport => viewport);
+    private readonly viewportSelectedRowsCache = memoizeOneWithFlag(viewport => viewport);
     private readonly virtualCache = memoizeOneWithFlag(virtual => virtual);
+    private readonly virtualSelectedRowsCache = memoizeOneWithFlag(virtual => virtual);
 }

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

@@ -130,7 +130,7 @@ interface IProps {
     row_deletable?: boolean;
     row_selectable?: RowSelection;
     selected_cells?: SelectedCells;
-    selected_rows?: number[];
+    selected_rows?: Indices;
     setProps?: SetProps;
     sorting?: Sorting;
     sorting_settings?: SortSettings;
@@ -198,8 +198,10 @@ interface IDefaultProps {
 interface IDerivedProps {
     derived_viewport_data: Data;
     derived_viewport_indices: Indices;
+    derived_viewport_selected_rows: Indices;
     derived_virtual_data: Data;
     derived_virtual_indices: Indices;
+    derived_virtual_selected_rows: Indices;
 }
 
 export type PropsWithDefaults = IProps & IDefaultProps;
@@ -211,7 +213,9 @@ export type ControlledTableProps = PropsWithDefaults & {
     columns: VisibleColumns;
     paginator: IPaginator;
     viewport: IDerivedData;
+    viewport_selected_rows: Indices;
     virtual: IDerivedData;
+    virtual_selected_rows: Indices;
 };
 
 export interface ICellFactoryOptions {

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

@@ -0,0 +1,28 @@
+import * as R from 'ramda';
+
+import { Indices } from 'dash-table/components/Table/props';
+import { memoizeOneFactory } from 'core/memoizer';
+
+const getter = (
+    indices: Indices,
+    selectedRows: Indices
+): Indices => {
+    const map = new Map<number, number>();
+
+    R.addIndex<number>(R.forEach)((virtualIndex, index) => {
+        map.set(virtualIndex, index);
+    }, indices);
+
+    const mappedSelectedRows: number[] = [];
+    R.forEach(rowIndex => {
+        const virtualIndex = map.get(rowIndex);
+
+        if (virtualIndex !== undefined) {
+            mappedSelectedRows.push(virtualIndex);
+        }
+    }, selectedRows);
+
+    return mappedSelectedRows;
+};
+
+export default memoizeOneFactory(getter);