Skip to content

Commit

Permalink
Study Editor redesign (#2571)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 21, 2021
1 parent ee99322 commit 71579eb
Show file tree
Hide file tree
Showing 39 changed files with 1,435 additions and 1,185 deletions.
9 changes: 3 additions & 6 deletions services/web/client/source/class/osparc/component/form/ToggleButtonContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,8 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
add: function(child, options) {
if (child instanceof qx.ui.form.ToggleButton) {
this.base(arguments, child, options);
child.addListener("changeValue", e => {
this.fireDataEvent("changeSelection", this.getSelection());
}, this);
child.addListener("changeVisibility", e => {
this.fireDataEvent("changeVisibility", this.getVisibles());
}, this);
child.addListener("changeValue", () => this.fireDataEvent("changeSelection", this.getSelection()), this);
child.addListener("changeVisibility", () => this.fireDataEvent("changeVisibility", this.getVisibles()), this);
if (this.getMode() === "list") {
const width = this.getBounds().width - 15;
child.setWidth(width);
Expand All @@ -57,6 +53,7 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
resetSelection: function() {
this.getChildren().map(button => button.setValue(false));
this.__lastSelectedIdx = null;
this.fireDataEvent("changeSelection", this.getSelection());
},

/**
Expand Down
144 changes: 67 additions & 77 deletions services/web/client/source/class/osparc/component/form/renderer/PropForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,20 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
this.setStudy(study);
}
this.__ctrlLinkMap = {};
this.__ctrlParamMap = {};
this.__linkUnlinkStackMap = {};
this.__fieldOptsBtnMap = {};

this.base(arguments, form, node);

this.__addLinkCtrls();
this.__addParamCtrls();

this.setDroppable(true);
this.__attachDragoverHighlighter();
},

events: {
"linkFieldModified": "qx.event.type.Data",
"fileRequested": "qx.event.type.Data",
"filePickerRequested": "qx.event.type.Data",
"parameterNodeRequested": "qx.event.type.Data",
"changeChildVisibility": "qx.event.type.Event"
Expand Down Expand Up @@ -91,16 +91,33 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
},

__ctrlLinkMap: null,
__ctrlParamMap: null,
__linkUnlinkStackMap: null,
__fieldOptsBtnMap: null,

__createFieldOpts: function(field) {
__createLinkUnlinkStack: function(field) {
const linkUnlinkStack = new qx.ui.container.Stack();

const linkOptions = this.__createLinkOpts(field);
linkUnlinkStack.add(linkOptions);

const unlinkBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/unlink/12").set({
toolTipText: this.tr("Unlink")
});
unlinkBtn.addListener("execute", () => this.removePortLink(field.key), this);
linkUnlinkStack.add(unlinkBtn);

this.__linkUnlinkStackMap[field.key] = linkUnlinkStack;

return linkUnlinkStack;
},

__createLinkOpts: function(field) {
const optionsMenu = new qx.ui.menu.Menu().set({
position: "bottom-right"
position: "bottom-left"
});
const fieldOptsBtn = new qx.ui.form.MenuButton().set({
menu: optionsMenu,
icon: "@FontAwesome5Solid/ellipsis-v/14",
icon: "@FontAwesome5Solid/link/12",
focusable: false,
allowGrowX: false,
alignX: "center"
Expand All @@ -125,8 +142,12 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
optionsMenu.addSeparator();
}

const studyUI = this.getStudy().getUi();
if (["FileButton"].includes(field.widgetType)) {
const menuButton = this.__getSelectFileButton(field.key);
studyUI.bind("mode", menuButton, "visibility", {
converter: mode => mode === "workbench" ? "visible" : "excluded"
});
optionsMenu.add(menuButton);
}
if (this.self().isFieldParametrizable(field)) {
Expand All @@ -142,8 +163,8 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
newParamBtn,
paramsMenuBtn
].forEach(btn => {
field.bind("visibility", btn, "visibility", {
converter: visibility => (visibility === "visible" && areParamsEnabled) ? "visible" : "excluded"
studyUI.bind("mode", btn, "visibility", {
converter: mode => mode === "workbench" && areParamsEnabled ? "visible" : "excluded"
});
});
});
Expand Down Expand Up @@ -199,7 +220,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {

__getSelectFileButton: function(portId) {
const selectFileButton = new qx.ui.menu.Button(this.tr("Select File"));
selectFileButton.addListener("execute", () => this.fireDataEvent("filePickerRequested", portId), this);
selectFileButton.addListener("execute", () => this.fireDataEvent("fileRequested", portId), this);
return selectFileButton;
},

Expand Down Expand Up @@ -278,11 +299,11 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
for (let i = 0; i < items.length; i++) {
const item = items[i];

const fieldOpts = this.__createFieldOpts(item);
const fieldOpts = this.__createLinkUnlinkStack(item);
if (fieldOpts) {
this._add(fieldOpts, {
row,
column: this.self().gridPos.fieldOptions
column: this.self().gridPos.fieldLinkUnlink
});
}

Expand Down Expand Up @@ -464,12 +485,24 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
}

const compatible = destinations[node2Id][portId];
if (compatible === true) {
if (compatible) {
// stop propagation, so that the form doesn't attend it (and preventDefault it)
e.stopPropagation();
this.__highlightCompatibles(portId);
}
}

if (e.supportsType("osparc-file-link")) {
const data = e.getData("osparc-file-link");
if ("dragData" in data && "type" in uiElement) {
const compatible = uiElement.type.includes("data:");
if (compatible) {
// stop propagation, so that the form doesn't attend it (and preventDefault it)
e.stopPropagation();
this.__highlightCompatibles(portId);
}
}
}
}, this);

uiElement.addListener("drop", e => {
Expand All @@ -480,6 +513,15 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
const port1Key = data["port1Key"];
this.getNode().addPortLink(port2Key, node1Id, port1Key);
}
if (e.supportsType("osparc-file-link")) {
const data = e.getData("osparc-file-link");
this.fireDataEvent("filePickerRequested", {
portId,
file: {
data: data["dragData"]
}
});
}
}, this);
}
},
Expand Down Expand Up @@ -600,37 +642,25 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
});
},

__linkAdded: function(portId, fromNodeId, fromPortId) {
__portLinkAdded: function(portId, fromNodeId, fromPortId) {
let data = this._getCtrlFieldChild(portId);
if (data) {
let child = data.child;
const idx = data.idx;
const layoutProps = child.getLayoutProperties();
this._remove(child);

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

hBox.add(this.getControlLink(portId), {
flex: 1
});

const unlinkBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/unlink/14").set({
toolTipText: this.tr("Unlink")
});
unlinkBtn.addListener("execute", function() {
this.removePortLink(portId);
}, this);
hBox.add(unlinkBtn);

hBox.key = portId;

this._addAt(hBox, idx, {
const ctrlLink = this.getControlLink(portId);
ctrlLink.setEnabled(false);
ctrlLink.key = portId;
this._addAt(ctrlLink, idx, {
row: layoutProps.row,
column: this.self().gridPos.ctrlField
});

if (portId in this.__fieldOptsBtnMap) {
this.__fieldOptsBtnMap[portId].setEnabled(false);
if (portId in this.__linkUnlinkStackMap) {
const stack = this.__linkUnlinkStackMap[portId];
stack.setSelection([stack.getSelectables()[1]]);
}

const linkFieldModified = {
Expand All @@ -645,14 +675,9 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {

__portLinkRemoved: function(portId) {
if (this.__resetCtrlField(portId)) {
// enable fieldOpts button
const fieldOpts = this._getFieldOptsChild(portId);
if (fieldOpts) {
fieldOpts.child.setEnabled(true);
}

if (portId in this.__fieldOptsBtnMap) {
this.__fieldOptsBtnMap[portId].setEnabled(true);
if (portId in this.__linkUnlinkStackMap) {
const stack = this.__linkUnlinkStackMap[portId];
stack.setSelection([stack.getSelectables()[0]]);
}

const linkFieldModified = {
Expand Down Expand Up @@ -703,7 +728,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
converter: label => label + ": " + fromPortLabel
});

this.__linkAdded(toPortId, fromNodeId, fromPortId);
this.__portLinkAdded(toPortId, fromNodeId, fromPortId);

return true;
},
Expand All @@ -723,42 +748,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
}

this.__portLinkRemoved(toPortId);
},
/* /LINKS */

/* PARAMETERS */
getControlParam: function(key) {
return this.__ctrlParamMap[key];
},

__addParamCtrl: function(portId) {
const controlParam = this.__createFieldCtrl(portId);
this.__ctrlParamMap[portId] = controlParam;
},

__addParamCtrls: function() {
this.__getPortKeys().forEach(portId => {
this.__addParamCtrl(portId);
});
},

__parameterRemoved: function(portId) {
this.__resetCtrlField(portId);
},

removeParameter: function(portId) {
this.getControlParam(portId).setEnabled(false);
let ctrlField = this._form.getControl(portId);
if (ctrlField && "parameter" in ctrlField) {
delete ctrlField.parameter;
}

this.__parameterRemoved(portId);
},
/* /PARAMETERS */

__getRetrieveFieldChild: function(portId) {
return this._getLayoutChild(portId, this.self().gridPos.retrieveStatus);
}
/* /LINKS */
}
});
9 changes: 2 additions & 7 deletions services/web/client/source/class/osparc/component/form/renderer/PropFormBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,13 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
info: 1,
ctrlField: 2,
unit: 3,
fieldOptions: 4
fieldLinkUnlink: 4
},

getDisableables: function() {
return [
this.gridPos.label,
this.gridPos.ctrlField,
this.gridPos.fieldOptions
this.gridPos.ctrlField
];
}
},
Expand Down Expand Up @@ -243,10 +242,6 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {

_getCtrlFieldChild: function(portId) {
return this._getLayoutChild(portId, this.self().gridPos.ctrlField);
},

_getFieldOptsChild: function(portId) {
return this._getLayoutChild(portId, this.self().gridPos.fieldOptions);
}
}
});
18 changes: 11 additions & 7 deletions services/web/client/source/class/osparc/component/node/BaseNodeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,15 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
layout: new qx.ui.layout.VBox()
});
return settingsGroupBox;
},

openNodeDataManager: function(node) {
const nodeDataManager = new osparc.component.widget.NodeDataManager(node);
const win = osparc.ui.window.Window.popUpInWindow(nodeDataManager, node.getLabel(), 900, 600).set({
appearance: "service-window"
});
const closeBtn = win.getChildControl("close-button");
osparc.utils.Utils.setIdToWidget(closeBtn, "nodeDataManagerCloseBtn");
}
},

Expand Down Expand Up @@ -249,7 +258,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {

const buttonsLayout = this.__buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
const filesBtn = this.__outFilesButton = new qx.ui.form.Button(this.tr("Output Files"), "@FontAwesome5Solid/folder-open/14");
osparc.utils.Utils.setIdToWidget(filesBtn, "nodeViewFilesBtn");
osparc.utils.Utils.setIdToWidget(filesBtn, "nodeOutputFilesBtn");
filesBtn.addListener("execute", () => this.__openNodeDataManager(), this);
buttonsLayout.add(filesBtn);

Expand Down Expand Up @@ -375,12 +384,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
},

__openNodeDataManager: function() {
const nodeDataManager = new osparc.component.widget.NodeDataManager(this.getNode());
const win = osparc.ui.window.Window.popUpInWindow(nodeDataManager, this.getNode().getLabel(), 900, 600).set({
appearance: "service-window"
});
const closeBtn = win.getChildControl("close-button");
osparc.utils.Utils.setIdToWidget(closeBtn, "nodeDataManagerCloseBtn");
this.self().openNodeDataManager(this.getNode());
},

__openServiceDetails: function() {
Expand Down
Loading

0 comments on commit 71579eb

Please sign in to comment.