@holoviz/panel 0.14.0-a.2 → 0.14.0-a.21

package/dist/lib/models/tabulator.js

@@ -112,6 +112,45 @@ function group_data(records, columns, indexes, aggregators) {
     summarize(grouped, columns, aggs);
     return grouped;
 }
+const timestampSorter = function (a, b, _aRow, _bRow, _column, _dir, _params) {
+    // Bokeh serializes datetime objects as UNIX timestamps.
+    //a, b - the two values being compared
+    //aRow, bRow - the row components for the values being compared (useful if you need to access additional fields in the row data for the sort)
+    //column - the column component for the column being sorted
+    //dir - the direction of the sort ("asc" or "desc")
+    //sorterParams - sorterParams object from column definition array
+    // Added an _ in front of some parameters as they're unused and the Typescript compiler was complaining about it.
+    // const alignEmptyValues = params.alignEmptyValues
+    let emptyAlign;
+    emptyAlign = 0;
+    const opts = { zone: new window.luxon.IANAZone('UTC') };
+    // NaN values are serialized to -9223372036854776 by Bokeh
+    if (String(a) == '-9223372036854776') {
+        a = window.luxon.DateTime.fromISO('invalid');
+    }
+    else {
+        a = window.luxon.DateTime.fromMillis(a, opts);
+    }
+    if (String(b) == '-9223372036854776') {
+        b = window.luxon.DateTime.fromISO('invalid');
+    }
+    else {
+        b = window.luxon.DateTime.fromMillis(b, opts);
+    }
+    if (!a.isValid) {
+        emptyAlign = !b.isValid ? 0 : -1;
+    }
+    else if (!b.isValid) {
+        emptyAlign = 1;
+    }
+    else {
+        //compare valid values
+        return a - b;
+    }
+    // Invalid (e.g. NaN) always at the bottom
+    emptyAlign *= -1;
+    return emptyAlign;
+};
 const dateEditor = function (cell, onRendered, success, cancel) {
     //cell - the cell component for the editable cell
     //onRendered - function to call when the editor has been rendered
@@ -204,6 +243,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this._selection_updating = false;
         this._lastVerticalScrollbarTopPosition = 0;
         this._applied_styles = false;
+        this._building = false;
     }
     connect_signals() {
         super.connect_signals();
@@ -217,10 +257,20 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         });
         this.connect(p.children.change, () => this.renderChildren());
         this.connect(p.expanded.change, () => {
+            // The first cell is the cell of the frozen _index column.
             for (const row of this.tabulator.rowManager.getRows()) {
                 if (row.cells.length > 0)
                     row.cells[0].layoutElement();
             }
+            // Make sure the expand icon is changed when expanded is
+            // changed from Python.
+            for (const row of this.tabulator.rowManager.getRows()) {
+                if (row.cells.length > 0) {
+                    const index = row.data._index;
+                    const icon = this.model.expanded.indexOf(index) < 0 ? "►" : "▼";
+                    row.cells[1].element.innerText = icon;
+                }
+            }
         });
         this.connect(p.styles.change, () => {
             if (this._applied_styles)
@@ -265,20 +315,16 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.render();
         this.relayout();
     }
-    renderComplete() {
-        // Only have to set up styles after initial render subsequent
-        // styling is handled by change event on styles property
-        if (this._initializing) {
-            this.setSelection();
-            this.relayout();
-            this._initializing = false;
-            if (this._lastVerticalScrollbarTopPosition)
-                this.tabulator.rowManager.element.scrollTop = this._lastVerticalScrollbarTopPosition;
-        }
-    }
     redraw() {
-        this.tabulator.redraw(true);
-        this.setStyles();
+        if (!this._building) {
+            if (this.tabulator.columnManager.element != null) {
+                this.tabulator.columnManager.redraw(true);
+            }
+            if (this.tabulator.rowManager.renderer != null) {
+                this.tabulator.rowManager.redraw(true);
+                this.setStyles();
+            }
+        }
     }
     after_layout() {
         super.after_layout();
@@ -295,113 +341,96 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         set_size(container, this.model);
         let configuration = this.getConfiguration();
         this.tabulator = new Tabulator(container, configuration);
+        this.init_callbacks();
         this.renderChildren(true);
-        // Swap pagination mode
-        if (this.model.pagination === 'remote') {
-            this.tabulator.options.pagination = this.model.pagination;
-            this.tabulator.modules.page.mode = 'remote';
-        }
-        this.setGroupBy();
         this.setHidden();
-        // Set up page
-        if (this.model.pagination) {
-            this.setMaxPage();
-            this.tabulator.setPage(this.model.page);
-            this.setData();
-        }
-        else
-            this.setFrozen();
         this.el.appendChild(container);
     }
-    /*
-    init_callbacks(): void {
-      // Initialization
-      this.tabulator.on("tableBuilding", () => this.tableInit())
-      this.tabulator.on("tableBuilt", () => this.tableBuilt())
-  
-      // For disabled pagination initialize on renderComplete
-      if (this.model.pagination !== 'remote') {
-        this.tabulator.on("renderComplete", () => {
-          this.tabulator.off("renderComplete")
-          // Apply styles after first render then unsubscribe
-          this.setFrozen()
-          this.setStyles()
-          this.renderChildren()
-          this.tabulator.modules.frozenColumns.active = true
-          this.tabulator.modules.frozenColumns.layout()
-          this.relayout()
-          this._initializing = false
-        })
-      }
-  
-      // Disable frozenColumns during rendering (see https://github.com/olifolkerd/tabulator/issues/3530)
-      this.tabulator.on("dataLoading", () => {
-        this.tabulator.modules.frozenColumns.active = false
-      })
-  
-      // Rendering callbacks
-      this.tabulator.on("selectableCheck", (row: any) => {
-        const selectable = this.model.selectable_rows
-        return (selectable == null) || (selectable.indexOf(row._row.data._index) >= 0)
-      })
-      this.tabulator.on("tooltips", (cell: any) => {
-        return cell.getColumn().getField() + ": " + cell.getValue();
-      })
-      this.tabulator.on("scrollVertical", debounce(() => {
-        this.setStyles()
-      }, 50, false))
-      this.tabulator.on("rowFormatter", (row: any) => this._render_row(row))
-  
-      // Sync state with model
-      this.tabulator.on("rowSelectionChanged", (data: any, rows: any) => this.rowSelectionChanged(data, rows))
-      this.tabulator.on("rowClick", (e: any, row: any) => this.rowClicked(e, row))
-      this.tabulator.on("cellEdited", (cell: any) => this.cellEdited(cell))
-      this.tabulator.on("dataFiltering", () => {
-        this.model.filters = this.tabulator.getHeaderFilters()
-      })
-    }
-  
-    tableInit(): void {
-      // Patch the ajax request and page data parsing methods
-      const ajax = this.tabulator.modules.ajax
-      ajax.sendRequest = () => {
-        return this.requestPage(ajax.params.page, ajax.params.sort)
-      }
-      this.tabulator.modules.page._parseRemoteData = (): boolean => {
-        return false
-      }
-    }
-  
-  
-    tableBuilt(): void {
-      this.setHidden()
-      this.setSelection()
-  
-      // For remote pagination initialize on tableBuilt
-      if (this.model.pagination) {
-        this.setMaxPage()
-        this.tabulator.setPage(this.model.page)
-        this.setStyles()
-        this.renderChildren()
-        this.tabulator.modules.frozenColumns.active = true
-        this.tabulator.modules.frozenColumns.layout()
-        setTimeout(() => this.relayout(), 10)
-        this._initializing = false
-      }
-    }*/
-    tableInit(view, tabulator) {
+    tableInit() {
+        this._building = true;
         // Patch the ajax request and page data parsing methods
-        const ajax = tabulator.modules.ajax;
-        ajax.sendRequest = () => {
-            return view.requestPage(ajax.params.page, ajax.params.sorters);
+        const ajax = this.tabulator.modules.ajax;
+        ajax.sendRequest = (_url, params, _config) => {
+            return this.requestPage(params.page, params.sort);
+        };
+        this.tabulator.modules.page._parseRemoteData = () => {
+            return false;
         };
-        tabulator.modules.page._parseRemoteData = () => { };
+    }
+    init_callbacks() {
+        // Initialization
+        this.tabulator.on("tableBuilding", () => this.tableInit());
+        this.tabulator.on("tableBuilt", () => this.tableBuilt());
+        // Disable frozenColumns during rendering (see https://github.com/olifolkerd/tabulator/issues/3530)
+        this.tabulator.on("dataLoading", () => {
+            this.tabulator.modules.frozenColumns.active = false;
+        });
+        // Rendering callbacks
+        this.tabulator.on("selectableCheck", (row) => {
+            const selectable = this.model.selectable_rows;
+            return (selectable == null) || (selectable.indexOf(row._row.data._index) >= 0);
+        });
+        this.tabulator.on("tooltips", (cell) => {
+            return cell.getColumn().getField() + ": " + cell.getValue();
+        });
+        this.tabulator.on("scrollVertical", debounce(() => {
+            this.setStyles();
+        }, 50, false));
+        this.tabulator.on("rowFormatter", (row) => this._render_row(row));
+        // Sync state with model
+        this.tabulator.on("rowSelectionChanged", (data, rows) => this.rowSelectionChanged(data, rows));
+        this.tabulator.on("rowClick", (e, row) => this.rowClicked(e, row));
+        this.tabulator.on("cellEdited", (cell) => this.cellEdited(cell));
+        this.tabulator.on("dataFiltering", (filters) => {
+            this.model.filters = filters;
+        });
+        this.tabulator.on("dataFiltered", (_, rows) => {
+            if (this._initializing)
+                return;
+            // Ensure that after filtering empty scroll renders
+            if (rows.length === 0)
+                this.tabulator.rowManager.renderEmptyScroll();
+            // Ensure that after filtering the page is updated
+            this.updatePage(this.tabulator.getPage());
+        });
+        this.tabulator.on("pageLoaded", (pageno) => {
+            this.updatePage(pageno);
+        });
+        this.tabulator.on("dataSorting", (sorters) => {
+            const sorts = [];
+            for (const s of sorters) {
+                if (s.field !== '_index')
+                    sorts.push({ field: s.field, dir: s.dir });
+            }
+            if (this.model.pagination !== 'remote') {
+                this._updating_sort = true;
+                this.model.sorters = sorts;
+                this._updating_sort = false;
+            }
+        });
+    }
+    tableBuilt() {
+        this._building = false;
+        this.setHidden();
+        this.setSelection();
+        // For remote pagination initialize on tableBuilt
+        this.setMaxPage();
+        this.tabulator.setPage(this.model.page);
+        this.setStyles();
+        this.renderChildren();
+        this.setGroupBy();
+        this.setFrozen();
+        this.tabulator.modules.frozenColumns.active = true;
+        this.tabulator.modules.frozenColumns.layout();
+        this._initializing = false;
     }
     relayout() {
         if (this._relayouting)
             return;
         this._relayouting = true;
-        this.tabulator.rowManager.adjustTableSize();
+        if (this.tabulator.rowManager.renderer) {
+            this.tabulator.rowManager.adjustTableSize();
+        }
         this.update_layout();
         this.compute_layout();
         if (this.root !== this) {
@@ -463,7 +492,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     getConfiguration() {
         // Only use selectable mode if explicitly requested otherwise manually handle selections
         let selectable = this.model.select_mode === 'toggle' ? true : NaN;
-        const that = this;
         let configuration = {
             ...this.model.configuration,
             index: "_index",
@@ -471,48 +499,16 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             movableColumns: false,
             selectable: selectable,
             columns: this.getColumns(),
-            dataSorting: (sorters) => {
-                const sorts = [];
-                for (const s of sorters) {
-                    if (s.field !== '_index')
-                        sorts.push({ field: s.field, dir: s.dir });
-                }
-                if (this.model.pagination !== 'remote') {
-                    this._updating_sort = true;
-                    this.model.sorters = sorts;
-                    this._updating_sort = false;
-                }
-            },
             initialSort: this.sorters,
             layout: this.getLayout(),
-            pagination: this.model.pagination,
+            pagination: this.model.pagination != null,
+            paginationMode: this.model.pagination,
             paginationSize: this.model.page_size,
-            paginationInitialPage: 1,
-            tableBuilding: function () { that.tableInit(that, this); },
-            renderComplete: () => this.renderComplete(),
-            rowSelectionChanged: (data, rows) => this.rowSelectionChanged(data, rows),
-            rowClick: (e, row) => this.rowClicked(e, row),
-            cellEdited: (cell) => this.cellEdited(cell),
-            selectableCheck: (row) => {
-                const selectable = this.model.selectable_rows;
-                return (selectable == null) || (selectable.indexOf(row._row.data._index) >= 0);
-            },
-            tooltips: (cell) => {
-                return cell.getColumn().getField() + ": " + cell.getValue();
-            },
-            scrollVertical: debounce(() => {
-                this._lastVerticalScrollbarTopPosition = this.tabulator.rowManager.element.scrollTop;
-                this.setStyles();
-            }, 50, false),
-            rowFormatter: (row) => this._render_row(row),
-            dataFiltering: () => {
-                if (this.tabulator != null)
-                    this.model.filters = this.tabulator.getHeaderFilters();
-            }
+            paginationInitialPage: 1
         };
         if (this.model.pagination === "remote") {
             configuration['ajaxURL'] = "http://panel.pyviz.org";
-            configuration['ajaxSorting'] = true;
+            configuration['sortMode'] = "remote";
         }
         const cds = this.model.source;
         let data;
@@ -574,7 +570,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     }
     _expand_render(cell) {
         const index = cell._cell.row.data._index;
-        const icon = this.model.expanded.indexOf(index) < 0 ? "\u25ba" : "\u25bc";
+        const icon = this.model.expanded.indexOf(index) < 0 ? "►" : "▼";
         return "<i>" + icon + "</i>";
     }
     _update_expand(cell) {
@@ -593,8 +589,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             }
         }
         this.model.expanded = expanded;
-        const icon = expanded.indexOf(index) < 0 ? "\u25ba" : "\u25bc";
-        cell._cell.element.innerText = icon;
         if (expanded.indexOf(index) < 0)
             return;
         let ready = true;
@@ -690,6 +684,9 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                     };
                 }
             }
+            if (tab_column.sorter == 'timestamp') {
+                tab_column.sorter = timestampSorter;
+            }
             const editor = column.editor;
             const ctype = editor.type;
             if (tab_column.editor != null) {
@@ -702,8 +699,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             }
             else if (ctype === "StringEditor") {
                 if (editor.completions.length > 0) {
-                    tab_column.editor = "autocomplete";
-                    tab_column.editorParams = { values: editor.completions };
+                    tab_column.editor = "list";
+                    tab_column.editorParams = { values: editor.completions, autocomplete: true, listOnEmpty: true };
                 }
                 else
                     tab_column.editor = "input";
@@ -721,7 +718,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 tab_column.editor = dateEditor;
             }
             else if (ctype === "SelectEditor") {
-                tab_column.editor = "select";
+                tab_column.editor = "list";
                 tab_column.editorParams = { values: editor.options };
             }
             else if (editor != null && editor.default_view != null) {
@@ -742,7 +739,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                     tab_column.headerSortStartingDir = sort.dir;
             }
             tab_column.cellClick = (_, cell) => {
-                const index = cell._cell.row.data._index;
+                const index = cell.getData()._index;
                 this.model.trigger_event(new CellClickEvent(column.field, index));
             };
             if (config_columns == null)
@@ -756,7 +753,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 formatter: button_formatter,
                 hozAlign: "center",
                 cellClick: (_, cell) => {
-                    const index = cell._cell.row.data._index;
+                    const index = cell.getData()._index;
                     this.model.trigger_event(new CellClickEvent(col, index));
                 }
             };
@@ -823,6 +820,13 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         for (const row of this.model.frozen_rows)
             this.tabulator.getRow(row).freeze();
     }
+    updatePage(pageno) {
+        if (this.model.pagination === 'local' && this.model.page !== pageno) {
+            this._updating_page = true;
+            this.model.page = pageno;
+            this._updating_page = false;
+        }
+    }
     setGroupBy() {
         if (this.model.groupby.length == 0) {
             this.tabulator.setGroupBy(false);
@@ -836,6 +840,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             }
             return groups.join(', ');
         };
+        // Need to call it twice, see https://github.com/olifolkerd/tabulator/issues/3666
+        this.tabulator.setGroupBy(groupby);
         this.tabulator.setGroupBy(groupby);
     }
     setSorters() {
@@ -845,10 +851,22 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     }
     setCSS() {
         let theme;
-        if (this.model.theme == "default")
+        let theme_;
+        if (this.model.theme == "default") {
             theme = "tabulator";
-        else
-            theme = "tabulator_" + this.model.theme;
+        }
+        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");
@@ -876,8 +894,10 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         css_node.media = 'screen';
         css_node.href = css;
         css_node.onload = () => {
-            this.render();
-            this.relayout();
+            if (!this._building) {
+                this.render();
+                this.relayout();
+            }
         };
         parent_node.appendChild(css_node);
         return true;
@@ -1017,7 +1037,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     }
     cellEdited(cell) {
         const field = cell._cell.column.field;
-        const index = cell._cell.row.data._index;
+        const index = cell.getData()._index;
         const value = cell._cell.value;
         this._tabulator_cell_updating = true;
         comm_settings.debounce = false;
@@ -1029,7 +1049,6 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             this._tabulator_cell_updating = false;
         }
         this.model.trigger_event(new TableEditEvent(field, index));
-        this.setSorters();
         this.tabulator.scrollToRow(index, "top", false);
     }
 }
@@ -1069,7 +1088,7 @@ export class DataTabulator extends HTMLBox {
             sorters: [Array(Any), []],
             styles: [Any, {}],
             theme: [String, "simple"],
-            theme_url: [String, "https://unpkg.com/tabulator-tables@4.9.3/dist/css/"]
+            theme_url: [String, "https://unpkg.com/tabulator-tables@5.3.2/dist/css/"]
         }));
     }
 }