Add support for popups on selection streams (#6168)

examples/user_guide/13-Custom_Interactivity.ipynb

@@ -18,7 +18,7 @@
     "import holoviews as hv\n",
     "from holoviews import opts\n",
     "\n",
-    "hv.extension('bokeh', 'matplotlib')"
+    "hv.extension('bokeh')"
    ]
   },
   {
@@ -410,6 +410,167 @@
    "source": [
     "taps"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Pop-up panes\n",
+    "\n",
+    "Sometimes, you might want to display additional info, next to the selection, as a floating pane.\n",
+    "\n",
+    "To do this, specify `popup`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "points = hv.Points(np.random.randn(1000, 2))\n",
+    "\n",
+    "hv.streams.BoundsXY(source=points, popup=\"Used Box Select\")\n",
+    "hv.streams.Lasso(source=points, popup=\"Used Lasso Select\")\n",
+    "hv.streams.Tap(source=points, popup=\"Used Tap\")\n",
+    "\n",
+    "points.opts(\n",
+    "    tools=[\"box_select\", \"lasso_select\", \"tap\"],\n",
+    "    active_tools=[\"lasso_select\"],\n",
+    "    size=6,\n",
+    "    color=\"black\",\n",
+    "    fill_color=None,\n",
+    "    width=500,\n",
+    "    height=500\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "An applicable example is using the `popup` to show stats of the selected points."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def popup_stats(index):\n",
+    "    if not index:\n",
+    "        return\n",
+    "    return points.iloc[index].dframe().describe()\n",
+    "\n",
+    "\n",
+    "points = hv.Points(np.random.randn(1000, 2))\n",
+    "\n",
+    "hv.streams.Selection1D(\n",
+    "    source=points,\n",
+    "    popup=popup_stats\n",
+    "\n",
+    ")\n",
+    "\n",
+    "points.opts(\n",
+    "    tools=[\"box_select\", \"lasso_select\", \"tap\"],\n",
+    "    active_tools=[\"lasso_select\"],\n",
+    "    size=6,\n",
+    "    color=\"black\",\n",
+    "    fill_color=None,\n",
+    "    width=500,\n",
+    "    height=500\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The contents of the `popup` can be another HoloViews object too, like the distribution of the selected points."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def popup_distribution(index):\n",
+    "    x, y = points.iloc[index].data.T\n",
+    "    return hv.Distribution((x, y)).opts(\n",
+    "        width=100,\n",
+    "        height=100,\n",
+    "        toolbar=None,\n",
+    "        yaxis=\"bare\",\n",
+    "        xlabel=\"\",\n",
+    "        xticks=[-1, 0, 1],\n",
+    "        xlim=(-2, 2),\n",
+    "    )\n",
+    "\n",
+    "\n",
+    "points = hv.Points(np.random.randn(1000, 2))\n",
+    "\n",
+    "hv.streams.Selection1D(\n",
+    "    source=points,\n",
+    "    popup=popup_distribution,\n",
+    ")\n",
+    "\n",
+    "points.opts(\n",
+    "    tools=[\"box_select\", \"lasso_select\", \"tap\"],\n",
+    "    active_tools=[\"lasso_select\"],\n",
+    "    size=6,\n",
+    "    color=\"black\",\n",
+    "    fill_color=None,\n",
+    "    width=500,\n",
+    "    height=500\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "It can also be a object or any component that can be rendered with Panel, which is an open-source Python library built on top of Bokeh, with a variety of easy-to-use [widgets and panes](https://panel.holoviz.org/reference/index.html#), such as [`Image`](https://panel.holoviz.org/reference/panes/Image.html), [`Button`](https://panel.holoviz.org/reference/widgets/Button.html), [`TextInput`](https://panel.holoviz.org/reference/widgets/TextInput.html), and much more!\n",
+    "\n",
+    "To control the visibility of the `popup`, update `visible` parameter of the provided component."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "pn.extension()\n",
+    "\n",
+    "def popup_form(index):\n",
+    "    def hide_popup(_):\n",
+    "        layout.visible = False\n",
+    "\n",
+    "    if not index:\n",
+    "        return\n",
+    "    df = points.iloc[index].dframe().describe()\n",
+    "    button = pn.widgets.Button(name=\"Close\", sizing_mode=\"stretch_width\")\n",
+    "    layout = pn.Column(button, df)\n",
+    "    button.on_click(hide_popup)\n",
+    "    return layout\n",
+    "\n",
+    "\n",
+    "points = hv.Points(np.random.randn(1000, 2))\n",
+    "hv.streams.Selection1D(source=points, popup=popup_form)\n",
+    "\n",
+    "points.opts(\n",
+    "    tools=[\"box_select\", \"lasso_select\", \"tap\"],\n",
+    "    active_tools=[\"lasso_select\"],\n",
+    "    size=6,\n",
+    "    color=\"black\",\n",
+    "    fill_color=None,\n",
+    "    width=500,\n",
+    "    height=500\n",
+    ")"
+   ]
   }
  ],
  "metadata": {