Skip to content

Commit 79c9788

Browse files
odeimaizodeimaiz
authored
UX: Select File from form and more (ITISFoundation#2617)
1 parent 677a718 commit 79c9788

File tree

14 files changed

+364
-200
lines changed

14 files changed

+364
-200
lines changed

‎services/web/client/source/class/osparc/component/form/renderer/PropForm.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
3939
"linkFieldModified": "qx.event.type.Data",
4040
"fileRequested": "qx.event.type.Data",
4141
"filePickerRequested": "qx.event.type.Data",
42-
"parameterNodeRequested": "qx.event.type.Data",
42+
"parameterRequested": "qx.event.type.Data",
4343
"changeChildVisibility": "qx.event.type.Event"
4444
},
4545

@@ -234,13 +234,17 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
234234

235235
__getSelectFileButton: function(portId) {
236236
const selectFileButton = new qx.ui.menu.Button(this.tr("Select File"));
237-
selectFileButton.addListener("execute", () => this.fireDataEvent("fileRequested", portId), this);
237+
// selectFileButton.addListener("execute", () => this.fireDataEvent("fileRequested", portId), this);
238+
selectFileButton.addListener("execute", () => this.fireDataEvent("filePickerRequested", {
239+
portId,
240+
file: null
241+
}), this);
238242
return selectFileButton;
239243
},
240244

241245
__getNewParamButton: function(portId) {
242246
const newParamBtn = new qx.ui.menu.Button(this.tr("Set new parameter"));
243-
newParamBtn.addListener("execute", () => this.fireDataEvent("parameterNodeRequested", portId), this);
247+
newParamBtn.addListener("execute", () => this.fireDataEvent("parameterRequested", portId), this);
244248
return newParamBtn;
245249
},
246250

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
6666
events: {
6767
"fullscreenNode": "qx.event.type.Data",
6868
"renameNode": "qx.event.type.Data",
69-
"showInfo": "qx.event.type.Data",
69+
"infoNode": "qx.event.type.Data",
7070
"deleteNode": "qx.event.type.Data"
7171
},
7272

@@ -113,7 +113,6 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
113113
}
114114
case "options-rename-button": {
115115
control = new qx.ui.menu.Button().set({
116-
backgroundColor: "transparent",
117116
label: this.tr("Rename"),
118117
icon: "@FontAwesome5Solid/i-cursor/10"
119118
});
@@ -124,18 +123,16 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
124123
}
125124
case "options-info-button": {
126125
control = new qx.ui.menu.Button().set({
127-
backgroundColor: "transparent",
128126
label: this.tr("Information"),
129127
icon: "@FontAwesome5Solid/info/10"
130128
});
131-
control.addListener("execute", () => this.fireDataEvent("showInfo", this.getNodeId()));
129+
control.addListener("execute", () => this.fireDataEvent("infoNode", this.getNodeId()));
132130
const optionsMenu = this.getChildControl("options-menu-button");
133131
optionsMenu.getMenu().add(control);
134132
break;
135133
}
136134
case "options-delete-button": {
137135
control = new qx.ui.menu.Button().set({
138-
backgroundColor: "transparent",
139136
label: this.tr("Delete"),
140137
icon: "@FontAwesome5Solid/trash/10"
141138
});

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

Lines changed: 89 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ qx.Class.define("osparc.component.widget.NodesTree", {
8383
children: node.isContainer() ? this.convertModel(node.getInnerNodes()) : [],
8484
isContainer: node.isContainer(),
8585
nodeId: node.getNodeId(),
86-
sortingValue: this.self().getSortingValue(node)
86+
sortingValue: this.self().getSortingValue(node),
87+
statusColor: null
8788
};
8889
children.push(nodeInTree);
8990
}
90-
// children.sort((firstEl, secondEl) => firstEl.sortingValue - secondEl.sortingValue);
9191
return children;
9292
}
9393
},
@@ -117,26 +117,19 @@ qx.Class.define("osparc.component.widget.NodesTree", {
117117
},
118118

119119
populateTree: function() {
120-
const study = this.getStudy();
121-
const topLevelNodes = study.getWorkbench().getNodes();
122-
const data = {
123-
label: study.getName(),
124-
children: this.self().convertModel(topLevelNodes),
125-
isContainer: true,
126-
nodeId: study.getUuid(),
127-
sortingValue: 0
128-
};
120+
const data = this.__getModelData();
129121
let newModel = qx.data.marshal.Json.createModel(data, true);
130122
let oldModel = this.getModel();
131123
if (JSON.stringify(newModel) !== JSON.stringify(oldModel)) {
124+
const study = this.getStudy();
132125
study.bind("name", newModel, "label");
133126
this.setModel(newModel);
134127
this.setDelegate({
135128
createItem: () => {
136129
const nodeTreeItem = new osparc.component.widget.NodeTreeItem();
137130
nodeTreeItem.addListener("fullscreenNode", e => this.__openFullscreen(e.getData()));
138131
nodeTreeItem.addListener("renameNode", e => this.__openItemRenamer(e.getData()));
139-
nodeTreeItem.addListener("showInfo", e => this.__openNodeInfo(e.getData()));
132+
nodeTreeItem.addListener("infoNode", e => this.__openNodeInfo(e.getData()));
140133
nodeTreeItem.addListener("deleteNode", e => this.__deleteNode(e.getData()));
141134
return nodeTreeItem;
142135
},
@@ -165,16 +158,17 @@ qx.Class.define("osparc.component.widget.NodesTree", {
165158
}
166159
}
167160

168-
// bind running/interactive status to icon color
161+
// "bind" running/interactive status to icon color
169162
if (node.isDynamic()) {
170-
node.getStatus().bind("interactive", item.getChildControl("icon"), "textColor", {
171-
converter: status => osparc.utils.StatusUI.getColor(status)
172-
}, this);
163+
node.getStatus().addListener("changeInteractive", e => this.__updateColor(node.getNodeId(), e.getData()));
164+
this.__updateColor(node.getNodeId(), node.getStatus().getInteractive());
173165
} else if (node.isComputational()) {
174-
node.getStatus().bind("running", item.getChildControl("icon"), "textColor", {
175-
converter: status => osparc.utils.StatusUI.getColor(status)
176-
}, this);
166+
node.getStatus().addListener("changeRunning", e => this.__updateColor(node.getNodeId(), e.getData()));
167+
this.__updateColor(node.getNodeId(), node.getStatus().getRunning());
177168
}
169+
c.bindProperty("statusColor", "textColor", {
170+
converter: statusColor => osparc.utils.StatusUI.getColor(statusColor)
171+
}, item.getChildControl("icon"), id);
178172

179173
// add fullscreen
180174
if (node.isDynamic()) {
@@ -187,6 +181,8 @@ qx.Class.define("osparc.component.widget.NodesTree", {
187181
this.__openItem(item.getModel().getNodeId());
188182
this.nodeSelected(item.getModel().getNodeId());
189183
}, this);
184+
// This is needed to keep the label flexible
185+
item.addListener("resize", e => item.setMaxWidth(100), this);
190186
},
191187
sorter: (itemA, itemB) => itemA.getSortingValue() - itemB.getSortingValue()
192188
});
@@ -195,14 +191,41 @@ qx.Class.define("osparc.component.widget.NodesTree", {
195191
}
196192
},
197193

198-
__getNodeInTree: function(model, nodeId) {
194+
__getModelData: function() {
195+
const study = this.getStudy();
196+
const topLevelNodes = study.getWorkbench().getNodes();
197+
const data = this.__getRootModelData();
198+
data.children = this.self().convertModel(topLevelNodes);
199+
return data;
200+
},
201+
202+
__getRootModelData: function() {
203+
const study = this.getStudy();
204+
const data = {
205+
label: study.getName(),
206+
children: [],
207+
isContainer: true,
208+
nodeId: study.getUuid(),
209+
sortingValue: 0
210+
};
211+
return data;
212+
},
213+
214+
__updateColor: function(nodeId, status) {
215+
const nodeInTree = this.__getNodeModel(this.getModel(), nodeId);
216+
if (nodeInTree) {
217+
nodeInTree.setStatusColor(status);
218+
}
219+
},
220+
221+
__getNodeModel: function(model, nodeId) {
199222
if (model.getNodeId() === nodeId) {
200223
return model;
201224
} else if (model.getIsContainer() && model.getChildren() !== null) {
202225
let node = null;
203226
let children = model.getChildren().toArray();
204227
for (let i = 0; node === null && i < children.length; i++) {
205-
node = this.__getNodeInTree(children[i], nodeId);
228+
node = this.__getNodeModel(children[i], nodeId);
206229
}
207230
return node;
208231
}
@@ -231,26 +254,22 @@ qx.Class.define("osparc.component.widget.NodesTree", {
231254
},
232255

233256
__openItemRenamer: function(nodeId) {
234-
const renameItem = nodeId === undefined ? this.__getSelection() : this.__getNodeInTree(this.getModel(), nodeId);
235-
if (renameItem) {
236-
const treeItemRenamer = new osparc.component.widget.Renamer(renameItem.getLabel());
257+
if (nodeId === undefined && this.__getSelection()) {
258+
nodeId = this.__getSelection().getNodeId();
259+
}
260+
if (nodeId) {
261+
const study = this.getStudy();
262+
const node = study.getWorkbench().getNode(nodeId);
263+
const oldLabel = nodeId === study.getUuid() ? study.getName() : node.getLabel();
264+
const treeItemRenamer = new osparc.component.widget.Renamer(oldLabel);
237265
treeItemRenamer.addListener("labelChanged", e => {
238266
const {
239267
newLabel
240268
} = e.getData();
241-
const selectedNodeId = renameItem.getNodeId();
242-
const study = this.getStudy();
243-
if (selectedNodeId === study.getUuid() && osparc.data.Permissions.getInstance().canDo("study.update", true)) {
244-
const params = {
245-
name: newLabel
246-
};
247-
study.updateStudy(params);
248-
} else if (osparc.data.Permissions.getInstance().canDo("study.node.rename", true)) {
249-
renameItem.setLabel(newLabel);
250-
const node = study.getWorkbench().getNode(selectedNodeId);
251-
if (node) {
252-
node.renameNode(newLabel);
253-
}
269+
if (nodeId === study.getUuid() && osparc.data.Permissions.getInstance().canDo("study.update", true)) {
270+
study.setName(newLabel);
271+
} else if (node && osparc.data.Permissions.getInstance().canDo("study.node.rename", true)) {
272+
node.setLabel(newLabel);
254273
}
255274
treeItemRenamer.close();
256275
}, this);
@@ -261,31 +280,39 @@ qx.Class.define("osparc.component.widget.NodesTree", {
261280
},
262281

263282
__openNodeInfo: function(nodeId) {
283+
if (nodeId === undefined && this.__getSelection()) {
284+
nodeId = this.__getSelection().getNodeId();
285+
}
264286
if (nodeId) {
265-
const node = this.getStudy().getWorkbench().getNode(nodeId);
266-
const serviceDetails = new osparc.servicecard.Large(node.getMetaData());
267-
const title = this.tr("Service information");
268-
const width = 600;
269-
const height = 700;
270-
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
287+
const study = this.getStudy();
288+
if (nodeId === study.getUuid()) {
289+
const studyDetails = new osparc.studycard.Large(study);
290+
const title = this.tr("Study Details");
291+
const width = 500;
292+
const height = 500;
293+
osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
294+
} else {
295+
const node = study.getWorkbench().getNode(nodeId);
296+
const serviceDetails = new osparc.servicecard.Large(node.getMetaData());
297+
const title = this.tr("Service information");
298+
const width = 600;
299+
const height = 700;
300+
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
301+
}
271302
}
272303
},
273304

274305
__deleteNode: function(nodeId) {
275-
if (nodeId === undefined) {
276-
const selectedItem = this.__getSelection();
277-
if (selectedItem === null) {
278-
return;
279-
}
280-
this.fireDataEvent("removeNode", selectedItem.getNodeId());
281-
} else {
306+
if (nodeId === undefined && this.__getSelection()) {
307+
nodeId = this.__getSelection().getNodeId();
308+
}
309+
if (nodeId) {
282310
this.fireDataEvent("removeNode", nodeId);
283311
}
284312
},
285313

286314
nodeSelected: function(nodeId) {
287-
const dataModel = this.getModel();
288-
const item = this.__getNodeInTree(dataModel, nodeId);
315+
const item = this.__getNodeModel(this.getModel(), nodeId);
289316
if (item) {
290317
this.openNodeAndParents(item);
291318
this.setSelection(new qx.data.Array([item]));
@@ -294,14 +321,16 @@ qx.Class.define("osparc.component.widget.NodesTree", {
294321

295322
__attachEventHandlers: function() {
296323
this.addListener("keypress", keyEvent => {
297-
if (keyEvent.getKeyIdentifier() === "Delete") {
298-
this.__deleteNode();
299-
}
300-
}, this);
301-
302-
this.addListener("keypress", keyEvent => {
303-
if (keyEvent.getKeyIdentifier() === "F2") {
304-
this.__openItemRenamer();
324+
switch (keyEvent.getKeyIdentifier()) {
325+
case "F2":
326+
this.__openItemRenamer();
327+
break;
328+
case "I":
329+
this.__openNodeInfo();
330+
break;
331+
case "Delete":
332+
this.__deleteNode();
333+
break;
305334
}
306335
}, this);
307336
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ qx.Class.define("osparc.component.widget.StudyTitleOnlyTree", {
2727
createItem: () => {
2828
const nodeTreeItem = new osparc.component.widget.NodeTreeItem();
2929
nodeTreeItem.addListener("renameNode", e => this.__openItemRenamer(e.getData()));
30-
nodeTreeItem.addListener("showInfo", e => this.__openStudyInfo());
30+
nodeTreeItem.addListener("infoNode", e => this.__openStudyInfo());
3131
return nodeTreeItem;
3232
}
3333
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
196196

197197
const pinNode = this.getChildControl("pin-node");
198198
pinNode.addListener("changeValue", e => {
199-
this.currectNodeClicked(e.getData());
199+
this.__currentNodeClicked(e.getData());
200200
}, this);
201201

202202
const textFilterField = this.__textFilterField = this.getChildControl("filter-text");
@@ -251,7 +251,7 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
251251
this.getChildControl("pin-node").setValue(false);
252252
},
253253

254-
currectNodeClicked: function(checked) {
254+
__currentNodeClicked: function(checked) {
255255
const currentNodeId = this.getCurrentNodeId();
256256
if (checked) {
257257
this.__nodeSelected(currentNodeId);

0 commit comments

Comments
 (0)