✨Frontend: Dynamic input ports (#4210)

services/static-webserver/client/source/class/osparc/Error.js

@@ -213,7 +213,8 @@ qx.Class.define("osparc.Error", {
         case "log-in-button": {
           control = new qx.ui.form.Button().set({
             icon: "@FontAwesome5Solid/sign-in-alt/14",
-            label: this.tr("Log in")
+            label: this.tr("Log in"),
+            appearance: "strong-button"
           });
           control.addListener("execute", () => this.__logIn(), this);
           const actionsLayout = this.getChildControl("actions-layout");

services/static-webserver/client/source/class/osparc/component/form/renderer/PropForm.js

@@ -93,6 +93,108 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
     __ctrlLinkMap: null,
     __linkUnlinkStackMap: null,
     __fieldOptsBtnMap: null,
+    __addInputPortButton: null,
+
+    /*
+     * <-- Dynamic inputs -->
+     */
+    __getEmptyDataLastPorts: function() {
+      let emptyDataPorts = [];
+      const minVisibleInputs = this.getNode().getMinVisibleInputs();
+      if (minVisibleInputs === null) {
+        return emptyDataPorts;
+      }
+      const portKeys = this.__getPortKeys();
+      // it will always show 1 more, so: -1
+      for (let i=minVisibleInputs-1; i<portKeys.length; i++) {
+        const portId = portKeys[i];
+        const ctrl = this._form.getControl(portId);
+        if (ctrl && ctrl.type.includes("data:") && !("link" in ctrl)) {
+          emptyDataPorts.push(portId);
+        } else {
+          emptyDataPorts = [];
+        }
+      }
+      return emptyDataPorts;
+    },
+
+    __getVisibleEmptyDataLastPort: function() {
+      let emptyDataPorts = null;
+      this.__getPortKeys().forEach(portId => {
+        const ctrl = this._form.getControl(portId);
+        const label = this._getLabelFieldChild(portId).child;
+        if (
+          ctrl && ctrl.type.includes("data:") && !("link" in ctrl) &&
+          label && label.isVisible()
+        ) {
+          emptyDataPorts = portId;
+        }
+      });
+      return emptyDataPorts;
+    },
+
+    __addInputPortButtonClicked: function() {
+      const emptyDataPorts = this.__getEmptyDataLastPorts();
+      const lastEmptyDataPort = this.__getVisibleEmptyDataLastPort();
+      if (emptyDataPorts.length>1 && lastEmptyDataPort) {
+        const idx = emptyDataPorts.indexOf(lastEmptyDataPort);
+        if (idx+1 < emptyDataPorts.length) {
+          this.__showPort(emptyDataPorts[idx+1]);
+        }
+        this.__addInputPortButton.setVisibility(this.__checkAddInputPortButtonVisibility());
+      }
+    },
+
+    __checkAddInputPortButtonVisibility: function() {
+      const emptyDataPorts = this.__getEmptyDataLastPorts();
+      const lastEmptyDataPort = this.__getVisibleEmptyDataLastPort();
+      const idx = emptyDataPorts.indexOf(lastEmptyDataPort);
+      if (idx < emptyDataPorts.length-1) {
+        return "visible";
+      }
+      return "excluded";
+    },
+
+    __showPort: function(portId) {
+      const entry = this.self().GRID_POS;
+      Object.values(entry).forEach(entryPos => {
+        const layoutElement = this._getLayoutChild(portId, entryPos);
+        if (layoutElement && layoutElement.child) {
+          const control = layoutElement.child;
+          if (control) {
+            control.show();
+          }
+        }
+      });
+    },
+
+    __excludePort: function(portId) {
+      const entry = this.self().GRID_POS;
+      Object.values(entry).forEach(entryPos => {
+        const layoutElement = this._getLayoutChild(portId, entryPos);
+        if (layoutElement && layoutElement.child) {
+          const control = layoutElement.child;
+          if (control) {
+            control.exclude();
+          }
+        }
+      });
+    },
+
+    makeInputsDynamic: function() {
+      this.__getPortKeys().forEach(portId => this.__showPort(portId));
+
+      const emptyDataPorts = this.__getEmptyDataLastPorts();
+      for (let i=1; i<emptyDataPorts.length; i++) {
+        const hidePortId = emptyDataPorts[i];
+        this.__excludePort(hidePortId);
+      }
+
+      this.__addInputPortButton.setVisibility(this.__checkAddInputPortButtonVisibility());
+    },
+    /*
+     * <-- /Dynamic inputs -->
+     */
 
     __createLinkUnlinkStack: function(field) {
       const linkUnlinkStack = new qx.ui.container.Stack();
@@ -343,6 +445,19 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
 
         row++;
       }
+
+      // add port button
+      const addPortButton = this.__addInputPortButton = new qx.ui.form.Button().set({
+        icon: "@FontAwesome5Solid/plus/14",
+        toolTipText: this.tr("Add input"),
+        alignX: "center",
+        allowGrowX: false
+      });
+      addPortButton.addListener("execute", () => this.__addInputPortButtonClicked());
+      this._add(addPortButton, {
+        row,
+        column: this.self().GRID_POS.LABEL
+      });
     },
 
     // overridden
@@ -418,7 +533,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
         for (let i=0; i<children.length; i++) {
           let child = children[i];
           const layoutProps = child.getLayoutProperties();
-          if (layoutProps.column === this.self().GRID_POS.retrieveStatus) {
+          if (layoutProps.column === this.self().GRID_POS.RETRIEVE_STATUS) {
             this.__setRetrievingStatus(status, portId, i, layoutProps.row);
           }
         }
@@ -454,10 +569,14 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
         }
       }
 
-      this._addAt(icon, idx, {
-        row: row,
-        column: this.self().GRID_POS.RETRIEVE_STATUS
-      });
+      const label = this._getLabelFieldChild(portId).child;
+      if (label && label.isVisible()) {
+        this._getLabelFieldChild(portId);
+        this._addAt(icon, idx, {
+          row,
+          column: this.self().GRID_POS.RETRIEVE_STATUS
+        });
+      }
     },
 
     __arePortsCompatible: function(node1Id, port1Id, node2Id, port2Id) {
@@ -636,7 +755,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
         if (layoutProps.column === this.self().GRID_POS.CTRL_FIELD) {
           this._remove(child);
           const item = this._form.getControl(portId);
-
+          item.show();
           this._addAt(item, idx, {
             row: layoutProps.row,
             column: this.self().GRID_POS.CTRL_FIELD
@@ -765,6 +884,8 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
 
       this.__portLinkAdded(toPortId, fromNodeId, fromPortId);
 
+      this.makeInputsDynamic();
+
       return true;
     },
 

services/static-webserver/client/source/class/osparc/component/share/CollaboratorsStudy.js

@@ -241,8 +241,7 @@ qx.Class.define("osparc.component.share.CollaboratorsStudy", {
 
       const groupData = await osparc.store.Store.getInstance().getGroup(groupId);
       const isOrganization = (groupData && !("id" in groupData));
-      const preferencesSettings = osparc.desktop.preferences.Preferences.getInstance();
-      if (isOrganization && preferencesSettings.getConfirmDemoteOrgnaization()) {
+      if (isOrganization) {
         const msg = this.tr("Demoting to Viewer will remove write access to all the members of the Organization. Are you sure?");
         const win = new osparc.ui.window.Confirmation(msg).set({
           confirmAction: "delete",

services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js

@@ -144,15 +144,13 @@ qx.Class.define("osparc.dashboard.Dashboard", {
         const tabButton = tabPage.getChildControl("button");
         tabButton.set({
           alignX: "center",
-          toolTipText: label,
           minWidth: 50
         });
+        tabButton.ttt = label;
         tabButton.getChildControl("label").set({
-          font: "text-16",
-          alignX: "center"
+          font: "text-16"
         });
         tabButton.getChildControl("icon").set({
-          alignX: "center",
           visibility: "excluded"
         });
         osparc.utils.Utils.setIdToWidget(tabButton, id);

services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js

@@ -90,6 +90,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
             icon: "@FontAwesome5Solid/ellipsis-v/14",
             focusable: false
           });
+          // make it circular
+          control.getContentElement().setStyles({
+            "border-radius": parseInt(this.self().MENU_BTN_WIDTH/2) + "px"
+          });
           osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
           this._add(control, {
             top: -2,

services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js

@@ -169,6 +169,10 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             icon: "@FontAwesome5Solid/ellipsis-v/14",
             focusable: false
           });
+          // make it circular
+          control.getContentElement().setStyles({
+            "border-radius": parseInt(this.self().MENU_BTN_WIDTH/2) + "px"
+          });
           osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
           menuSelectionStack.addAt(control, 0);
           break;

services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js

@@ -153,11 +153,11 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
       [
         this.__getInfoPage,
         this.__getPermissionsPage,
-        this.__getClassifiersPage,
-        this.__getQualityPage,
         this.__getTagsPage,
         this.__getServicesUpdatePage,
         this.__getServicesBootOptionsPage,
+        this.__getQualityPage,
+        this.__getClassifiersPage,
         this.__getSaveAsTemplatePage
       ].forEach(pageCallee => {
         if (pageCallee) {

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -307,6 +307,10 @@ qx.Class.define("osparc.data.model.Node", {
       return bootModeSB;
     },
 
+    getMinVisibleInputs: function(metaData) {
+      return ("min-visible-inputs" in metaData) ? metaData["min-visible-inputs"] : null;
+    },
+
     getOutput: function(outputs, outputKey) {
       if (outputKey in outputs && "value" in outputs[outputKey]) {
         return outputs[outputKey]["value"];
@@ -381,6 +385,10 @@ qx.Class.define("osparc.data.model.Node", {
       return osparc.data.model.Node.hasBootModes(this.getMetaData());
     },
 
+    getMinVisibleInputs: function() {
+      return osparc.data.model.Node.getMinVisibleInputs(this.getMetaData());
+    },
+
     __applyNewMetaData: function() {
       this.__metaData = osparc.utils.Services.getMetaData(this.getKey(), this.getVersion());
     },
@@ -454,6 +462,9 @@ qx.Class.define("osparc.data.model.Node", {
             this.__addSettings(metaData.inputs);
             this.__addSettingsAccessLevelEditor(metaData.inputs);
           }
+          if (this.getPropsForm()) {
+            this.getPropsForm().makeInputsDynamic();
+          }
         }
         if (metaData.outputs) {
           this.setOutputs(metaData.outputs);
@@ -499,6 +510,9 @@ qx.Class.define("osparc.data.model.Node", {
       this.__setInputData(nodeData.inputs);
       this.__setInputUnits(nodeData.inputsUnits);
       this.__setInputDataAccess(nodeData.inputAccess);
+      if (this.getPropsForm()) {
+        this.getPropsForm().makeInputsDynamic();
+      }
       this.setOutputData(nodeData.outputs);
       this.addInputNodes(nodeData.inputNodes);
       this.addOutputNodes(nodeData.outputNodes);

services/static-webserver/client/source/class/osparc/desktop/preferences/Preferences.js

@@ -49,13 +49,6 @@ qx.Class.define("osparc.desktop.preferences.Preferences", {
       event: "changeConfirmDeleteStudy"
     },
 
-    confirmDemoteOrgnaization: {
-      nullable: false,
-      init: true,
-      check: "Boolean",
-      event: "changeConfirmDemoteOrgnaization"
-    },
-
     confirmDeleteNode: {
       nullable: false,
       init: true,

services/static-webserver/client/source/class/osparc/desktop/preferences/PreferencesWindow.js

@@ -61,13 +61,6 @@ qx.Class.define("osparc.desktop.preferences.PreferencesWindow", {
       tabView.add(tokensPage);
     }
 
-    if (osparc.product.Utils.showPreferencesExperimental()) {
-      const expPage = new osparc.desktop.preferences.pages.ExperimentalPage();
-      const expBtn = expPage.getChildControl("button");
-      osparc.utils.Utils.setIdToWidget(expBtn, "preferencesExperimentalTabBtn");
-      tabView.add(expPage);
-    }
-
     const confirmPage = new osparc.desktop.preferences.pages.ConfirmationsPage();
     tabView.add(confirmPage);
 

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/BasePage.js

@@ -21,7 +21,7 @@ qx.Class.define("osparc.desktop.preferences.pages.BasePage", {
   construct: function(title, iconSrc = null) {
     this.base(arguments, null, iconSrc);
 
-    this.setLayout(new qx.ui.layout.VBox(10).set({
+    this.setLayout(new qx.ui.layout.VBox(20).set({
       spacing: 5,
       alignX: "center"
     }));

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/ConfirmationsPage.js

@@ -27,8 +27,13 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
     const title = this.tr("Confirmation Settings");
     this.base(arguments, title, iconSrc);
 
-    const experimentalSettings = this.__createConfirmationsSettings();
-    this.add(experimentalSettings);
+    const confirmationSettings = this.__createConfirmationsSettings();
+    this.add(confirmationSettings);
+
+    if (osparc.product.Utils.showPreferencesExperimental()) {
+      const experimentalSettings = this.__createExperimentalSettings();
+      this.add(experimentalSettings);
+    }
   },
 
   members: {
@@ -72,11 +77,6 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
       }, this);
       box.add(cbConfirmDeleteStudy);
 
-      const cbConfirmDemoteOrgnaization = new qx.ui.form.CheckBox(this.tr("Demote Organization collaboration"));
-      preferencesSettings.bind("confirmDemoteOrgnaization", cbConfirmDemoteOrgnaization, "value");
-      cbConfirmDemoteOrgnaization.bind("value", preferencesSettings, "confirmDemoteOrgnaization");
-      box.add(cbConfirmDemoteOrgnaization);
-
       if (!(osparc.product.Utils.isProduct("tis") || osparc.product.Utils.isProduct("s4llite"))) {
         const cbConfirmDeleteNode = new qx.ui.form.CheckBox(this.tr("Delete a Node"));
         preferencesSettings.bind("confirmDeleteNode", cbConfirmDeleteNode, "value");
@@ -110,6 +110,25 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
         box.add(cbSnapNodeToGrid);
       }
 
+      return box;
+    },
+
+    __createExperimentalSettings: function() {
+      // layout
+      const box = this._createSectionBox("Experimental preferences");
+
+      const label = this._createHelpLabel(this.tr(
+        "This is a list of experimental preferences"
+      ));
+      box.add(label);
+
+      const preferencesSettings = osparc.desktop.preferences.Preferences.getInstance();
+
+      const cbAutoPorts = new qx.ui.form.CheckBox(this.tr("Connect ports automatically"));
+      preferencesSettings.bind("autoConnectPorts", cbAutoPorts, "value");
+      cbAutoPorts.bind("value", preferencesSettings, "autoConnectPorts");
+      box.add(cbAutoPorts);
+
       return box;
     }
   }