Skip to content

Commit 6eba0bb

Browse files
odeimaizodeimaiz
authored
File Picker UI/UX (ITISFoundation#2870)
1 parent 7cf097b commit 6eba0bb

File tree

12 files changed

+328
-397
lines changed

12 files changed

+328
-397
lines changed

‎services/web/client/source/class/osparc/component/node/FilePickerNodeView.js‎ renamed to ‎services/web/client/source/class/osparc/component/node/FilePickerSSView.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
*
2020
*/
2121

22-
qx.Class.define("osparc.component.node.FilePickerNodeView", {
22+
qx.Class.define("osparc.component.node.FilePickerSSView", {
2323
extend: osparc.component.node.BaseNodeView,
2424

2525
events: {
@@ -61,8 +61,7 @@ qx.Class.define("osparc.component.node.FilePickerNodeView", {
6161
return;
6262
}
6363

64-
const filePicker = new osparc.file.FilePicker(node);
65-
filePicker.buildLayout();
64+
const filePicker = new osparc.file.FilePicker(node, "app");
6665
filePicker.init();
6766
filePicker.addListener("itemSelected", () => this.fireEvent("itemSelected"));
6867

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

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,6 @@
4141
* </pre>
4242
*/
4343

44-
const LOG_LEVEL = [
45-
{
46-
debug: -1
47-
}, {
48-
info: 0
49-
}, {
50-
warning: 1
51-
}, {
52-
error: 2
53-
}
54-
];
55-
Object.freeze(LOG_LEVEL);
5644

5745
qx.Class.define("osparc.component.widget.logger.LoggerView", {
5846
extend: qx.ui.core.Widget,
@@ -77,7 +65,7 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
7765
apply : "__applyFilters",
7866
nullable: false,
7967
check : "Number",
80-
init: LOG_LEVEL[0].debug
68+
init: 0
8169
},
8270

8371
currentNodeId: {
@@ -88,18 +76,24 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
8876
},
8977

9078
statics: {
79+
LOG_LEVELS: {
80+
debug: -1,
81+
info: 0,
82+
warning: 1,
83+
error: 2
84+
},
85+
9186
getLevelColorTag: function(logLevel) {
9287
const colorManager = qx.theme.manager.Color.getInstance();
93-
for (let i=0; i<LOG_LEVEL.length; i++) {
94-
const logString = Object.keys(LOG_LEVEL[i])[0];
95-
const logNumber = LOG_LEVEL[i][logString];
88+
let logColor = null;
89+
Object.keys(this.LOG_LEVELS).forEach(logLevelKey => {
90+
const logString = logLevelKey;
91+
const logNumber = this.LOG_LEVELS[logLevelKey];
9692
if (logNumber === logLevel) {
97-
const logColor = colorManager.resolve("logger-"+logString+"-message");
98-
return logColor;
93+
logColor = colorManager.resolve("logger-"+logString+"-message");
9994
}
100-
}
101-
const logColorDef = colorManager.resolve("logger-info-message");
102-
return logColorDef;
95+
});
96+
return logColor ? logColor : colorManager.resolve("logger-info-message");
10397
},
10498

10599
getNewColor: function() {
@@ -158,21 +152,20 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
158152
maxWidth: 80
159153
});
160154
let logLevelSet = false;
161-
for (let i=0; i<LOG_LEVEL.length; i++) {
162-
const level = Object.keys(LOG_LEVEL[i])[0];
163-
const logLevel = LOG_LEVEL[i][level];
164-
if (level === "debug" && !osparc.data.Permissions.getInstance().canDo("study.logger.debug.read")) {
165-
continue;
155+
Object.keys(this.self().LOG_LEVELS).forEach(logLevelKey => {
156+
const logLevel = this.self().LOG_LEVELS[logLevelKey];
157+
if (logLevelKey === "debug" && !osparc.data.Permissions.getInstance().canDo("study.logger.debug.read")) {
158+
return;
166159
}
167-
const label = qx.lang.String.firstUp(level);
160+
const label = qx.lang.String.firstUp(logLevelKey);
168161
const listItem = new qx.ui.form.ListItem(label);
169162
control.add(listItem);
170163
listItem.logLevel = logLevel;
171164
if (!logLevelSet) {
172165
this.setLogLevel(logLevel);
173166
logLevelSet = true;
174167
}
175-
}
168+
});
176169
toolbar.add(control);
177170
break;
178171
}
@@ -279,23 +272,23 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
279272
},
280273

281274
debug: function(nodeId, msg = "") {
282-
this.__addLogs(nodeId, [msg], LOG_LEVEL.debug);
275+
this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.debug);
283276
},
284277

285278
info: function(nodeId, msg = "") {
286-
this.__addLogs(nodeId, [msg], LOG_LEVEL.info);
279+
this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.info);
287280
},
288281

289282
infos: function(nodeId, msgs = [""]) {
290-
this.__addLogs(nodeId, msgs, LOG_LEVEL.info);
283+
this.__addLogs(nodeId, msgs, this.self().LOG_LEVELS.info);
291284
},
292285

293286
warn: function(nodeId, msg = "") {
294-
this.__addLogs(nodeId, [msg], LOG_LEVEL.warning);
287+
this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.warning);
295288
},
296289

297290
error: function(nodeId, msg = "") {
298-
this.__addLogs(nodeId, [msg], LOG_LEVEL.error);
291+
this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.error);
299292
},
300293

301294
__addLogs: function(nodeId, msgs = [""], logLevel = 0) {

‎services/web/client/source/class/osparc/component/workbench/NodeUI.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
168168
const metaData = node.getMetaData();
169169
this._createPorts(true, Boolean((metaData && metaData.inputs && Object.keys(metaData.inputs).length) || this.getNode().isContainer()));
170170
this._createPorts(false, Boolean((metaData && metaData.outputs && Object.keys(metaData.outputs).length) || this.getNode().isContainer()));
171-
if (node.isComputational()) {
171+
if (node.isComputational() || node.isFilePicker()) {
172172
node.getStatus().bind("progress", this.getChildControl("progress"), "value", {
173173
converter: val => val === null ? 0 : val
174174
});

‎services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -995,7 +995,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
995995

996996
_loadModel: async function(model) {
997997
this._clearAll();
998-
this.resetSelection();
999998
this._currentModel = model;
1000999
if (model) {
10011000
const isContainer = model.isContainer();
@@ -1584,9 +1583,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
15841583
if (fileList.length) {
15851584
const service = qx.data.marshal.Json.createModel(osparc.utils.Services.getFilePicker());
15861585
const nodeUI = this.__addNode(service, pos);
1587-
const filePicker = new osparc.file.FilePicker(nodeUI.getNode());
1588-
filePicker.buildLayout();
1586+
const filePicker = new osparc.file.FilePicker(nodeUI.getNode(), "workbench");
15891587
filePicker.uploadPendingFiles(fileList);
1588+
filePicker.addListener("fileUploaded", () => this.fireDataEvent("nodeSelected", nodeUI.getNodeId()), this);
15901589
}
15911590
} else {
15921591
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("Only one file is accepted"), "ERROR");
@@ -1603,8 +1602,8 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
16031602
const service = qx.data.marshal.Json.createModel(osparc.utils.Services.getFilePicker());
16041603
const nodeUI = this.__addNode(service, pos);
16051604
const node = nodeUI.getNode();
1606-
const filePicker = new osparc.file.FilePicker(node);
1607-
filePicker.buildLayout();
1605+
// const filePicker = new osparc.file.FilePicker(node, "workbench");
1606+
// filePicker.buildLayout();
16081607
osparc.file.FilePicker.setOutputValueFromStore(node, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());
16091608
this.__isDraggingLink = null;
16101609
}

‎services/web/client/source/class/osparc/data/model/Node.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -932,7 +932,6 @@ qx.Class.define("osparc.data.model.Node", {
932932
loadIframe();
933933
} else {
934934
// lazy loading
935-
console.debug("lazy load", this.getNodeId());
936935
loadingPage.addListenerOnce("appear", () => loadIframe(), this);
937936
}
938937
}
@@ -1058,7 +1057,6 @@ qx.Class.define("osparc.data.model.Node", {
10581057
const serviceState = data["service_state"];
10591058
const nodeId = data["service_uuid"];
10601059
const status = this.getStatus();
1061-
console.log(serviceState);
10621060
switch (serviceState) {
10631061
case "idle": {
10641062
status.setInteractive("idle");
@@ -1126,7 +1124,6 @@ qx.Class.define("osparc.data.model.Node", {
11261124
__nodeState: function() {
11271125
// Check if study is still there
11281126
if (this.getStudy() === null || this.__stopRequestingStatus === true) {
1129-
console.log("stop callign me");
11301127
return;
11311128
}
11321129
// Check if node is still there

‎services/web/client/source/class/osparc/data/model/NodeStatus.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ qx.Class.define("osparc.data.model.NodeStatus", {
4040
check: "Number",
4141
nullable: true,
4242
init: null,
43-
event: "changeProgress"
43+
event: "changeProgress",
44+
transform: "__transformProgress"
4445
},
4546

4647
running: {
@@ -87,7 +88,25 @@ qx.Class.define("osparc.data.model.NodeStatus", {
8788
}
8889
},
8990

91+
statics: {
92+
getValidProgress: function(value) {
93+
if (value !== null && !Number.isNaN(value) && value >= 0 && value <= 100) {
94+
return Number.parseFloat(value.toFixed(4));
95+
}
96+
return 0;
97+
}
98+
},
99+
90100
members: {
101+
__transformProgress: function(value) {
102+
const oldP = this.getProgress();
103+
if (this.getNode().isFilePicker() && oldP === 100 && value !== 0 && value !== 100) {
104+
// a NodeUpdated backend message could override the progress with an older value
105+
value = 100;
106+
}
107+
return value;
108+
},
109+
91110
hasDependencies: function() {
92111
const dependencies = this.getDependencies();
93112
if (dependencies && dependencies.length) {

‎services/web/client/source/class/osparc/desktop/SlideshowView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
197197
view.add(renderer);
198198
} else {
199199
if (node.isFilePicker()) {
200-
view = new osparc.component.node.FilePickerNodeView();
200+
view = new osparc.component.node.FilePickerSSView();
201201
view.getOutputsButton().hide();
202202
} else {
203203
view = new osparc.component.node.NodeView();

‎services/web/client/source/class/osparc/desktop/StudyEditor.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,6 @@ qx.Class.define("osparc.desktop.StudyEditor", {
557557
if (deltaKeys.length > 0) {
558558
if (this.__updatingStudy > 0) {
559559
// throttle update
560-
console.log("throttle update");
561560
this.__updateThrottled = true;
562561
} else {
563562
this.updateStudyDocument(false);
@@ -603,7 +602,6 @@ qx.Class.define("osparc.desktop.StudyEditor", {
603602
.finally(() => {
604603
this.__updatingStudy--;
605604
if (this.__updateThrottled && this.__updatingStudy === 0) {
606-
console.log("throttle update done");
607605
this.__updateThrottled = false;
608606
this.updateStudyDocument(false);
609607
}

‎services/web/client/source/class/osparc/desktop/WorkbenchView.js‎

Lines changed: 9 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -930,32 +930,14 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
930930
},
931931

932932
__populateSecondPanelFilePicker: function(filePicker) {
933+
const fpView = new osparc.file.FilePicker(filePicker, "workbench");
933934
if (osparc.file.FilePicker.hasOutputAssigned(filePicker.getOutputs())) {
934935
this.__infoPage.getChildControl("button").show();
935936
this.getChildControl("side-panel-right-tabs").setSelection([this.__infoPage]);
936937

937-
const view = osparc.file.FilePicker.buildInfoView(filePicker);
938-
view.setEnabled(false);
939-
940-
this.__infoPage.add(view);
941-
942-
const hbox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
943-
const downloadFileBtn = new qx.ui.form.Button(this.tr("Download"), "@FontAwesome5Solid/cloud-download-alt/14").set({
944-
allowGrowX: false
945-
});
946-
downloadFileBtn.addListener("execute", () => osparc.file.FilePicker.downloadOutput(filePicker));
947-
hbox.add(downloadFileBtn);
948-
const resetFileBtn = new qx.ui.form.Button(this.tr("Reset"), "@FontAwesome5Solid/sync-alt/14").set({
949-
allowGrowX: false
938+
this.__infoPage.add(fpView, {
939+
flex: 1
950940
});
951-
resetFileBtn.addListener("execute", () => {
952-
osparc.file.FilePicker.resetOutputValue(filePicker);
953-
filePicker.setLabel("File Picker");
954-
this.getStudy().getWorkbench().giveUniqueNameToNode(filePicker, "File Picker");
955-
this.__populateSecondPanel(filePicker);
956-
}, this);
957-
hbox.add(resetFileBtn);
958-
this.__infoPage.add(hbox);
959941
} else {
960942
// empty File Picker
961943
const tabViewLeftPanel = this.getChildControl("side-panel-left-tabs");
@@ -964,36 +946,15 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
964946
this.__settingsPage.getChildControl("button").show();
965947
this.getChildControl("side-panel-right-tabs").setSelection([this.__settingsPage]);
966948

967-
const filePickerView = new osparc.file.FilePicker(filePicker);
968-
filePickerView.buildLayout();
969-
970-
const fileDrop = new osparc.file.FileDrop();
971-
fileDrop.addListener("localFileDropped", e => {
972-
const files = e.getData()["data"];
973-
if (filePickerView.uploadPendingFiles(files)) {
974-
setTimeout(() => this.__populateSecondPanel(filePicker), 500);
975-
}
976-
fileDrop.resetDropAction();
977-
});
978-
fileDrop.addListener("fileLinkDropped", e => {
979-
const data = e.getData()["data"];
980-
osparc.file.FilePicker.setOutputValueFromStore(filePicker, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());
981-
this.__populateSecondPanel(filePicker);
982-
fileDrop.resetDropAction();
983-
});
984-
985-
this.__settingsPage.add(fileDrop, {
949+
this.__settingsPage.add(fpView, {
986950
flex: 1
987951
});
988-
989-
filePickerView.getChildControl("reload-button").exclude();
990-
filePickerView.getChildControl("files-tree").exclude();
991-
filePickerView.getChildControl("folder-viewer").exclude();
992-
filePickerView.getChildControl("selected-file-layout").exclude();
993-
filePickerView.getChildControl("select-button").exclude();
994-
filePickerView.addListener("itemSelected", () => this.__populateSecondPanel(filePicker));
995-
this.__settingsPage.add(filePickerView);
996952
}
953+
[
954+
"itemReset",
955+
"itemSelected",
956+
"fileUploaded"
957+
].forEach(ev => fpView.addListener(ev, () => this.__populateSecondPanel(filePicker)));
997958
},
998959

999960
__populateSecondPanelParameter: function(parameter) {

‎services/web/client/source/class/osparc/file/FileDownloadLink.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,12 @@ qx.Class.define("osparc.file.FileDownloadLink", {
4141
const selectButton = this.getChildControl("selectButton");
4242
selectButton.addListener("execute", () => {
4343
const downloadLink = downloadLinkField.getValue();
44-
this.fireDataEvent("fileLinkAdded", downloadLink);
44+
if (osparc.utils.Utils.isValidHttpUrl(downloadLink)) {
45+
this.fireDataEvent("fileLinkAdded", downloadLink);
46+
} else {
47+
downloadLinkField.resetValue();
48+
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("Error checking link"), "WARNING");
49+
}
4550
}, this);
4651
},
4752

0 commit comments

Comments
 (0)