@holoviz/panel 0.14.3 → 1.0.0-a.1

package/dist/lib/models/tabulator.d.ts

@@ -1,32 +1,33 @@
-import { HTMLBox } from "@bokehjs/models/layouts/html_box";
-import { ModelEvent, JSON } from "@bokehjs/core/bokeh_events";
+import { ModelEvent } from "@bokehjs/core/bokeh_events";
 import * as p from "@bokehjs/core/properties";
 import { ColumnDataSource } from "@bokehjs/models/sources/column_data_source";
 import { TableColumn } from "@bokehjs/models/widgets/tables";
-import { PanelHTMLBoxView } from "./layout";
+import { Attrs } from "@bokehjs/core/types";
+import { HTMLBox, HTMLBoxView } from "./layout";
 export declare class TableEditEvent extends ModelEvent {
     readonly column: string;
     readonly row: number;
     readonly pre: boolean;
     event_name: string;
+    publish: boolean;
     constructor(column: string, row: number, pre: boolean);
-    protected _to_json(): JSON;
+    protected get event_values(): Attrs;
 }
 export declare class CellClickEvent extends ModelEvent {
     readonly column: string;
     readonly row: number;
     event_name: string;
+    publish: boolean;
     constructor(column: string, row: number);
-    protected _to_json(): JSON;
+    protected get event_values(): Attrs;
 }
-export declare class DataTabulatorView extends PanelHTMLBoxView {
+export declare class DataTabulatorView extends HTMLBoxView {
     model: DataTabulator;
     tabulator: any;
     columns: Map<string, any>;
     _tabulator_cell_updating: boolean;
     _updating_page: boolean;
     _updating_sort: boolean;
-    _relayouting: boolean;
     _selection_updating: boolean;
     _initializing: boolean;
     _lastVerticalScrollbarTopPosition: number;
@@ -41,11 +42,10 @@ export declare class DataTabulatorView extends PanelHTMLBoxView {
     tableInit(): void;
     init_callbacks(): void;
     tableBuilt(): void;
-    relayout(): void;
     requestPage(page: number, sorters: any[]): Promise<void>;
     getLayout(): string;
     getConfiguration(): any;
-    renderChildren(initializing?: boolean): void;
+    renderChildren(): void;
     _render_row(row: any): void;
     _expand_render(cell: any): string;
     _update_expand(cell: any): void;
@@ -60,7 +60,6 @@ export declare class DataTabulatorView extends PanelHTMLBoxView {
     updatePage(pageno: number): void;
     setGroupBy(): void;
     setSorters(): void;
-    setCSS(): boolean;
     setStyles(): void;
     setHidden(): void;
     setMaxPage(): void;
@@ -100,9 +99,7 @@ export declare namespace DataTabulator {
         selectable_rows: p.Property<number[] | null>;
         source: p.Property<ColumnDataSource>;
         sorters: p.Property<any[]>;
-        styles: p.Property<any>;
-        theme: p.Property<string>;
-        theme_url: p.Property<string>;
+        cell_styles: p.Property<any>;
     };
 }
 export interface DataTabulator extends DataTabulator.Attrs {
@@ -111,5 +108,4 @@ export declare class DataTabulator extends HTMLBox {
     properties: DataTabulator.Props;
     constructor(attrs?: Partial<DataTabulator.Attrs>);
     static __module__: string;
-    static init_DataTabulator(): void;
 }

package/dist/lib/models/tabulator.js

@@ -1,6 +1,6 @@
+var _a;
 import { undisplay } from "@bokehjs/core/dom";
 import { isArray } from "@bokehjs/core/util/types";
-import { HTMLBox } from "@bokehjs/models/layouts/html_box";
 import { build_views } from "@bokehjs/core/build_views";
 import { ModelEvent } from "@bokehjs/core/bokeh_events";
 import { div } from "@bokehjs/core/dom";
@@ -10,7 +10,7 @@ import { TableColumn } from "@bokehjs/models/widgets/tables";
 import { debounce } from "debounce";
 import { comm_settings } from "./comm_manager";
 import { transform_cds_to_records } from "./data";
-import { PanelHTMLBoxView, set_size } from "./layout";
+import { HTMLBox, HTMLBoxView } from "./layout";
 export class TableEditEvent extends ModelEvent {
     constructor(column, row, pre) {
         super();
@@ -18,8 +18,9 @@ export class TableEditEvent extends ModelEvent {
         this.row = row;
         this.pre = pre;
         this.event_name = "table-edit";
+        this.publish = true;
     }
-    _to_json() {
+    get event_values() {
         return { model: this.origin, column: this.column, row: this.row, pre: this.pre };
     }
 }
@@ -30,8 +31,9 @@ export class CellClickEvent extends ModelEvent {
         this.column = column;
         this.row = row;
         this.event_name = "cell-click";
+        this.publish = true;
     }
-    _to_json() {
+    get event_values() {
         return { model: this.origin, column: this.column, row: this.row };
     }
 }
@@ -234,14 +236,13 @@ const datetimeEditor = function (cell, onRendered, success, cancel) {
     });
     return input;
 };
-export class DataTabulatorView extends PanelHTMLBoxView {
+export class DataTabulatorView extends HTMLBoxView {
     constructor() {
         super(...arguments);
         this.columns = new Map();
         this._tabulator_cell_updating = false;
         this._updating_page = true;
         this._updating_sort = false;
-        this._relayouting = false;
         this._selection_updating = false;
         this._lastVerticalScrollbarTopPosition = 0;
         this._applied_styles = false;
@@ -250,13 +251,12 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     connect_signals() {
         super.connect_signals();
         const p = this.model.properties;
-        const { configuration, layout, columns, theme, groupby } = p;
+        const { configuration, layout, columns, groupby } = p;
         this.on_change([configuration, layout, groupby], debounce(() => this.invalidate_render(), 20, false));
         this.on_change([columns], () => {
             this.tabulator.setColumns(this.getColumns());
             this.setHidden();
         });
-        this.on_change([theme], () => this.setCSS());
         this.connect(p.download.change, () => {
             const ftype = this.model.filename.endsWith('.json') ? "json" : "csv";
             this.tabulator.download(ftype, this.model.filename);
@@ -278,7 +278,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 }
             }
         });
-        this.connect(p.styles.change, () => {
+        this.connect(p.cell_styles.change, () => {
             if (this._applied_styles)
                 this.tabulator.redraw(true);
             this.setStyles();
@@ -322,7 +322,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.tabulator.destroy();
         this.tabulator = null;
         this.render();
-        this.relayout();
     }
     redraw() {
         if (!this._building) {
@@ -337,23 +336,21 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     }
     after_layout() {
         super.after_layout();
-        if (this.tabulator != null && (!this._relayouting || this._initializing))
+        if (this.tabulator != null && this._initializing)
             this.redraw();
     }
     render() {
         super.render();
-        const wait = this.setCSS();
-        if (wait)
-            return;
         this._initializing = true;
-        const container = div({ class: "pnx-tabulator" });
-        set_size(container, this.model);
+        const container = div({ style: "display: contents;" });
+        const el = div({ class: "pnx-tabulator", style: "width: 100%; height: 100%;" });
+        container.appendChild(el);
         let configuration = this.getConfiguration();
-        this.tabulator = new Tabulator(container, configuration);
+        this.tabulator = new Tabulator(el, configuration);
         this.init_callbacks();
-        this.renderChildren(true);
+        this.renderChildren();
         this.setHidden();
-        this.el.appendChild(container);
+        this.shadow_el.appendChild(container);
     }
     tableInit() {
         this._building = true;
@@ -433,29 +430,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.tabulator.modules.frozenColumns.layout();
         this._initializing = false;
     }
-    relayout() {
-        if (this._relayouting)
-            return;
-        this._relayouting = true;
-        if (this.tabulator.rowManager.renderer) {
-            this.tabulator.rowManager.adjustTableSize();
-        }
-        this.update_layout();
-        this.compute_layout();
-        if (this.root !== this) {
-            this.invalidate_layout();
-            const parent = this.root._parent;
-            if (parent != null && parent.relayout != null)
-                parent.relayout();
-        }
-        else if (this._parent != null) { // HACK: Support ReactiveHTML
-            if (this._parent.relayout != null)
-                this._parent.relayout();
-            else
-                this._parent.invalidate_layout();
-        }
-        this._relayouting = false;
-    }
     requestPage(page, sorters) {
         return new Promise((resolve, reject) => {
             try {
@@ -532,12 +506,12 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             "data": data,
         };
     }
-    renderChildren(initializing = false) {
+    renderChildren() {
         new Promise(async (resolve) => {
             const children = [];
             for (const idx of this.model.expanded) {
-                if (idx in this.model.children)
-                    children.push(this.model.children[idx]);
+                if (this.model.children.has(idx))
+                    children.push(this.model.children.get(idx));
             }
             await build_views(this._child_views, children, { parent: null });
             resolve(null);
@@ -546,15 +520,13 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 const row = this.tabulator.getRow(r);
                 this._render_row(row);
             }
-            if ((!this.model.expanded.length) && (!initializing))
-                setTimeout(() => this.relayout(), 20);
         });
     }
     _render_row(row) {
-        const index = row._row.data._index;
-        if (this.model.expanded.indexOf(index) < 0 || !(index in this.model.children))
+        const index = row._row?.data._index;
+        if (!this.model.expanded.includes(index) || !this.model.children.has(index))
             return;
-        const model = this.model.children[index];
+        const model = this.model.children.get(index);
         const view = this._child_views.get(model);
         if (view == null)
             return;
@@ -574,8 +546,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             const neg_margin = "-" + rowEl.style.paddingLeft;
             viewEl = div({ style: "background-color: " + bg + "; margin-left:" + neg_margin });
         }
-        row.getElement().appendChild(viewEl);
-        view.renderTo(viewEl);
+        rowEl.appendChild(viewEl);
+        view.render_to(viewEl);
     }
     _expand_render(cell) {
         const index = cell._cell.row.data._index;
@@ -698,6 +670,9 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             if (tab_column.sorter == 'timestamp') {
                 tab_column.sorter = timestampSorter;
             }
+            if (tab_column.sorter === undefined) {
+                tab_column.sorter = "string";
+            }
             const editor = column.editor;
             const ctype = editor.type;
             if (tab_column.editor != null) {
@@ -755,7 +730,10 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             }
             tab_column.cellClick = (_, cell) => {
                 const index = cell.getData()._index;
-                this.model.trigger_event(new CellClickEvent(column.field, index));
+                const event = new CellClickEvent(column.field, index);
+                debugger;
+                console.log(event);
+                this.model.trigger_event(event);
             };
             if (config_columns == null)
                 columns.push(tab_column);
@@ -769,7 +747,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 hozAlign: "center",
                 cellClick: (_, cell) => {
                     const index = cell.getData()._index;
-                    this.model.trigger_event(new CellClickEvent(col, index));
+                    const event = new CellClickEvent(col, index);
+                    this.model.trigger_event(event);
                 }
             };
             columns.push(button_column);
@@ -802,9 +781,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         const data = this.getData();
         if (this.model.pagination != null)
             this.tabulator.rowManager.setData(data, true, false);
-        else {
+        else
             this.tabulator.setData(data);
-        }
         this.postUpdate();
     }
     addData() {
@@ -820,8 +798,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         if (!this.model.pagination)
             this.setFrozen();
         this.setSelection();
-        if (this.model.height == null && this.model.pagination == null)
-            this.relayout();
     }
     updateOrAddData() {
         // To avoid double updating the tabulator data
@@ -864,71 +840,20 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             return;
         this.tabulator.setSort(this.sorters);
     }
-    setCSS() {
-        let theme;
-        let theme_;
-        if (this.model.theme == "default") {
-            theme = "tabulator";
-        }
-        else {
-            if (this.model.theme == "bootstrap") {
-                theme_ = "bootstrap3";
-            }
-            else if (this.model.theme == "semantic-ui") {
-                theme_ = "semanticui";
-            }
-            else {
-                theme_ = this.model.theme;
-            }
-            theme = "tabulator_" + theme_;
-        }
-        const css = this.model.theme_url + theme + ".min.css";
-        let old_node = null;
-        const links = document.getElementsByTagName("link");
-        const dist_index = this.model.theme_url.indexOf('dist/');
-        const start_url = this.model.theme_url.slice(0, dist_index);
-        for (const link of links) {
-            if (link.href.indexOf(start_url) >= 0) {
-                old_node = link;
-                break;
-            }
-        }
-        if (old_node != null) {
-            if (old_node.href.endsWith(css))
-                return false;
-            else {
-                old_node.href = css;
-                setTimeout(() => this.render(), 100);
-                return true;
-            }
-        }
-        let parent_node = document.getElementsByTagName("head")[0];
-        const css_node = document.createElement('link');
-        css_node.type = 'text/css';
-        css_node.rel = 'stylesheet';
-        css_node.media = 'screen';
-        css_node.href = css;
-        css_node.onload = () => {
-            if (!this._building) {
-                this.render();
-                this.relayout();
-            }
-        };
-        parent_node.appendChild(css_node);
-        return true;
-    }
     setStyles() {
-        if (this.tabulator == null || this.tabulator.getDataCount() == 0)
+        const style_data = this.model.cell_styles.data;
+        if (this.tabulator == null || this.tabulator.getDataCount() == 0 || !style_data.size)
             return;
         this._applied_styles = false;
-        for (const r in this.model.styles.data) {
-            const row_style = this.model.styles.data[r];
+        for (const r of style_data.keys()) {
+            const row_style = style_data.get(r);
             const row = this.tabulator.getRow(r);
+            console.log(row, row_style);
             if (!row)
                 continue;
             const cells = row._row.cells;
-            for (const c in row_style) {
-                const style = row_style[c];
+            for (const c of row_style.keys()) {
+                const style = row_style.get(c);
                 const cell = cells[c];
                 if (cell == null || !style.length)
                     continue;
@@ -998,7 +923,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         const selected = this.model.source.selected;
         const index = row._row.data._index;
         if (e.ctrlKey || e.metaKey) {
-            indices = this.model.source.selected.indices;
+            indices = [...this.model.source.selected.indices];
         }
         else if (e.shiftKey && selected.indices.length) {
             const start = selected.indices[selected.indices.length - 1];
@@ -1080,40 +1005,38 @@ export class DataTabulator extends HTMLBox {
     constructor(attrs) {
         super(attrs);
     }
-    static init_DataTabulator() {
-        this.prototype.default_view = DataTabulatorView;
-        this.define(({ Any, Array, Boolean, Nullable, Number, Ref, String }) => ({
-            aggregators: [Any, {}],
-            buttons: [Any, {}],
-            children: [Any, {}],
-            configuration: [Any, {}],
-            columns: [Array(Ref(TableColumn)), []],
-            download: [Boolean, false],
-            editable: [Boolean, true],
-            expanded: [Array(Number), []],
-            filename: [String, "table.csv"],
-            filters: [Array(Any), []],
-            follow: [Boolean, true],
-            frozen_rows: [Array(Number), []],
-            groupby: [Array(String), []],
-            hidden_columns: [Array(String), []],
-            indexes: [Array(String), []],
-            layout: [TableLayout, "fit_data"],
-            max_page: [Number, 0],
-            pagination: [Nullable(String), null],
-            page: [Number, 0],
-            page_size: [Number, 0],
-            select_mode: [Any, true],
-            selectable_rows: [Nullable(Array(Number)), null],
-            source: [Ref(ColumnDataSource)],
-            sorters: [Array(Any), []],
-            styles: [Any, {}],
-            theme: [String, "simple"],
-            theme_url: [String, "https://unpkg.com/tabulator-tables@5.3.2/dist/css/"]
-        }));
-    }
 }
+_a = DataTabulator;
 DataTabulator.__name__ = "DataTabulator";
 DataTabulator.__module__ = "panel.models.tabulator";
-DataTabulator.init_DataTabulator();
+(() => {
+    _a.prototype.default_view = DataTabulatorView;
+    _a.define(({ Any, Array, Boolean, Nullable, Number, Ref, String }) => ({
+        aggregators: [Any, {}],
+        buttons: [Any, {}],
+        children: [Any, {}],
+        configuration: [Any, {}],
+        columns: [Array(Ref(TableColumn)), []],
+        download: [Boolean, false],
+        editable: [Boolean, true],
+        expanded: [Array(Number), []],
+        filename: [String, "table.csv"],
+        filters: [Array(Any), []],
+        follow: [Boolean, true],
+        frozen_rows: [Array(Number), []],
+        groupby: [Array(String), []],
+        hidden_columns: [Array(String), []],
+        indexes: [Array(String), []],
+        layout: [TableLayout, "fit_data"],
+        max_page: [Number, 0],
+        pagination: [Nullable(String), null],
+        page: [Number, 0],
+        page_size: [Number, 0],
+        select_mode: [Any, true],
+        selectable_rows: [Nullable(Array(Number)), null],
+        source: [Ref(ColumnDataSource)],
+        sorters: [Array(Any), []],
+        cell_styles: [Any, {}],
+    }));
+})();
 //# sourceMappingURL=tabulator.js.map