Skip to content

Commit b452c71

Browse files
odeimaizodeimaiz
authored
Ease Input file assignment (ITISFoundation#2378)
File/Link like nodeUI when there is a selection in FilePicker Ease Input file assignment
1 parent d056d1f commit b452c71

File tree

21 files changed

+369
-175
lines changed

21 files changed

+369
-175
lines changed

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

Lines changed: 135 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
2222
this.base(arguments, form, node);
2323

2424
this.__ctrlLinkMap = {};
25-
this.__addLinkCtrls();
26-
2725
this.__ctrlParamMap = {};
26+
27+
this.__addLinkCtrls();
2828
this.__addParamCtrls();
2929

3030
this.setDroppable(true);
@@ -33,6 +33,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
3333

3434
events: {
3535
"linkFieldModified": "qx.event.type.Data",
36+
"filePickerRequested": "qx.event.type.Data",
3637
"changeChildVisibility": "qx.event.type.Event"
3738
},
3839

@@ -67,21 +68,120 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
6768
},
6869

6970
__ctrlLinkMap: null,
71+
__ctrlParamMap: null,
72+
73+
__createFieldOpts: function(field) {
74+
if (["FileButton"].includes(field.widgetType)) {
75+
return this.__getSelectFileButton(field.key);
76+
}
77+
if (["Number", "Spinner"].includes(field.widgetType)) {
78+
const paramsMenuBtn = this.__getParamsMenuButton(field.key).set({
79+
visibility: "excluded"
80+
});
81+
osparc.data.model.Sweeper.isSweeperEnabled()
82+
.then(isSweeperEnabled => {
83+
field.bind("visibility", paramsMenuBtn, "visibility", {
84+
converter: visibility => (visibility === "visible" && isSweeperEnabled) ? "visible" : "excluded"
85+
});
86+
});
87+
return paramsMenuBtn;
88+
}
89+
return null;
90+
},
91+
92+
__getSelectFileButton: function(portId) {
93+
const selectFileButton = new qx.ui.form.Button((this.tr("Select File")));
94+
selectFileButton.addListener("execute", () => {
95+
this.fireDataEvent("filePickerRequested", portId);
96+
}, this);
97+
return selectFileButton;
98+
},
99+
100+
__getParamsMenuButton: function(portId) {
101+
const paramsMenu = new qx.ui.menu.Menu().set({
102+
position: "bottom-right"
103+
});
104+
105+
const newParamBtn = new qx.ui.menu.Button(this.tr("Set new parameter"));
106+
newParamBtn.addListener("execute", () => {
107+
this.__createNewParameter(portId);
108+
}, this);
109+
paramsMenu.add(newParamBtn);
110+
111+
const existingParamMenu = new qx.ui.menu.Menu();
112+
this.__populateExistingParamsMenu(portId, existingParamMenu);
113+
const study = osparc.store.Store.getInstance().getCurrentStudy();
114+
study.getSweeper().addListener("changeParameters", () => {
115+
this.__populateExistingParamsMenu(portId, existingParamMenu);
116+
}, this);
117+
118+
const existingParamBtn = new qx.ui.menu.Button(this.tr("Set existing parameter"), null, null, existingParamMenu);
119+
paramsMenu.add(existingParamBtn);
120+
121+
const menuBtn = new qx.ui.form.MenuButton().set({
122+
menu: paramsMenu,
123+
icon: "@FontAwesome5Solid/ellipsis-v/14",
124+
focusable: false,
125+
allowGrowX: false,
126+
alignX: "center"
127+
});
128+
return menuBtn;
129+
},
130+
131+
__createNewParameter: function(fieldKey) {
132+
const title = this.tr("Create new parameter");
133+
const newParamName = new osparc.component.widget.Renamer(null, null, title);
134+
newParamName.addListener("labelChanged", e => {
135+
const study = osparc.store.Store.getInstance().getCurrentStudy();
136+
let newParameterLabel = e.getData()["newLabel"];
137+
newParameterLabel = newParameterLabel.replace(/ /g, "_").replace(/"/g, "'");
138+
if (study.getSweeper().parameterLabelExists(newParameterLabel)) {
139+
const msg = this.tr("Parameter name already exists");
140+
osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
141+
} else {
142+
const param = study.getSweeper().addNewParameter(newParameterLabel);
143+
this.addParameter(fieldKey, param);
144+
newParamName.close();
145+
}
146+
}, this);
147+
newParamName.center();
148+
newParamName.open();
149+
},
150+
151+
__populateExistingParamsMenu: function(fieldKey, existingParamMenu) {
152+
existingParamMenu.removeAll();
153+
const study = osparc.store.Store.getInstance().getCurrentStudy();
154+
study.getSweeper().getParameters().forEach(param => {
155+
const paramButton = new qx.ui.menu.Button(param.label);
156+
paramButton.addListener("execute", () => {
157+
this.addParameter(fieldKey, param);
158+
}, this);
159+
existingParamMenu.add(paramButton);
160+
});
161+
},
70162

71163
// overridden
72164
addItems: function(items, names, title, itemOptions, headerOptions) {
73165
this.base(arguments, items, names, title, itemOptions, headerOptions);
74166

75-
items.forEach(item => {
167+
// header
168+
let row = title === null ? 0 : 1;
169+
170+
for (let i = 0; i < items.length; i++) {
171+
const item = items[i];
172+
173+
const fieldOpts = this.__createFieldOpts(item);
174+
if (fieldOpts) {
175+
this._add(fieldOpts, {
176+
row,
177+
column: this.self().gridPos.fieldOptions
178+
});
179+
}
180+
76181
this.__createDropMechanism(item, item.key);
77182

78183
// Notify focus and focus out
79-
const msgDataFn = (nodeId, portId) => {
80-
if (nodeId === this.getNode().getNodeId()) {
81-
return false;
82-
}
83-
return this.__arePortsCompatible(nodeId, portId, this.getNode().getNodeId(), item.key);
84-
};
184+
const msgDataFn = (nodeId, portId) => this.__arePortsCompatible(nodeId, portId, this.getNode().getNodeId(), item.key);
85185

86186
item.addListener("focus", () => {
87187
if (this.getNode()) {
@@ -93,7 +193,9 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
93193
qx.event.message.Bus.getInstance().dispatchByName("inputFocusout", msgDataFn);
94194
}
95195
}, this);
96-
});
196+
197+
row++;
198+
}
97199
},
98200

99201
// overridden
@@ -205,6 +307,10 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
205307

206308
__arePortsCompatible: function(node1Id, port1Id, node2Id, port2Id) {
207309
return new Promise((resolve, reject) => {
310+
if (node1Id === node2Id) {
311+
resolve(false);
312+
return;
313+
}
208314
const study = osparc.store.Store.getInstance().getCurrentStudy();
209315
const workbench = study.getWorkbench();
210316
const node1 = workbench.getNode(node1Id);
@@ -397,29 +503,23 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
397503

398504
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
399505

506+
hBox.add(this.getControlLink(portId), {
507+
flex: 1
508+
});
509+
400510
const unlinkBtn = new qx.ui.form.Button(this.tr("Unlink"), "@FontAwesome5Solid/unlink/14");
401511
unlinkBtn.addListener("execute", function() {
402512
this.removeLink(portId);
403513
}, this);
404514
hBox.add(unlinkBtn);
405515

406-
hBox.add(this.getControlLink(portId), {
407-
flex: 1
408-
});
409-
410516
hBox.key = portId;
411517

412518
this._addAt(hBox, idx, {
413519
row: layoutProps.row,
414520
column: this.self().gridPos.ctrlField
415521
});
416522

417-
// disable menu button
418-
const menu = this._getCtrlMenuChild(portId);
419-
if (menu) {
420-
menu.child.setEnabled(false);
421-
}
422-
423523
const linkFieldModified = {
424524
portId,
425525
fromNodeId,
@@ -432,10 +532,10 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
432532

433533
__linkRemoved: function(portId) {
434534
if (this.__resetCtrlField(portId)) {
435-
// enable menu button
436-
const menu = this._getCtrlMenuChild(portId);
437-
if (menu) {
438-
menu.child.setEnabled(true);
535+
// enable fieldOpts button
536+
const fieldOpts = this._getFieldOptsChild(portId);
537+
if (fieldOpts) {
538+
fieldOpts.child.setEnabled(true);
439539
}
440540

441541
const linkFieldModified = {
@@ -446,11 +546,19 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
446546
}
447547
},
448548

549+
getLink: function(portId) {
550+
if ("link" in this._form.getControl(portId)) {
551+
return this._form.getControl(portId)["link"];
552+
}
553+
return null;
554+
},
555+
449556
getLinks: function() {
450557
const links = [];
451-
Object.keys(this.__ctrlLinkMap).forEach(portKey => {
452-
if ("link" in this._form.getControl(portKey)) {
453-
links.push(this._form.getControl(portKey)["link"]);
558+
Object.keys(this.__ctrlLinkMap).forEach(portId => {
559+
const link = this.getLink(portId);
560+
if (link) {
561+
links.push(link);
454562
}
455563
});
456564
return links;

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

Lines changed: 4 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
6060
info: 1,
6161
ctrlField: 2,
6262
unit: 3,
63-
menu: 4
63+
fieldOptions: 4
6464
},
6565

6666
getDisableables: function() {
6767
return [
6868
this.gridPos.label,
6969
this.gridPos.ctrlField,
70-
this.gridPos.menu
70+
this.gridPos.fieldOptions
7171
];
7272
}
7373
},
@@ -121,14 +121,6 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
121121
column: this.self().gridPos.unit
122122
});
123123

124-
const menu = this._createMenu(item);
125-
if (menu) {
126-
this._add(menu, {
127-
row: this._row,
128-
column: this.self().gridPos.menu
129-
});
130-
}
131-
132124
this._connectVisibility(item, label);
133125
// store the names for translation
134126
if (qx.core.Environment.get("qx.dynlocale")) {
@@ -167,68 +159,6 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
167159
return filteredData;
168160
},
169161

170-
__getMenuButton: function(portId) {
171-
const menu = new qx.ui.menu.Menu().set({
172-
position: "bottom-right"
173-
});
174-
175-
const newParamBtn = new qx.ui.menu.Button(this.tr("Set new parameter"));
176-
newParamBtn.addListener("execute", () => {
177-
this.__createNewParameter(portId);
178-
}, this);
179-
menu.add(newParamBtn);
180-
181-
const existingParamMenu = new qx.ui.menu.Menu();
182-
this.__populateExistingParamsMenu(portId, existingParamMenu);
183-
const study = osparc.store.Store.getInstance().getCurrentStudy();
184-
study.getSweeper().addListener("changeParameters", () => {
185-
this.__populateExistingParamsMenu(portId, existingParamMenu);
186-
}, this);
187-
188-
const existingParamBtn = new qx.ui.menu.Button(this.tr("Set existing parameter"), null, null, existingParamMenu);
189-
menu.add(existingParamBtn);
190-
191-
const menuBtn = new qx.ui.form.MenuButton().set({
192-
menu: menu,
193-
icon: "@FontAwesome5Solid/ellipsis-v/14",
194-
focusable: false
195-
});
196-
return menuBtn;
197-
},
198-
199-
__createNewParameter: function(fieldKey) {
200-
const title = this.tr("Create new parameter");
201-
const newParamName = new osparc.component.widget.Renamer(null, null, title);
202-
newParamName.addListener("labelChanged", e => {
203-
const study = osparc.store.Store.getInstance().getCurrentStudy();
204-
let newParameterLabel = e.getData()["newLabel"];
205-
newParameterLabel = newParameterLabel.replace(/ /g, "_");
206-
newParameterLabel = newParameterLabel.replace(/"/g, "'");
207-
if (study.getSweeper().parameterLabelExists(newParameterLabel)) {
208-
const msg = this.tr("Parameter name already exists");
209-
osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
210-
} else {
211-
const param = study.getSweeper().addNewParameter(newParameterLabel);
212-
this.addParameter(fieldKey, param);
213-
newParamName.close();
214-
}
215-
}, this);
216-
newParamName.center();
217-
newParamName.open();
218-
},
219-
220-
__populateExistingParamsMenu: function(fieldKey, existingParamMenu) {
221-
existingParamMenu.removeAll();
222-
const study = osparc.store.Store.getInstance().getCurrentStudy();
223-
study.getSweeper().getParameters().forEach(param => {
224-
const paramButton = new qx.ui.menu.Button(param.label);
225-
paramButton.addListener("execute", () => {
226-
this.addParameter(fieldKey, param);
227-
}, this);
228-
existingParamMenu.add(paramButton);
229-
});
230-
},
231-
232162
hasVisibleInputs: function() {
233163
const children = this._getChildren();
234164
for (let i=0; i<children.length; i++) {
@@ -282,22 +212,6 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
282212
return unitLabel;
283213
},
284214

285-
_createMenu: function(field) {
286-
if (["Number", "Spinner"].includes(field.widgetType)) {
287-
const menuBtn = this.__getMenuButton(field.key).set({
288-
visibility: "excluded"
289-
});
290-
osparc.data.model.Sweeper.isSweeperEnabled()
291-
.then(isSweeperEnabled => {
292-
field.bind("visibility", menuBtn, "visibility", {
293-
converter: visibility => (visibility === "visible" && isSweeperEnabled) ? "visible" : "excluded"
294-
});
295-
});
296-
return menuBtn;
297-
}
298-
return null;
299-
},
300-
301215
_getLayoutChild: function(portId, column) {
302216
let row = null;
303217
const children = this._getChildren();
@@ -338,8 +252,8 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
338252
return this._getLayoutChild(portId, this.self().gridPos.ctrlField);
339253
},
340254

341-
_getCtrlMenuChild: function(portId) {
342-
return this._getLayoutChild(portId, this.self().gridPos.menu);
255+
_getFieldOptsChild: function(portId) {
256+
return this._getLayoutChild(portId, this.self().gridPos.fieldOptions);
343257
}
344258
}
345259
});

0 commit comments

Comments
 (0)