Skip to content

Commit 3a9e073

Browse files
odeimaizodeimaiz
authored
TI Quick Start (ITISFoundation#3284)
1 parent 68a9508 commit 3a9e073

26 files changed

+697
-233
lines changed

‎services/web/client/source/class/osparc/CookiePolicy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ qx.Class.define("osparc.CookiePolicy", {
6060
const text = this.tr("This website applies cookies to personalize your \
6161
experience and to make our site easier to navigate. By visiting \
6262
the site, you are agreeing to this use and to our \
63-
<a href=https://itis.swiss/meta-navigation/privacy-policy/ target='_blank'>Privacy Policy.</a>");
63+
<a href=https://itis.swiss/meta-navigation/privacy-policy/ style='color: white' target='_blank'>Privacy Policy.</a>");
6464
control = new qx.ui.basic.Label(text).set({
6565
rich : true
6666
});

‎services/web/client/source/class/osparc/component/node/BaseNodeView.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,8 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
181181

182182
showPreparingInputs: function() {
183183
const title = this.tr("Preparing Inputs");
184-
const width = 600;
185-
const height = 500;
184+
const width = 650;
185+
const height = 600;
186186
osparc.ui.window.Window.popUpInWindow(this.__preparingInputs, title, width, height);
187187
},
188188

‎services/web/client/source/class/osparc/component/tutorial/ti/Dashboard.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.ti.Dashboard", {
19+
extend: osparc.component.tutorial.ti.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Dashboard");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const intro = new qx.ui.basic.Label().set({
29+
value: this.tr("\
30+
The Dashboard is your private hub which contains all of your Plans as well as Plans that have been shared with you. \
31+
From the Dashboard you are able to open your Plan or create a New Plan from scratch.\
32+
"),
33+
rich: true,
34+
wrap: true,
35+
font: "text-14"
36+
});
37+
this._add(intro);
38+
39+
const image = new qx.ui.basic.Image("osparc/tutorial/ti/Dashboard.png").set({
40+
alignX: "center",
41+
scale: true,
42+
width: 737,
43+
height: 360
44+
});
45+
this._add(image);
46+
47+
const newPlan = new qx.ui.basic.Label().set({
48+
value: this.tr("\
49+
1) New Plan: by clicking on this card a new study will be created and open.\
50+
The planning process will be presented in three successive steps that will be described more in detail in the following steps.\
51+
"),
52+
rich: true,
53+
wrap: true,
54+
font: "text-14"
55+
});
56+
this._add(newPlan);
57+
58+
const otherPlans = new qx.ui.basic.Label().set({
59+
value: this.tr("\
60+
2) The other cards are TI Plans that were already created by you or shared with you. You can reopen them to do further anaylisis \
61+
or by clicking three dots, on the top right corner, you can share, delete or check the details and metadata.\
62+
"),
63+
rich: true,
64+
wrap: true,
65+
font: "text-14"
66+
});
67+
this._add(otherPlans);
68+
}
69+
}
70+
});

‎services/web/client/source/class/osparc/component/tutorial/ti/ElectrodeSelector.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.ti.ElectrodeSelector", {
19+
extend: osparc.component.tutorial.ti.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Electrode Selector");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const text1 = this.tr("\
29+
After pressing New Plan, three panels will be shown.\
30+
");
31+
const label1 = osparc.component.tutorial.ti.Slides.createLabel(text1);
32+
this._add(label1);
33+
34+
const text2 = this.tr("\
35+
In a first step, the relevant species, stimulation target, electrode shapes, electrode dimensions and \
36+
potential electrode locations (currently required to narrow down the huge exposure configuration search space) are selected.\
37+
");
38+
const label2 = osparc.component.tutorial.ti.Slides.createLabel(text2);
39+
this._add(label2);
40+
41+
const image = new qx.ui.basic.Image("osparc/tutorial/ti/ElectrodeSelector.gif").set({
42+
alignX: "center",
43+
scale: true,
44+
width: 737,
45+
height: 540
46+
});
47+
this._add(image);
48+
49+
const text4 = this.tr("\
50+
After finishing the set up, the big button on the top right will turn blue and by clicking on it you will submit the configuration.\
51+
");
52+
const label4 = osparc.component.tutorial.ti.Slides.createLabel(text4);
53+
this._add(label4);
54+
55+
const text5 = this.tr("\
56+
Now the Arrow that says 'Next' can be pushed and the optimization will inmediatly start.\
57+
");
58+
const label5 = osparc.component.tutorial.ti.Slides.createLabel(text5);
59+
this._add(label5);
60+
}
61+
}
62+
});

‎services/web/client/source/class/osparc/component/tutorial/ti/PostPro.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.ti.PostPro", {
19+
extend: osparc.component.tutorial.ti.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Post Processing");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const text1 = this.tr("\
29+
Based on extensive sweeping/optimization, a series of highly performing exposure parameters are proposed for the \
30+
user to interactively explore, using predefined quantification metrics and visualizations. Identified \
31+
conditions-of-interest can be documented and added to a report.\
32+
");
33+
const label1 = osparc.component.tutorial.ti.Slides.createLabel(text1);
34+
this._add(label1);
35+
36+
const text2 = this.tr("\
37+
These metrics are reported in the Post Processing analysis environment for each electrode pair in the combination in \
38+
a sorted tabular form that can be used to inspect the stimulation performances. By clicking on each pair, slice views \
39+
of the maximum amplitude modulation (MAP) are created within the head are produced.<br>\
40+
Pressing the `Load` button on the right, the selected configuration will be loaded.\
41+
");
42+
const label2 = osparc.component.tutorial.ti.Slides.createLabel(text2);
43+
this._add(label2);
44+
45+
const image1 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProTable.gif").set({
46+
alignX: "center",
47+
scale: true,
48+
width: 737,
49+
height: 443
50+
});
51+
this._add(image1);
52+
53+
const text3 = this.tr("\
54+
Alternatively, slice views of the maximum interferential E-field can also be visualized and synchronous with the MAP slices \
55+
to assess safety-related aspects (e.g., field intensity in proximity of the electrodes). These maps can be edited, thresholded, \
56+
and saved offline for further inspection and analysis.<br>\
57+
An isosurface of the TI stimulation distribution for the selected configuration can also be visualized within the head anatomy for inspection.\
58+
");
59+
const label3 = osparc.component.tutorial.ti.Slides.createLabel(text3);
60+
this._add(label3);
61+
62+
const image2 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProSlices.gif").set({
63+
alignX: "center",
64+
scale: true,
65+
width: 737,
66+
height: 443
67+
});
68+
this._add(image2);
69+
70+
const text4 = this.tr("\
71+
At the end of the optimization procedure, you can automatically generate a report.<br>\
72+
It includes a summary of all the performance metrics calculated for each electrode pair combination, and a detailed performance report \
73+
of the optimized electrode configuration. The report includes electrode placement, current intensities, performance metrics, TI and maximum \
74+
high-frequency field distributions, cumulative dose histograms and all the graphs generated in the post-pro analysis tab.\
75+
");
76+
const label4 = osparc.component.tutorial.ti.Slides.createLabel(text4);
77+
this._add(label4);
78+
79+
const image3 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProReport.gif").set({
80+
alignX: "center",
81+
scale: true,
82+
width: 737,
83+
height: 443
84+
});
85+
this._add(image3);
86+
}
87+
}
88+
});

‎services/web/client/source/class/osparc/component/tutorial/ti/S4LPostPro.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.ti.S4LPostPro", {
19+
extend: osparc.component.tutorial.ti.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("Sim4Life Post Processing");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
const text1 = this.tr("\
29+
Finally, and optionally, exposure conditions-of-interest can be visualized and analyzed freely, using the web-version of the \
30+
Sim4Life (ZMT Zurich MedTech AG) computational life sciences platform.\
31+
");
32+
const label1 = osparc.component.tutorial.ti.Slides.createLabel(text1);
33+
this._add(label1);
34+
35+
const image1 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProS4L.gif").set({
36+
alignX: "center",
37+
scale: true,
38+
width: 737,
39+
height: 443
40+
});
41+
this._add(image1);
42+
}
43+
}
44+
});

‎services/web/client/source/class/osparc/component/tutorial/ti/SlideBase.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2022 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.tutorial.ti.SlideBase", {
19+
extend: qx.ui.core.Widget,
20+
type: "abstract",
21+
22+
construct: function(title) {
23+
this.base(arguments);
24+
25+
this._setLayout(new qx.ui.layout.VBox(10));
26+
27+
this.set({
28+
padding: 5
29+
});
30+
31+
if (title) {
32+
this._add(new qx.ui.basic.Label(title).set({
33+
font: "title-14"
34+
}));
35+
}
36+
37+
this._populateCard();
38+
},
39+
40+
members: {
41+
/**
42+
* @abstract
43+
*/
44+
_populateCard: function() {
45+
throw new Error("Abstract method called!");
46+
}
47+
}
48+
});

0 commit comments

Comments
 (0)