Summary

• Page properties (2 modified, 0 added, 0 removed)
• Attachments (0 modified, 4 added, 0 removed)
  • image-20220412103041-1.png
  • image-20220412103045-2.png
  • matplotlib.png
  • plotly.png

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.ldomide
	1	+XWiki.rominabaila

Content

...	...	@@ -1,10 +1,97 @@
1		-TODO
2		-! pip install -i tvb-widgets
3		-from tvbwidgets.api import TimeseriesWidget
	1	+Source code: [[https:~~/~~/github.com/the-virtual-brain/tvb-widgets>>url:https://github.com/the-virtual-brain/tvb-widgets]]
	2	+
	3	+This is part of a Pypi release: [[https:~~/~~/pypi.org/project/tvb-widgets/>>url:https://pypi.org/project/tvb-widgets/]]
	4	+
	5	+//**tvb-widgets**// is also already installed in the official image released for EBRAINS lab, where you can test it directly.
	6	+
	7	+== Purpose ==
	8	+
	9	+It is a Jupyter Widget intended for the visualization of brain signals represented as time series.
	10	+
	11	+== Backends ==
	12	+
	13	+Starting with //**tvb-widgets 1.5.0**, //the TS widget comes in 2 forms, corresponding to the 2 different libraries (we called them backends) used for plotting: **matplotlib **and **plotly**. The matplotlib backend, build on top of the **mne** library, offers more advanced scientifical features, while the plotly backend has a more appealing look and moves faster when talking about the basic interactions.
	14	+
	15	+Below you can see the TS widget with each backend option (first one using the matplotlib backend, the second one using the plotly backend).
	16	+
	17	+(% style="text-align:center" %)
	18	+[[image:matplotlib.png]]
	19	+
	20	+(% style="text-align:center" %)
	21	+[[image:plotly.png]]
	22	+
	23	+== Inputs ==
	24	+
	25	+Time series can be given as inputs in two forms:
	26	+
	27	+* TVB TimeSeries datatype
	28	+* Numpy arrays
	29	+
	30	+This widget supports 2D, 3D, and 4D arrays. In all three cases, there is a fixed shape that the TimeSeries widget expects:
	31	+
	32	+* for **2D**: (no_timepoints, no_channels)
	33	+* for **3D**: (no_timepoints, state_variable/mode, no_channels)
	34	+* for **4D**: (no_timepoints, state_variable, no_channels, mode)
	35	+
	36	+~* Note that the TVB TimeSeries datatype is always 4D and already has the expected shape.
	37	+
	38	+== Requirements and installation ==
	39	+
	40	+Before installing the tvb-widgets library containing the TimeSeries widget, the following python libraries and Jupyter extensions should be installed:
	41	+
	42	+* **Libraries:**
	43	+** [[mne>>https://mne.tools/0.24/install/index.html]] version 0.24
	44	+** [[ipympl>>https://github.com/matplotlib/ipympl#installation]]
	45	+* (((
	46	+**Extensions:**
	47	+
	48	+(% class="box" %)
	49	+(((
	50	+jupyter labextension install @jupyter-widgets/jupyterlab-manager
	51	+
	52	+jupyter labextension install jupyter-matplotlib
	53	+)))
	54	+)))
	55	+
	56	+Then, to install the tvb-widgets library, just type:
	57	+
	58	+(% class="box" %)
	59	+(((
	60	+pip install tvb-widgets
	61	+)))
	62	+
	63	+== API usage ==
	64	+
	65	+First, the correct matplotlib backend must be set, which enables the interaction with the TimeSeries widget, by running the following command:
	66	+
	67	+(% class="box" %)
	68	+(((
	69	+%matplotlib widget
	70	+)))
	71	+
	72	+ Then, the **TimeSeriesWidget** (from the tvb-widgets API) and the **//display//** function should be imported:
	73	+
	74	+(% class="box" %)
	75	+(((
	76	+from tvbwidgets.api import TimeSeriesWidget
4	4	from IPython.core.display_functions import display
5		-tw = TimeseriesWidget(...)
6		-display(tw.get_widget())
7		-
8		-{{html}}<iframe src="https://drive.google.com/file/d/1mPqBEjEkyn4ziR-qCdmjq6s24QqqNNOV/preview" width="840" height="480" allow="autoplay"></iframe>{{/html}}
	78	+)))
9	9
10		-
	80	+Assuming that the user has already created or imported a valid input, this is how the widget can be initialized and how an input can be assigned to it, using the //**add_datatype** //method (example below assumes that **//tsr//  **is a TVB TimeSeries datatype):
	81	+
	82	+(% class="box" %)
	83	+(((
	84	+tsw = TimeSeriesWidget()
	85	+tsw.add_datatype(tsr)
	86	+)))
	87	+
	88	+Finally, to display and interact with the TimeSeries widget, the **//get_widget//**// //method is used inside the //**display **//function:
	89	+
	90	+(% class="box" %)
	91	+(((
	92	+display(tsw)
	93	+)))
	94	+
	95	+{{html}}
	96	+<iframe width="840" height="480" src="https://www.youtube.com/embed/VmueiXMxbVk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	97	+{{/html}}

image-20220412103041-1.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.rominabaila

Size

...	...	@@ -1,0 +1,1 @@
	1	+680.1 KB

Content

image-20220412103045-2.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.rominabaila

Size

...	...	@@ -1,0 +1,1 @@
	1	+680.1 KB

Content

matplotlib.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.rominabaila

Size

...	...	@@ -1,0 +1,1 @@
	1	+184.9 KB

Content

plotly.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.rominabaila

Size

...	...	@@ -1,0 +1,1 @@
	1	+351.7 KB

Content