@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

package/src/ts/style_handlers/body.ts

@@ -14,9 +14,7 @@ import { RegularTableElement } from "regular-table";
 
 import {
     type DatagridModel,
-    type PerspectiveViewerElement,
     type ColumnsConfig,
-    type DatagridPluginElement,
     get_psp_type,
 } from "../types.js";
 
@@ -25,39 +23,31 @@ import { cell_style_string } from "./table_cell/string.js";
 import { cell_style_datetime } from "./table_cell/datetime.js";
 import { cell_style_boolean } from "./table_cell/boolean.js";
 import { cell_style_row_header } from "./table_cell/row_header.js";
-import {
-    CollectedCell,
-    LocalSelectedPositionMap,
-    LocalSelectedRowsMap,
-} from "./types.js";
+import { CollectedCell } from "./types.js";
 
 /**
  * Apply styles to all body cells in a single pass.
  */
 export function applyBodyCellStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     cells: CollectedCell[],
     plugins: ColumnsConfig,
     isSettingsOpen: boolean,
     isSelectable: boolean,
     isEditable: boolean,
     regularTable: RegularTableElement,
-    selectedRowsMap: LocalSelectedRowsMap,
-    selectedPositionMap: LocalSelectedPositionMap,
-    viewer: PerspectiveViewerElement,
 ): void {
-    const hasSelected = selectedRowsMap.has(regularTable);
-    const selected = selectedRowsMap.get(regularTable);
+    const selectedId = isSelectable ? model._tree_selection_id : undefined;
 
     regularTable.classList.toggle(
         "flat-group-rollup-mode",
-        this._config.group_rollup_mode === "flat",
+        model._config.group_rollup_mode === "flat",
     );
 
     for (const { element: td, metadata, isHeader } of cells) {
         const column_name =
-            metadata.column_header?.[this._config.split_by.length];
-        const type = get_psp_type(this, metadata);
+            metadata.column_header?.[model._config.split_by.length];
+        const type = get_psp_type(model, metadata);
         const plugin = column_name
             ? plugins[column_name.toString()]
             : undefined;
@@ -66,13 +56,13 @@ export function applyBodyCellStyles(
         // Calculate aggregate depth visibility
         // @ts-ignore
         metadata._is_hidden_by_aggregate_depth =
-            this._config.group_rollup_mode === "rollup" &&
+            model._config.group_rollup_mode === "rollup" &&
             ((x?: number) =>
                 x === 0 || x === undefined
                     ? false
                     : x - 1 <
                       Math.min(
-                          this._config.group_by.length,
+                          model._config.group_by.length,
                           plugin?.aggregate_depth || 0,
                       ))(
                 (metadata.row_header as unknown[] | undefined)?.filter(
@@ -82,19 +72,19 @@ export function applyBodyCellStyles(
 
         // Apply type-specific cell styling
         if (is_numeric) {
-            cell_style_numeric.call(
-                this,
+            cell_style_numeric(
+                model,
                 plugin as any,
                 td,
                 metadata as any,
                 isSettingsOpen,
             );
         } else if (type === "boolean") {
-            cell_style_boolean.call(this, plugin, td, metadata as any);
+            cell_style_boolean(model, plugin, td, metadata as any);
         } else if (type === "string") {
-            cell_style_string.call(this, plugin as any, td, metadata as any);
+            cell_style_string(model, plugin as any, td, metadata as any);
         } else if (type === "date" || type === "datetime") {
-            cell_style_datetime.call(this, plugin as any, td, metadata);
+            cell_style_datetime(model, plugin as any, td, metadata);
         } else {
             td.style.backgroundColor = "";
             td.style.color = "";
@@ -109,10 +99,10 @@ export function applyBodyCellStyles(
         td.classList.toggle("psp-null", metadata.value === null);
         td.classList.toggle("psp-align-right", !isHeader && is_numeric);
         td.classList.toggle("psp-align-left", isHeader || !is_numeric);
-        if (this._column_settings_selected_column) {
+        if (model._column_settings_selected_column) {
             td.classList.toggle(
                 "psp-menu-open",
-                column_name === this._column_settings_selected_column,
+                column_name === model._column_settings_selected_column,
             );
         } else {
             td.classList.toggle("psp-menu-open", false);
@@ -123,9 +113,14 @@ 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);
+            cell_style_row_header(model, regularTable, td, metadata as any);
         }
 
         // Set data attributes
@@ -152,55 +147,53 @@ export function applyBodyCellStyles(
             delete td.dataset.x;
         }
 
-        // Apply selection styling (if selectable)
+        // Apply tree selection styling (SELECT_ROW_TREE).
+        // psp-select-region-inactive is exclusively a tree-selection class,
+        // so always clean it up. psp-select-region is shared with the
+        // coordinate-based selection modes, so only touch it when in
+        // SELECT_ROW_TREE mode (isSelectable).
+        td.classList.toggle("psp-select-region-inactive", false);
         if (isSelectable) {
-            if (!hasSelected) {
-                td.classList.toggle("psp-row-selected", false);
-                td.classList.toggle("psp-row-subselected", false);
+            if (!selectedId) {
+                td.classList.toggle("psp-select-region", false);
             } else {
-                const id = this._ids[(metadata.y ?? 0) - (metadata.y0 ?? 0)];
-                const key_match = (selected as unknown[]).reduce<boolean>(
+                const id = model._ids[(metadata.y ?? 0) - (metadata.y0 ?? 0)];
+                const key_match = selectedId.reduce<boolean>(
                     (agg, x, i) => agg && x === id[i],
                     true,
                 );
 
-                const selectedArr = selected as unknown[];
+                const isExact = id.length === selectedId.length && key_match;
+                const isSub = id.length !== selectedId.length && key_match;
+
                 if (isHeader) {
                     if (
                         metadata.type === "row_header" &&
                         metadata.row_header_x !== undefined &&
                         !!id[metadata.row_header_x]
                     ) {
-                        td.classList.toggle("psp-row-selected", false);
-                        td.classList.toggle("psp-row-subselected", false);
+                        td.classList.toggle("psp-select-region", false);
                     } else {
+                        td.classList.toggle("psp-select-region", isExact);
                         td.classList.toggle(
-                            "psp-row-selected",
-                            id.length === selectedArr.length && key_match,
-                        );
-                        td.classList.toggle(
-                            "psp-row-subselected",
-                            id.length !== selectedArr.length && key_match,
+                            "psp-select-region-inactive",
+                            isSub,
                         );
                     }
                 } else {
-                    td.classList.toggle(
-                        "psp-row-selected",
-                        id.length === selectedArr.length && key_match,
-                    );
-                    td.classList.toggle(
-                        "psp-row-subselected",
-                        id.length !== selectedArr.length && key_match,
-                    );
+                    td.classList.toggle("psp-select-region", isExact);
+                    td.classList.toggle("psp-select-region-inactive", isSub);
                 }
             }
+        } else {
+            td.classList.toggle("psp-select-region", false);
         }
 
         // Apply editable styling (if editable)
         if (!isHeader && metadata.type === "body") {
-            if (isEditable && this._is_editable[metadata.x]) {
+            if (isEditable && model._is_editable[metadata.x]) {
                 const col_name =
-                    metadata.column_header?.[this._config.split_by.length];
+                    metadata.column_header?.[model._config.split_by.length];
                 const col_name_str = col_name?.toString();
                 if (
                     col_name_str &&

package/src/ts/style_handlers/column_header.ts

@@ -11,12 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import {
-    get_psp_type,
-    type DatagridModel,
-    type PerspectiveViewerElement,
-} from "../types.js";
+import { get_psp_type, type DatagridModel } from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 /**
  * Apply selected column styling in response to column settings toggle events.
@@ -24,9 +21,9 @@ import { CollectedHeaderRow } from "./types.js";
  * the column settings panel.
  */
 export function style_selected_column(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     selectedColumn: string | undefined,
 ): void {
     const group_header_trs = Array.from(
@@ -72,7 +69,7 @@ export function style_selected_column(
                 const open = title.textContent === selectedColumn;
                 title.classList.toggle("psp-menu-open", open);
                 editBtn.classList.toggle("psp-menu-open", open);
-                if (this._config.columns.length > 1) {
+                if (model._config.columns.length > 1) {
                     for (const r of regularTable.querySelectorAll("td")) {
                         const meta = regularTable.getMeta(r);
                         if (!meta?.column_header) continue;
@@ -92,16 +89,16 @@ export function style_selected_column(
  * Style a single column header row.
  */
 export function styleColumnHeaderRow(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRow: CollectedHeaderRow,
     regularTable: RegularTableElement,
     is_menu_row: boolean,
 ): void {
     const header_depth =
-        this._config.group_by.length -
-        (this._config.group_rollup_mode === "flat" ? 1 : 0);
+        model._config.group_by.length -
+        (model._config.group_rollup_mode === "flat" ? 1 : 0);
 
-    const selectedColumn = this._column_settings_selected_column;
+    const selectedColumn = model._column_settings_selected_column;
     for (const { element: td, metadata } of headerRow.cells) {
         if (
             !metadata ||
@@ -111,15 +108,15 @@ export function styleColumnHeaderRow(
             continue;
 
         const column_name =
-            metadata.column_header?.[this._config.split_by.length];
+            metadata.column_header?.[model._config.split_by.length];
 
-        const sort = this._config.sort.find((x) => x[0] === column_name);
+        const sort = model._config.sort.find((x) => x[0] === column_name);
         const is_corner = typeof metadata.x === "undefined";
         const needs_border =
             (metadata.type === "corner" &&
                 metadata.row_header_x === header_depth) ||
             (!is_corner &&
-                (metadata.x + 1) % this._config.columns.length === 0);
+                (metadata.x + 1) % model._config.columns.length === 0);
 
         td.classList.toggle("psp-header-border", needs_border);
         td.classList.toggle("psp-header-group", false);
@@ -159,7 +156,7 @@ export function styleColumnHeaderRow(
             !is_menu_row && !!sort && sort[1] === "col desc abs",
         );
 
-        const type = get_psp_type(this, metadata);
+        const type = get_psp_type(model, metadata);
         const is_numeric = type === "integer" || type === "float";
         const is_string = type === "string";
         const is_date = type === "date";
@@ -171,13 +168,13 @@ export function styleColumnHeaderRow(
             "psp-menu-enabled",
             (is_string || is_numeric || is_date || is_datetime) &&
                 !is_corner &&
-                metadata.column_header_y === this._config.split_by.length + 1,
+                metadata.column_header_y === model._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,
+                metadata.column_header_y === model._config.split_by.length,
         );
         td.classList.toggle(
             "psp-is-width-override",
@@ -185,7 +182,7 @@ export function styleColumnHeaderRow(
         );
 
         // Apply menu-open for selected column
-        if (this._config.columns.length > 1 && selectedColumn) {
+        if (model._config.columns.length > 1 && selectedColumn) {
             const isOpen =
                 metadata.column_header?.[metadata.column_header.length - 2] ===
                 selectedColumn;

package/src/ts/style_handlers/consolidated.ts

@@ -14,69 +14,19 @@ import { RegularTableElement } from "regular-table";
 import { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
 import type {
     DatagridModel,
-    PerspectiveViewerElement,
     ColumnsConfig,
     DatagridPluginElement,
-    SelectedPosition,
+    SelectedPositionMap,
 } from "../types.js";
+import { isEditableMode } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 import { applyFocusStyle } from "./focus.js";
-import { styleColumnHeaderRow } from "./column_header.js";
 import { applyColumnHeaderStyles } from "./editable.js";
 import { applyGroupHeaderStyles } from "./group_header.js";
 import { applyBodyCellStyles } from "./body.js";
 import { CellMetadata } from "regular-table/dist/esm/types.js";
-
-interface CollectedCell {
-    element: HTMLElement;
-    metadata: CellMetadata;
-    isHeader: boolean;
-}
-
-interface CollectedHeaderRow {
-    row: HTMLTableRowElement;
-    cells: Array<{
-        element: HTMLTableCellElement;
-        metadata: CellMetadata | undefined;
-    }>;
-}
-
-/**
- * Context object passed through consolidated styling
- */
-export interface StyleContext {
-    model: DatagridModel;
-    regularTable: RegularTableElement;
-    viewer: PerspectiveViewerElement;
-    datagrid: DatagridPluginElement;
-    plugins: ColumnsConfig;
-    isSettingsOpen: boolean;
-    isSelectable: boolean;
-    isEditable: boolean;
-    selectedRowsMap: Map<RegularTableElement, unknown[]>;
-    selectedPositionMap: Map<RegularTableElement, SelectedPosition>;
-}
-
-// Local types for selection maps - match the actual runtime usage
-// (activate.ts uses `as any` casts when passing these)
-type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
-
-function isEditableMode(
-    model: DatagridModel,
-    viewer: PerspectiveViewerElement,
-    allowed: boolean = false,
-): boolean {
-    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";
-    return has_pivots && !selectable && editable;
-}
+import { CollectedCell, CollectedHeaderRow } from "./types.js";
 
 /**
  * Consolidated style listener that handles all cell styling in a single pass.
@@ -86,24 +36,18 @@ function isEditableMode(
  */
 export function createConsolidatedStyleListener(
     datagrid: DatagridPluginElement,
-    selectedRowsMap: LocalSelectedRowsMap,
-    selectedPositionMap: LocalSelectedPositionMap,
-): (
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
-) => void {
-    return function consolidatedStyleListener(
-        this: DatagridModel,
-        regularTable: RegularTableElement,
-        viewer: PerspectiveViewerElement,
-    ): void {
+    viewer: HTMLPerspectiveViewerElement,
+    selectedPositionMap: SelectedPositionMap,
+): () => void {
+    return function consolidatedStyleListener(): void {
         const plugins: ColumnsConfig =
             (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
         const isSettingsOpen = viewer.hasAttribute("settings");
-        const isSelectable = viewer.hasAttribute("selectable");
-        const isEditable = isEditableMode(this, viewer);
-        const isEditableAllowed = isEditableMode(this, viewer, true);
+        const isSelectable = model._edit_mode === "SELECT_ROW_TREE";
+        const isEditable = isEditableMode(model, viewer);
+        const isEditableAllowed = isEditableMode(model, viewer, true);
 
         // Toggle edit mode class on datagrid
         datagrid.classList.toggle("edit-mode-allowed", isEditableAllowed);
@@ -117,7 +61,11 @@ export function createConsolidatedStyleListener(
                         cell as HTMLElement,
                     ) as CellMetadata | undefined;
 
-                    if (metadata) {
+                    if (
+                        metadata &&
+                        (metadata.type === "body" ||
+                            metadata.type === "row_header")
+                    ) {
                         const isHeader = cell.tagName === "TH";
                         bodyCells.push({
                             element: cell as HTMLElement,
@@ -152,67 +100,18 @@ export function createConsolidatedStyleListener(
             }
         }
 
-        this._applyBodyCellStyles(
+        applyBodyCellStyles(
+            model,
             bodyCells,
             plugins,
             isSettingsOpen,
             isSelectable,
             isEditable,
             regularTable,
-            selectedRowsMap,
-            selectedPositionMap,
-            viewer,
         );
 
-        this._applyGroupHeaderStyles(groupHeaderRows, regularTable);
-        this._applyColumnHeaderStyles(groupHeaderRows, regularTable, viewer);
-        this._applyFocusStyle(bodyCells, regularTable, selectedPositionMap);
+        applyGroupHeaderStyles(model, groupHeaderRows, regularTable);
+        applyColumnHeaderStyles(model, groupHeaderRows, regularTable, viewer);
+        applyFocusStyle(model, bodyCells, regularTable, selectedPositionMap);
     };
 }
-
-declare module "../types.js" {
-    interface DatagridModel {
-        _applyBodyCellStyles(
-            cells: CollectedCell[],
-            plugins: ColumnsConfig,
-            isSettingsOpen: boolean,
-            isSelectable: boolean,
-            isEditable: boolean,
-            regularTable: RegularTableElement,
-            selectedRowsMap: LocalSelectedRowsMap,
-            selectedPositionMap: LocalSelectedPositionMap,
-            viewer: PerspectiveViewerElement,
-        ): void;
-        _applyGroupHeaderStyles(
-            headerRows: CollectedHeaderRow[],
-            regularTable: RegularTableElement,
-        ): void;
-        _applyColumnHeaderStyles(
-            headerRows: CollectedHeaderRow[],
-            regularTable: RegularTableElement,
-            viewer: PerspectiveViewerElement,
-        ): void;
-        _applyFocusStyle(
-            cells: CollectedCell[],
-            regularTable: RegularTableElement,
-            selectedPositionMap: LocalSelectedPositionMap,
-        ): void;
-        _styleColumnHeaderRow(
-            headerRow: CollectedHeaderRow,
-            regularTable: RegularTableElement,
-            is_menu_row: boolean,
-        ): void;
-    }
-}
-
-/**
- * Install the styling methods on the DatagridModel prototype.
- * This should be called once during module initialization.
- */
-export function installConsolidatedStyleMethods(modelPrototype: any): void {
-    modelPrototype._applyBodyCellStyles = applyBodyCellStyles;
-    modelPrototype._applyGroupHeaderStyles = applyGroupHeaderStyles;
-    modelPrototype._applyColumnHeaderStyles = applyColumnHeaderStyles;
-    modelPrototype._applyFocusStyle = applyFocusStyle;
-    modelPrototype._styleColumnHeaderRow = styleColumnHeaderRow;
-}

package/src/ts/style_handlers/editable.ts

@@ -12,7 +12,9 @@
 
 import { RegularTableElement } from "regular-table";
 
-import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import type { DatagridModel } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import { styleColumnHeaderRow } from "./column_header.js";
 
 import { CollectedHeaderRow } from "./types.js";
 
@@ -20,15 +22,15 @@ import { CollectedHeaderRow } from "./types.js";
  * Apply styles to column header rows.
  */
 export function applyColumnHeaderStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRows: CollectedHeaderRow[],
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
 ): void {
     if (headerRows.length === 0) return;
 
     // Style selected column for settings panel
-    const selectedColumn = this._column_settings_selected_column;
+    const selectedColumn = model._column_settings_selected_column;
     const len = headerRows.length;
     const settings_open = viewer.hasAttribute("settings");
 
@@ -76,19 +78,19 @@ export function applyColumnHeaderStyles(
     }
 
     // Style the actual column header rows
-    const colHeadersIndex = this._config.split_by.length;
+    const colHeadersIndex = model._config.split_by.length;
     if (colHeadersIndex < headerRows.length) {
         const colHeaders = headerRows[colHeadersIndex];
         if (colHeaders) {
-            this._styleColumnHeaderRow(colHeaders, regularTable, false);
+            styleColumnHeaderRow(model, colHeaders, regularTable, false);
         }
     }
 
-    const menuHeadersIndex = this._config.split_by.length + 1;
+    const menuHeadersIndex = model._config.split_by.length + 1;
     if (menuHeadersIndex < headerRows.length) {
         const menuHeaders = headerRows[menuHeadersIndex];
         if (menuHeaders) {
-            this._styleColumnHeaderRow(menuHeaders, regularTable, true);
+            styleColumnHeaderRow(model, menuHeaders, regularTable, true);
         }
     }
 }

package/src/ts/style_handlers/focus.ts

@@ -11,18 +11,18 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, SelectedPosition } from "../types.js";
-import { CollectedCell, LocalSelectedPositionMap } from "./types.js";
+import type { DatagridModel, SelectedPositionMap } from "../types.js";
+import { CollectedCell } from "./types.js";
 
 /**
  * Apply focus style to the selected cell.
  * Optimized to use collected cells instead of querySelectorAll.
  */
 export function applyFocusStyle(
-    this: DatagridModel,
+    _model: DatagridModel,
     cells: CollectedCell[],
     regularTable: RegularTableElement,
-    selectedPositionMap: LocalSelectedPositionMap,
+    selectedPositionMap: SelectedPositionMap,
 ): void {
     const selected_position = selectedPositionMap.get(regularTable);
     const host = regularTable.getRootNode() as Document;
@@ -60,7 +60,7 @@ export function applyFocusStyle(
  */
 export function focusSelectedCell(
     regularTable: RegularTableElement,
-    selectedPositionMap: Map<RegularTableElement, SelectedPosition>,
+    selectedPositionMap: SelectedPositionMap,
 ): boolean {
     const selected_position = selectedPositionMap.get(regularTable);
     if (!selected_position) {

package/src/ts/style_handlers/group_header.ts

@@ -19,11 +19,11 @@ import { CollectedHeaderRow } from "./types.js";
  * Apply styles to group header rows.
  */
 export function applyGroupHeaderStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRows: CollectedHeaderRow[],
     regularTable: RegularTableElement,
 ): void {
-    const header_depth = this._config.group_by.length;
+    const header_depth = model._config.group_by.length;
     const m: boolean[][] = [];
     let marked = new Set<number>();
 
@@ -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);

package/src/ts/style_handlers/table_cell/boolean.ts

@@ -14,7 +14,7 @@ import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
 export function cell_style_boolean(
-    this: DatagridModel,
+    model: DatagridModel,
     _plugin: ColumnConfig | undefined,
     td: HTMLElement,
     metadata: CellMetadata,
@@ -26,9 +26,9 @@ export function cell_style_boolean(
     } else {
         const [hex]: ColorRecord | [string, number, number, number, string] =
             metadata.user === true
-                ? this._pos_fg_color
+                ? model._pos_fg_color
                 : metadata.user === false
-                  ? this._neg_fg_color
+                  ? model._neg_fg_color
                   : ["", 0, 0, 0, ""];
         td.style.backgroundColor = "";
         td.style.color = hex;