3.0 sorting (#54)

* - fix undefined/null sort
- integrate sort with virtualization

* - basic unit tests coverage for sorting
- refactor header's sorting and sort update (more flexible)

Author: Marc-Andre-Rivet

packages/dash-table/README.md

@@ -38,7 +38,7 @@
 
 ## RC5 (Conditional Style, Conditional Dropdown, Filter)
     New props
-        - filtering -> ['fe', 'be'] (default: 'fe')
+        - filtering -> ['fe', 'be', true, false] (default: false)
         - filtering_settings -> AST query string (default: '')
         - column_conditional_dropdowns
         - column_static_dropdown
@@ -49,4 +49,23 @@
     Deprecated
         - column style
         - column options
-        - dropdown_properties
+        - dropdown_properties
+
+## Towards RC6
+    * First steps to make sorting work from both FE and BE *
+    * and consistent with Virtualization settings *
+
+    New Props
+        - sorting -> ['fe', 'be', true, false] (default: false) -- replaces 'sortable' prop
+        - sorting_settings -> array of { field, ascending } -- replaces 'sort' prop
+        - virtual_dataframe (READONLY)
+        - virtual_dataframe_indices (READONLY; not officially supported yet -- IN DEVELOPMENT)
+    Deprecated
+        - sortable
+        - sort
+        - dataframe behavior on sort (see below)
+
+    virtual_dataframe vs. dataframe
+        - the virtual dataframe is the content of the viewport for the user (e.g. user has a 10k rows dataframe with FE/250 lines paging, on 1st page -> the virtual_dataframe contains items [0,250[ of the dataframe); the dataframe still contains 10k items
+        - 10k rows, no paging, sorting and filtering -> the virtual dataframe contains items visible in the viewport, in the visible order; the dataframe still contains 10k items
+        - if the user modifies a cell, the dataframe and the virtual_dataframe are updated with the new data

packages/dash-table/dash_table/bundle.js

@@ -182,24 +182,6 @@
         "required": false,
         "description": ""
       },
-      "sort": {
-        "type": {
-          "name": "array"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "[]",
-          "computed": false
-        }
-      },
-      "sortable": {
-        "type": {
-          "name": "bool"
-        },
-        "required": false,
-        "description": ""
-      },
       "start_cell": {
         "type": {
           "name": "arrayOf",
@@ -492,13 +474,21 @@
             {
               "value": "'be'",
               "computed": false
+            },
+            {
+              "value": "true",
+              "computed": false
+            },
+            {
+              "value": "false",
+              "computed": false
             }
           ]
         },
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "'fe'",
+          "value": "false",
           "computed": false
         }
       },
@@ -515,36 +505,72 @@
       },
       "sorting": {
         "type": {
-          "name": "shape",
-          "value": {
-            "type": {
-              "name": "string",
-              "required": false
+          "name": "enum",
+          "value": [
+            {
+              "value": "'fe'",
+              "computed": false
             },
-            "options": {
-              "name": "arrayOf",
-              "value": {
-                "name": "shape",
-                "value": {
-                  "field": {
-                    "name": "string",
-                    "required": false
+            {
+              "value": "'be'",
+              "computed": false
+            },
+            {
+              "value": "true",
+              "computed": false
+            },
+            {
+              "value": "false",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "sorting_settings": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "shape",
+            "value": {
+              "columnId": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
                   },
-                  "ascending": {
-                    "name": "custom",
-                    "raw": "PropTypes.boolean",
-                    "required": false
+                  {
+                    "name": "number"
                   }
-                }
+                ],
+                "required": false
               },
-              "required": false
+              "direction": {
+                "name": "enum",
+                "value": [
+                  {
+                    "value": "'asc'",
+                    "computed": false
+                  },
+                  {
+                    "value": "'desc'",
+                    "computed": false
+                  }
+                ],
+                "required": false
+              }
             }
           }
         },
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "{\n    type: 'fe',\n    options: []\n}",
+          "value": "[]",
           "computed": false
         }
       },

packages/dash-table/dash_table/demo.js

@@ -1,9 +1,9 @@
 /* eslint no-magic-numbers: 0 */
+import * as R from 'ramda';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Table} from 'dash-table';
 import {mockData} from './data';
-import {merge} from 'ramda';
 import { memoizeOne } from 'core/memoizer';
 
 const clone = o => JSON.parse(JSON.stringify(o));
@@ -12,21 +12,23 @@ class App extends Component {
     constructor() {
         super();
 
+        const dataframe: any[] = clone(mockData.dataframe);
+
         this.state = {
             filter: '',
             tableProps: {
                 id: 'table',
-                dataframe: clone(mockData.dataframe),
-                columns: clone(mockData.columns).map(col => merge(col, {
+                dataframe: dataframe,
+                columns: clone(mockData.columns).map(col => R.merge(col, {
                     editable_name: true,
                     deletable: true,
                 //     type: 'dropdown'
                 })),
                 editable: true,
+                filtering: true,
+                sorting: true,
                 // n_fixed_rows: 3,
                 // n_fixed_columns: 2,
-                sortable: false,
-                sort: [],
                 merge_duplicate_headers: true,
                 row_deletable: true,
                 row_selectable: 'single',
@@ -46,7 +48,7 @@ class App extends Component {
             return newProps => {
                 console.info('--->', newProps);
                 this.setState({
-                    tableProps: merge(this.state.tableProps, newProps),
+                    tableProps: R.merge(this.state.tableProps, newProps),
                 });
             };
         });

packages/dash-table/dash_table/metadata.json

@@ -0,0 +1,83 @@
+import * as R from 'ramda';
+import Logger from 'core/Logger';
+
+export interface ISortSetting {
+    columnId: string | number;
+    direction: SortDirection;
+}
+
+export enum SortDirection {
+    Ascending = 'asc',
+    Descending = 'desc',
+    None = 'none'
+}
+
+export type SortSettings = ISortSetting[];
+
+export function updateSettings(
+    settings: SortSettings,
+    setting: ISortSetting
+): SortSettings {
+    Logger.trace('updateSettings', settings, setting);
+
+    settings = R.clone(settings);
+
+    if (setting.direction === SortDirection.None) {
+        const currentIndex = R.findIndex(s => s.columnId === setting.columnId, settings);
+
+        if (currentIndex !== -1) {
+            settings.splice(currentIndex, 1);
+        }
+    } else {
+        const currentSetting = R.find(s => s.columnId === setting.columnId, settings);
+
+        if (currentSetting) {
+            currentSetting.direction = setting.direction;
+        } else {
+            settings.push(setting);
+        }
+    }
+
+    return settings;
+}
+
+export default (dataframe: any[], settings: SortSettings): any[] => {
+    if (!settings.length) {
+        return dataframe;
+    }
+
+    return R.sortWith(
+        R.map(setting => {
+            return setting.direction === SortDirection.Descending ?
+                R.comparator((d1: any, d2: any) => {
+                    const id = setting.columnId;
+
+                    const prop1 = d1[id];
+                    const prop2 = d2[id];
+
+                    if (prop1 === undefined || prop1 === null) {
+                        return false;
+                    } else if (prop2 === undefined || prop2 === null) {
+                        return true;
+                    }
+
+                    return prop1 > prop2;
+                }) :
+                R.comparator((d1: any, d2: any) => {
+                    const id = setting.columnId;
+
+                    const prop1 = d1[id];
+                    const prop2 = d2[id];
+
+                    if (prop1 === undefined || prop1 === null) {
+                        return false;
+                    } else if (prop2 === undefined || prop2 === null) {
+                        return true;
+                    }
+
+                    return prop1 < prop2;
+                });
+        }, settings),
+        dataframe
+    );
+};