Fix expression column button toolbar styling

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

@@ -52,6 +52,8 @@ function write(table, model, active_cell) {
             if (isNaN(text)) {
                 return false;
             }
+        } else if (type === "boolean") {
+            text = text === "check" ? false : text === "close" ? true : null;
         }
 
         const msg = {
@@ -122,7 +124,20 @@ function editableStyleListener(table, viewer) {
     }
     const edit = isEditable.call(this, viewer);
     for (const td of table.querySelectorAll("td")) {
-        td.toggleAttribute("contenteditable", edit);
+        const meta = table.getMeta(td);
+        const type = this.get_psp_type(meta);
+        if (this._is_editable[meta.x]) {
+            if (type === "boolean") {
+                td.toggleAttribute("contenteditable", false);
+                td.classList.toggle("boolean-editable", meta.user !== null);
+            } else {
+                td.toggleAttribute("contenteditable", edit);
+                td.classList.toggle("boolean-editable", false);
+            }
+        } else {
+            td.toggleAttribute("contenteditable", false);
+            td.classList.toggle("boolean-editable", false);
+        }
     }
 }
 
@@ -219,12 +234,25 @@ function focusinListener(table, viewer, event) {
     }
 }
 
+function clickListener(table, _viewer, event) {
+    const meta = table.getMeta(event.target);
+    if (typeof meta?.x !== "undefined") {
+        const is_editable = this._is_editable[meta.x];
+        const is_bool = this.get_psp_type(meta) === "boolean";
+        const is_null = event.target.textContent === "-";
+        if (is_editable && is_bool && !is_null) {
+            write(table, this, event.target);
+        }
+    }
+}
+
 // Plugin
 
 export async function configureEditable(table, viewer) {
     this._edit_port = await viewer.getEditPort();
     table.addStyleListener(editableStyleListener.bind(this, table, viewer));
     table.addStyleListener(focusStyleListener.bind(this, table, viewer));
+    table.addEventListener("click", clickListener.bind(this, table, viewer));
     table.addEventListener(
         "focusin",
         focusinListener.bind(this, table, viewer)

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

@@ -189,11 +189,26 @@ function styleListener(regularTable) {
                     td.style.backgroundColor = "";
                     td.style.color = hex;
                 }
+            } else if (type === "boolean") {
+                const [hex] =
+                    metadata.user === true
+                        ? this._pos_color
+                        : metadata.user === false
+                        ? this._neg_color
+                        : ["", 0, 0, 0, ""];
+
+                td.style.backgroundColor = "";
+                td.style.color = hex;
             } else {
                 td.style.backgroundColor = "";
                 td.style.color = "";
             }
 
+            td.classList.toggle(
+                "psp-bool-type",
+                type === "boolean" && metadata.user !== null
+            );
+
             const is_th = td.tagName === "TH";
             if (is_th) {
                 const is_not_empty =
@@ -233,17 +248,6 @@ function styleListener(regularTable) {
     }
 }
 
-function get_psp_type(metadata) {
-    if (metadata.x >= 0) {
-        const column_path = this._column_paths[metadata.x];
-        const column_path_parts = column_path.split("|");
-        return this._schema[column_path_parts[column_path_parts.length - 1]];
-    } else {
-        const column_path = this._config.row_pivots[metadata.row_header_x - 1];
-        return this._table_schema[column_path];
-    }
-}
-
 async function sortHandler(regularTable, event, target) {
     const meta = regularTable.getMeta(target);
     const column_name = meta.column_header[meta.column_header.length - 1];
@@ -397,7 +401,7 @@ const FORMATTER_CONS = {
     float: Intl.NumberFormat,
     boolean: class {
         format(val) {
-            return val.toString();
+            return val ? "check" : "close";
         }
     },
 };
@@ -498,8 +502,9 @@ async function dataListener(regularTable, x0, y0, x1, y1) {
     }
 
     const data = [],
-        metadata = [];
-    const column_headers = [];
+        metadata = [],
+        column_headers = [];
+
     for (const path of this._column_paths.slice(x0, x1)) {
         const path_parts = path.split("|");
         const column = columns[path] || new Array(y1 - y0).fill(null);
@@ -598,24 +603,44 @@ export async function createModel(regular, table, view, extend = {}) {
     const _neg_color = create_color_record(
         get_rule(regular, "--rt-neg-cell--color", "#FF5942")
     );
+    const _schema = {...schema, ...expression_schema};
+    const _table_schema = {
+        ...table_schema,
+        ...validated_expressions.expression_schema,
+    };
+
+    const _column_paths = column_paths.filter((path) => {
+        return path !== "__ROW_PATH__" && path !== "__ID__";
+    });
+
+    const _is_editable = [];
+    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];
+        _column_types.push(_schema[column]);
+        _is_editable.push(!!table_schema[column]);
+    }
+
     const model = Object.assign(extend, {
         _view: view,
         _table: table,
-        _table_schema: {
-            ...table_schema,
-            ...validated_expressions.expression_schema,
-        },
+        _table_schema,
         _config: config,
         _num_rows: num_rows,
-        _schema: {...schema, ...expression_schema},
+        _schema,
         _ids: [],
         _open_column_styles_menu: [],
         _plugin_background,
         _pos_color,
         _neg_color,
-        _column_paths: column_paths.filter((path) => {
-            return path !== "__ROW_PATH__" && path !== "__ID__";
+        _column_paths,
+        _column_types,
+        _is_editable,
+        _row_header_types: config.row_pivots.map((column_path) => {
+            return _table_schema[column_path];
         }),
+        get_psp_type,
     });
 
     // Re-use div factory
@@ -625,6 +650,14 @@ export async function createModel(regular, table, view, extend = {}) {
     return model;
 }
 
+function get_psp_type(metadata) {
+    if (metadata.x >= 0) {
+        return this._column_types[metadata.x];
+    } else {
+        return this._row_header_types[metadata.row_header_x - 1];
+    }
+}
+
 export async function configureRegularTable(regular, model) {
     regular.addStyleListener(styleListener.bind(model, regular));
     regular.addEventListener(

packages/perspective-viewer-datagrid/src/less/regular_table.less

@@ -147,6 +147,14 @@ regular-table thead tr:last-child th {
     border-left-width: 0px;
 }
 
+.psp-bool-type {
+    font-family: "Material Icons";
+}
+
+.boolean-editable {
+    cursor: pointer;
+}
+
 regular-table table {
     user-select: none;
     color: #161616;
@@ -162,6 +170,10 @@ regular-table table {
         height: 23px;
     }
 
+    .psp-header-group {
+        text-overflow: ellipsis;
+    }
+
     .psp-header-leaf {
         border-bottom-width: 0px;
     }

packages/perspective-viewer-datagrid/test/results/results.json

@@ -14,7 +14,7 @@
     "superstore_displays_visible_columns_": "d7cfabd1879d62859ce4fa057ed0a9d1",
     "superstore_resets_viewable_area_when_the_logical_size_expands_": "e9dd1d275f46f6a0857e0168835d0b38",
     "superstore_resets_viewable_area_when_the_physical_size_expands_": "e469597235cc032619bc095a76f9ad6f",
-    "__GIT_COMMIT__": "b279269baf54c6088d84d5ec1fc3b4664b22519d",
+    "__GIT_COMMIT__": "d6340a9ef5b4eae273567dd5f433fbea4171f8e9",
     "superstore_shows_a_grid_without_any_settings_applied": "9ba7d100dc0f3e91a61668ac2f2ddabb",
     "superstore_pivot_by_a_row": "9fdd64446ba41da3c7bd85191e20f946",
     "superstore_pivot_by_two_rows": "2191bbeac5fd5fd5b53593e877561b14",

rust/perspective-viewer/src/less/column-selector.less

@@ -10,6 +10,17 @@
 @import "./aggregate-selector.less";
 
 :host {
+
+    .column-selector-column-title {
+        display: flex;
+        width: 100%;
+        flex-direction: row !important;
+    }
+
+    #expression-columns .column-selector-column-title {
+        width: calc(100% - 24px);
+    }
+
     #side_panel {
         & > :not(:last-child) {
             margin-bottom: 6px;
@@ -70,8 +81,7 @@
             span.expression-edit-button,
             span.expression-delete-button {
                 padding-left: 6px;
-                padding-right: 4px;
-                position: absolute;
+                padding-right: 0px;
                 font-family: "Material Icons";
                 cursor: pointer;
                 opacity: 1;
@@ -83,14 +93,6 @@
                 }
             }
 
-            span.expression-edit-button {
-                right: 0px;
-            }
-
-            span.expression-delete-button {
-                right: 18px;
-            }
-
             .column_selector_draggable {
                 display: flex;
                 align-items: start;
@@ -120,6 +122,7 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     width: 100%;
+                    flex: 1 1 250px;
                 }
 
                 .column_name:before {
@@ -226,6 +229,11 @@
                 position: relative;
                 .column_selector_draggable {
                     width: calc(100% - 24px);
+
+                    span.expression-edit-button {
+                        margin-left: 18px;
+                    }
+
                 }
 
                 &:before {
@@ -293,6 +301,7 @@
 
                 .column_selector_draggable {
                     border-bottom-color: transparent;
+                    align-items: center;
                 }
             }
         }

rust/perspective-viewer/src/less/config-selector.less

@@ -46,6 +46,12 @@
                 white-space: nowrap;
             }
 
+            span:first-child {
+                text-overflow: ellipsis;
+                max-width: 250px;
+                overflow: hidden;
+            }
+
             // Column is being dragged-over, e.g. this is the drop indicator.
             &.config-drop {
                 display: inline;

rust/perspective-viewer/src/less/viewer.less

@@ -146,7 +146,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        padding: var(--button--padding, 12px 14px 24px 8px);
+        padding: var(--settings-button--padding, 15px 8px);
         overflow: hidden;
         display: flex;
         align-items: center;
@@ -169,4 +169,12 @@
             content: var(--settings-button--content, "\1f527");
         }
     }
+
+    .split-panel {
+        .split-panel-child {
+            &:first-child:not(.is-width-override) {
+                max-width: 250px;
+            }
+        }
+    }
 }

rust/perspective-viewer/src/rust/components/active_column.rs

@@ -285,7 +285,7 @@ impl Component for ActiveColumn {
                             ondragstart={ dragstart }
                             ondragend={ self.props.ondragend.clone() }>
 
-                            <span>
+                            <span class="column-selector-column-title">
                                 <span
                                     ref={ noderef.clone() }
                                     class={ format!("column_name {}", col_type) }>

rust/perspective-viewer/src/rust/components/containers/split_panel.rs

@@ -207,9 +207,15 @@ impl Component for SplitPanel {
             SplitPanelMsg::Reset
         });
 
+        let class = if style.is_some() {
+            "split-panel-child is-width-override"
+        } else {
+            "split-panel-child"
+        };
+
         html! {
             <div id={ self.props.id.clone() } class="split-panel">
-                <div class="split-panel-child" ref={ _ref } style={ style }>
+                <div class={ class } ref={ _ref } style={ style }>
                     { iter.next().unwrap() }
                 </div>
                 <div

rust/perspective-viewer/src/rust/components/inactive_column.rs

@@ -170,7 +170,7 @@ impl Component for InactiveColumn {
                     onmousedown={ add_column }>
                 </span>
                 <div
-                    class="column_selector_draggable"
+                    class="column_selector_draggable column-selector-column-title"
                     draggable="true"
                     ref={ self.add_expression_ref.clone() }
                     ondragstart={ dragstart }

rust/perspective-viewer/src/themes/material-dense.dark.less

@@ -14,7 +14,7 @@
     --side_panel--padding: 12px 4px 12px 8px;
     --top_panel--padding: 0px 0px 12px 0px;
     --column-drop-label--margin: -10px 0px 0px 0px;
-    --button--padding: 12px 8px;
+    --settings-button--padding: 15px 8px;
     --column-drop-label--font-size: 8px;
     --column_selector--width: 24px;
 }

rust/perspective-viewer/src/themes/material-dense.less

@@ -14,7 +14,7 @@
     --side_panel--padding: 12px 4px 12px 8px;
     --top_panel--padding: 0px 0px 12px 0px;
     --column-drop-label--margin: -10px 0px 0px 0px;
-    --button--padding: 12px 9px;
+    --settings-button--padding: 15px 8px;
     --column-drop-label--font-size: 8px;
     --column_selector--width: 24px;
 }

rust/perspective-viewer/src/themes/material.less

@@ -90,7 +90,7 @@ perspective-expression-editor {
     --column_selector--font-size: 16px;
 
     --side_panel--padding: 24px 16px 24px 17px;
-    --button--padding: 24px 17px 0px 17px;
+    --settings-button--padding: 24px 17px 0px 17px;
     --button--font-size: 16px;
 
     --top_panel--padding: 12px 0px 24px 0px;