Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎨 [Frontend] Prettify "Creating template" progress #6267

Merged
merged 21 commits into from
Sep 5, 2024
Merged

🎨 [Frontend] Prettify "Creating template" progress #6267

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5ffbcc6
progress sequence
odeimaiz Aug 29, 2024
7dd3bf0
more refactoring
odeimaiz Aug 29, 2024
503cf73
refactoring
odeimaiz Aug 29, 2024
e844583
minor
odeimaiz Aug 29, 2024
e340b6e
progress title
odeimaiz Aug 29, 2024
f54e734
progressSequence on template creation
odeimaiz Aug 29, 2024
cd2be7c
tasks and refactoring
odeimaiz Aug 29, 2024
7fa0542
update progress
odeimaiz Aug 29, 2024
af01d56
use refactored class
odeimaiz Aug 29, 2024
a30cd0e
minor
odeimaiz Aug 29, 2024
e388fbb
addOverallProgressBar
odeimaiz Aug 29, 2024
e79d0f3
Merge branch 'master' into enh/copy-template-sequence
odeimaiz Sep 4, 2024
180c8ff
updateTaskProgress expects an object
odeimaiz Sep 4, 2024
86b4fb6
Merge branch 'master' into enh/copy-template-sequence
odeimaiz Sep 4, 2024
3888ec1
minors
odeimaiz Sep 4, 2024
218a736
Merge branch 'enh/copy-template-sequence' of github.com:odeimaiz/ospa…
odeimaiz Sep 4, 2024
6395de2
clear messages
odeimaiz Sep 4, 2024
9101cff
logo sizes
odeimaiz Sep 4, 2024
7ecf10f
remove console log
odeimaiz Sep 4, 2024
4ca1285
__applyLogo
odeimaiz Sep 4, 2024
9226191
Merge branch 'master' into enh/copy-template-sequence
odeimaiz Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 30 additions & 147 deletions services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,101 +108,23 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
},

statics: {
NODE_INDEX: {
LABEL: 0,
CALC: 1,
HALO: 2,
},

DISCLAIMER_TIME: 50000,

createTaskLayout: function(label) {
const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
alignY: "middle"
})).set({
padding: [2, 10]
});

const lbl = new qx.ui.basic.Label(label);
lbl.set({
textColor: "text",
allowGrowX: true,
allowShrinkX: true,
});
layout.addAt(lbl, this.NODE_INDEX.LABEL, {
flex: 1
});

const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
alignY: "middle",
alignX: "center",
})).set({
height: 18,
width: 18,
allowGrowY: false,
allowGrowX: false,
});
const icon = new qx.ui.basic.Image("@FontAwesome5Solid/check/10").set({
visibility: "excluded",
textColor: "success"
});
iconContainer.add(icon);
const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar");
osparc.service.StatusUI.getStatusHalo(iconContainer, progressColor, 0);
layout.addAt(iconContainer, this.NODE_INDEX.HALO);

const progressState = new qx.ui.basic.Label();
progressState.set({
value: qx.locale.Manager.tr("Waiting ..."),
textColor: "text",
allowGrowX: true,
allowShrinkX: true
createDisclaimerText: function() {
const disclaimerText = new qx.ui.basic.Atom().set({
label: qx.locale.Manager.tr("Please be patient, this process can take a few minutes ..."),
padding: [20, 10],
gap: 15,
icon: "@FontAwesome5Solid/exclamation-triangle/16",
backgroundColor: "disclaimer-bg",
textColor: "info",
alignX: "center"
});
layout.addAt(progressState, this.NODE_INDEX.CALC);

return layout;
},

createProgressBar: function(max = 1) {
const progressBar = new qx.ui.indicator.ProgressBar().set({
maximum: max,
height: 4,
margin: 0,
padding: 0
disclaimerText.getChildControl("icon").set({
textColor: "info"
});
progressBar.exclude();
return progressBar;
},

updateProgressLabel: function(atom, {value, progressLabel}) {
if ([null, undefined].includes(value)) {
return;
}

if (atom) {
const halo = atom.getChildren()[this.NODE_INDEX.HALO];
const icon = halo.getChildren()[0];
icon.setVisibility(value === 1 ? "visible" : "excluded");
const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar")
osparc.service.StatusUI.getStatusHalo(halo, progressColor, value * 100);

const label = atom.getChildren()[this.NODE_INDEX.CALC];
label.setValue(progressLabel);
}
return disclaimerText;
},

progressReceived: function(pBar, value) {
if ([null, undefined].includes(value)) {
return;
}

if (pBar) {
pBar.set({
value,
visibility: (value >= 0) ? "visible" : "excluded"
});
}
}
},

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


const sequenceLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(9)).set({
backgroundColor: "window-popup-background",
paddingBottom: 8
});

const progressTitle = new qx.ui.basic.Label(qx.locale.Manager.tr("LOADING ...")).set({
font: "text-12",
alignX: "center",
alignY: "middle",
margin: 10
});
const sequenceLoadingPage = new osparc.widget.ProgressSequence(qx.locale.Manager.tr("LOADING ..."));
const nTasks = 6;
const overallPBar = this.__overallProgressBar = this.self().createProgressBar(nTasks);
sequenceLoadingPage.add(progressTitle);
sequenceLoadingPage.add(overallPBar);

const disclaimerText = this.__disclaimerText = new qx.ui.basic.Atom().set({
label: qx.locale.Manager.tr("Please be patient, this process can take a few minutes ..."),
padding: [20, 10],
gap: 15,
icon: "@FontAwesome5Solid/exclamation-triangle/16",
backgroundColor: "disclaimer-bg",
textColor: "info",
alignX: "center"
});
const icon = disclaimerText.getChildControl("icon");
icon.set({
textColor: "info"
})
disclaimerText.exclude();


const scalingLayout = this.__clusterUpScalingLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Increasing system capacity ..."));
sequenceLoadingPage.add(scalingLayout);

const pullingSidecarLayout = this.__pullingSidecarLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Setting up key components ..."));
sequenceLoadingPage.add(pullingSidecarLayout);

const pullingOutputsLayout = this.__pullingOutputsLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your output data ..."));
sequenceLoadingPage.add(pullingOutputsLayout);

const pullingStateLayout = this.__pullingStateLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your work ..."));
sequenceLoadingPage.add(pullingStateLayout);

const pullingImagesLayout = this.__pullingImagesLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Installing software ..."));
sequenceLoadingPage.add(pullingImagesLayout);

const pullingInputsLayout = this.__pullingInputsLayout = this.self().createTaskLayout(qx.locale.Manager.tr("Retrieving your input data ..."));
sequenceLoadingPage.add(pullingInputsLayout);

this.__overallProgressBar = sequenceLoadingPage.addOverallProgressBar(nTasks);
this.__clusterUpScalingLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Increasing system capacity ..."));
this.__pullingSidecarLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Setting up key components ..."));
this.__pullingOutputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your output data ..."));
this.__pullingStateLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your work ..."));
this.__pullingImagesLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Installing software ..."));
this.__pullingInputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr("Retrieving your input data ..."));
this.__mainLoadingPage.addAt(sequenceLoadingPage, 0, {
flex: 1
});

const disclaimerText = this.__disclaimerText = this.self().createDisclaimerText();
disclaimerText.exclude();
this.__mainLoadingPage.addAt(this.__disclaimerText, 1, {
flex: 1
});
Expand All @@ -366,11 +249,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
this.__disclaimerText.exclude();
}

this.self().progressReceived(this.__overallProgressBar, value);
osparc.widget.ProgressSequence.progressUpdate(this.__overallProgressBar, value);
},

__applyClusterUpScaling: function(value) {
this.self().updateProgressLabel(this.__clusterUpScalingLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__clusterUpScalingLayout, value);

this.__computeOverallProgress();
},
Expand All @@ -380,7 +263,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
const defaultEndVals = this.getDefaultEndValues();
this.setClusterUpScaling(defaultEndVals);
}
this.self().updateProgressLabel(this.__pullingSidecarLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingSidecarLayout, value);

this.__computeOverallProgress();
},
Expand All @@ -390,7 +273,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
const defaultEndVals = this.getDefaultEndValues();
this.setSidecarPulling(defaultEndVals);
}
this.self().updateProgressLabel(this.__pullingOutputsLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingOutputsLayout, value);

this.__computeOverallProgress();
},
Expand All @@ -400,7 +283,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
const defaultEndVals = this.getDefaultEndValues();
this.setSidecarPulling(defaultEndVals);
}
this.self().updateProgressLabel(this.__pullingStateLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingStateLayout, value);

this.__computeOverallProgress();
},
Expand All @@ -410,7 +293,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
const defaultEndVals = this.getDefaultEndValues();
this.setSidecarPulling(defaultEndVals);
}
this.self().updateProgressLabel(this.__pullingImagesLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingImagesLayout, value);

this.__computeOverallProgress();
},
Expand All @@ -420,7 +303,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", {
const defaultEndVals = this.getDefaultEndValues();
this.setSidecarPulling(defaultEndVals);
}
this.self().updateProgressLabel(this.__pullingInputsLayout, value);
osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingInputsLayout, value);

this.__computeOverallProgress();
}
Expand Down
37 changes: 31 additions & 6 deletions services/static-webserver/client/source/class/osparc/study/Utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,16 +206,41 @@ qx.Class.define("osparc.study.Utils", {
const interval = 1000;
pollTasks.createPollingTask(fetchPromise, interval)
.then(task => {
const title = qx.locale.Manager.tr("CREATING ") + osparc.product.Utils.getStudyAlias({allUpperCase: true}) + " ...";
const progressSequence = new osparc.widget.ProgressSequence(title).set({
minHeight: 180 // four tasks
});
progressSequence.addOverallProgressBar();
loadingPage.clearMessages();
loadingPage.addWidgetToMessages(progressSequence);
task.addListener("updateReceived", e => {
const updateData = e.getData();
if ("task_progress" in updateData && loadingPage) {
const progress = updateData["task_progress"];
loadingPage.setMessages([progress["message"]]);
const pBar = new qx.ui.indicator.ProgressBar(progress["percent"], 1).set({
width: osparc.ui.message.Loading.LOGO_WIDTH,
maxWidth: osparc.ui.message.Loading.LOGO_WIDTH
});
loadingPage.addWidgetToMessages(pBar);
const message = progress["message"];
const percent = progress["percent"];
progressSequence.setOverallProgress(percent);
const existingTask = progressSequence.getTask(message);
if (existingTask) {
// update task
osparc.widget.ProgressSequence.updateTaskProgress(existingTask, {
value: percent,
progressLabel: percent*100 + "%"
});
} else {
// new task
// all the previous steps to 100%
progressSequence.getTasks().forEach(tsk => osparc.widget.ProgressSequence.updateTaskProgress(tsk, {
value: 1,
progressLabel: "100%"
}));
// and move to the next new task
const subTask = progressSequence.addNewTask(message);
osparc.widget.ProgressSequence.updateTaskProgress(subTask, {
value: percent,
progressLabel: "0%"
});
}
}
}, this);
task.addListener("resultReceived", e => {
Expand Down
52 changes: 38 additions & 14 deletions services/static-webserver/client/source/class/osparc/ui/message/Loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ qx.Class.define("osparc.ui.message.Loading", {
check: "String",
init: null,
nullable: true,
event: "changeLogo"
apply: "__applyLogo"
},

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

statics: {
LOGO_WIDTH: 190,
LOGO_HEIGHT: 220,
ICON_WIDTH: 190,
LOGO_HEIGHT: 100,
ICON_HEIGHT: 220,
STATUS_ICON_SIZE: 20,

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

members: {
__mainLayout: null,
__thumbnail: null,
__header: null,
__messages: null,
__extraWidgets: null,
Expand Down Expand Up @@ -119,20 +121,23 @@ qx.Class.define("osparc.ui.message.Loading", {
});

const productLogoPath = osparc.product.Utils.getLogoPath();
const logo = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().LOGO_WIDTH, this.self().LOGO_HEIGHT).set({
const thumbnail = this.__thumbnail = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().ICON_WIDTH, this.self().LOGO_HEIGHT).set({
alignX: "center"
});
let logoHeight = this.self().LOGO_HEIGHT;
if (qx.util.ResourceManager.getInstance().getImageFormat(productLogoPath) === "png") {
const height = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().LOGO_WIDTH)
logo.getChildControl("image").set({
width: this.self().LOGO_WIDTH,
height
logoHeight = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().ICON_WIDTH);
thumbnail.getChildControl("image").set({
width: this.self().ICON_WIDTH,
height: logoHeight
});
} else {
thumbnail.getChildControl("image").set({
width: this.self().ICON_WIDTH,
height: logoHeight
});
}
this.bind("logo", logo, "source", {
converter: newPath => newPath ? newPath : productLogoPath
});
mainLayout.addAt(logo, {
mainLayout.addAt(thumbnail, {
column: 0,
row: this.self().GRID_POS.LOGO
});
Expand Down Expand Up @@ -194,6 +199,21 @@ qx.Class.define("osparc.ui.message.Loading", {
this._add(maximizeLayout);
},

__applyLogo: function(newLogo) {
const productLogoPath = osparc.product.Utils.getLogoPath();
if (newLogo !== productLogoPath) {
this.__thumbnail.set({
maxHeight: this.self().ICON_HEIGHT,
height: this.self().ICON_HEIGHT,
});
this.__thumbnail.getChildControl("image").set({
maxHeight: this.self().ICON_HEIGHT,
height: this.self().ICON_HEIGHT,
});
}
this.__thumbnail.setSource(newLogo);
},

__applyHeader: function(value) {
this.__header.setLabel(value);
const words = value.split(" ");
Expand All @@ -207,8 +227,8 @@ qx.Class.define("osparc.ui.message.Loading", {
}
},

__applyMessages: function(msgs, old) {
this.__messages.removeAll();
__applyMessages: function(msgs) {
this.clearMessages();
if (msgs) {
msgs.forEach(msg => {
const text = new qx.ui.basic.Label(msg.toString()).set({
Expand All @@ -224,6 +244,10 @@ qx.Class.define("osparc.ui.message.Loading", {
}
},

clearMessages: function() {
this.__messages.removeAll();
},

addWidgetToMessages: function(widget) {
if (widget) {
this.__messages.add(widget);
Expand Down
Loading
Loading