From 751821d9348bdbc1a606d804f5a44ed6813de254 Mon Sep 17 00:00:00 2001 From: Demetris Roumis Date: Fri, 22 Nov 2024 10:27:58 -0800 Subject: [PATCH] info links and styling to workflow apps --- multichannel_timeseries/0_multichan.ipynb | 44 +++++++++++++++---- .../1_large_multichan.ipynb | 40 ++++++++++++++--- 2 files changed, 71 insertions(+), 13 deletions(-) diff --git a/multichannel_timeseries/0_multichan.ipynb b/multichannel_timeseries/0_multichan.ipynb index baf5b85b2..ec9e62b3b 100644 --- a/multichannel_timeseries/0_multichan.ipynb +++ b/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" ] }, { diff --git a/multichannel_timeseries/1_large_multichan.ipynb b/multichannel_timeseries/1_large_multichan.ipynb index 0eae40b9f..045f5032a 100644 --- a/multichannel_timeseries/1_large_multichan.ipynb +++ b/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()" ] },