Fix datagrid abs sorting on header click

docs/md/how_to/javascript/plugin_settings.md

@@ -4,23 +4,20 @@
 extremely large output which may lock up the browser. In order to prevent
 accidents (which generally require a browser refresh to fix), each plugin has a
 `max_cells` and `max_columns` heuristic which requires the user to opt-in to
-fully rendering `View`s which exceed these limits. To over ride this behavior,
-must set these values for each plugin type individually, _before_ calling
-`HTMLPerspectiveViewerElement::restore` (with the respective `plugin` name).
+fully rendering `View`s which exceed these limits. To override this behavior,
+set these values for each plugin type individually, _before_ the plugin itself
+is rendered (e.g. calling `HTMLPerspectiveViewerElement::restore` with the
+respective `plugin` name).
 
-If you have a `<perspective-viewer>` instance, you can set these properties via
-iterating over the plugins returned by the
-`HTMLPerspectiveViewerElement::getAllPlugins` method:
+If you have a `<perspective-viewer>` instance, you can configure plugins via
+`HTMLPerspectiveViewerElement::getPlugin` and
+`HTMLPerspectiveViewerElement::getAllPlugins`:
 
 ```javascript
 const viewer = document.querySelector("perspective-viewer");
-for (const plugin of await viewer.getAllPlugins()) {
-    if (plugin.name === "Treemap") {
-        // Sets all treemap `max_cells`, not just this instance!
-        plugin.max_cells = 1_000_000;
-        plugin.max_columns = 1000;
-    }
-}
+const plugin = viewer.getPlugin("Treemap");
+plugin.max_cells = 1_000_000;
+plugin.max_columns = 1000;
 ```
 
 ... Or alternatively, you can look up the Custom Element classes and set the
@@ -32,8 +29,3 @@ const plugin = customElements.get("perspective-viewer-d3fc-treemap");
 plugin.max_cells = 1_000_000;
 plugin.max_columns = 1000;
 ```
-
-<div class="warning">
-This distinction is just for syntax aesthetics - both methods will apply to all
-instances, regardless of set via an instance, or the class itself.
-</div>

packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js

@@ -23,15 +23,18 @@ import { format_raw } from "../data_listener/format_cell.js";
  * The custom element class for this plugin.  The interface methods for this
  */
 export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
-    static global_stylesheet_installed = false;
+    static #global_stylesheet_installed = false;
+
+    static #sheet;
+
+    // Determines whether this datagrid renders in the light DOM. This will
+    // break style encapsulation and may cause inconsistent behavior.
     static renderTarget =
         window.CSS?.supports &&
         window.CSS?.supports("selector(:host-context(foo))")
             ? "shadow"
             : "light";
 
-    static #sheet;
-
     constructor() {
         super();
         this.regular_table = document.createElement("regular-table");
@@ -49,9 +52,9 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
             shadow.adoptedStyleSheets.push(Elem.#sheet);
         } else if (
             Elem.renderTarget === "light" &&
-            !Elem.global_stylesheet_installed
+            !Elem.#global_stylesheet_installed
         ) {
-            Elem.global_stylesheet_installed = true;
+            Elem.#global_stylesheet_installed = true;
             document.adoptedStyleSheets.push(Elem.#sheet);
         }
     }
@@ -190,6 +193,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
         if (this.regular_table.table_model) {
             this.regular_table._resetAutoSize();
         }
+
         this.regular_table.clear();
     }
 }

packages/perspective-viewer-datagrid/src/js/event_handlers/header_click.js

@@ -30,21 +30,19 @@ export async function mousedown_listener(regularTable, viewer, event) {
         }
     }
 
+    event.preventDefault();
+    event.stopImmediatePropagation();
     if (target.classList.contains("psp-tree-label")) {
         expandCollapseHandler.call(this, regularTable, event);
-        event.stopImmediatePropagation();
         return;
     }
 
     if (target.classList.contains("psp-menu-enabled")) {
         const meta = regularTable.getMeta(target);
         const column_name = meta.column_header?.[this._config.split_by.length];
         await viewer.toggleColumnSettings(column_name);
-        event.preventDefault();
-        event.stopImmediatePropagation();
     } else if (target.classList.contains("psp-sort-enabled")) {
         sortHandler.call(this, regularTable, viewer, event, target);
-        event.stopImmediatePropagation();
     }
 }
 

packages/perspective-viewer-datagrid/src/js/event_handlers/sort.js

@@ -13,20 +13,24 @@
 export async function sortHandler(regularTable, viewer, event, target) {
     const meta = regularTable.getMeta(target);
     const column_name = meta.column_header[this._config.split_by.length];
-    const sort_method = event.shiftKey ? append_sort : override_sort;
-    const sort = sort_method.call(this, column_name);
-    this._preserve_focus_state = true;
+    const sort_method =
+        event.ctrlKey || event.metaKet || event.altKey
+            ? append_sort
+            : override_sort;
+
+    const abs = event.shiftKey;
+    const sort = sort_method.call(this, column_name, abs);
     await viewer.restore({ sort });
 }
 
-export function append_sort(column_name) {
+export function append_sort(column_name, abs) {
     const sort = [];
     let found = false;
     for (const sort_term of this._config.sort) {
         const [_column_name, _sort_dir] = sort_term;
         if (_column_name === column_name) {
             found = true;
-            const term = create_sort.call(this, column_name, _sort_dir);
+            const term = create_sort.call(this, column_name, _sort_dir, abs);
             if (term) {
                 sort.push(term);
             }
@@ -35,34 +39,43 @@ export function append_sort(column_name) {
         }
     }
     if (!found) {
-        sort.push([column_name, "desc"]);
+        sort.push([column_name, abs ? "desc abs" : "desc"]);
     }
     return sort;
 }
 
-export function override_sort(column_name) {
+export function override_sort(column_name, abs) {
     for (const [_column_name, _sort_dir] of this._config.sort) {
         if (_column_name === column_name) {
-            const sort = create_sort.call(this, column_name, _sort_dir);
+            const sort = create_sort.call(this, column_name, _sort_dir, abs);
             return sort ? [sort] : [];
         }
     }
-    return [[column_name, "desc"]];
+    return [[column_name, abs ? "desc abs" : "desc"]];
 }
 
-export function create_sort(column_name, sort_dir) {
+export function create_sort(column_name, sort_dir, abs) {
     const is_col_sortable = this._config.split_by.length > 0;
     const order = is_col_sortable ? ROW_COL_SORT_ORDER : ROW_SORT_ORDER;
-    const inc_sort_dir = sort_dir ? order[sort_dir] : "desc";
+    let inc_sort_dir = sort_dir ? order[sort_dir] : "desc";
     if (inc_sort_dir) {
         return [column_name, inc_sort_dir];
     }
 }
 
-const ROW_SORT_ORDER = { desc: "asc", asc: undefined };
+const ROW_SORT_ORDER = {
+    desc: "asc",
+    asc: undefined,
+    "desc abs": "asc abs",
+    "asc abs": undefined,
+};
 const ROW_COL_SORT_ORDER = {
     desc: "asc",
     asc: "col desc",
+    "desc abs": "asc abs",
+    "asc abs": "col desc abs",
     "col desc": "col asc",
     "col asc": undefined,
+    "col desc abs": "col asc abs",
+    "col asc abs": undefined,
 };

packages/perspective-viewer-datagrid/src/js/model/create.js

@@ -54,6 +54,67 @@ function get_psp_type(metadata) {
 
 export async function createModel(regular, table, view, extend = {}) {
     const config = await view.get_config();
+    if (this?.model?._config) {
+        const old = this.model._config;
+        let group_by_changed = old.group_by.length !== config.group_by.length;
+        const type_changed =
+            (old.group_by.length === 0 || config.group_by.length === 0) &&
+            group_by_changed;
+
+        if (!group_by_changed) {
+            for (const lvl in old.group_by) {
+                group_by_changed ||= config.group_by[lvl] !== old.group_by[lvl];
+            }
+        }
+
+        let split_by_changed = old.split_by.length !== config.split_by.length;
+        if (split_by_changed) {
+            for (const lvl in old.split_by) {
+                split_by_changed ||= config.split_by[lvl] !== old.split_by[lvl];
+            }
+        }
+
+        let columns_changed = old.columns.length !== config.columns.length;
+        if (columns_changed) {
+            for (const lvl in old.columns) {
+                columns_changed ||= config.columns[lvl] !== old.columns[lvl];
+            }
+        }
+
+        let filter_changed = old.filter.length !== config.filter.length;
+        if (filter_changed) {
+            for (const lvl in old.filter) {
+                for (const i in config.filter[lvl]) {
+                    filter_changed ||=
+                        config.filter[lvl][i] !== old.filter[lvl][i];
+                }
+            }
+        }
+
+        let sort_changed = old.sort.length !== config.sort.length;
+        if (sort_changed) {
+            for (const lvl in old.sort) {
+                for (const i in config.sort[lvl]) {
+                    sort_changed ||= config.sort[lvl][i] !== old.sort[lvl][i];
+                }
+            }
+        }
+
+        this._reset_scroll_top = group_by_changed;
+        this._reset_scroll_left = split_by_changed;
+        this._reset_select =
+            group_by_changed ||
+            split_by_changed ||
+            filter_changed ||
+            sort_changed ||
+            columns_changed;
+
+        this._reset_column_size =
+            split_by_changed ||
+            group_by_changed ||
+            columns_changed ||
+            type_changed;
+    }
 
     // Extract the entire expression string as typed by the user, so we can
     // feed it into `validate_expressions` and get back the data types for

packages/perspective-viewer-datagrid/src/js/plugin/draw.js

@@ -30,13 +30,29 @@ export async function draw(view) {
 
     const old_sizes = save_column_size_overrides.call(this);
     const draw = this.regular_table.draw({ invalid_columns: true });
-    if (!this.model._preserve_focus_state) {
+    if (this._reset_scroll_top) {
+        // group_by
+        this.regular_table.scrollTop = 0;
+        this._reset_scroll_top = false;
+    }
+
+    if (this._reset_scroll_left) {
+        // split_by
+        this.regular_table.scrollLeft = 0;
+        this._reset_scroll_left = false;
+    }
+    if (this._reset_select) {
+        // filter, group_by, sort ... if (col-select) { columns, split_by }
         this.regular_table.dispatchEvent(
             new CustomEvent("psp-deselect-all", { bubbles: false })
         );
+        this._reset_select = false;
+    }
+
+    if (this._reset_column_size) {
+        // split_by, group_by (?),
         this.regular_table._resetAutoSize();
-    } else {
-        this.model._preserve_focus_state = false;
+        this._reset_column_size = false;
     }
 
     restore_column_size_overrides.call(this, old_sizes);

packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js

@@ -135,19 +135,42 @@ function style_column_header_row(regularTable, col_headers, is_menu_row) {
             "psp-header-sort-asc",
             !is_menu_row && !!sort && sort[1] === "asc"
         );
+
         td.classList.toggle(
             "psp-header-sort-desc",
             !is_menu_row && !!sort && sort[1] === "desc"
         );
+
         td.classList.toggle(
             "psp-header-sort-col-asc",
             !is_menu_row && !!sort && sort[1] === "col asc"
         );
+
         td.classList.toggle(
             "psp-header-sort-col-desc",
             !is_menu_row && !!sort && sort[1] === "col desc"
         );
 
+        td.classList.toggle(
+            "psp-header-sort-abs-asc",
+            !is_menu_row && !!sort && sort[1] === "asc abs"
+        );
+
+        td.classList.toggle(
+            "psp-header-sort-abs-desc",
+            !is_menu_row && !!sort && sort[1] === "desc abs"
+        );
+
+        td.classList.toggle(
+            "psp-header-sort-abs-col-asc",
+            !is_menu_row && !!sort && sort[1] === "col asc abs"
+        );
+
+        td.classList.toggle(
+            "psp-header-sort-abs-col-desc",
+            !is_menu_row && !!sort && sort[1] === "col desc abs"
+        );
+
         let type = get_psp_type.call(this, metadata);
         const is_numeric = type === "integer" || type === "float";
         const is_string = type === "string";

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/index.js

@@ -83,8 +83,18 @@ export function table_cell_style_listener(regularTable, viewer) {
             }
 
             tr.dataset.y = metadata.y;
-            td.dataset.y = metadata.y;
-            td.dataset.x = metadata.x;
+            if (
+                metadata.row_header_x === undefined ||
+                metadata.row_header_x === metadata.row_header.length - 1 ||
+                metadata.row_header[metadata.row_header_x + 1] === undefined
+            ) {
+                td.dataset.y = metadata.y;
+                td.dataset.x = metadata.x;
+            } else {
+                delete td.dataset.y;
+                delete td.dataset.x;
+            }
+
             td.classList.toggle("psp-align-right", !is_th && is_numeric);
             td.classList.toggle("psp-align-left", is_th || !is_numeric);
             td.classList.toggle(