Skip to content

Commit 99b8022

Browse files
odeimaizodeimaiz
authored
Allow resetting Selected file in File Picker (ITISFoundation#2728)
1 parent 735f57c commit 99b8022

File tree

10 files changed

+91
-64
lines changed

10 files changed

+91
-64
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ qx.Class.define("osparc.component.widget.NodeDataManager", {
231231
this.__userFilesTree.resetSelection();
232232
}
233233
if (selectionData) {
234-
this.__selectedFileLayout.itemSelected(selectionData);
234+
this.__selectedFileLayout.setItemSelected(selectionData);
235235
}
236236
}
237237
}

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

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,9 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
4040
construct: function(node) {
4141
this.base(arguments);
4242

43-
this.set({
44-
width: this.self(arguments).NODE_WIDTH,
45-
maxWidth: this.self(arguments).NODE_WIDTH,
46-
minWidth: this.self(arguments).NODE_WIDTH
47-
});
48-
4943
this.setNode(node);
5044

51-
this._createWindowLayout();
45+
this.__resetNodeUILayout();
5246
},
5347

5448
properties: {
@@ -79,7 +73,6 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
7973
},
8074

8175
members: {
82-
__progressBar: null,
8376
__thumbnail: null,
8477
__svgWorkbenchCanvas: null,
8578

@@ -114,6 +107,8 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
114107
});
115108
control.add(chip);
116109
}
110+
const nodeStatus = new osparc.ui.basic.NodeStatusUI(this.getNode());
111+
control.add(nodeStatus);
117112
this.add(control, {
118113
row: 0,
119114
column: 1
@@ -135,19 +130,32 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
135130
return control || this.base(arguments, id);
136131
},
137132

133+
__resetNodeUILayout: function() {
134+
this.set({
135+
width: this.self(arguments).NODE_WIDTH,
136+
maxWidth: this.self(arguments).NODE_WIDTH,
137+
minWidth: this.self(arguments).NODE_WIDTH
138+
});
139+
this.getContentElement().setStyles({
140+
"border-radius": "0px"
141+
});
142+
this.resetThumbnail();
143+
144+
this._createWindowLayout();
145+
},
146+
138147
// overridden
139148
_createWindowLayout: function() {
140149
const node = this.getNode();
141150
if (node.getThumbnail()) {
142151
this.setThumbnail(node.getThumbnail());
143152
}
144-
const chipContainer = this.getChildControl("chips");
153+
154+
this.getChildControl("chips").show();
155+
145156
if (node.isComputational() || node.isFilePicker() || node.isIterator()) {
146-
this.__progressBar = this.getChildControl("progress");
157+
this.getChildControl("progress").show();
147158
}
148-
149-
const nodeStatus = new osparc.ui.basic.NodeStatusUI(node);
150-
chipContainer.add(nodeStatus);
151159
},
152160

153161
populateNodeLayout: function(svgWorkbenchCanvas) {
@@ -161,7 +169,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
161169
this._createPorts(true, Boolean((metaData && metaData.inputs && Object.keys(metaData.inputs).length) || this.getNode().isContainer()));
162170
this._createPorts(false, Boolean((metaData && metaData.outputs && Object.keys(metaData.outputs).length) || this.getNode().isContainer()));
163171
if (node.isComputational()) {
164-
node.getStatus().bind("progress", this.__progressBar, "value", {
172+
node.getStatus().bind("progress", this.getChildControl("progress"), "value", {
165173
converter: val => val === null ? 0 : val
166174
});
167175
}
@@ -181,8 +189,8 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
181189
const chipContainer = this.getChildControl("chips");
182190
chipContainer.exclude();
183191

184-
if (this.__progressBar) {
185-
this.__progressBar.exclude();
192+
if (this.hasChildControl("progress")) {
193+
this.getChildControl("progress").exclude();
186194
}
187195

188196
if (this._inputLayout && "ui" in this._inputLayout) {
@@ -212,6 +220,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
212220
switch (type) {
213221
case "file":
214222
this.__checkTurnIntoFileUI();
223+
this.getNode().addListener("changeOutputs", () => this.__checkTurnIntoFileUI(), this);
215224
break;
216225
case "parameter":
217226
this.__turnIntoParameterUI();
@@ -240,9 +249,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
240249
__checkTurnIntoFileUI: function() {
241250
const outputs = this.getNode().getOutputs();
242251
if ([null, ""].includes(osparc.file.FilePicker.getOutput(outputs))) {
243-
this.getNode().addListener("changeOutputs", () => {
244-
this.__checkTurnIntoFileUI();
245-
}, this);
252+
this.__resetNodeUILayout();
246253
} else {
247254
this.__turnIntoFileUI();
248255
}
@@ -431,25 +438,28 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
431438
this.base(arguments, e);
432439
},
433440

434-
_applyThumbnail: function(thumbnail, oldThumbnail) {
435-
if (oldThumbnail !== null) {
436-
this.removeAt(0);
441+
_applyThumbnail: function(thumbnailSrc) {
442+
if (this.__thumbnail) {
443+
this.remove(this.__thumbnail);
444+
this.__thumbnail = null;
437445
}
438-
if (osparc.utils.Utils.isUrl(thumbnail)) {
439-
this.__thumbnail = new qx.ui.basic.Image(thumbnail).set({
440-
height: 100,
441-
allowShrinkX: true,
442-
scale: true
443-
});
444-
} else {
445-
this.__thumbnail = new osparc.ui.basic.Thumbnail(thumbnail).set({
446-
padding: 12
446+
if (thumbnailSrc) {
447+
if (osparc.utils.Utils.isUrl(thumbnailSrc)) {
448+
this.__thumbnail = new qx.ui.basic.Image(thumbnailSrc).set({
449+
height: 100,
450+
allowShrinkX: true,
451+
scale: true
452+
});
453+
} else {
454+
this.__thumbnail = new osparc.ui.basic.Thumbnail(thumbnailSrc).set({
455+
padding: 12
456+
});
457+
}
458+
this.add(this.__thumbnail, {
459+
row: 0,
460+
column: 1
447461
});
448462
}
449-
this.add(this.__thumbnail, {
450-
row: 0,
451-
column: 1
452-
});
453463
},
454464

455465
__filterText: function(text) {

‎services/web/client/source/class/osparc/dashboard/DataBrowser.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
160160
},
161161

162162
__selectionChanged: function(selectedItem) {
163-
this.__selectedFileLayout.itemSelected(selectedItem);
163+
this.__selectedFileLayout.setItemSelected(selectedItem);
164164
}
165165
}
166166
});

‎services/web/client/source/class/osparc/data/Permissions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ qx.Class.define("osparc.data.Permissions", {
112112
"study.node.export",
113113
"study.edge.create",
114114
"study.edge.delete",
115+
"study.service.update",
115116
"study.classifier",
116117
"study.tag",
117118
"study.slides"
@@ -121,7 +122,6 @@ qx.Class.define("osparc.data.Permissions", {
121122
"services.all.read",
122123
"user.role.update",
123124
"user.clusters.create",
124-
"study.service.update",
125125
"study.snapshot.read",
126126
"study.snapshot.create",
127127
"study.nodestree.uuid.read",

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ qx.Class.define("osparc.data.model.Workbench", {
301301
this.__initNodeSignals(node);
302302

303303
node.populateNodeData();
304-
this.__giveUniqueNameToNode(node, node.getLabel());
304+
this.giveUniqueNameToNode(node, node.getLabel());
305305
node.startInBackend();
306306

307307
const metaData = node.getMetaData();
@@ -625,19 +625,19 @@ qx.Class.define("osparc.data.model.Workbench", {
625625

626626
nodeIds.forEach(nodeId => {
627627
const node = this.getNode(nodeId);
628-
this.__giveUniqueNameToNode(node, node.getLabel());
628+
this.giveUniqueNameToNode(node, node.getLabel());
629629
});
630630
},
631631

632-
__giveUniqueNameToNode: function(node, label, suffix = 2) {
632+
giveUniqueNameToNode: function(node, label, suffix = 2) {
633633
const newLabel = label + "_" + suffix;
634634
const allModels = this.getNodes(true);
635635
const nodes = Object.values(allModels);
636636
for (const node2 of nodes) {
637637
if (node2.getNodeId() !== node.getNodeId() &&
638638
node2.getLabel().localeCompare(node.getLabel()) === 0) {
639639
node.setLabel(newLabel);
640-
this.__giveUniqueNameToNode(node, label, suffix+1);
640+
this.giveUniqueNameToNode(node, label, suffix+1);
641641
}
642642
}
643643
},

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,9 @@ qx.Class.define("osparc.desktop.StartStopButtons", {
7171
if (!this.__startButton.isFetching()) {
7272
const runnableNodes = [];
7373
selectedNodeIds.forEach(selectedNodeId => {
74-
runnableNodes.push(this.getStudy().getWorkbench().getNode(selectedNodeId));
74+
if (this.getStudy()) {
75+
runnableNodes.push(this.getStudy().getWorkbench().getNode(selectedNodeId));
76+
}
7577
});
7678
const isSelectionRunnable = runnableNodes.length && runnableNodes.some(node => node && (node.isComputational() || node.isIterator()));
7779
if (isSelectionRunnable) {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -936,11 +936,23 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
936936

937937
this.__infoPage.add(view);
938938

939+
const hbox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
939940
const downloadFileBtn = new qx.ui.form.Button(this.tr("Download"), "@FontAwesome5Solid/cloud-download-alt/14").set({
940941
allowGrowX: false
941942
});
942943
downloadFileBtn.addListener("execute", () => osparc.file.FilePicker.downloadOutput(filePicker));
943-
this.__infoPage.add(downloadFileBtn);
944+
hbox.add(downloadFileBtn);
945+
const resetFileBtn = new qx.ui.form.Button(this.tr("Reset"), "@FontAwesome5Solid/sync-alt/14").set({
946+
allowGrowX: false
947+
});
948+
resetFileBtn.addListener("execute", () => {
949+
osparc.file.FilePicker.resetOutputValue(filePicker);
950+
filePicker.setLabel("File Picker");
951+
this.getStudy().getWorkbench().giveUniqueNameToNode(filePicker, "File Picker");
952+
this.__populateSecondPanel(filePicker);
953+
}, this);
954+
hbox.add(resetFileBtn);
955+
this.__infoPage.add(hbox);
944956
} else {
945957
// empty File Picker
946958
const tabViewLeftPanel = this.getChildControl("side-panel-left-tabs");

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,18 @@ qx.Class.define("osparc.file.FileDrop", {
4545
top: 40,
4646
left: 40
4747
});
48-
dropHere.addListener("appear", () => {
48+
49+
const centerDropHere = () => {
4950
// center it
5051
const dropHereBounds = dropHere.getBounds() || dropHere.getSizeHint();
5152
const fileDropBounds = this.getBounds() || this.getSizeHint();
5253
dropHere.setLayoutProperties({
5354
top: parseInt((fileDropBounds.height - dropHereBounds.height) / 2),
5455
left: parseInt((fileDropBounds.width - dropHereBounds.width) / 2)
5556
});
56-
}, this);
57+
};
58+
dropHere.addListener("appear", centerDropHere);
59+
this.addListener("resize", centerDropHere);
5760

5861
const svgLayer = this.__svgLayer = new osparc.component.workbench.SvgWidget();
5962
this._add(svgLayer, {

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,10 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
4242
this._setLayout(new qx.ui.layout.HBox(5));
4343

4444
const downloadBtn = this.getChildControl("download-button");
45-
downloadBtn.addListener("execute", e => {
46-
this.__retrieveURLAndDownload();
47-
}, this);
45+
downloadBtn.addListener("execute", () => this.__retrieveURLAndDownload(), this);
4846

4947
const deleteBtn = this.getChildControl("delete-button");
50-
deleteBtn.addListener("execute", e => {
51-
this.__deleteFile();
52-
}, this);
48+
deleteBtn.addListener("execute", () => this.__deleteFile(), this);
5349

5450
this.getChildControl("selected-label");
5551
},
@@ -71,18 +67,19 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
7167
break;
7268
case "delete-button":
7369
control = new qx.ui.toolbar.Button(this.tr("Delete"), "@FontAwesome5Solid/trash-alt/16");
74-
osparc.utils.Utils.setIdToWidget(control, "filesTreeDeleteBtn");
7570
this._add(control);
7671
break;
7772
case "selected-label":
7873
control = new osparc.ui.toolbar.Label();
79-
this._add(control);
74+
this._add(control, {
75+
flex: 1
76+
});
8077
break;
8178
}
8279
return control || this.base(arguments, id);
8380
},
8481

85-
itemSelected: function(selectedItem) {
82+
setItemSelected: function(selectedItem) {
8683
const isFile = osparc.file.FilesTree.isFile(selectedItem);
8784
this.getChildControl("download-button").setEnabled(isFile);
8885
this.getChildControl("delete-button").setEnabled(isFile);

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,17 +104,15 @@ qx.Class.define("osparc.file.FilePicker", {
104104
},
105105

106106
__setOutputValue: function(node, outputValue) {
107+
node.setOutputData({
108+
"outFile": outputValue
109+
});
107110
const outputs = node.getOutputs();
108-
outputs["outFile"]["value"] = outputValue;
109-
node.setOutputs({});
110-
node.setOutputs(outputs);
111-
node.getStatus().setHasOutputs(true);
112-
node.getStatus().setModified(false);
113111
const outLabel = osparc.file.FilePicker.getOutputLabel(outputs);
114112
if (outLabel) {
115113
node.setLabel(outputValue.label);
116114
}
117-
node.getStatus().setProgress(100);
115+
node.getStatus().setProgress(outputValue ? 100 : 0);
118116
},
119117

120118
setOutputValueFromStore: function(node, store, dataset, path, label) {
@@ -139,6 +137,11 @@ qx.Class.define("osparc.file.FilePicker", {
139137
}
140138
},
141139

140+
resetOutputValue: function(node) {
141+
// eslint-disable-next-line no-underscore-dangle
142+
osparc.file.FilePicker.__setOutputValue(node, null);
143+
},
144+
142145
getOutputFileMetadata: function(node) {
143146
return new Promise((resolve, reject) => {
144147
const outValue = osparc.file.FilePicker.getOutput(node.getOutputs());
@@ -290,6 +293,7 @@ qx.Class.define("osparc.file.FilePicker", {
290293
control = new osparc.file.FileLabelWithActions().set({
291294
alignY: "middle"
292295
});
296+
control.getChildControl("delete-button").exclude();
293297
const mainButtons = this.getChildControl("select-toolbar");
294298
mainButtons.add(control, {
295299
flex: 1
@@ -398,8 +402,7 @@ qx.Class.define("osparc.file.FilePicker", {
398402
filesTree.loadFilePath(this.__getOutputFile()["value"]);
399403
}, this);
400404

401-
const selectedFileLayout = this.__selectedFileLayout = this.getChildControl("selected-file-layout");
402-
selectedFileLayout.getChildControl("delete-button").exclude();
405+
this.__selectedFileLayout = this.getChildControl("selected-file-layout");
403406

404407
const selectBtn = this.getChildControl("select-button");
405408
selectBtn.setEnabled(false);
@@ -442,7 +445,7 @@ qx.Class.define("osparc.file.FilePicker", {
442445
const isFile = osparc.file.FilesTree.isFile(selectedItem);
443446
this.getChildControl("select-button").setEnabled(isFile);
444447

445-
this.__selectedFileLayout.itemSelected(selectedItem);
448+
this.__selectedFileLayout.setItemSelected(selectedItem);
446449
},
447450

448451
__itemSelected: function() {

0 commit comments

Comments
 (0)