Info, links, and styling for multichan example (#453)

* eeg svg

* ephys svg

* info links and styling to workflow apps

* replace exoplanets in featured cat

* dark theme and update thumbnail and header

exoplanets/anaconda-project.yml

@@ -7,7 +7,6 @@ examples_config:
     - ablythed
   categories:
     - Geospatial
-    - Featured
   labels:
     - hvplot
     - panel

multichannel_timeseries/0_multichan.ipynb

@@ -18,8 +18,8 @@
    "metadata": {},
    "source": [
     "<img \n",
-    "    src=\"./assets/240927_multichan.png\" \n",
-    "    alt=\"Multichannel Timeseries Workflow\" \n",
+    "    src=\"./assets/multichan_header.png\" \n",
+    "    alt=\"Multichannel Timeseries\"\n",
     "    align=\"center\" \n",
     "    style=\"border: 2px solid #ccc; border-radius: 8px; padding: 5px; width: 100%; box-shadow: 0px 4px 8px rgba(0,0,0,0.1);\">\n"
    ]
@@ -447,6 +447,7 @@
     "        subcoordinate_y=True, # Essential to create vertically stacked plot\n",
     "        subcoordinate_scale=3,\n",
     "        color=\"black\",\n",
+    "        bgcolor=\"whitesmoke\",\n",
     "        line_width=1,\n",
     "        hover_tooltips = [\n",
     "            (\"type\", \"$group\"),\n",
@@ -937,9 +938,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 +950,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,10 +1064,54 @@
    "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",
+    "        styles={\"color\": \"black\",\n",
+    "            },\n",
+    "    ),\n",
+    "    title=\"👉 App Info\",\n",
+    "    sizing_mode=\"stretch_width\",\n",
+    "    header_background=\"#122944\",\n",
+    "    header_color=\"WhiteSmoke\",\n",
+    "    styles={\"background\": \"WhiteSmoke\",\n",
+    "            },\n",
+    "    margin=10,\n",
+    "    collapsed=True,\n",
+    ")\n",
+    "\n",
+    "eeg_svg = pn.Column(\n",
+    "    pn.pane.SVG(\n",
+    "        \"https://raw.githubusercontent.com/holoviz-topics/examples/e9e3346e619671d23e2a0511ae762b8b33ff0ddc/multichannel_timeseries/assets/eeg.svg\",\n",
+    "        sizing_mode=\"scale_both\",\n",
+    "    ),\n",
+    "    sizing_mode='stretch_both',\n",
+    "    min_height=300,\n",
+    "    styles={\"background\": \"WhiteSmoke\",\n",
+    "            \"border-radius\": \"10px\",\n",
+    "            \"border\": \"4px solid #122944\"},\n",
+    "    margin=10,\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",
+    "    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",
+    "    accent='#122944',\n",
+    "    theme='dark',\n",
+    "    sidebar_width=400,\n",
     ").servable()"
    ]
   },
@@ -1073,7 +1121,7 @@
    "source": [
     "\n",
     "<img  \n",
-    "    src=\"./assets/multichan_standalone.png\" \n",
+    "    src=\"./assets/multichan_header.png\" \n",
     "    alt=\"Static Preview Multichan Standalone\" \n",
     "    align=\"right\" \n",
     "    width=\"70%\">\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()"
    ]
   },

multichannel_timeseries/anaconda-project.yml

@@ -13,6 +13,7 @@ examples_config:
   - "holonote"
   categories:
   - Neuroscience
+  - Featured
   title: "Multichannel Timeseries"
   deployments:
   # - command: notebook