Info, links, and styling for multichan example

multichannel_timeseries/0_multichan.ipynb

@@ -937,9 +937,8 @@
    "source": [
     "annotator.visible = [\"T1\", \"T2\"]  # Optional, specify which to initially display\n",
     "\n",
-    "annotator_widgets = pn.WidgetBox(\n",
-    "    PanelWidgets(annotator),\n",
-    "    AnnotatorTable(\n",
+    "anno_controls = PanelWidgets(annotator)\n",
+    "anno_table = AnnotatorTable(\n",
     "        annotator,\n",
     "        tabulator_kwargs=dict(\n",
     "            pagination=\"local\",\n",
@@ -950,7 +949,11 @@
     "            stylesheets=[\":host .tabulator {font-size: 12px;}\"],\n",
     "            text_align={\"description\": \"center\"},\n",
     "        ),\n",
-    "    ),\n",
+    "    )\n",
+    "\n",
+    "annotator_widgets = pn.WidgetBox(\n",
+    "    anno_controls,\n",
+    "    anno_table,\n",
     "    max_width=325,\n",
     ")"
    ]
@@ -1060,11 +1063,36 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "app_info = pn.Card(\n",
+    "    pn.pane.Markdown(\n",
+    "        \"\"\"\n",
+    "        👉 **For guidance, visit the [Workflow](https://examples.holoviz.org/gallery/multichannel_timeseries/0_multichan.html).**\n",
+    "        \n",
+    "        This app demonstrates interactive viz of [multichannel timeseries data](https://examples.holoviz.org/gallery/multichannel_timeseries/index.html) using [HoloViz](https://holoviz.org) and [Bokeh](https://bokeh.org/).\n",
+    "        \n",
+    "        Ideal for analyzing and annotating electrophysiological data like EEG, ECoG, or LFP recordings that fit in memory.\n",
+    "\n",
+    "        For handling larger datasets that exceed memory, see this [other Workflow](https://examples.holoviz.org/gallery/multichannel_timeseries/1_large_multichan.html).\n",
+    "        \"\"\",\n",
+    "        sizing_mode=\"stretch_width\",\n",
+    "    ),\n",
+    "    title=\"🎓 Application Info\",\n",
+    "    sizing_mode=\"stretch_width\",\n",
+    ")\n",
+    "\n",
+    "eeg_svg = pn.pane.SVG(\n",
+    "    \"https://raw.githubusercontent.com/holoviz-topics/examples/e9e3346e619671d23e2a0511ae762b8b33ff0ddc/multichannel_timeseries/assets/eeg.svg\",\n",
+    "    sizing_mode=\"scale_both\",\n",
+    ")\n",
+    "\n",
     "servable_app = pn.template.FastListTemplate(\n",
-    "    sidebar = annotator_widgets,\n",
-    "    title = \"HoloViz + Bokeh Multichannel Timeseries with Time-Range Annotator\",\n",
-    "    main = annotated_app,\n",
-    ").servable()"
+    "    site_url=\"https://holoviz.org\",\n",
+    "    logo=\"https://raw.githubusercontent.com/holoviz/holoviz/refs/heads/main/doc/_static/holoviz-logo.svg\",\n",
+    "    favicon=\"https://raw.githubusercontent.com/holoviz/holoviz/refs/heads/main/doc/_static/favicon.ico\",\n",
+    "    sidebar=[eeg_svg, app_info, pn.layout.Divider(), anno_controls, anno_table],\n",
+    "    title=\"HoloViz + Bokeh Multichannel Timeseries with Annotation\",\n",
+    "    main=annotated_app,\n",
+    ").servable()\n"
    ]
   },
   {

multichannel_timeseries/1_large_multichan.ipynb

@@ -854,14 +854,44 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "app_info = pn.Card(\n",
+    "    pn.pane.Markdown(\n",
+    "        \"\"\"\n",
+    "        👉 **For guidance, visit the [Workflow](https://examples.holoviz.org/gallery/multichannel_timeseries/1_large_multichan.html).**\n",
+    "        \n",
+    "        This app demonstrates interactive viz of **larger** [multichannel timeseries data](https://examples.holoviz.org/gallery/multichannel_timeseries/index.html) using [HoloViz](https://holoviz.org) and [Bokeh](https://bokeh.org/).\n",
+    "        \n",
+    "        Ideal for analyzing and annotating electrophysiological data like from electrode arrays.\n",
+    "\n",
+    "        For handling **smaller** datasets that fit in memory, see [this other Workflow](https://examples.holoviz.org/gallery/multichannel_timeseries/0_multichan.html).\n",
+    "        \"\"\",\n",
+    "        sizing_mode=\"stretch_width\",\n",
+    "    ),\n",
+    "    title=\"🎓 Application Info\",\n",
+    "    sizing_mode=\"stretch_width\",\n",
+    ")\n",
+    "\n",
+    "lfp_svg = pn.pane.SVG(\n",
+    "    \"https://raw.githubusercontent.com/holoviz-topics/examples/57c69069baee5242e8446382c7a2c5a8c48c5237/multichannel_timeseries/assets/ephys.svg\",\n",
+    "    sizing_mode=\"scale_both\",\n",
+    ")\n",
+    "\n",
     "servable_app = pn.template.FastListTemplate(\n",
     "    main=[app],\n",
-    "    sidebar=[pn.Column(pyramid_dmap,\n",
-    "                       align=\"center\", \n",
-    "                       sizing_mode=\"stretch_width\")],\n",
-    "    title=\"Multichannel Timeseries with Large Datasets\",\n",
+    "    sidebar=[\n",
+    "        lfp_svg,\n",
+    "        pn.Column(\n",
+    "            app_info,\n",
+    "            pn.layout.Divider(),\n",
+    "            pn.pane.HoloViews(pyramid_dmap, align=\"center\"),\n",
+    "        ),\n",
+    "    ],\n",
+    "    title=\"HoloViz + Bokeh Multichannel Timeseries with Large Datasets\",\n",
     "    accent=\"#3CBAC8\",\n",
-    "    sidebar_width=150,\n",
+    "    sidebar_width=300,\n",
+    "    site_url=\"https://holoviz.org\",\n",
+    "    logo=\"https://raw.githubusercontent.com/holoviz/holoviz/refs/heads/main/doc/_static/holoviz-logo.svg\",\n",
+    "    favicon=\"https://raw.githubusercontent.com/holoviz/holoviz/refs/heads/main/doc/_static/favicon.ico\",\n",
     ").servable()"
    ]
   },