Fix issues with Perspective theme and persist config when switching p…

…lugins (#6764)

examples/reference/panes/Perspective.ipynb

@@ -269,7 +269,7 @@
     "df_stream = pd.DataFrame(np.random.randn(400, 4), columns=list('ABCD')).cumsum()\n",
     "\n",
     "stream_perspective = pn.pane.Perspective(\n",
-    "    df_stream, plugin='d3_y_line', columns=['A', 'B', 'C', 'D'], theme='material-dark',\n",
+    "    df_stream, plugin='d3_y_line', columns=['A', 'B', 'C', 'D'], theme='pro-dark',\n",
     "    sizing_mode='stretch_width', height=500, margin=0\n",
     ")\n",
     "\n",

panel/models/perspective.ts

@@ -67,7 +67,9 @@ export class PerspectiveView extends HTMLBoxView {
   _updating: boolean = false
   _config_listener: any = null
   _current_config: any = null
+  _current_plugin: string | null = null
   _loaded: boolean = false
+  _plugin_configs: any = new Map()
 
   override connect_signals(): void {
     super.connect_signals()
@@ -126,7 +128,7 @@ export class PerspectiveView extends HTMLBoxView {
       this.perspective_element.restore({sort: this.model.sort})
     }))
     this.on_change(plugin, not_updating(() => {
-      this.perspective_element.restore({plugin: PLUGINS[this.model.plugin]})
+      this.perspective_element.restore({plugin: PLUGINS[this.model.plugin], ...settings})
     }))
     this.on_change(selectable, not_updating(() => {
       this.perspective_element.restore({plugin_config: {...this._current_config, selectable: this.model.selectable}})
@@ -165,6 +167,7 @@ export class PerspectiveView extends HTMLBoxView {
         zIndex: 0,
       },
     })
+    this._current_plugin = this.model.plugin
     container.innerHTML = "<perspective-viewer style='height:100%; width:100%;'></perspective-viewer>"
     this.perspective_element = container.children[0]
 
@@ -220,7 +223,20 @@ export class PerspectiveView extends HTMLBoxView {
       return true
     }
     this.perspective_element.save().then((config: any) => {
+      if (config.plugin !== this._current_plugin) {
+        this._plugin_configs.set(this._current_plugin, {
+          columns: this._current_config.columns,
+          columns_config: this._current_config.columns_config,
+          plugin_config: this._current_config.plugin_config,
+        })
+        if (this._plugin_configs.has(config.plugin)) {
+          const overrides = this._plugin_configs.get(config.plugin)
+          this.perspective_element.restore(overrides)
+          config = {...config, ...overrides}
+        }
+      }
       this._current_config = config
+      this._current_plugin = config.plugin
       const props: any =  {}
       for (let option in config) {
         let value = config[option]

panel/pane/perspective.py

@@ -420,6 +420,7 @@ def _get_properties(self, doc, source=None):
 
     def _get_theme(self, theme, resources=None):
         from ..models.perspective import THEME_URL
+        theme = theme.replace('material', 'pro')
         theme_url = f'{THEME_URL}{theme}.css'
         if self._bokeh_model is not None:
             self._bokeh_model.__css_raw__ = self._bokeh_model.__css_raw__[:5] + [theme_url]