Skip to content

Commit fbb64fd

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] Listen to the stateInputPorts and stateOutputPorts websocket events (#6538)
1 parent 55c967d commit fbb64fd

File tree

6 files changed

+227
-68
lines changed

6 files changed

+227
-68
lines changed

‎services/static-webserver/client/source/class/osparc/data/model/Node.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ qx.Class.define("osparc.data.model.Node", {
136136
outputs: {
137137
check: "Object",
138138
nullable: false,
139-
event: "changeOutputs"
139+
event: "changeOutputs",
140+
apply: "__applyOutputs",
140141
},
141142

142143
status: {
@@ -166,6 +167,12 @@ qx.Class.define("osparc.data.model.Node", {
166167
apply: "__applyPropsForm"
167168
},
168169

170+
outputsForm: {
171+
check: "osparc.widget.NodeOutputs",
172+
init: null,
173+
nullable: true
174+
},
175+
169176
marker: {
170177
check: "qx.core.Object",
171178
init: null,
@@ -612,6 +619,13 @@ qx.Class.define("osparc.data.model.Node", {
612619
}, this);
613620
},
614621

622+
__applyOutputs: function() {
623+
if (!this.isPropertyInitialized("outputsForm") || !this.getOutputsForm()) {
624+
const nodeOutputs = new osparc.widget.NodeOutputs(this);
625+
this.setOutputsForm(nodeOutputs);
626+
}
627+
},
628+
615629
removeNodePortConnections: function(inputNodeId) {
616630
let inputs = this.__getInputData();
617631
for (const portId in inputs) {

‎services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
288288
this.__listenToNoMoreCreditsEvents();
289289
this.__listenToEvent();
290290
this.__listenToServiceStatus();
291+
this.__listenToStateInputPorts();
291292
},
292293

293294
__listenToLogger: function() {
@@ -435,6 +436,85 @@ qx.Class.define("osparc.desktop.StudyEditor", {
435436
}
436437
},
437438

439+
__listenToStateInputPorts: function() {
440+
const socket = osparc.wrapper.WebSocket.getInstance();
441+
if (!socket.slotExists("stateInputPorts")) {
442+
socket.on("stateInputPorts", data => {
443+
this.__statePortReceived(data, "stateInputPorts");
444+
}, this);
445+
}
446+
if (!socket.slotExists("stateOutputPorts")) {
447+
socket.on("stateOutputPorts", data => {
448+
this.__statePortReceived(data, "stateOutputPorts");
449+
}, this);
450+
}
451+
},
452+
453+
__statePortReceived: function(socketData, msgName) {
454+
const studyId = socketData["project_id"];
455+
if (this.getStudy().getUuid() !== studyId) {
456+
return;
457+
}
458+
459+
const nodeId = socketData["node_id"];
460+
const workbench = this.getStudy().getWorkbench();
461+
const node = workbench.getNode(nodeId);
462+
if (!node) {
463+
if (osparc.data.Permissions.getInstance().isTester()) {
464+
console.log("Ignored ws 'stateInputPorts' msg", socketData);
465+
}
466+
return;
467+
}
468+
469+
const propsForm = node.getPropsForm();
470+
if (msgName === "stateInputPorts" && propsForm) {
471+
const portId = socketData["port_key"];
472+
const status = socketData["status"];
473+
switch (status) {
474+
case "DOWNLOAD_STARTED":
475+
propsForm.retrievingPortData(
476+
portId,
477+
osparc.form.renderer.PropForm.RETRIEVE_STATUS.downloading
478+
);
479+
break;
480+
case "DOWNLOAD_FINISHED_SUCCESSFULLY":
481+
propsForm.retrievedPortData(portId, true);
482+
break;
483+
case "DOWNLOAD_WAS_ABORTED":
484+
case "DOWNLOAD_FINISHED_WITH_ERROR":
485+
propsForm.retrievedPortData(portId, false);
486+
break;
487+
}
488+
}
489+
490+
const outputsForm = node.getOutputsForm();
491+
if (msgName === "stateOutputPorts" && outputsForm) {
492+
const portId = socketData["port_key"];
493+
const status = socketData["status"];
494+
switch (status) {
495+
case "UPLOAD_STARTED":
496+
outputsForm.setRetrievingStatus(
497+
portId,
498+
osparc.form.renderer.PropForm.RETRIEVE_STATUS.uploading
499+
);
500+
break;
501+
case "UPLOAD_FINISHED_SUCCESSFULLY":
502+
outputsForm.setRetrievingStatus(
503+
portId,
504+
osparc.form.renderer.PropForm.RETRIEVE_STATUS.succeed
505+
);
506+
break;
507+
case "UPLOAD_WAS_ABORTED":
508+
case "UPLOAD_FINISHED_WITH_ERROR":
509+
outputsForm.setRetrievingStatus(
510+
portId,
511+
osparc.form.renderer.PropForm.RETRIEVE_STATUS.failed
512+
);
513+
break;
514+
}
515+
}
516+
},
517+
438518
__reloadSnapshotsAndIterations: function() {
439519
const isVCDisabled = osparc.utils.DisabledPlugins.isVersionControlDisabled();
440520
if (!isVCDisabled) {

‎services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1032,11 +1032,12 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
10321032

10331033
// OUTPUTS
10341034
const outputsBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing));
1035-
if (node.hasOutputs()) {
1036-
const nodeOutputs = new osparc.widget.NodeOutputs(node, node.getMetaData().outputs).set({
1035+
const outputsForm = node.getOutputsForm();
1036+
if (node.hasOutputs() && outputsForm) {
1037+
outputsForm.set({
10371038
offerProbes: true
10381039
});
1039-
outputsBox.add(nodeOutputs);
1040+
outputsBox.add(outputsForm);
10401041
}
10411042

10421043
const nodeFilesBtn = new qx.ui.form.Button(this.tr("Service data"), "@FontAwesome5Solid/folder-open/14").set({

‎services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,24 @@ qx.Class.define("osparc.form.renderer.PropForm", {
5656
return new qx.ui.basic.Atom("", "osparc/loading.gif");
5757
},
5858

59-
getRetrievedAtom: function(success) {
60-
const icon = success ? "@FontAwesome5Solid/check/12" : "@FontAwesome5Solid/times/12";
61-
return new qx.ui.basic.Atom("", icon);
59+
getDownloadingAtom: function() {
60+
return new qx.ui.basic.Atom("", "@FontAwesome5Solid/cloud-download-alt/12");
61+
},
62+
63+
getUploadingAtom: function() {
64+
return new qx.ui.basic.Atom("", "@FontAwesome5Solid/cloud-upload-alt/12");
65+
},
66+
67+
getFailedAtom: function() {
68+
return new qx.ui.basic.Atom("", "@FontAwesome5Solid/times/12");
69+
},
70+
71+
getSucceededAtom: function() {
72+
return new qx.ui.basic.Atom("", "@FontAwesome5Solid/check/12");
6273
},
6374

6475
getRetrievedEmpty: function() {
65-
const icon = "@FontAwesome5Solid/dot-circle/10";
66-
return new qx.ui.basic.Atom("", icon);
76+
return new qx.ui.basic.Atom("", "@FontAwesome5Solid/dot-circle/10");
6777
},
6878

6979
GRID_POS: {
@@ -78,18 +88,44 @@ qx.Class.define("osparc.form.renderer.PropForm", {
7888
supportedTypes.push(osparc.node.ParameterEditor.getParameterOutputTypeFromMD(paramMD));
7989
});
8090
return supportedTypes.includes(field.type);
81-
}
82-
},
91+
},
8392

84-
// eslint-disable-next-line qx-rules/no-refs-in-members
85-
members: {
86-
_retrieveStatus: {
93+
RETRIEVE_STATUS: {
8794
failed: -1,
8895
empty: 0,
8996
retrieving: 1,
90-
succeed: 2
97+
downloading: 2,
98+
uploading: 3,
99+
succeed: 4
91100
},
92101

102+
getIconForStatus: function(status) {
103+
let icon;
104+
switch (status) {
105+
case this.RETRIEVE_STATUS.failed:
106+
icon = this.getFailedAtom();
107+
break;
108+
case this.RETRIEVE_STATUS.empty:
109+
icon = this.getRetrievedEmpty();
110+
break;
111+
case this.RETRIEVE_STATUS.retrieving:
112+
icon = this.getRetrievingAtom();
113+
break;
114+
case this.RETRIEVE_STATUS.downloading:
115+
icon = this.getDownloadingAtom();
116+
break;
117+
case this.RETRIEVE_STATUS.uploading:
118+
icon = this.getUploadingAtom();
119+
break;
120+
case this.RETRIEVE_STATUS.succeed:
121+
icon = this.getSucceededAtom();
122+
break;
123+
}
124+
return icon;
125+
}
126+
},
127+
128+
members: {
93129
__ctrlLinkMap: null,
94130
__linkUnlinkStackMap: null,
95131
__fieldOptsBtnMap: null,
@@ -528,8 +564,10 @@ qx.Class.define("osparc.form.renderer.PropForm", {
528564
}
529565
},
530566

531-
retrievingPortData: function(portId) {
532-
const status = this._retrieveStatus.retrieving;
567+
retrievingPortData: function(portId, status) {
568+
if (status === undefined) {
569+
status = this.self().RETRIEVE_STATUS.retrieving;
570+
}
533571
if (portId) {
534572
let data = this._getCtrlFieldChild(portId);
535573
if (data) {
@@ -553,9 +591,9 @@ qx.Class.define("osparc.form.renderer.PropForm", {
553591
},
554592

555593
retrievedPortData: function(portId, succeed, dataSize = -1) {
556-
let status = succeed ? this._retrieveStatus.succeed : this._retrieveStatus.failed;
594+
let status = succeed ? this.self().RETRIEVE_STATUS.succeed : this.self().RETRIEVE_STATUS.failed;
557595
if (parseInt(dataSize) === 0) {
558-
status = this._retrieveStatus.empty;
596+
status = this.self().RETRIEVE_STATUS.empty;
559597
}
560598
if (portId) {
561599
let data = this._getCtrlFieldChild(portId);
@@ -578,23 +616,6 @@ qx.Class.define("osparc.form.renderer.PropForm", {
578616
},
579617

580618
__setRetrievingStatus: function(status, portId, idx, row) {
581-
let icon;
582-
switch (status) {
583-
case this._retrieveStatus.failed:
584-
icon = this.self().getRetrievedAtom(false);
585-
break;
586-
case this._retrieveStatus.empty:
587-
icon = this.self().getRetrievedEmpty();
588-
break;
589-
case this._retrieveStatus.retrieving:
590-
icon = this.self().getRetrievingAtom();
591-
break;
592-
case this._retrieveStatus.succeed:
593-
icon = this.self().getRetrievedAtom(true);
594-
break;
595-
}
596-
icon.key = portId;
597-
598619
// remove first if any
599620
let children = this._getChildren();
600621
for (let i=0; i<children.length; i++) {
@@ -608,7 +629,8 @@ qx.Class.define("osparc.form.renderer.PropForm", {
608629

609630
const label = this._getLabelFieldChild(portId).child;
610631
if (label && label.isVisible()) {
611-
this._getLabelFieldChild(portId);
632+
const icon = this.self().getIconForStatus(status);
633+
icon.key = portId;
612634
this._addAt(icon, idx, {
613635
row,
614636
column: this.self().GRID_POS.RETRIEVE_STATUS

‎services/static-webserver/client/source/class/osparc/node/slideshow/NodeView.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,12 @@ qx.Class.define("osparc.node.slideshow.NodeView", {
9292
_addOutputs: function() {
9393
this._outputsLayout.removeAll();
9494

95-
const nodeOutputs = new osparc.widget.NodeOutputs(this.getNode(), this.getNode().getMetaData().outputs);
96-
this._mainView.bind("backgroundColor", nodeOutputs, "backgroundColor");
97-
this._outputsLayout.add(nodeOutputs);
95+
const node = this.getNode();
96+
const outputsForm = node.getOutputsForm();
97+
if (node.hasOutputs() && outputsForm) {
98+
this._mainView.bind("backgroundColor", outputsForm, "backgroundColor");
99+
this._outputsLayout.add(outputsForm);
100+
}
98101

99102
this._outputsBtn.set({
100103
value: false,

0 commit comments

Comments
 (0)