Merge pull request #2366 from ada-x64/move-datagrid-styles-to-sidebar

Move styles to sidebar

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

@@ -15,6 +15,7 @@ import { restore } from "../plugin/restore.js";
 import { connectedCallback } from "../plugin/connected";
 import { save } from "../plugin/save";
 import { draw } from "../plugin/draw";
+import getDefaultConfig from "../default_config.js";
 
 /**
  * The custom element class for this plugin.  The interface methods for this
@@ -66,6 +67,11 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
         return 1;
     }
 
+    /** opt-in to column styling */
+    get default_config() {
+        return getDefaultConfig.call(this);
+    }
+
     async draw(view) {
         return await draw.call(this, view);
     }

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

@@ -0,0 +1,54 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Gets the default column configurations used for styling.
+ * @returns The default configuration per type.
+ */
+export default function getDefaultConfig() {
+    const get_type_default = (column_type) => {
+        let type_default;
+        if (column_type === "integer" || column_type === "float") {
+            type_default = {
+                fg_gradient: 0,
+                pos_fg_color: this.model._pos_fg_color[0],
+                neg_fg_color: this.model._neg_fg_color[0],
+                number_fg_mode: "color",
+                bg_gradient: 0,
+                pos_bg_color: this.model._pos_bg_color[0],
+                neg_bg_color: this.model._neg_bg_color[0],
+                number_bg_mode: "disabled",
+                fixed: column_type === "float" ? 2 : 0,
+            };
+        } else {
+            // date, datetime, string, boolean
+            type_default = {
+                color: this.model._color[0],
+                bg_color: this.model._color[0],
+            };
+        }
+        return type_default;
+    };
+
+    let default_config = {};
+    for (let val of [
+        "string",
+        "float",
+        "integer",
+        "bool",
+        "date",
+        "datetime",
+    ]) {
+        default_config[val] = get_type_default(val);
+    }
+    return default_config;
+}

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

@@ -11,10 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { sortHandler } from "./sort.js";
-import { activate_plugin_menu } from "../style_menu.js";
 import { expandCollapseHandler } from "./expand_collapse.js";
 
-export async function mousedown_listener(regularTable, event) {
+export async function mousedown_listener(regularTable, viewer, event) {
     if (event.which !== 1) {
         return;
     }
@@ -38,27 +37,9 @@ export async function mousedown_listener(regularTable, event) {
     }
 
     if (target.classList.contains("psp-menu-enabled")) {
-        target.classList.add("psp-menu-open");
         const meta = regularTable.getMeta(target);
         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 (
-            column_type === "string" ||
-            column_type === "date" ||
-            column_type === "datetime"
-        ) {
-            activate_plugin_menu.call(this, regularTable, target);
-        } else {
-            const [min, max] = await this._view.get_min_max(column_name);
-            let bound = Math.max(Math.abs(min), Math.abs(max));
-            if (bound > 1) {
-                bound = Math.round(bound * 100) / 100;
-            }
-
-            activate_plugin_menu.call(this, regularTable, target, bound);
-        }
-
+        await viewer.toggleColumnSettings(column_name);
         event.preventDefault();
         event.stopImmediatePropagation();
     } else if (target.classList.contains("psp-sort-enabled")) {

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

@@ -129,7 +129,6 @@ export async function createModel(regular, table, view, extend = {}) {
         _num_rows: num_rows,
         _schema,
         _ids: [],
-        _open_column_styles_menu: [],
         _plugin_background,
         _color,
         _pos_fg_color,

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

@@ -10,7 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { column_header_style_listener } from "../style_handlers/column_header.js";
+import {
+    column_header_style_listener,
+    style_selected_column,
+} from "../style_handlers/column_header.js";
 import { group_header_style_listener } from "../style_handlers/group_header.js";
 import { table_cell_style_listener } from "../style_handlers/table_cell";
 import {
@@ -68,7 +71,7 @@ export async function activate(view) {
 
         this.regular_table.addEventListener(
             "mousedown",
-            mousedown_listener.bind(this.model, this.regular_table)
+            mousedown_listener.bind(this.model, this.regular_table, viewer)
         );
 
         // Row selection
@@ -153,6 +156,24 @@ export async function activate(view) {
             )
         );
 
+        // viewer event listeners
+        viewer.addEventListener(
+            "perspective-toggle-column-settings",
+            (event) => {
+                style_selected_column(
+                    this.regular_table,
+                    event.detail.column_name
+                );
+                if (!event.detail.open) {
+                    this.model._column_settings_selected_column = null;
+                    return;
+                }
+
+                this.model._column_settings_selected_column =
+                    event.detail.column_name;
+            }
+        );
+
         this._initialized = true;
     } else {
         await createModel.call(

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

@@ -68,13 +68,6 @@ export function restore(token) {
     }
 
     const datagrid = this.regular_table;
-    try {
-        datagrid._resetAutoSize();
-    } catch (e) {
-        // Do nothing;  this may fail if no auto size info has been read.
-        // TODO fix this regular-table API
-    }
-
     restore_column_size_overrides.call(this, overrides, true);
     datagrid[PRIVATE_PLUGIN_SYMBOL] = token.columns;
 }

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

@@ -18,12 +18,61 @@ function get_psp_type(metadata) {
     }
 }
 
+export function style_selected_column(regularTable, selectedColumn) {
+    const group_header_trs = Array.from(
+        regularTable.children[0].children[0].children
+    );
+    const len = group_header_trs.length;
+    if (len <= 1) {
+        group_header_trs[0]?.setAttribute("id", "psp-column-edit-buttons");
+    } else {
+        group_header_trs.forEach((tr, i) => {
+            let id =
+                i === len - 2
+                    ? "psp-column-titles"
+                    : i === len - 1
+                    ? "psp-column-edit-buttons"
+                    : null;
+            id ? tr.setAttribute("id", id) : tr.removeAttribute("id");
+        });
+    }
+
+    const settings_open =
+        regularTable.parentElement.parentElement.hasAttribute("settings");
+    if (settings_open) {
+        // if settings_open, you will never have less than 2 trs but possibly more e.g. with group-by.
+        // edit and title are guaranteed to be the last two rows
+        let titles = Array.from(group_header_trs[len - 2].children);
+        let editBtns = Array.from(group_header_trs[len - 1].children);
+        if (titles && editBtns) {
+            // clear any sticky styles from tr changes
+            group_header_trs.slice(0, len - 2).forEach((tr) => {
+                Array.from(tr.children).forEach((th) => {
+                    th.classList.toggle("psp-menu-open", false);
+                });
+            });
+            let zipped = titles.map((title, i) => [title, editBtns[i]]);
+            zipped.forEach(([title, editBtn]) => {
+                let open = title.innerText === selectedColumn;
+                title.classList.toggle("psp-menu-open", open);
+                editBtn.classList.toggle("psp-menu-open", open);
+            });
+        }
+    }
+}
+
 export function column_header_style_listener(regularTable) {
     let group_header_trs = Array.from(
         regularTable.children[0].children[0].children
     );
 
     if (group_header_trs.length > 0) {
+        style_selected_column.call(
+            this,
+            regularTable,
+            this._column_settings_selected_column
+        );
+
         let [col_headers] = group_header_trs.splice(
             this._config.split_by.length,
             1
@@ -48,6 +97,7 @@ export function column_header_style_listener(regularTable) {
 }
 
 function style_column_header_row(regularTable, col_headers, is_menu_row) {
+    // regular header styling
     const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
     for (const td of col_headers?.children) {
         const metadata = regularTable.getMeta(td);
@@ -88,10 +138,6 @@ function style_column_header_row(regularTable, col_headers, is_menu_row) {
         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",