Fix Tabulator compatibility with bokeh 3.0 (#4150)

holoviz · Dec 6, 2022 · 7c23906 · 7c23906
1 parent 470d9a7
commit 7c23906
Showing 1 changed file with 6 additions and 45 deletions.
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
@@ -1,4 +1,4 @@
-import {undisplay} from "@bokehjs/core/dom"
+import {StyleSheetLike, ImportedStyleSheet, undisplay} from "@bokehjs/core/dom"
 import {isArray} from "@bokehjs/core/util/types"
 import {build_views} from "@bokehjs/core/build_views"
 import {ModelEvent} from "@bokehjs/core/bokeh_events"
@@ -292,9 +292,7 @@ export class DataTabulatorView extends HTMLBoxView {
 
     const p = this.model.properties
     const {configuration, layout, columns, theme, groupby} = p;
-    this.on_change([configuration, layout, columns, groupby], debounce(() => this.invalidate_render(), 20, false))
-
-    this.on_change([theme], () => this.setCSS())
+    this.on_change([configuration, layout, columns, groupby, theme], debounce(() => this.invalidate_render(), 20, false))
 
     this.connect(p.download.change, () => {
       const ftype = this.model.filename.endsWith('.json') ? "json" : "csv"
@@ -389,9 +387,6 @@ export class DataTabulatorView extends HTMLBoxView {
 
   render(): void {
     super.render()
-    const wait = this.setCSS()
-    if (wait)
-      return
     this._initializing = true
     const container = div({class: "pnx-tabulator"})
     //set_size(container, this.model)
@@ -925,7 +920,8 @@ export class DataTabulatorView extends HTMLBoxView {
     this.tabulator.setSort(this.sorters)
   }
 
-  setCSS(): boolean {
+  override styles(): StyleSheetLike[] {
+    const styles = super.styles()
     let theme: string
     let theme_: string
     if (this.model.theme == "default") {
@@ -944,43 +940,8 @@ export class DataTabulatorView extends HTMLBoxView {
       theme = "tabulator_" + theme_
     }
     const css = this.model.theme_url + theme + ".min.css"
-
-    let old_node: any = 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: any = 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
+    styles.push(new ImportedStyleSheet(css))
+    return styles
   }
 
   setStyles(): void {