Migrate to SlickGrid 5.x

bokehjs/package.json

@@ -41,7 +41,6 @@
   "types": "build/js/types/bokeh.d.ts",
   "dependencies": {
     "@bokeh/numbro": "^1.6.2",
-    "@bokeh/slickgrid": "~2.4.4103",
     "@types/geojson": "^7946.0.13",
     "@types/google.maps": "^3.54.10",
     "@types/proj4": "^2.5.5",
@@ -53,6 +52,7 @@
     "nouislider": "^15.7.1",
     "proj4": "^2.9.2",
     "regl": "^2.1.0",
+    "slickgrid": "~5.8.1",
     "sprintf-js": "^1.1.3",
     "timezone": "^1.0.23",
     "tslib": "^2.6.2",

bokehjs/src/less/widgets/slickgrid.less

@@ -1,3 +1,4 @@
+/*
 @slickgrid: "../../../node_modules/@bokeh/slickgrid";
 
 @import (less) "@{slickgrid}/slick.grid.css";
@@ -85,3 +86,4 @@
 .slick-pager {
   background-image: none;
 }
+*/

bokehjs/src/lib/models/widgets/tables/data_cube.ts

@@ -3,8 +3,8 @@ import {span} from "core/dom"
 import {dict} from "core/util/object"
 import {is_nullish} from "core/util/types"
 import {assert} from "core/util/assert"
-import type {Formatter, Column, GroupTotals, RowMetadata, ColumnMetadata} from "@bokeh/slickgrid"
-import {Grid as SlickGrid, Group} from "@bokeh/slickgrid"
+import type {Formatter, Column, GroupTotals, RowMetadata, ColumnMetadata} from "slickgrid"
+import {SlickGrid, Group} from "slickgrid"
 import type {Item} from "./definitions"
 import {DTINDEX_NAME} from "./definitions"
 import {TableDataProvider, DataTableView, DataTable} from "./data_table"

bokehjs/src/lib/models/widgets/tables/data_table.ts

@@ -1,20 +1,15 @@
-import {RowSelectionModel} from "@bokeh/slickgrid/plugins/slick.rowselectionmodel"
-import {CheckboxSelectColumn} from "@bokeh/slickgrid/plugins/slick.checkboxselectcolumn"
-import {CellExternalCopyManager} from "@bokeh/slickgrid/plugins/slick.cellexternalcopymanager"
-
-import type {DataProvider, SortColumn, OnSortEventArgs, OnSelectedRowsChangedEventArgs, GridOptions} from "@bokeh/slickgrid"
-import {Grid as SlickGrid} from "@bokeh/slickgrid"
+import type {CustomDataView, ItemMetadata, GridOption} from "slickgrid"
+import {SlickGrid, SlickCellCopyManager, SlickRowSelectionModel, SlickCheckboxSelectColumn} from "slickgrid"
 import type * as p from "core/properties"
 import type {StyleSheetLike} from "core/dom"
 import {div} from "core/dom"
 import type {Arrayable} from "core/types"
 import {dict} from "core/util/object"
 import {unique_id} from "core/util/string"
-import {isString, isNumber, is_defined} from "core/util/types"
+import {isNumber, is_defined} from "core/util/types"
 import {some, range, sort_by, map} from "core/util/array"
 import {filter} from "core/util/arrayable"
 import {is_NDArray} from "core/util/ndarray"
-import {logger} from "core/logging"
 import type {DOMBoxSizing} from "../../layouts/layout_dom"
 
 import {WidgetView} from "../widget"
@@ -39,9 +34,7 @@ export const AutosizeModes = {
 }
 export type AutosizeMode = "FCV" | "FVC" | "LFF" | "NOA"
 
-let _warned_not_reorderable = false
-
-export class TableDataProvider implements DataProvider<Item> {
+export class TableDataProvider implements CustomDataView<Item> {
   index: number[]
   source: ColumnarDataSource
   view: CDSView
@@ -76,6 +69,10 @@ export class TableDataProvider implements DataProvider<Item> {
     return item
   }
 
+  getItemMetadata(_index: number): ItemMetadata | null {
+    return null
+  }
+
   getField(offset: number, field: string): unknown {
     if (field == DTINDEX_NAME) {
       return this.index[offset]
@@ -121,8 +118,8 @@ export class TableDataProvider implements DataProvider<Item> {
 
     this.index.sort((i0, i1) => {
       for (const [field, sign] of cols) {
-        const v0 = records[old_index.indexOf(i0)][field!]
-        const v1 = records[old_index.indexOf(i1)][field!]
+        const v0 = records[old_index.indexOf(i0)][field]
+        const v1 = records[old_index.indexOf(i1)][field]
         if (v0 === v1) {
           continue
         }
@@ -330,9 +327,9 @@ export class DataTableView extends WidgetView {
       return {...column.toColumn(), parent: this}
     })
 
-    let checkbox_selector: CheckboxSelectColumn<Item> | null = null
+    let checkbox_selector: SlickCheckboxSelectColumn<Item> | null = null
     if (this.model.selectable == "checkbox") {
-      checkbox_selector = new CheckboxSelectColumn({cssClass: tables.cell_select})
+      checkbox_selector = new SlickCheckboxSelectColumn({cssClass: tables.cell_select})
       columns.unshift(checkbox_selector.getColumnDefinition())
     }
 
@@ -350,16 +347,6 @@ export class DataTableView extends WidgetView {
       }
     }
 
-    let {reorderable} = this.model
-
-    if (reorderable && !(typeof $ != "undefined" && typeof $.fn != "undefined" && "sortable" in $.fn)) {
-      if (!_warned_not_reorderable) {
-        logger.warn("jquery-ui is required to enable DataTable.reorderable")
-        _warned_not_reorderable = true
-      }
-      reorderable = false
-    }
-
     let frozen_row = -1
     let frozen_bottom = false
     const {frozen_rows, frozen_columns} = this.model
@@ -369,9 +356,9 @@ export class DataTableView extends WidgetView {
       frozen_row = Math.abs(frozen_rows)
     }
 
-    const options: GridOptions<Item> = {
+    const options: GridOption<ColumnType> = {
       enableCellNavigation: this.model.selectable !== false,
-      enableColumnReorder: reorderable,
+      enableColumnReorder: this.model.reorderable,
       autosizeColsMode: this.autosize,
       multiColumnSort: this.model.sortable,
       editable: this.model.editable,
@@ -398,45 +385,33 @@ export class DataTableView extends WidgetView {
       this._width = Math.ceil(width)
     }
 
-    this.grid.onSort.subscribe((_event: Event, args: OnSortEventArgs<Item>) => {
+    this.grid.onSort.subscribe((_event, args) => {
       if (!this.model.sortable) {
         return
       }
-      const to_sort = args.sortCols
-      if (to_sort == null) {
+      if (!args.multiColumnSort) {
         return
       }
-      this.data.sort(to_sort)
+      const sort_cols = args.sortCols
+      this.data.sort(sort_cols)
       this.grid.invalidate()
       this.updateSelection()
       this.grid.render()
       if (!this.model.header_row) {
         this._hide_header()
       }
-      this.model.update_sort_columns(to_sort)
+      this.model.update_sort_columns(sort_cols)
     })
 
     if (this.model.selectable !== false) {
-      this.grid.setSelectionModel(new RowSelectionModel({selectActiveRow: checkbox_selector == null}))
+      this.grid.setSelectionModel(new SlickRowSelectionModel({selectActiveRow: checkbox_selector == null}))
       if (checkbox_selector != null) {
         this.grid.registerPlugin(checkbox_selector)
       }
 
-      const pluginOptions = {
-        dataItemColumnValueExtractor(val: Item, col: TableColumn) {
-          // As defined in this file, Item can contain any type values
-          let value = val[col.field]
-          if (isString(value)) {
-            value = value.replace(/\n/g, "\\n")
-          }
-          return value
-        },
-        includeHeaderWhenCopying: false,
-      }
-
-      this.grid.registerPlugin(new CellExternalCopyManager(pluginOptions))
+      this.grid.registerPlugin(new SlickCellCopyManager())
 
-      this.grid.onSelectedRowsChanged.subscribe((_event: Event, args: OnSelectedRowsChangedEventArgs<Item>) => {
+      this.grid.onSelectedRowsChanged.subscribe((_event, args) => {
         if (this._in_selection_update) {
           return
         }

bokehjs/src/lib/models/widgets/tables/definitions.ts

@@ -1,4 +1,4 @@
-import type {Column} from "@bokeh/slickgrid"
+import type {Column} from "slickgrid"
 import type {CellEditor} from "./cell_editors"
 
 export type Item = {[key: string]: any}

bokehjs/src/lib/models/widgets/tables/row_aggregators.ts

@@ -1,6 +1,6 @@
-import type {GroupTotals} from "@bokeh/slickgrid"
-import {Data} from "@bokeh/slickgrid"
-const {Avg, Min, Max, Sum} = Data.Aggregators
+import type {GroupTotals} from "slickgrid"
+import {Aggregators} from "slickgrid"
+const {Avg, Min, Max, Sum} = Aggregators
 
 import type * as p from "core/properties"
 import {Model} from "model"