Skip to content

Commit 9a67845

Browse files
odeimaizodeimaiz
authored
🐛🎨 [Frontend] Consistent modified (#8413)
1 parent d77067a commit 9a67845

File tree

13 files changed

+135
-111
lines changed

13 files changed

+135
-111
lines changed

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

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -193,12 +193,11 @@ qx.Class.define("osparc.data.model.NodeStatus", {
193193
const compRunning = this.getRunning();
194194
const hasOutputs = this.getHasOutputs();
195195
const modified = this.getModified();
196-
const hasDependencies = this.hasDependencies();
197196
if (["PUBLISHED", "PENDING", "WAITING_FOR_RESOURCES", "WAITING_FOR_CLUSTER", "STARTED"].includes(compRunning)) {
198197
this.setOutput("busy");
199198
} else if ([null, false].includes(hasOutputs)) {
200199
this.setOutput("not-available");
201-
} else if (hasOutputs && (modified || hasDependencies)) {
200+
} else if (hasOutputs && modified) {
202201
this.setOutput("out-of-date");
203202
} else if (hasOutputs && !modified) {
204203
this.setOutput("up-to-date");
@@ -218,30 +217,10 @@ qx.Class.define("osparc.data.model.NodeStatus", {
218217
// currentStatus is only applicable to computational services
219218
this.setRunning(state.currentStatus);
220219
}
221-
if ("modified" in state) {
222-
if (this.getHasOutputs()) {
223-
// File Picker can't have a modified output
224-
this.setModified((state.modified || this.hasDependencies()) && !this.getNode().isFilePicker());
225-
} else {
226-
this.setModified(null);
227-
}
228-
}
220+
this.setModified("modified" in state ? state.modified : null);
229221
if ("lock_state" in state) {
230222
this.getLockState().stateReceived(state.lock_state);
231223
}
232224
},
233-
234-
serialize: function() {
235-
const state = {};
236-
state["dependencies"] = this.getDependencies() ? this.getDependencies() : [];
237-
if (this.getNode().isComputational()) {
238-
state["currentStatus"] = this.getRunning();
239-
}
240-
state["modified"] = null;
241-
// File Picker can't have a modified output
242-
if (this.getHasOutputs() && !this.getNode().isFilePicker()) {
243-
state["modified"] = this.hasDependencies();
244-
}
245-
}
246225
}
247226
});

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -405,15 +405,17 @@ qx.Class.define("osparc.desktop.SlideshowView", {
405405
},
406406

407407
__requestServiceBetween: function(leftNodeId, rightNodeId) {
408-
const srvCat = new osparc.workbench.ServiceCatalog();
409-
srvCat.setContext(leftNodeId, rightNodeId);
410-
srvCat.addListener("addService", e => {
411-
const data = e.getData();
412-
const service = data.service;
413-
this.__addServiceBetween(service, leftNodeId, rightNodeId);
414-
}, this);
415-
srvCat.center();
416-
srvCat.open();
408+
if (osparc.workbench.ServiceCatalog.canItBeOpened(this.getStudy())) {
409+
const srvCat = new osparc.workbench.ServiceCatalog();
410+
srvCat.setContext(leftNodeId, rightNodeId);
411+
srvCat.addListener("addService", e => {
412+
const data = e.getData();
413+
const service = data.service;
414+
this.__addServiceBetween(service, leftNodeId, rightNodeId);
415+
}, this);
416+
srvCat.center();
417+
srvCat.open();
418+
}
417419
},
418420

419421
__addServiceBetween: async function(service, leftNodeId, rightNodeId) {

‎services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ qx.Class.define("osparc.navigation.BreadcrumbsSlideshow", {
104104
if (node.isFilePicker()) {
105105
osparc.service.StatusUI.setupFilePickerIcon(node, statusIcon);
106106
} else {
107-
const check = node.isDynamic() ? "interactive" : "output";
108-
node.getStatus().bind(check, statusIcon, "source", {
107+
const checkProp = node.isDynamic() ? "interactive" : "output";
108+
node.getStatus().bind(checkProp, statusIcon, "source", {
109109
converter: output => osparc.service.StatusUI.getIconSource(output),
110110
onUpdate: (_, target) => osparc.service.StatusUI.updateCircleAnimation(target)
111111
});
112-
node.getStatus().bind(check, statusIcon, "textColor", {
112+
node.getStatus().bind(checkProp, statusIcon, "textColor", {
113113
converter: output => osparc.service.StatusUI.getColor(output)
114114
}, this);
115115
}

‎services/static-webserver/client/source/class/osparc/service/StatusUI.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,12 +199,12 @@ qx.Class.define("osparc.service.StatusUI", {
199199
// output
200200
case "busy":
201201
return "busy-orange";
202+
case "not-available":
203+
return "workbench-edge";
202204
case "out-of-date":
203205
return "failed-red";
204-
/*
205206
case "up-to-date":
206207
return "ready-green";
207-
*/
208208

209209
default:
210210
return "text";

‎services/static-webserver/client/source/class/osparc/theme/ColorDark.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
136136

137137

138138
// OSPARC
139-
"workbench-edge-comp-active": "#777777",
140-
"workbench-edge-api-active": "#BBBBBB",
141139
"workbench-start-hint": "#505050",
142140
"workbench-view-navbar": "c00",
143141
"workbench-view-splitter": "#000000",

‎services/static-webserver/client/source/class/osparc/theme/ColorLight.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
136136

137137

138138
// OSPARC
139-
"workbench-edge-comp-active": "#888888",
140-
"workbench-edge-api-active": "#444444",
141139
"workbench-start-hint": "#AFAFAF",
142140
"workbench-view-navbar": "c02",
143141
"workbench-view-splitter": "background-main-3",

‎services/static-webserver/client/source/class/osparc/theme/mixin/Color.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ qx.Theme.define("osparc.theme.mixin.Color", {
5151
"logger-warning-message": "warning-yellow",
5252
"logger-error-message": "failed-red",
5353

54+
"workbench-edge": "#787878",
5455
"workbench-edge-selected": "busy-orange",
5556

5657

‎services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -301,11 +301,13 @@ qx.Class.define("osparc.widget.PersistentIframe", {
301301
},
302302

303303
__handleIframeMessage: function(data, nodeId) {
304-
if (data["type"]) {
305-
switch (data["type"]) {
304+
const action = data["type"];
305+
if (action) {
306+
const message = data["message"];
307+
switch (action) {
308+
case "changeTheme":
306309
case "theme": {
307310
// switch theme driven by the iframe
308-
const message = data["message"];
309311
if (message && message.includes("osparc;theme=")) {
310312
const themeName = message.replace("osparc;theme=", "");
311313
const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();
@@ -319,7 +321,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
319321
}
320322
case "openMarket": {
321323
if (osparc.product.Utils.showS4LStore()) {
322-
const category = data["message"] && data["message"]["category"];
324+
const category = message && message["category"];
323325
setTimeout(() => osparc.vipMarket.MarketWindow.openWindow(nodeId, category), 100);
324326
}
325327
break;
@@ -333,16 +335,16 @@ qx.Class.define("osparc.widget.PersistentIframe", {
333335
case "openFunction": {
334336
// this is the MetaModeling service trying to show function/template information
335337
let functionData = null;
336-
if (data["message"] && data["message"]["uuid"]) {
338+
if (message && message["uuid"]) {
337339
// new version, the uuid is from the function
338340
functionData = {
339-
"uuid": data["message"]["uuid"],
341+
"uuid": message["uuid"],
340342
"resourceType": "function",
341343
};
342-
} else if (data["message"] && data["message"]["functionId"]) {
344+
} else if (message && message["functionId"]) {
343345
// old version, the uuid is from the template
344346
functionData = {
345-
"uuid": data["message"]["functionId"],
347+
"uuid": message["functionId"],
346348
"resourceType": "functionedTemplate",
347349
};
348350
}
@@ -362,10 +364,10 @@ qx.Class.define("osparc.widget.PersistentIframe", {
362364
case "openSupport": {
363365
const supportCenterWindow = osparc.support.SupportCenter.openWindow();
364366
// for now prefill the text box with the question
365-
if (data["message"] && data["message"]["question"]) {
367+
if (message && message["question"]) {
366368
supportCenterWindow.proposeConversation(
367369
osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ESCALATE_TO_SUPPORT,
368-
`From your last question: "${data["message"]["question"]}"`
370+
`From your last question: "${message["question"]}"`
369371
);
370372
}
371373
break;

‎services/static-webserver/client/source/class/osparc/workbench/EdgeUI.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ qx.Class.define("osparc.workbench.EdgeUI", {
4848
representation.hint = hint;
4949

5050
if (edge.getInputNode()) {
51-
edge.getInputNode().getStatus().addListener("changeModified", () => this.__updateEdgeState());
51+
edge.getInputNode().getStatus().addListener("changeOutput", () => this.__updateEdgeState());
5252
}
5353
edge.addListener("changePortConnected", () => this.__updateEdgeState());
5454

@@ -69,13 +69,8 @@ qx.Class.define("osparc.workbench.EdgeUI", {
6969
},
7070

7171
statics: {
72-
getEdgeColor: function(modified) {
73-
let newColor = null;
74-
if (modified === null) {
75-
newColor = qx.theme.manager.Color.getInstance().resolve("workbench-edge-comp-active");
76-
} else {
77-
newColor = osparc.service.StatusUI.getColor(modified ? "failed" : "ready");
78-
}
72+
getEdgeColor: function(outputState) {
73+
const newColor = osparc.service.StatusUI.getColor(outputState);
7974
const colorHex = qx.theme.manager.Color.getInstance().resolve(newColor);
8075
return colorHex;
8176
},
@@ -89,10 +84,10 @@ qx.Class.define("osparc.workbench.EdgeUI", {
8984
__updateEdgeState: function() {
9085
const inputNode = this.getEdge().getInputNode();
9186
const portConnected = this.getEdge().isPortConnected();
92-
const modified = inputNode ? inputNode.getStatus().getModified() : false;
87+
const output = inputNode ? inputNode.getStatus().getOutput() : null;
9388

9489
// color
95-
const colorHex = this.self().getEdgeColor(modified);
90+
const colorHex = this.self().getEdgeColor(output);
9691
osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), colorHex);
9792

9893
// shape
@@ -102,7 +97,7 @@ qx.Class.define("osparc.workbench.EdgeUI", {
10297
const hint = this.getHint();
10398
if (this.getEdge().isPortConnected() === false) {
10499
hint.setText(this.self().noPortsConnectedText(this.getEdge()));
105-
} else if (modified) {
100+
} else if (output === "out-of-date") {
106101
hint.setText("Out-of-date");
107102
} else {
108103
hint.setText(null);

‎services/static-webserver/client/source/class/osparc/workbench/NodeUI.js‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,11 @@ qx.Class.define("osparc.workbench.NodeUI", {
138138
CAPTION_POS: {
139139
ICON: 0, // from qooxdoo
140140
TITLE: 1, // from qooxdoo
141-
LOCK: 2,
142-
MARKER: 3,
143-
DEPRECATED: 4,
144-
MENU: 5
141+
MODIFIED_STAR: 2,
142+
LOCK: 3,
143+
MARKER: 4,
144+
DEPRECATED: 5,
145+
MENU: 6,
145146
},
146147

147148
captionHeight: function() {
@@ -164,6 +165,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
164165
"nodeMovingStop": "qx.event.type.Event",
165166
"updateNodeDecorator": "qx.event.type.Event",
166167
"requestOpenLogger": "qx.event.type.Event",
168+
"requestOpenServiceCatalog": "qx.event.type.Data",
167169
"highlightEdge": "qx.event.type.Data",
168170
},
169171

@@ -184,6 +186,21 @@ qx.Class.define("osparc.workbench.NodeUI", {
184186
_createChildControlImpl: function(id) {
185187
let control;
186188
switch (id) {
189+
case "modified-star":
190+
control = new qx.ui.basic.Label("*").set({
191+
font: "text-14",
192+
toolTipText: this.tr("Needs to run to update the outputs"),
193+
padding: 4,
194+
paddingTop: 0,
195+
paddingBottom: 0,
196+
visibility: "excluded",
197+
alignY: "top",
198+
});
199+
this.getChildControl("captionbar").add(control, {
200+
row: 0,
201+
column: this.self().CAPTION_POS.MODIFIED_STAR
202+
});
203+
break;
187204
case "lock":
188205
control = new qx.ui.basic.Image().set({
189206
source: "@FontAwesome5Solid/lock/12",
@@ -419,7 +436,20 @@ qx.Class.define("osparc.workbench.NodeUI", {
419436
this.__optionsMenu.add(convertToParameter);
420437
}
421438

422-
const lockState = node.getStatus().getLockState();
439+
const nodeStatus = node.getStatus();
440+
const modifiedStar = this.getChildControl("modified-star");
441+
const evaluateShowStar = () => {
442+
const modified = nodeStatus.getModified();
443+
const isRunning = osparc.data.model.NodeStatus.isComputationalRunning(node);
444+
modifiedStar.set({
445+
visibility: modified && !isRunning ? "visible" : "excluded"
446+
});
447+
};
448+
evaluateShowStar();
449+
nodeStatus.addListener("changeModified", evaluateShowStar);
450+
nodeStatus.addListener("changeRunning", evaluateShowStar);
451+
452+
const lockState = nodeStatus.getLockState();
423453
const lock = this.getChildControl("lock");
424454
lockState.bind("locked", lock, "visibility", {
425455
converter: locked => {
@@ -744,6 +774,9 @@ qx.Class.define("osparc.workbench.NodeUI", {
744774
return;
745775
}
746776
const port = this.__createPort(isInput);
777+
port.addListener("tap", () => {
778+
this.fireDataEvent("requestOpenServiceCatalog", isInput);
779+
}, this);
747780
port.addListener("mouseover", () => {
748781
port.setSource(this.self().PORT_CONNECTED);
749782
}, this);
@@ -756,10 +789,10 @@ qx.Class.define("osparc.workbench.NodeUI", {
756789
if (isInput) {
757790
this.getNode().getStatus().bind("dependencies", port, "textColor", {
758791
converter: dependencies => {
759-
if (dependencies !== null) {
760-
return osparc.service.StatusUI.getColor(dependencies.length ? "modified" : "ready");
792+
if (dependencies) {
793+
return dependencies.length ? "failed-red" : "ready-green";
761794
}
762-
return osparc.service.StatusUI.getColor();
795+
return "workbench-edge";
763796
}
764797
});
765798
this.getNode().bind("inputConnected", port, "source", {

0 commit comments

Comments
 (0)