Skip to content

Commit 53719a5

Browse files
odeimaizodeimaiz
authored
Full guided mode + editor (ITISFoundation#2440)
1 parent 080e40a commit 53719a5

35 files changed

+1016
-361
lines changed

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ qx.Class.define("osparc.Application", {
9494
this.__loadCommonCss();
9595

9696
this.__updateTabName();
97+
this.__updateFavicon();
9798
this.__checkCookiesAccepted();
9899

99100
// onload, load, DOMContentLoaded, appear... didn't work
@@ -255,6 +256,16 @@ qx.Class.define("osparc.Application", {
255256
});
256257
},
257258

259+
__updateFavicon: function() {
260+
let link = document.querySelector("link[rel~='icon']");
261+
if (!link) {
262+
link = document.createElement("link");
263+
link.rel = "icon";
264+
document.getElementsByTagName("head")[0].appendChild(link);
265+
}
266+
link.href = "/resource/osparc/favicon-"+qx.core.Environment.get("product.name")+".png";
267+
},
268+
258269
__checkCookiesAccepted: function() {
259270
osparc.utils.LibVersions.getPlatformName()
260271
.then(platformName => {
@@ -280,14 +291,6 @@ qx.Class.define("osparc.Application", {
280291
});
281292
},
282293

283-
__updateFavicon: function() {
284-
const link = document.querySelector("link[rel*='icon']") || document.createElement("link");
285-
link.type = "image/x-icon";
286-
link.rel = "shortcut icon";
287-
link.href = "resource/osparc/favicon-osparc.png";
288-
document.getElementsByTagName("head")[0].appendChild(link);
289-
},
290-
291294
__restart: function() {
292295
let isLogged = osparc.auth.Manager.getInstance().isLoggedIn();
293296

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,10 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
391391
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
392392
},
393393

394+
getHeaderLayout: function() {
395+
return this.__header;
396+
},
397+
394398
getInputsView: function() {
395399
return this.__inputsView;
396400
},
@@ -399,6 +403,10 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
399403
return this.__outputsView;
400404
},
401405

406+
getSettingsLayout: function() {
407+
return this._settingsLayout;
408+
},
409+
402410
__attachEventHandlers: function() {
403411
const inputBlocker = this.getBlocker();
404412
const outputBlocker = this.__pane2.getBlocker();

‎services/web/client/source/class/osparc/component/service/ServiceButtonSmall.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ qx.Class.define("osparc.component.service.ServiceButtonSmall", {
4545

4646
statics: {
4747
ITEM_WIDTH: 180,
48-
ITEM_HEIGHT: 150,
48+
ITEM_HEIGHT: 140,
4949
SERVICE_ICON: "@FontAwesome5Solid/paw/50"
5050
},
5151

@@ -68,8 +68,13 @@ qx.Class.define("osparc.component.service.ServiceButtonSmall", {
6868
hint.exclude();
6969
};
7070
this.addListener("mouseover", showHint);
71-
this.addListener("mouseout", hideHint);
72-
this.addListener("dbltap", hideHint);
71+
[
72+
"mouseout",
73+
"dbltap",
74+
"keypress"
75+
].forEach(e => {
76+
this.addListener(e, hideHint);
77+
});
7378
} else {
7479
serviceModel.bind("description", this.getChildControl("subtitle-text"), "value");
7580
this.getChildControl("subtitle-text").set({

‎services/web/client/source/class/osparc/component/widget/NodePorts.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72,18 +72,7 @@ qx.Class.define("osparc.component.widget.NodePorts", {
7272
}
7373
}, this);
7474
node.getStatus().bind("output", this.getChildControl("icon"), "textColor", {
75-
converter: output => {
76-
switch (output) {
77-
case "up-to-date":
78-
return osparc.utils.StatusUI.getColor("ready");
79-
case "out-of-date":
80-
case "busy":
81-
return osparc.utils.StatusUI.getColor("modified");
82-
case "not-available":
83-
default:
84-
return osparc.utils.StatusUI.getColor();
85-
}
86-
}
75+
converter: output => osparc.utils.StatusUI.getColor(output)
8776
}, this);
8877
node.getStatus().bind("output", this.getChildControl("icon"), "toolTipText", {
8978
converter: output => {

‎services/web/client/source/class/osparc/component/widget/NodesSlidesTree.js‎

Lines changed: 80 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -22,50 +22,33 @@
2222
qx.Class.define("osparc.component.widget.NodesSlidesTree", {
2323
extend: qx.ui.core.Widget,
2424

25-
construct: function(initData = {}) {
25+
construct: function(study) {
2626
this.base(arguments);
2727

28+
this.__study = study;
29+
2830
this._setLayout(new qx.ui.layout.VBox(10));
2931

30-
this.__tree = this._createChildControlImpl("tree");
31-
const disable = this._createChildControlImpl("disable");
32+
this.__tree = this.getChildControl("tree");
33+
const disable = this.getChildControl("disable");
3234
disable.addListener("execute", () => this.__disableSlides(), this);
33-
const enable = this._createChildControlImpl("enable");
35+
const enable = this.getChildControl("enable");
3436
enable.addListener("execute", () => this.__enableSlides(), this);
3537

36-
const model = this.__initTree();
38+
const model = this.__initRoot();
3739
this.__tree.setModel(model);
3840

39-
this.__populateTree();
41+
this.__initTree();
4042
this.__recalculatePositions();
4143

42-
this.__initData(initData);
44+
this.__initData();
4345
},
4446

4547
events: {
4648
"finished": "qx.event.type.Event"
4749
},
4850

4951
statics: {
50-
convertModel: function(nodes) {
51-
let children = [];
52-
for (let nodeId in nodes) {
53-
const node = nodes[nodeId];
54-
let nodeInTree = {
55-
label: "",
56-
nodeId: node.getNodeId(),
57-
skipNode: false,
58-
position: -1
59-
};
60-
nodeInTree.label = node.getLabel();
61-
if (node.isContainer()) {
62-
nodeInTree.children = this.convertModel(node.getInnerNodes());
63-
}
64-
children.push(nodeInTree);
65-
}
66-
return children;
67-
},
68-
6952
getItemsInTree: function(itemMdl, children = []) {
7053
children.push(itemMdl);
7154
for (let i=0; itemMdl.getChildren && i<itemMdl.getChildren().length; i++) {
@@ -83,6 +66,7 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
8366

8467
members: {
8568
__tree: null,
69+
__study: null,
8670

8771
_createChildControlImpl: function(id) {
8872
let control;
@@ -133,22 +117,19 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
133117
return tree;
134118
},
135119

136-
__initTree: function() {
137-
const study = osparc.store.Store.getInstance().getCurrentStudy();
138-
const topLevelNodes = study.getWorkbench().getNodes();
120+
__initRoot: function() {
121+
const study = this.__study;
139122
let rootData = {
140123
label: study.getName(),
141-
children: this.self().convertModel(topLevelNodes),
124+
children: [],
142125
nodeId: study.getUuid(),
143126
skipNode: null,
144127
position: null
145128
};
146129
return qx.data.marshal.Json.createModel(rootData, true);
147130
},
148131

149-
__populateTree: function() {
150-
const study = osparc.store.Store.getInstance().getCurrentStudy();
151-
132+
__initTree: function() {
152133
this.__tree.setDelegate({
153134
createItem: () => {
154135
const nodeSlideTreeItem = new osparc.component.widget.NodeSlideTreeItem();
@@ -160,7 +141,7 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
160141
bindItem: (c, item, id) => {
161142
c.bindDefaultProperties(item, id);
162143
c.bindProperty("nodeId", "nodeId", null, item, id);
163-
const node = study.getWorkbench().getNode(item.getModel().getNodeId());
144+
const node = this.__study.getWorkbench().getNode(item.getModel().getNodeId());
164145
if (node) {
165146
node.bind("label", item.getModel(), "label");
166147
}
@@ -185,41 +166,77 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
185166
});
186167
},
187168

188-
__initData: function(initData) {
189-
if (Object.keys(initData).length) {
190-
const children = this.__tree.getModel().getChildren().toArray();
191-
children.forEach(child => {
192-
const nodeId = child.getNodeId();
193-
if (nodeId in initData) {
194-
child.setPosition(initData[nodeId].position);
195-
child.setSkipNode(false);
196-
} else {
197-
child.setPosition(-1);
198-
child.setSkipNode(true);
199-
}
200-
});
169+
/**
170+
* Converts an object of nodes into an array of children to be consumed by the tree model.
171+
* The tree is expecting to bind the children into NodeSlideTreeItem with nodeId, position and skipNode as props.
172+
* @param {Object.<Nodes>} nodes Object with nodes <nodeId: node>
173+
* @returns {Array} Array of objects with label, nodeId, position and skipNode fields.
174+
*/
175+
__convertToModel: function(nodes) {
176+
const children = [];
177+
for (let nodeId in nodes) {
178+
const node = nodes[nodeId];
179+
const nodeInTree = {
180+
label: node.getLabel(),
181+
nodeId: node.getNodeId()
182+
};
183+
const pos = this.__study.getUi().getSlideshow().getPosition(nodeId);
184+
if (pos === -1) {
185+
nodeInTree.position = -1;
186+
nodeInTree.skipNode = true;
187+
} else {
188+
nodeInTree.position = pos;
189+
nodeInTree.skipNode = false;
190+
}
191+
if (node.isContainer()) {
192+
nodeInTree.children = this.__convertToModel(node.getInnerNodes());
193+
}
194+
children.push(nodeInTree);
201195
}
196+
return children;
197+
},
198+
199+
__initData: function() {
200+
const topLevelNodes = this.__study.getWorkbench().getNodes();
201+
202+
this.__tree.getModel().getChildren().removeAll();
203+
const allChildren = this.__convertToModel(topLevelNodes);
204+
this.__tree.getModel().setChildren(qx.data.marshal.Json.createModel(allChildren));
205+
206+
const children = this.__tree.getModel().getChildren().toArray();
207+
children.sort((a, b) => {
208+
const aPos = a.getPosition();
209+
const bPos = b.getPosition();
210+
if (aPos === -1) {
211+
return 1;
212+
}
213+
if (bPos === -1) {
214+
return -1;
215+
}
216+
return aPos - bPos;
217+
});
218+
this.__tree.refresh();
202219
},
203220

204221
__itemActioned: function(item, action) {
205-
let fntc;
222+
let fnct;
206223
switch (action) {
207224
case "show":
208-
fntc = this.__show;
225+
fnct = this.__show;
209226
break;
210227
case "hide":
211-
fntc = this.__hide;
228+
fnct = this.__hide;
212229
break;
213230
case "moveUp":
214-
fntc = this.__moveUp;
231+
fnct = this.__moveUp;
215232
break;
216233
case "moveDown":
217-
fntc = this.__moveDown;
234+
fnct = this.__moveDown;
218235
break;
219236
}
220-
if (fntc) {
237+
if (fnct) {
221238
this.__tree.setSelection(new qx.data.Array([item.getModel()]));
222-
fntc.call(this, item.getModel());
239+
fnct.call(this, item.getModel());
223240
this.__recalculatePositions();
224241
}
225242
},
@@ -276,8 +293,8 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
276293
this.__tree.refresh();
277294
},
278295

279-
__enableSlides: function() {
280-
let slideshow = {};
296+
__serialize: function() {
297+
const slideshow = {};
281298
const model = this.__tree.getModel();
282299
const children = model.getChildren().toArray();
283300
children.forEach(child => {
@@ -287,14 +304,17 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
287304
};
288305
}
289306
});
290-
const study = osparc.store.Store.getInstance().getCurrentStudy();
291-
study.getUi().setSlideshow(slideshow);
307+
return slideshow;
308+
},
309+
310+
__enableSlides: function() {
311+
const slideshow = this.__serialize();
312+
this.__study.getUi().getSlideshow().setData(slideshow);
292313
this.fireEvent("finished");
293314
},
294315

295316
__disableSlides: function() {
296-
const study = osparc.store.Store.getInstance().getCurrentStudy();
297-
study.getUi().setSlideshow({});
317+
this.__study.getUi().getSlideshow().setData({});
298318
this.fireEvent("finished");
299319
}
300320
}

0 commit comments

Comments
 (0)