Warning:  Due to planned infrastructure maintenance, the EBRAINS Wiki and EBRAINS Support system will be unavailable for up to three days starting Monday, 14 July. During this period, both services will be inaccessible, and any emails sent to the support address will not be received.

Attention: The EBRAINS Chat will down on Thursday, the 10th of July 2025 starting from 18.00pm CEST (my timezone) for up to 1 hour. 

Warning: The EBRAINS Drive, EBRAINS Bucket and EBRAINS Lab will down today, Wednesday, the 9th of July 2025 starting from 19:30 CEST (my timezone) for up to 1 hour.


Changes for page Widget TimeSeries

Last modified by ldomide on 2023/05/23 14:34
From version 38.5
edited by rominabaila
on 2023/05/15 14:16
Change comment: There is no comment for this version
To version 22.1
edited by ldomide
on 2022/05/24 09:20
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.rominabaila
1 +XWiki.ldomide
Content
... ... @@ -1,25 +1,11 @@
1 1  Source code: [[https:~~/~~/github.com/the-virtual-brain/tvb-widgets>>url:https://github.com/the-virtual-brain/tvb-widgets]]
2 2  
3 -This is part of a Pypi release: [[https:~~/~~/pypi.org/project/tvb-widgets/>>url:https://pypi.org/project/tvb-widgets/]]
3 +Immediate testing here: [[https:~~/~~/lab.ch.ebrains.eu/hub/user-redirect/lab/tree/shared/TVB%20Widgets/REPO/tvb-widgets/notebooks>>url:https://lab.ch.ebrains.eu/hub/user-redirect/lab/tree/shared/TVB%20Widgets/REPO/tvb-widgets/notebooks]]
4 4  
5 -//**tvb-widgets**// is also already installed in the official image released for EBRAINS lab, where you can test it directly.
5 +=== Purpose ===
6 6  
7 -== Purpose ==
7 +It is a Jupyter Widget intended for the visualization of brain signals represented as time series.
8 8  
9 -It is a JupyterLab 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, 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 23  == Inputs ==
24 24  
25 25  Time series can be given as inputs in two forms:
... ... @@ -37,15 +37,11 @@
37 37  
38 38  == Requirements and installation ==
39 39  
40 -
41 41  Before installing the tvb-widgets library containing the TimeSeries widget, the following python libraries and Jupyter extensions should be installed:
42 42  
43 43  * **Libraries:**
44 -** [[mne>>https://mne.tools/stable/index.html]] >= 1.0
45 -** [[matplotlib>>https://matplotlib.org/3.5.0/index.html]]
46 -** [[plotly>>https://plotly.com/python/]] == 5.14.0
47 -** [[ipywidgets>>https://ipywidgets.readthedocs.io/en/7.x/]] == 7.7.2
48 -** [[ipympl>>https://github.com/matplotlib/ipympl#installation]] >= 0.8.5
29 +** [[mne>>https://mne.tools/0.24/install/index.html]] version 0.24
30 +** [[ipympl>>https://github.com/matplotlib/ipympl#installation]]
49 49  * (((
50 50  **Extensions:**
51 51  
... ... @@ -54,8 +54,6 @@
54 54  jupyter labextension install @jupyter-widgets/jupyterlab-manager
55 55  
56 56  jupyter labextension install jupyter-matplotlib
57 -
58 -jupyter labextension install jupyterlab-plotly
59 59  )))
60 60  )))
61 61  
... ... @@ -75,75 +75,29 @@
75 75  %matplotlib widget
76 76  )))
77 77  
78 -Then, simply import the **plot_timeseries** method, which gives you access to the TS widget:
58 + Then, the **TimeSeriesWidget** (from the tvb-widgets API) and the **//display//** function should be imported:
79 79  
80 80  (% class="box" %)
81 81  (((
82 -from tvbwidgets.api import plot_timeseries
62 +from tvbwidgets.api import TimeSeriesWidget
63 +from IPython.core.display_functions import display
83 83  )))
84 84  
66 +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):
85 85  
86 -Assuming that the user has already created or imported a valid input, this is how the widget can be initialized and displayed (example below assumes that **tsr  **is a TVB TimeSeries datatype):
87 -
88 88  (% class="box" %)
89 89  (((
90 -backend = 'plotly' # change to 'matplotlib' to see the other TS widget
91 -
92 -plot_timeseries(data=tsr, backend=backend)
70 +tsw = TimeSeriesWidget()
71 +tsw.add_datatype(tsr)
93 93  )))
94 94  
95 -After running the code from above into a Jupyter cell, you should see the TS widget corresponding to the backend you selected.
74 +Finally, to display and interact with the TimeSeries widget, the **//get_widget//**// //method is used inside the //**display **//function:
96 96  
97 -== 1. TS Widget with matplotlib and mne ==
76 +(% class="box" %)
77 +(((
78 +display(tsw)
79 +)))
98 98  
99 -As it was already mentioned, the matplotlib widget offers more advanced scientifical fearures. In the video below, you can see some of the functionalities that this backend provides, like: increasing/decreasing signal amplitude, selecting/deselecting certain signals, selecting different dimensions (state variable/mode) from the input data, navigating through the timeline, etc.
100 -
101 101  {{html}}
102 -<iframe width="840" height="480" src="https://www.youtube.com/embed/hozEkVhkWeA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
82 +<iframe src="https://drive.google.com/file/d/1g4ryY1VIFMUD14Mb6Dq_KVb0b2_XU4VX/preview" width="840" height="480" allow="autoplay"></iframe>
103 103  {{/html}}
104 -
105 -== 2. TS Widget with plotly ==
106 -
107 -Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
108 -
109 -=== 2.1. Moving through the timeline and channels list ===
110 -
111 -To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
112 -
113 -{{html}}
114 -<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
115 -{{/html}}
116 -
117 -=== 2.2. Modify spacing between channels ===
118 -
119 -
120 -{{html}}<iframe width="840" height="480" src="https://www.youtube.com/embed/q_olB7uRSc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>{{/html}}
121 -
122 -
123 -== 2. TS Widget with plotly ==
124 -
125 -Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
126 -
127 -=== 2.1. Moving through the timeline and channels list ===
128 -
129 -To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
130 -
131 -{{html}}
132 -<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
133 -{{/html}}
134 -
135 -== 2. TS Widget with plotly ==
136 -
137 -Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
138 -
139 -=== 2.1. Moving through the timeline and channels list ===
140 -
141 -{{html}}
142 -<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
143 -{{/html}}
144 -
145 -== 2. TS Widget with plotly ==
146 -
147 -Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
148 -
149 -=== 2.1. Moving through the timeline and channels list ===
matplotlib.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.rominabaila
Size
... ... @@ -1,1 +1,0 @@
1 -184.9 KB
Content
plotly.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.rominabaila
Size
... ... @@ -1,1 +1,0 @@
1 -351.7 KB
Content
Public

TVB Widgets