Skip to content

Commit b1978ad

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Prettify "Creating template" progress (#6267)
1 parent 08ec595 commit b1978ad

File tree

4 files changed

+289
-167
lines changed

4 files changed

+289
-167
lines changed

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

Lines changed: 30 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -108,101 +108,23 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
108108
},
109109

110110
statics: {
111-
NODE_INDEX: {
112-
LABEL: 0,
113-
CALC: 1,
114-
HALO: 2,
115-
},
116-
117111
DISCLAIMER_TIME: 50000,
118112

119-
createTaskLayout: function(label) {
120-
const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
121-
alignY: "middle"
122-
})).set({
123-
padding: [2, 10]
124-
});
125-
126-
const lbl = new qx.ui.basic.Label(label);
127-
lbl.set({
128-
textColor: "text",
129-
allowGrowX: true,
130-
allowShrinkX: true,
131-
});
132-
layout.addAt(lbl, this.NODE_INDEX.LABEL, {
133-
flex: 1
134-
});
135-
136-
const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
137-
alignY: "middle",
138-
alignX: "center",
139-
})).set({
140-
height: 18,
141-
width: 18,
142-
allowGrowY: false,
143-
allowGrowX: false,
144-
});
145-
const icon = new qx.ui.basic.Image("@FontAwesome5Solid/check/10").set({
146-
visibility: "excluded",
147-
textColor: "success"
148-
});
149-
iconContainer.add(icon);
150-
const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar");
151-
osparc.service.StatusUI.getStatusHalo(iconContainer, progressColor, 0);
152-
layout.addAt(iconContainer, this.NODE_INDEX.HALO);
153-
154-
const progressState = new qx.ui.basic.Label();
155-
progressState.set({
156-
value: qx.locale.Manager.tr("Waiting ..."),
157-
textColor: "text",
158-
allowGrowX: true,
159-
allowShrinkX: true
113+
createDisclaimerText: function() {
114+
const disclaimerText = new qx.ui.basic.Atom().set({
115+
label: qx.locale.Manager.tr("Please be patient, this process can take a few minutes ..."),
116+
padding: [20, 10],
117+
gap: 15,
118+
icon: "@FontAwesome5Solid/exclamation-triangle/16",
119+
backgroundColor: "disclaimer-bg",
120+
textColor: "info",
121+
alignX: "center"
160122
});
161-
layout.addAt(progressState, this.NODE_INDEX.CALC);
162-
163-
return layout;
164-
},
165-
166-
createProgressBar: function(max = 1) {
167-
const progressBar = new qx.ui.indicator.ProgressBar().set({
168-
maximum: max,
169-
height: 4,
170-
margin: 0,
171-
padding: 0
123+
disclaimerText.getChildControl("icon").set({
124+
textColor: "info"
172125
});
173-
progressBar.exclude();
174-
return progressBar;
175-
},
176-
177-
updateProgressLabel: function(atom, {value, progressLabel}) {
178-
if ([null, undefined].includes(value)) {
179-
return;
180-
}
181-
182-
if (atom) {
183-
const halo = atom.getChildren()[this.NODE_INDEX.HALO];
184-
const icon = halo.getChildren()[0];
185-
icon.setVisibility(value === 1 ? "visible" : "excluded");
186-
const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar")
187-
osparc.service.StatusUI.getStatusHalo(halo, progressColor, value * 100);
188-
189-
const label = atom.getChildren()[this.NODE_INDEX.CALC];
190-
label.setValue(progressLabel);
191-
}
126+
return disclaimerText;
192127
},
193-
194-
progressReceived: function(pBar, value) {
195-
if ([null, undefined].includes(value)) {
196-
return;
197-
}
198-
199-
if (pBar) {
200-
pBar.set({
201-
value,
202-
visibility: (value >= 0) ? "visible" : "excluded"
203-
});
204-
}
205-
}
206128
},
207129

208130
members: {
@@ -290,60 +212,21 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
290212
__initLayout: function() {
291213
this.__mainLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
292214

293-
294-
const sequenceLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(9)).set({
295-
backgroundColor: "window-popup-background",
296-
paddingBottom: 8
297-
});
298-
299-
const progressTitle = new qx.ui.basic.Label(qx.locale.Manager.tr("LOADING ...")).set({
300-
font: "text-12",
301-
alignX: "center",
302-
alignY: "middle",
303-
margin: 10
304-
});
215+
const sequenceLoadingPage = new osparc.widget.ProgressSequence(qx.locale.Manager.tr("LOADING ..."));
305216
const nTasks = 6;
306-
const overallPBar = this.__overallProgressBar = this.self().createProgressBar(nTasks);
307-
sequenceLoadingPage.add(progressTitle);
308-
sequenceLoadingPage.add(overallPBar);
309-
310-
const disclaimerText = this.__disclaimerText = new qx.ui.basic.Atom().set({
311-
label: qx.locale.Manager.tr("Please be patient, this process can take a few minutes ..."),
312-
padding: [20, 10],
313-
gap: 15,
314-
icon: "@FontAwesome5Solid/exclamation-triangle/16",
315-
backgroundColor: "disclaimer-bg",
316-
textColor: "info",
317-
alignX: "center"
318-
});
319-
const icon = disclaimerText.getChildControl("icon");
320-
icon.set({
321-
textColor: "info"
322-
})
323-
disclaimerText.exclude();
324-
325-
326-
const scalingLayout = this.__clusterUpScalingLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Increasing system capacity ..."));
327-
sequenceLoadingPage.add(scalingLayout);
328-
329-
const pullingSidecarLayout = this.__pullingSidecarLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Setting up key components ..."));
330-
sequenceLoadingPage.add(pullingSidecarLayout);
331-
332-
const pullingOutputsLayout = this.__pullingOutputsLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your output data ..."));
333-
sequenceLoadingPage.add(pullingOutputsLayout);
334-
335-
const pullingStateLayout = this.__pullingStateLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your work ..."));
336-
sequenceLoadingPage.add(pullingStateLayout);
337-
338-
const pullingImagesLayout = this.__pullingImagesLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Installing software ..."));
339-
sequenceLoadingPage.add(pullingImagesLayout);
340-
341-
const pullingInputsLayout = this.__pullingInputsLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your input data ..."));
342-
sequenceLoadingPage.add(pullingInputsLayout);
343-
217+
this.__overallProgressBar = sequenceLoadingPage.addOverallProgressBar(nTasks);
218+
this.__clusterUpScalingLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Increasing system capacity ..."));
219+
this.__pullingSidecarLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Setting up key components ..."));
220+
this.__pullingOutputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your output data ..."));
221+
this.__pullingStateLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your work ..."));
222+
this.__pullingImagesLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Installing software ..."));
223+
this.__pullingInputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your input data ..."));
344224
this.__mainLoadingPage.addAt(sequenceLoadingPage, 0, {
345225
flex: 1
346226
});
227+
228+
const disclaimerText = this.__disclaimerText = this.self().createDisclaimerText();
229+
disclaimerText.exclude();
347230
this.__mainLoadingPage.addAt(this.__disclaimerText, 1, {
348231
flex: 1
349232
});
@@ -366,11 +249,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
366249
this.__disclaimerText.exclude();
367250
}
368251

369-
this.self().progressReceived(this.__overallProgressBar, value);
252+
osparc.widget.ProgressSequence.progressUpdate(this.__overallProgressBar, value);
370253
},
371254

372255
__applyClusterUpScaling: function(value) {
373-
this.self().updateProgressLabel(this.__clusterUpScalingLayout, value);
256+
osparc.widget.ProgressSequence.updateTaskProgress(this.__clusterUpScalingLayout, value);
374257

375258
this.__computeOverallProgress();
376259
},
@@ -380,7 +263,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
380263
const defaultEndVals = this.getDefaultEndValues();
381264
this.setClusterUpScaling(defaultEndVals);
382265
}
383-
this.self().updateProgressLabel(this.__pullingSidecarLayout, value);
266+
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingSidecarLayout, value);
384267

385268
this.__computeOverallProgress();
386269
},
@@ -390,7 +273,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
390273
const defaultEndVals = this.getDefaultEndValues();
391274
this.setSidecarPulling(defaultEndVals);
392275
}
393-
this.self().updateProgressLabel(this.__pullingOutputsLayout, value);
276+
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingOutputsLayout, value);
394277

395278
this.__computeOverallProgress();
396279
},
@@ -400,7 +283,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
400283
const defaultEndVals = this.getDefaultEndValues();
401284
this.setSidecarPulling(defaultEndVals);
402285
}
403-
this.self().updateProgressLabel(this.__pullingStateLayout, value);
286+
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingStateLayout, value);
404287

405288
this.__computeOverallProgress();
406289
},
@@ -410,7 +293,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
410293
const defaultEndVals = this.getDefaultEndValues();
411294
this.setSidecarPulling(defaultEndVals);
412295
}
413-
this.self().updateProgressLabel(this.__pullingImagesLayout, value);
296+
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingImagesLayout, value);
414297

415298
this.__computeOverallProgress();
416299
},
@@ -420,7 +303,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
420303
const defaultEndVals = this.getDefaultEndValues();
421304
this.setSidecarPulling(defaultEndVals);
422305
}
423-
this.self().updateProgressLabel(this.__pullingInputsLayout, value);
306+
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingInputsLayout, value);
424307

425308
this.__computeOverallProgress();
426309
}

‎services/static-webserver/client/source/class/osparc/study/Utils.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -206,16 +206,41 @@ qx.Class.define("osparc.study.Utils", {
206206
const interval = 1000;
207207
pollTasks.createPollingTask(fetchPromise, interval)
208208
.then(task => {
209+
const title = qx.locale.Manager.tr("CREATING ") + osparc.product.Utils.getStudyAlias({allUpperCase: true}) + " ...";
210+
const progressSequence = new osparc.widget.ProgressSequence(title).set({
211+
minHeight: 180 // four tasks
212+
});
213+
progressSequence.addOverallProgressBar();
214+
loadingPage.clearMessages();
215+
loadingPage.addWidgetToMessages(progressSequence);
209216
task.addListener("updateReceived", e => {
210217
const updateData = e.getData();
211218
if ("task_progress" in updateData && loadingPage) {
212219
const progress = updateData["task_progress"];
213-
loadingPage.setMessages([progress["message"]]);
214-
const pBar = new qx.ui.indicator.ProgressBar(progress["percent"], 1).set({
215-
width: osparc.ui.message.Loading.LOGO_WIDTH,
216-
maxWidth: osparc.ui.message.Loading.LOGO_WIDTH
217-
});
218-
loadingPage.addWidgetToMessages(pBar);
220+
const message = progress["message"];
221+
const percent = progress["percent"];
222+
progressSequence.setOverallProgress(percent);
223+
const existingTask = progressSequence.getTask(message);
224+
if (existingTask) {
225+
// update task
226+
osparc.widget.ProgressSequence.updateTaskProgress(existingTask, {
227+
value: percent,
228+
progressLabel: percent*100 + "%"
229+
});
230+
} else {
231+
// new task
232+
// all the previous steps to 100%
233+
progressSequence.getTasks().forEach(tsk => osparc.widget.ProgressSequence.updateTaskProgress(tsk, {
234+
value: 1,
235+
progressLabel: "100%"
236+
}));
237+
// and move to the next new task
238+
const subTask = progressSequence.addNewTask(message);
239+
osparc.widget.ProgressSequence.updateTaskProgress(subTask, {
240+
value: percent,
241+
progressLabel: "0%"
242+
});
243+
}
219244
}
220245
}, this);
221246
task.addListener("resultReceived", e => {

‎services/static-webserver/client/source/class/osparc/ui/message/Loading.js‎

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ qx.Class.define("osparc.ui.message.Loading", {
5151
check: "String",
5252
init: null,
5353
nullable: true,
54-
event: "changeLogo"
54+
apply: "__applyLogo"
5555
},
5656

5757
header: {
@@ -76,8 +76,9 @@ qx.Class.define("osparc.ui.message.Loading", {
7676
},
7777

7878
statics: {
79-
LOGO_WIDTH: 190,
80-
LOGO_HEIGHT: 220,
79+
ICON_WIDTH: 190,
80+
LOGO_HEIGHT: 100,
81+
ICON_HEIGHT: 220,
8182
STATUS_ICON_SIZE: 20,
8283

8384
GRID_POS: {
@@ -90,6 +91,7 @@ qx.Class.define("osparc.ui.message.Loading", {
9091

9192
members: {
9293
__mainLayout: null,
94+
__thumbnail: null,
9395
__header: null,
9496
__messages: null,
9597
__extraWidgets: null,
@@ -119,20 +121,23 @@ qx.Class.define("osparc.ui.message.Loading", {
119121
});
120122

121123
const productLogoPath = osparc.product.Utils.getLogoPath();
122-
const logo = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().LOGO_WIDTH, this.self().LOGO_HEIGHT).set({
124+
const thumbnail = this.__thumbnail = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().ICON_WIDTH, this.self().LOGO_HEIGHT).set({
123125
alignX: "center"
124126
});
127+
let logoHeight = this.self().LOGO_HEIGHT;
125128
if (qx.util.ResourceManager.getInstance().getImageFormat(productLogoPath) === "png") {
126-
const height = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().LOGO_WIDTH)
127-
logo.getChildControl("image").set({
128-
width: this.self().LOGO_WIDTH,
129-
height
129+
logoHeight = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().ICON_WIDTH);
130+
thumbnail.getChildControl("image").set({
131+
width: this.self().ICON_WIDTH,
132+
height: logoHeight
133+
});
134+
} else {
135+
thumbnail.getChildControl("image").set({
136+
width: this.self().ICON_WIDTH,
137+
height: logoHeight
130138
});
131139
}
132-
this.bind("logo", logo, "source", {
133-
converter: newPath => newPath ? newPath : productLogoPath
134-
});
135-
mainLayout.addAt(logo, {
140+
mainLayout.addAt(thumbnail, {
136141
column: 0,
137142
row: this.self().GRID_POS.LOGO
138143
});
@@ -194,6 +199,21 @@ qx.Class.define("osparc.ui.message.Loading", {
194199
this._add(maximizeLayout);
195200
},
196201

202+
__applyLogo: function(newLogo) {
203+
const productLogoPath = osparc.product.Utils.getLogoPath();
204+
if (newLogo !== productLogoPath) {
205+
this.__thumbnail.set({
206+
maxHeight: this.self().ICON_HEIGHT,
207+
height: this.self().ICON_HEIGHT,
208+
});
209+
this.__thumbnail.getChildControl("image").set({
210+
maxHeight: this.self().ICON_HEIGHT,
211+
height: this.self().ICON_HEIGHT,
212+
});
213+
}
214+
this.__thumbnail.setSource(newLogo);
215+
},
216+
197217
__applyHeader: function(value) {
198218
this.__header.setLabel(value);
199219
const words = value.split(" ");
@@ -207,8 +227,8 @@ qx.Class.define("osparc.ui.message.Loading", {
207227
}
208228
},
209229

210-
__applyMessages: function(msgs, old) {
211-
this.__messages.removeAll();
230+
__applyMessages: function(msgs) {
231+
this.clearMessages();
212232
if (msgs) {
213233
msgs.forEach(msg => {
214234
const text = new qx.ui.basic.Label(msg.toString()).set({
@@ -224,6 +244,10 @@ qx.Class.define("osparc.ui.message.Loading", {
224244
}
225245
},
226246

247+
clearMessages: function() {
248+
this.__messages.removeAll();
249+
},
250+
227251
addWidgetToMessages: function(widget) {
228252
if (widget) {
229253
this.__messages.add(widget);

0 commit comments

Comments
 (0)