Attention: The Keycloak upgrade has been completed. As this was a major upgrade, there may be some unexpected issues occurring. Please report any issues you find to support by using the contact form found at https://www.ebrains.eu/contact/. Thank you for your patience and understanding. 


Changes for page Widget TimeSeries

Last modified by ldomide on 2023/05/23 14:34
From version 2.1
edited by ldomide
on 2022/03/23 21:39
Change comment: There is no comment for this version
To version 38.5
edited by rominabaila
on 2023/05/15 14:16
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.ldomide
1 +XWiki.rominabaila
Content
... ... @@ -1,12 +1,149 @@
1 -TODO
2 -! pip install -i tvb-widgets
3 -from tvbwidgets.api import TimeseriesWidget
4 -from IPython.core.display_functions import display
5 -tw = TimeseriesWidget(...)
6 -display(tw.get_widget())
7 - 
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 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 +== 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 +
41 +Before installing the tvb-widgets library containing the TimeSeries widget, the following python libraries and Jupyter extensions should be installed:
42 +
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
49 +* (((
50 +**Extensions:**
51 +
52 +(% class="box" %)
53 +(((
54 +jupyter labextension install @jupyter-widgets/jupyterlab-manager
55 +
56 +jupyter labextension install jupyter-matplotlib
57 +
58 +jupyter labextension install jupyterlab-plotly
59 +)))
60 +)))
61 +
62 +Then, to install the tvb-widgets library, just type:
63 +
64 +(% class="box" %)
65 +(((
66 +pip install tvb-widgets
67 +)))
68 +
69 +== API usage ==
70 +
71 +First, the correct matplotlib backend must be set, which enables the interaction with the TimeSeries widget, by running the following command:
72 +
73 +(% class="box" %)
74 +(((
75 +%matplotlib widget
76 +)))
77 +
78 +Then, simply import the **plot_timeseries** method, which gives you access to the TS widget:
79 +
80 +(% class="box" %)
81 +(((
82 +from tvbwidgets.api import plot_timeseries
83 +)))
84 +
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 +(% class="box" %)
89 +(((
90 +backend = 'plotly' # change to 'matplotlib' to see the other TS widget
91 +
92 +plot_timeseries(data=tsr, backend=backend)
93 +)))
94 +
95 +After running the code from above into a Jupyter cell, you should see the TS widget corresponding to the backend you selected.
96 +
97 +== 1. TS Widget with matplotlib and mne ==
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 +
8 8  {{html}}
9 -<iframe src="https://drive.google.com/file/d/1mPqBEjEkyn4ziR-qCdmjq6s24QqqNNOV/preview" width="640" height="480" allow="autoplay"></iframe>
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>
10 10  {{/html}}
11 11  
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}}
12 12  
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 ===
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
Public

TVB Widgets