@perspective-dev/viewer-datagrid 4.0.1 → 4.1.0

package/src/ts/plugin/column_style_controls.ts

@@ -0,0 +1,76 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { ColumnType } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+
+interface NumberStyleOpts {
+    datagrid_number_style: {
+        fg_gradient: number;
+        pos_fg_color: string;
+        neg_fg_color: string;
+        number_fg_mode: string;
+        bg_gradient: number;
+        pos_bg_color: string;
+        neg_bg_color: string;
+        number_bg_mode: string;
+    };
+    number_string_format: boolean;
+}
+
+interface DatetimeStyleOpts {
+    datagrid_datetime_style?: {
+        color: string;
+        bg_color: string;
+    };
+    datagrid_string_style?: {
+        color: string;
+        bg_color: string;
+    };
+}
+
+export type ColumnStyleOpts = NumberStyleOpts | DatetimeStyleOpts | null;
+
+export default function column_style_opts(
+    this: DatagridPluginElement,
+    type: ColumnType,
+    _group: string,
+): ColumnStyleOpts {
+    if (type === "integer" || type === "float") {
+        return {
+            datagrid_number_style: {
+                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",
+            },
+            number_string_format: true,
+        };
+    } else if (type === "date" || type === "datetime" || type === "string") {
+        const control =
+            type === "date" || type === "datetime"
+                ? "datagrid_datetime_style"
+                : `datagrid_string_style`;
+        return {
+            [control]: {
+                color: this.model!._color[0],
+                bg_color: this.model!._color[0],
+            },
+        } as DatetimeStyleOpts;
+    } else {
+        return null;
+    }
+}

package/src/ts/plugin/draw.ts

@@ -0,0 +1,69 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import {
+    restore_column_size_overrides,
+    save_column_size_overrides,
+} from "../model/column_overrides.js";
+import type { View } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+
+interface DatagridPluginWithActivate extends DatagridPluginElement {
+    activate(view: View): Promise<void>;
+}
+
+export async function draw(
+    this: DatagridPluginWithActivate,
+    view: View,
+): Promise<void> {
+    if (this.parentElement) {
+        await this.activate(view);
+    }
+
+    if (!this.isConnected || this.offsetParent == null || !this.model) {
+        return;
+    }
+
+    const old_sizes = save_column_size_overrides.call(this);
+    const drawPromise = this.regular_table.draw({
+        invalid_columns: true,
+    } as any);
+    if (this._reset_scroll_top) {
+        this.regular_table.scrollTop = 0;
+        this._reset_scroll_top = false;
+    }
+
+    if (this._reset_scroll_left) {
+        this.regular_table.scrollLeft = 0;
+        this._reset_scroll_left = false;
+    }
+    if (this._reset_select) {
+        this.regular_table.dispatchEvent(
+            new CustomEvent("psp-deselect-all", { bubbles: false }),
+        );
+        this._reset_select = false;
+    }
+
+    if (this._reset_column_size) {
+        this.regular_table.resetAutoSize();
+        this._reset_column_size = false;
+    }
+
+    restore_column_size_overrides.call(this, old_sizes);
+    await drawPromise;
+
+    this._toolbar?.classList.toggle(
+        "aggregated",
+        this.model._config.group_by.length > 0 ||
+            this.model._config.split_by.length > 0,
+    );
+}

package/src/ts/plugin/restore.ts

@@ -0,0 +1,110 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { restore_column_size_overrides } from "../model/column_overrides.js";
+import {
+    EDIT_MODES,
+    toggle_edit_mode,
+    toggle_scroll_lock,
+} from "../model/toolbar.js";
+import { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
+import { make_color_record } from "../color_utils.js";
+import type {
+    DatagridPluginElement,
+    ColumnOverrides,
+    EditMode,
+    ColumnsConfig,
+    ColorRecord,
+} from "../types.js";
+
+interface RestoreToken {
+    columns?: Record<string, { column_size_override?: number }>;
+    edit_mode?: EditMode;
+    scroll_lock?: boolean;
+}
+
+// interface ColumnConfigWithColors {
+//     pos_fg_color?: string;
+//     neg_fg_color?: string;
+//     pos_bg_color?: string;
+//     neg_bg_color?: string;
+//     color?: string;
+//     [key: string]: unknown;
+// }
+
+interface StylesConfig {
+    pos_fg_color?: ColorRecord;
+    neg_fg_color?: ColorRecord;
+    pos_bg_color?: ColorRecord;
+    neg_bg_color?: ColorRecord;
+    color?: ColorRecord;
+    [key: string]: unknown;
+}
+
+export function restore(
+    this: DatagridPluginElement,
+    token: RestoreToken,
+    columns: ColumnsConfig,
+): void {
+    token = JSON.parse(JSON.stringify(token));
+    columns = JSON.parse(JSON.stringify(columns));
+    const overrides: ColumnOverrides = {};
+
+    if (token.columns) {
+        for (const [col, value] of Object.entries(token.columns)) {
+            if (value.column_size_override !== undefined) {
+                overrides[col] = value.column_size_override;
+                delete value["column_size_override"];
+            }
+        }
+    }
+
+    const styles: Record<string, StylesConfig> = {};
+    if (columns) {
+        for (const [col_name, controls] of Object.entries(columns)) {
+            styles[col_name] = {
+                ...controls,
+                pos_fg_color: controls.pos_fg_color
+                    ? make_color_record(controls.pos_fg_color)
+                    : undefined,
+                neg_fg_color: controls.neg_fg_color
+                    ? make_color_record(controls.neg_fg_color)
+                    : undefined,
+                pos_bg_color: controls.pos_bg_color
+                    ? make_color_record(controls.pos_bg_color)
+                    : undefined,
+                neg_bg_color: controls.neg_bg_color
+                    ? make_color_record(controls.neg_bg_color)
+                    : undefined,
+                color: controls.color
+                    ? make_color_record(controls.color)
+                    : undefined,
+            };
+        }
+    }
+
+    if ("edit_mode" in token && token.edit_mode) {
+        if (EDIT_MODES.indexOf(token.edit_mode) !== -1) {
+            toggle_edit_mode.call(this, token.edit_mode);
+        } else {
+            console.error("Unknown edit mode " + token.edit_mode);
+        }
+    }
+
+    if ("scroll_lock" in token) {
+        toggle_scroll_lock.call(this, token.scroll_lock);
+    }
+
+    const datagrid = this.regular_table;
+    restore_column_size_overrides.call(this, overrides, true);
+    (datagrid as any)[PRIVATE_PLUGIN_SYMBOL] = styles as ColumnsConfig;
+}

package/src/ts/plugin/save.ts

@@ -0,0 +1,45 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { save_column_size_overrides } from "../model/column_overrides.js";
+import type {
+    DatagridPluginElement,
+    DatagridPluginConfig,
+    EditMode,
+} from "../types.js";
+
+export function save(
+    this: DatagridPluginElement,
+): DatagridPluginConfig | Record<string, never> {
+    if (this.regular_table) {
+        const token: DatagridPluginConfig = {
+            columns: {},
+            scroll_lock: !!this._is_scroll_lock,
+            edit_mode: this._edit_mode,
+        };
+
+        const column_size_overrides = save_column_size_overrides.call(this);
+
+        for (const col of Object.keys(column_size_overrides || {})) {
+            if (!token.columns?.[col]) {
+                token.columns = token.columns || {};
+                token.columns[col] = {};
+            }
+
+            token.columns[col].column_size_override =
+                column_size_overrides[col];
+        }
+
+        return JSON.parse(JSON.stringify(token));
+    }
+    return {};
+}

package/src/ts/style_handlers/body.ts

@@ -0,0 +1,228 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { RegularTableElement } from "regular-table";
+
+import type {
+    DatagridModel,
+    PerspectiveViewerElement,
+    ColumnsConfig,
+    DatagridPluginElement,
+} from "../types.js";
+
+import { cell_style_numeric } from "./table_cell/numeric.js";
+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,
+    CellMetaExtended,
+} from "./types.js";
+import { ColumnType } from "@perspective-dev/client";
+
+function get_psp_type(
+    model: DatagridModel,
+    metadata: CellMetaExtended,
+): ColumnType {
+    if (metadata.x !== undefined && metadata.x >= 0) {
+        return model._column_types[metadata.x];
+    } else {
+        return model._row_header_types[(metadata.row_header_x ?? 0) - 1];
+    }
+}
+
+/**
+ * Apply styles to all body cells in a single pass.
+ */
+export function applyBodyCellStyles(
+    this: 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);
+
+    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);
+        const plugin = column_name
+            ? plugins[column_name.toString()]
+            : undefined;
+        const is_numeric = type === "integer" || type === "float";
+
+        // Calculate aggregate depth visibility
+        metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
+            x === 0 || x === undefined
+                ? false
+                : x - 1 <
+                  Math.min(
+                      this._config.group_by.length,
+                      plugin?.aggregate_depth || 0,
+                  ))(
+            (metadata.row_header as unknown[] | undefined)?.filter(
+                (x) => x !== undefined,
+            )?.length,
+        );
+
+        // Apply type-specific cell styling
+        if (is_numeric) {
+            cell_style_numeric.call(
+                this,
+                plugin as any,
+                td,
+                metadata as any,
+                isSettingsOpen,
+            );
+        } else if (type === "boolean") {
+            cell_style_boolean.call(this, plugin, td, metadata as any);
+        } else if (type === "string") {
+            cell_style_string.call(this, plugin as any, td, metadata as any);
+        } else if (type === "date" || type === "datetime") {
+            cell_style_datetime.call(this, plugin as any, td, metadata as any);
+        } else {
+            td.style.backgroundColor = "";
+            td.style.color = "";
+        }
+
+        // Apply common cell classes
+        td.classList.toggle(
+            "psp-bool-type",
+            type === "boolean" && metadata.user !== null,
+        );
+        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) {
+            td.classList.toggle(
+                "psp-menu-open",
+                column_name === this._column_settings_selected_column,
+            );
+        } else {
+            td.classList.toggle("psp-menu-open", false);
+        }
+
+        td.classList.toggle(
+            "psp-color-mode-bar",
+            plugin?.number_fg_mode === "bar" && is_numeric,
+        );
+
+        // Apply row header styling
+        if (isHeader) {
+            cell_style_row_header.call(this, regularTable, td, metadata as any);
+        }
+
+        // Set data attributes
+        const tr = td.parentElement as HTMLElement;
+        if (tr) {
+            tr.dataset.y = String(metadata.y);
+        }
+
+        if (
+            metadata.row_header_x === undefined ||
+            metadata.row_header_x ===
+                (metadata.row_header as unknown[]).length - 1 ||
+            (metadata.row_header as unknown[])[metadata.row_header_x + 1] ===
+                undefined
+        ) {
+            td.dataset.y = String(metadata.y);
+            td.dataset.x = String(metadata.x);
+        } else {
+            delete td.dataset.y;
+            delete td.dataset.x;
+        }
+
+        // Apply selection styling (if selectable)
+        if (isSelectable) {
+            if (!hasSelected) {
+                td.classList.toggle("psp-row-selected", false);
+                td.classList.toggle("psp-row-subselected", false);
+            } else {
+                const id = this._ids[(metadata.y ?? 0) - (metadata.y0 ?? 0)];
+                const key_match = (selected as unknown[]).reduce<boolean>(
+                    (agg, x, i) => agg && x === id[i],
+                    true,
+                );
+
+                const selectedArr = selected as unknown[];
+                if (isHeader) {
+                    if (
+                        metadata.row_header_x !== undefined &&
+                        !!id[metadata.row_header_x]
+                    ) {
+                        td.classList.toggle("psp-row-selected", false);
+                        td.classList.toggle("psp-row-subselected", false);
+                    } 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,
+                        );
+                    }
+                } 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,
+                    );
+                }
+            }
+        }
+
+        // Apply editable styling (if editable)
+        if (!isHeader && metadata.x !== undefined) {
+            if (isEditable && this._is_editable[metadata.x]) {
+                const col_name =
+                    metadata.column_header?.[this._config.split_by.length];
+                const col_name_str = col_name?.toString();
+                if (
+                    col_name_str &&
+                    type === "string" &&
+                    plugins[col_name_str]?.format === "link"
+                ) {
+                    td.toggleAttribute("contenteditable", false);
+                    td.classList.toggle("boolean-editable", false);
+                } else if (type === "boolean") {
+                    td.toggleAttribute("contenteditable", false);
+                    td.classList.toggle(
+                        "boolean-editable",
+                        (metadata as { user?: unknown }).user !== null,
+                    );
+                } else {
+                    if (isEditable !== td.hasAttribute("contenteditable")) {
+                        td.toggleAttribute("contenteditable", isEditable);
+                    }
+                    td.classList.toggle("boolean-editable", false);
+                }
+            } else {
+                td.toggleAttribute("contenteditable", false);
+                td.classList.toggle("boolean-editable", false);
+            }
+        }
+    }
+}