Add Vizzu tooltip support

examples/reference/panes/Vizzu.ipynb

@@ -26,9 +26,10 @@
     "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
     "\n",
     "* **``object``** (dict | pd.DataFrame): The data expressed as a Python dictionary of arrays or DataFrame.\n",
-    "* **``animation``** (dict): Animation settings (see [vizzu.Anim](https://lib.vizzuhq.com/latest/reference/modules/vizzu.Anim/)).\n",
-    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart (see [vizzu.Config.Chart](https://lib.vizzuhq.com/latest/reference/interfaces/vizzu.Config.Chart)).\n",
+    "* **``animation``** (dict): Animation settings (see [vizzu.Anim](hhttps://lib.vizzuhq.com/latest/reference/modules/Anim/)).\n",
+    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart (see [vizzu.Config.Chart](https://lib.vizzuhq.com/latest/reference/interfaces/Config.Chart/)).\n",
     "* **``columns``** (list): Optional column definitions. If not defined will be inferred from the data.\n",
+    "* **``tooltips``** (boolean): Whether to enable tooltips on the chart.\n",
     "\n",
     "Methods:\n",
     "\n",
@@ -60,7 +61,7 @@
     "\n",
     "vizzu = pn.pane.Vizzu(\n",
     "    data, config={'geometry': 'rectangle', 'x': 'Name', 'y': 'Weight', 'title': 'Weight by person'},\n",
-    "    duration=400, height=400, sizing_mode='stretch_width'\n",
+    "    duration=400, height=400, sizing_mode='stretch_width', tooltip=True\n",
     ")\n",
     "\n",
     "vizzu"

panel/models/vizzu.py

@@ -2,7 +2,7 @@
 Defines custom VizzuChart bokeh model to render Vizzu charts.
 """
 from bokeh.core.properties import (
-    Any, Dict, Instance, Int, List, String,
+    Any, Bool, Dict, Instance, Int, List, String,
 )
 from bokeh.events import ModelEvent
 from bokeh.models import LayoutDOM
@@ -30,7 +30,7 @@ class VizzuChart(LayoutDOM):
     __javascript_module_exports__ = ['Vizzu']
 
     __javascript_modules__ = [
-        f"{config.npm_cdn}/vizzu@0.7.1/dist/vizzu.min.js"
+        f"{config.npm_cdn}/vizzu@0.8.0/dist/vizzu.min.js"
     ]
 
     @classproperty
@@ -54,3 +54,5 @@ def __js_skip__(cls):
     duration = Int(500)
 
     style = Dict(String, Any)
+
+    tooltip = Bool()

panel/models/vizzu.ts

@@ -50,10 +50,6 @@ export class VizzuChartView extends HTMLBoxView {
 	  else
 	    change = {...change, style: this.model.style}
 	}
-	if (this.update.includes('data') && this.update.length === 1) {
-	  this.render()
-	  return
-	}
 	this._animating = true
 	this.vizzu_view.animate(change, this.model.duration+'ms').then(() => {
 	  this._animating = false
@@ -72,6 +68,9 @@ export class VizzuChartView extends HTMLBoxView {
     this.connect(this.model.source.properties.data.change, () => update_prop('data'))
     this.connect(this.model.source.streaming, () => update_prop('data'))
     this.connect(this.model.source.patching, () => update_prop('data'))
+    this.connect(this.model.properties.tooltip.change, () => {
+      this.vizzu_view.feature('tooltip', this.model.tooltip)
+    })
     this.connect(this.model.properties.style.change, () => update_prop('style'))
   }
 
@@ -136,6 +135,7 @@ export class VizzuChartView extends HTMLBoxView {
       chart.on('click', (event: any) => {
 	this.model.trigger_event(new VizzuEvent(event.data))
       })
+      chart.feature('tooltip', this.model.tooltip)
       this._animating = false
     })
   }
@@ -157,6 +157,7 @@ export namespace VizzuChart {
     source: p.Property<ColumnDataSource>
     duration: p.Property<number>
     style: p.Property<any>
+    tooltip: p.Property<boolean>
   }
 }
 
@@ -174,13 +175,14 @@ export class VizzuChart extends HTMLBox {
   static {
     this.prototype.default_view = VizzuChartView
 
-    this.define<VizzuChart.Props>(({Any, Array, Number, Ref}) => ({
+    this.define<VizzuChart.Props>(({Any, Array, Boolean, Number, Ref}) => ({
       animation:   [ Any,                     {} ],
       config:      [ Any,                     {} ],
       columns:     [ Array(Any),              [] ],
       source:      [ Ref(ColumnDataSource),      ],
       duration:    [ Number,                 500 ],
       style:       [ Any,                     {} ],
+      tooltip:     [ Boolean,              false ],
     }))
   }
 }

panel/pane/vizzu.py

@@ -36,12 +36,12 @@ class Vizzu(ModelPane, SyncableData):
     """
 
     animation = param.Dict(default={}, doc="""
-        Animation settings (see https://lib.vizzuhq.com/latest/reference/modules/vizzu.Anim.html).""")
+        Animation settings (see https://lib.vizzuhq.com/latest/reference/modules/Anim/).""")
 
     config = param.Dict(default={}, doc="""
         The config contains all of the parameters needed to render a
         particular static chart or a state of an animated chart
-        (see https://lib.vizzuhq.com/latest/reference/interfaces/vizzu.Config.Chart.html).""")
+        (see https://lib.vizzuhq.com/latest/reference/interfaces/Config.Chart/).""")
 
     click = param.Parameter(doc="""
         Data associated with the latest click event.""")
@@ -57,6 +57,9 @@ class Vizzu(ModelPane, SyncableData):
     style = param.Dict(default={}, doc="""
         Style configuration of the chart.""")
 
+    tooltip = param.Boolean(default=False, doc="""
+        Whether to enable tooltips on the chart.""")
+
     _data_params: ClassVar[List[str]] = ['object']
 
     _rename: ClassVar[Dict[str, str | None]] = {