Add LabelBar datagrid formatting mode

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

packages/viewer-datagrid/src/css/regular_table.css

@@ -265,6 +265,7 @@ tbody th:last-of-type {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 tbody th:empty {
     background-image: linear-gradient(
         to right,
@@ -316,12 +317,44 @@ regular-table:not(.flat-group-rollup-mode) {
 .psp-align-right {
     text-align: right;
 }
+
+.psp-color-mode-label-bar {
+    position: relative;
+    isolation: isolate;
+}
+
+.psp-label-bar {
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px;
+}
+
+.psp-label-bar-fill {
+    position: absolute;
+    top: 10%;
+    height: 80%;
+    background: var(--psp-label-bar-color);
+    pointer-events: none;
+}
+
+.psp-label-bar-text {
+    position: relative;
+    color: var(--psp-label-bar-bg);
+    mix-blend-mode: difference;
+    pointer-events: none;
+}
+
 .psp-align-left {
     text-align: left;
 }
+
 .psp-positive:not(:focus) {
     color: var(--psp-datagrid--pos-cell--color);
 }
+
 .psp-negative:not(:focus) {
     color: var(--psp-datagrid--neg-cell--color);
 }
@@ -363,6 +396,7 @@ regular-table table {
 
     th.psp-header-leaf {
         border-bottom-width: 0px;
+
         span {
             height: 23px;
             min-height: 23px;
@@ -479,6 +513,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -494,6 +529,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -509,6 +545,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -524,6 +561,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,

packages/viewer-datagrid/src/ts/custom_elements/datagrid.ts

@@ -225,14 +225,11 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         this.regular_table.clear();
     }
 
-    async save(): Promise<any> {
+    save(): any {
         return save.call(this);
     }
 
-    async restore(
-        token: DatagridPluginConfig,
-        columns_config?: ColumnsConfig,
-    ): Promise<any> {
+    restore(token: DatagridPluginConfig, columns_config?: ColumnsConfig): void {
         return restore.call(this, token, columns_config ?? {});
     }
 
@@ -243,7 +240,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         }
     }
 
-    async delete(): Promise<void> {
+    delete(): void {
         this.disconnectedCallback();
         this._toolbar = undefined;
         if ((this.regular_table as any).table_model) {

packages/viewer-datagrid/src/ts/data_listener/format_cell.ts

@@ -44,7 +44,11 @@ export function format_cell(
     const plugin: ColumnConfig = plugins[title] || {};
     const is_numeric = type === "integer" || type === "float";
 
-    if (is_numeric && plugin?.number_fg_mode === "bar") {
+    if (
+        is_numeric &&
+        (plugin?.number_fg_mode === "bar" ||
+            plugin?.number_fg_mode === "label-bar")
+    ) {
         const a = Math.max(
             0,
             Math.min(
@@ -54,15 +58,41 @@ export function format_cell(
             ),
         );
 
-        const div = this._div_factory.get();
         const anchor = (val as number) >= 0 ? "left" : "right";
         const pct = (a * 100).toFixed(2);
-        div.setAttribute(
-            "style",
-            `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
-        );
 
-        return div;
+        if (plugin.number_fg_mode === "bar") {
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
+            );
+
+            return div;
+        } else {
+            const wrapper = this._div_factory.get();
+            wrapper.setAttribute("style", "");
+            wrapper.className = "psp-label-bar";
+            while (wrapper.firstChild) {
+                wrapper.removeChild(wrapper.firstChild);
+            }
+            const bar = document.createElement("div");
+            bar.className = "psp-label-bar-fill";
+            bar.setAttribute(
+                "style",
+                `width:calc(${pct}% - 4px);${anchor}:2px;`,
+            );
+            const label = document.createElement("span");
+            label.className = "psp-label-bar-text";
+            const formatter = FORMAT_CACHE.get(type, plugin);
+            label.textContent = formatter
+                ? formatter.format(val)
+                : (val as string);
+            wrapper.appendChild(bar);
+            wrapper.appendChild(label);
+            return wrapper;
+        }
     } else if (plugin?.format === "link" && type === "string") {
         const anchor = document.createElement("a");
         anchor.setAttribute("href", val as string);

packages/viewer-datagrid/src/ts/model/column_overrides.ts

@@ -46,7 +46,10 @@ export function restore_column_size_overrides(
         this._cached_column_sizes = old_sizes;
     }
 
-    const overrides: Record<number, number | undefined> = {};
+    const regular_table = this.regular_table as RegularTableWithOverrides;
+    const overrides: Record<number, number | undefined> = {
+        ...regular_table.saveColumnSizes(),
+    };
     const { group_by } = this.model!._config;
     const tree_header_offset = group_by?.length > 0 ? group_by.length + 1 : 0;
 
@@ -57,15 +60,21 @@ export function restore_column_size_overrides(
                 | undefined;
         } else {
             const index = this.model!._column_paths.indexOf(key);
+            // Skip keys that don't resolve to a known column — e.g. on the
+            // first draw after `activate`, `_column_paths` has not yet been
+            // populated by the data listener, so we leave any existing
+            // `regular-table` widths untouched rather than clobbering them
+            // with garbage indices.
+            if (index === -1) {
+                continue;
+            }
             overrides[index + tree_header_offset] = old_sizes[key] as
                 | number
                 | undefined;
         }
     }
 
-    (this.regular_table as RegularTableWithOverrides).restoreColumnSizes(
-        overrides,
-    );
+    regular_table.restoreColumnSizes(overrides);
 }
 
 /**

packages/viewer-datagrid/src/ts/model/toolbar.ts

@@ -44,8 +44,6 @@ export function toggle_edit_mode(
     if (this._edit_button !== undefined) {
         this._edit_button.dataset.editMode = mode;
     }
-
-    this.dataset.editMode = mode;
 }
 
 export function toggle_scroll_lock(

packages/viewer-datagrid/src/ts/plugin/save.ts

@@ -41,5 +41,6 @@ export function save(
 
         return JSON.parse(JSON.stringify(token));
     }
+
     return {};
 }

packages/viewer-datagrid/src/ts/style_handlers/body.ts

@@ -123,6 +123,11 @@ export function applyBodyCellStyles(
             plugin?.number_fg_mode === "bar" && is_numeric,
         );
 
+        td.classList.toggle(
+            "psp-color-mode-label-bar",
+            plugin?.number_fg_mode === "label-bar" && is_numeric,
+        );
+
         // Apply row header styling
         if (isHeader) {
             cell_style_row_header.call(this, regularTable, td, metadata as any);

packages/viewer-datagrid/src/ts/style_handlers/consolidated.ts

@@ -70,11 +70,9 @@ function isEditableMode(
     const has_pivots =
         model._config.group_by.length === 0 &&
         model._config.split_by.length === 0;
+
     const selectable = viewer.hasAttribute("selectable");
-    const plugin = viewer.children[0] as
-        | (DatagridPluginElement & { dataset: DOMStringMap })
-        | undefined;
-    const editable = allowed || plugin?.dataset?.editMode === "EDIT";
+    const editable = allowed || model._edit_mode === "EDIT";
     return has_pivots && !selectable && editable;
 }
 

packages/viewer-datagrid/src/ts/style_handlers/group_header.ts

@@ -54,6 +54,7 @@ export function applyGroupHeaderStyles(
             );
 
             td.classList.toggle("psp-color-mode-bar", false);
+            td.classList.toggle("psp-color-mode-label-bar", false);
             td.classList.toggle("psp-header-sort-asc", false);
             td.classList.toggle("psp-header-sort-desc", false);
             td.classList.toggle("psp-header-sort-col-asc", false);

packages/viewer-datagrid/src/ts/style_handlers/table_cell/numeric.ts

@@ -180,6 +180,10 @@ export function cell_style_numeric(
         ) {
             (td.children[0] as HTMLElement).style.background = gradhex;
         }
+    } else if (plugin?.number_fg_mode === "label-bar") {
+        td.style.color = "";
+        td.style.setProperty("--psp-label-bar-color", gradhex);
+        td.style.setProperty("--psp-label-bar-bg", hex);
     } else if (plugin?.number_fg_mode === "color" || !plugin?.number_fg_mode) {
         td.style.color = hex;
     }