Datagrid column header configuration UX update

packages/perspective-viewer-datagrid/build.js

@@ -60,7 +60,6 @@ async function compile_css() {
     add(builder1, "./pro.less");
     add(builder1, "./mitered-headers.less");
     add(builder1, "./row-hover.less");
-    add(builder1, "./column-plugin.less");
     add(builder1, "./regular_table.less");
     fs.writeFileSync(
         "dist/css/perspective-viewer-datagrid.css",

packages/perspective-viewer-datagrid/package.json

@@ -32,7 +32,7 @@
         "@finos/perspective": "^2.5.0",
         "@finos/perspective-viewer": "^2.5.0",
         "chroma-js": "^1.3.4",
-        "regular-table": "=0.5.9"
+        "regular-table": "=0.6.1"
     },
     "devDependencies": {
         "@prospective.co/procss": "^0.1.13",

packages/perspective-viewer-datagrid/src/js/data_listener/format_cell.js

@@ -34,7 +34,7 @@ export function format_cell(
     }
 
     // TODO don't do this on every cell render ...
-    const title = parts[parts.length - 1];
+    const title = parts[this._config.split_by.length];
     const type =
         (use_table_schema && this._table_schema[title]) ||
         this._schema[title] ||

packages/perspective-viewer-datagrid/src/js/data_listener/index.js

@@ -71,6 +71,9 @@ export function createDataListener() {
             column_headers = [],
             column_paths = [];
 
+        const is_settings_open =
+            regularTable.parentElement.parentElement.hasAttribute("settings");
+
         // for (const path of this._column_paths.slice(x0, x1)) {
         for (
             let ipath = x0;
@@ -91,6 +94,10 @@ export function createDataListener() {
                 )
             );
             metadata.push(column);
+            if (is_settings_open) {
+                path_parts.push("Edit");
+            }
+
             column_headers.push(path_parts);
             column_paths.push(path);
         }
@@ -124,6 +131,10 @@ export function createDataListener() {
             column_headers,
             data,
             metadata,
+            column_header_merge_depth: Math.max(
+                0,
+                this._config.split_by.length
+            ),
         };
     };
 }

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

@@ -37,15 +37,10 @@ export async function mousedown_listener(regularTable, event) {
         return;
     }
 
-    const rect = target.getBoundingClientRect();
-    if (
-        target.classList.contains("psp-menu-enabled") &&
-        event.clientY - rect.top > 16
-    ) {
+    if (target.classList.contains("psp-menu-enabled")) {
         target.classList.add("psp-menu-open");
         const meta = regularTable.getMeta(target);
-        const column_name =
-            meta.column_header?.[meta.column_header?.length - 1];
+        const column_name = meta.column_header?.[this._config.split_by.length];
         const column_type = this._schema[column_name];
         this._open_column_styles_menu.unshift(meta._virtual_x);
         if (
@@ -66,10 +61,7 @@ export async function mousedown_listener(regularTable, event) {
 
         event.preventDefault();
         event.stopImmediatePropagation();
-    } else if (
-        target.classList.contains("psp-header-leaf") &&
-        !target.classList.contains("psp-header-corner")
-    ) {
+    } else if (target.classList.contains("psp-sort-enabled")) {
         sortHandler.call(this, regularTable, event, target);
         event.stopImmediatePropagation();
     }

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

@@ -12,7 +12,7 @@
 
 export async function sortHandler(regularTable, event, target) {
     const meta = regularTable.getMeta(target);
-    const column_name = meta.column_header[meta.column_header.length - 1];
+    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;

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

@@ -35,7 +35,7 @@ export default async function getCellConfig(
     let column_filters = [];
     if (column_paths) {
         const split_by_values = column_paths.split("|");
-        result.column_names = [split_by_values[split_by_values.length - 1]];
+        result.column_names = [split_by_values[split_by.length]];
         column_filters = split_by
             .map((pivot, index) => {
                 const pivot_value = split_by_values[index];

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

@@ -115,7 +115,7 @@ export async function createModel(regular, table, view, extend = {}) {
     const _column_types = [];
     for (const column_path of _column_paths) {
         const column_path_parts = column_path.split("|");
-        const column = column_path_parts[column_path_parts.length - 1];
+        const column = column_path_parts[config.split_by.length];
         _column_types.push(_schema[column]);
         _is_editable.push(!!table_schema[column]);
     }

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

@@ -19,71 +19,98 @@ function get_psp_type(metadata) {
 }
 
 export function column_header_style_listener(regularTable) {
-    const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
     let group_header_trs = Array.from(
         regularTable.children[0].children[0].children
     );
 
     if (group_header_trs.length > 0) {
         let [col_headers] = group_header_trs.splice(
-            group_header_trs.length - 1,
+            this._config.split_by.length,
             1
         );
 
-        for (const td of col_headers?.children) {
-            const metadata = regularTable.getMeta(td);
-            const column_name =
-                metadata.column_header?.[metadata.column_header?.length - 1];
-            const sort = this._config.sort.find((x) => x[0] === column_name);
-            let needs_border = metadata.row_header_x === header_depth;
-            const is_corner = typeof metadata.x === "undefined";
-            needs_border =
-                needs_border ||
-                (metadata.x + 1) % this._config.columns.length === 0;
-            td.classList.toggle("psp-header-border", needs_border);
-            td.classList.toggle("psp-header-group", false);
-            td.classList.toggle("psp-header-leaf", true);
-            td.classList.toggle("psp-is-top", false);
-            td.classList.toggle("psp-header-corner", is_corner);
-            td.classList.toggle(
-                "psp-header-sort-asc",
-                !!sort && sort[1] === "asc"
-            );
-            td.classList.toggle(
-                "psp-header-sort-desc",
-                !!sort && sort[1] === "desc"
-            );
-            td.classList.toggle(
-                "psp-header-sort-col-asc",
-                !!sort && sort[1] === "col asc"
-            );
-            td.classList.toggle(
-                "psp-header-sort-col-desc",
-                !!sort && sort[1] === "col desc"
-            );
+        style_column_header_row.call(this, regularTable, col_headers, false);
 
-            let type = get_psp_type.call(this, metadata);
-            const is_numeric = type === "integer" || type === "float";
-            const is_string = type === "string";
-            const is_date = type === "date";
-            const is_datetime = type === "datetime";
-            td.classList.toggle("psp-align-right", is_numeric);
-            td.classList.toggle("psp-align-left", !is_numeric);
-            td.classList.toggle(
-                "psp-menu-open",
-                this._open_column_styles_menu[0] === metadata._virtual_x
-            );
-            td.classList.toggle(
-                "psp-menu-enabled",
-                (is_string || is_numeric || is_date || is_datetime) &&
-                    !is_corner
-            );
+        let [style_menu_headers] = group_header_trs.splice(
+            this._config.split_by.length,
+            1
+        );
 
-            td.classList.toggle(
-                "psp-is-width-override",
-                regularTable._column_sizes?.override[metadata.size_key] !==
-                    undefined
+        if (style_menu_headers) {
+            style_column_header_row.call(
+                this,
+                regularTable,
+                style_menu_headers,
+                true
             );
         }
     }
 }
+
+function style_column_header_row(regularTable, col_headers, is_menu_row) {
+    const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
+    for (const td of col_headers?.children) {
+        const metadata = regularTable.getMeta(td);
+        const column_name =
+            metadata.column_header?.[this._config.split_by.length];
+        const sort = this._config.sort.find((x) => x[0] === column_name);
+        let needs_border = metadata.row_header_x === header_depth;
+        const is_corner = typeof metadata.x === "undefined";
+        needs_border =
+            needs_border ||
+            (metadata.x + 1) % this._config.columns.length === 0;
+        td.classList.toggle("psp-header-border", needs_border);
+        td.classList.toggle("psp-header-group", false);
+        td.classList.toggle("psp-header-leaf", true);
+        td.classList.toggle("psp-is-top", false);
+        td.classList.toggle("psp-header-corner", is_corner);
+        td.classList.toggle(
+            "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"
+        );
+
+        let type = get_psp_type.call(this, metadata);
+        const is_numeric = type === "integer" || type === "float";
+        const is_string = type === "string";
+        const is_date = type === "date";
+        const is_datetime = type === "datetime";
+        td.classList.toggle("psp-align-right", is_numeric);
+        td.classList.toggle("psp-align-left", !is_numeric);
+        td.classList.toggle(
+            "psp-menu-open",
+            this._open_column_styles_menu[0] === metadata._virtual_x
+        );
+
+        td.classList.toggle(
+            "psp-menu-enabled",
+            (is_string || is_numeric || is_date || is_datetime) &&
+                !is_corner &&
+                metadata.column_header_y == this._config.split_by.length + 1
+        );
+
+        td.classList.toggle(
+            "psp-sort-enabled",
+            (is_string || is_numeric || is_date || is_datetime) &&
+                !is_corner &&
+                metadata.column_header_y === this._config.split_by.length
+        );
+
+        td.classList.toggle(
+            "psp-is-width-override",
+            regularTable._column_sizes?.override[metadata.size_key] !==
+                undefined
+        );
+    }
+}

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

@@ -37,7 +37,7 @@ export function editable_style_listener(table, viewer) {
         const meta = table.getMeta(td);
         const type = this.get_psp_type(meta);
         if (edit && this._is_editable[meta.x]) {
-            const col_name = meta.column_header[meta.column_header.length - 1];
+            const col_name = meta.column_header[this._config.split_by.length];
             if (type === "string" && plugins[col_name]?.format === "link") {
                 td.toggleAttribute("contenteditable", false);
                 td.classList.toggle("boolean-editable", false);

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

@@ -43,6 +43,7 @@ export function group_header_style_listener(regularTable) {
             td.classList.toggle("psp-header-sort-desc", false);
             td.classList.toggle("psp-header-sort-col-asc", false);
             td.classList.toggle("psp-header-sort-col-desc", false);
+            td.classList.toggle("psp-sort-enabled", false);
 
             let cell = row.cells[x],
                 xx = x,

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

@@ -17,8 +17,7 @@ import {
 } from "../../color_utils.js";
 
 export function cell_style_datetime(plugin, td, metadata) {
-    const column_name =
-        metadata.column_header?.[metadata.column_header?.length - 1];
+    const column_name = metadata.column_header?.[this._config.split_by.length];
 
     const [hex, r, g, b, gradhex] = (() => {
         if (plugin?.color !== undefined) {

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

@@ -33,7 +33,7 @@ export function table_cell_style_listener(regularTable) {
         for (const td of tr.children) {
             const metadata = regularTable.getMeta(td);
             const column_name =
-                metadata.column_header?.[metadata.column_header?.length - 1];
+                metadata.column_header?.[this._config.split_by.length];
 
             let type = get_psp_type.call(this, metadata);
             const plugin = plugins[column_name];

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

@@ -17,9 +17,7 @@ import {
 } from "../../color_utils.js";
 
 export function cell_style_string(plugin, td, metadata) {
-    const column_name =
-        metadata.column_header?.[metadata.column_header?.length - 1];
-
+    const column_name = metadata.column_header?.[this._config.split_by.length];
     const [hex, r, g, b, gradhex] = (() => {
         if (plugin?.color !== undefined) {
             return plugin.color;

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

@@ -15,8 +15,7 @@ import { PRIVATE_PLUGIN_SYMBOL } from "./model";
 
 export function activate_plugin_menu(regularTable, target, column_max) {
     const target_meta = regularTable.getMeta(target);
-    const column_name =
-        target_meta.column_header[target_meta.column_header.length - 1];
+    const column_name = target_meta.column_header[this._config.split_by.length];
     const column_type = this._schema[column_name];
     const is_numeric = column_type === "integer" || column_type === "float";
     const MENU = document.createElement(
@@ -109,12 +108,15 @@ export function activate_plugin_menu(regularTable, target, column_max) {
         );
 
         MENU.removeEventListener("blur", blur_handler);
-        this._open_column_styles_menu.pop();
+        const popped = this._open_column_styles_menu.pop();
         regularTable.parentElement.parentElement.dispatchEvent(
             new Event("perspective-config-update")
         );
 
-        target.classList.remove("psp-menu-open");
+        if (popped !== this._open_column_styles_menu[0]) {
+            target.classList.remove("psp-menu-open");
+        }
+
         MENU.destroy();
     };