Fix (un)grouping (#1919)

- nodes-group service is "frontend" type
- PropsForm Visibility fixed in GroupNodeView
- Do not destroy (together with the window) the propsFormEditor when editAccessLevel
- e2e: Once the dynamic service is responsive, wait 3" for the iframe
- Guided mode: Enable/Disable Previous/Next buttons
- Guided mode: Switch visible/hide buttons
- Guided mode: Positions for groups and its children fixed
- Refactoring

Author: odeimaiz

api/specs/common/schemas/node-meta-v0.0.1-converted.yaml

@@ -34,6 +34,7 @@ properties:
     type: string
     description: service type
     enum:
+      - frontend
       - computational
       - dynamic
     example: computational

api/specs/common/schemas/node-meta-v0.0.1.json

@@ -46,6 +46,7 @@
       "type": "string",
       "description": "service type",
       "enum": [
+        "frontend",
         "computational",
         "dynamic"
       ],

packages/models-library/src/models_library/services.py

@@ -24,6 +24,7 @@
 
 
 class ServiceType(str, Enum):
+    frontend = "frontend"
     computational = "computational"
     dynamic = "dynamic"
 

services/catalog/src/simcore_service_catalog/services/frontend_services.py

@@ -28,7 +28,7 @@ def _node_group_service() -> ServiceDockerData:
     return ServiceDockerData(
         key="simcore/services/frontend/nodes-group",
         version="1.0.0",
-        type="dynamic",
+        type="frontend",
         name="Group",
         description="Group of nodes",
         authors=[{"name": "Odei Maiz", "email": "[email protected]"}],

services/director/src/simcore_service_director/api/v0/openapi.yaml

@@ -175,6 +175,7 @@ paths:
                           type: string
                           description: service type
                           enum:
+                            - frontend
                             - computational
                             - dynamic
                           example: computational
@@ -559,6 +560,7 @@ paths:
                           type: string
                           description: service type
                           enum:
+                            - frontend
                             - computational
                             - dynamic
                           example: computational
@@ -2157,6 +2159,7 @@ components:
                 type: string
                 description: service type
                 enum:
+                  - frontend
                   - computational
                   - dynamic
                 example: computational

services/director/src/simcore_service_director/api/v0/schemas/node-meta-v0.0.1.json

@@ -46,6 +46,7 @@
       "type": "string",
       "description": "service type",
       "enum": [
+        "frontend",
         "computational",
         "dynamic"
       ],

services/storage/src/simcore_service_storage/api/v0/schemas/node-meta-v0.0.1.json

@@ -46,6 +46,7 @@
       "type": "string",
       "description": "service type",
       "enum": [
+        "frontend",
         "computational",
         "dynamic"
       ],

services/web/client/source/class/osparc/component/export/ExportDAG.js

@@ -171,8 +171,11 @@ qx.Class.define("osparc.component.export.ExportDAG", {
       const nodes = Object.values(innerNodes);
       for (const node of nodes) {
         const nodeEntry = nodesGroupService["workbench"][node.getNodeId()];
-        for (let [portId, portValue] of Object.entries(node.getInputEditorValues())) {
-          nodeEntry.inputs[portId] = portValue;
+        if (node.isPropertyInitialized("propsFormEditor") && node.getPropsFormEditor()) {
+          const editorValues = node.getPropsFormEditor().getValues();
+          for (let [portId, portValue] of Object.entries(editorValues)) {
+            nodeEntry.inputs[portId] = portValue;
+          }
         }
       }
       osparc.data.Resources.fetch("dags", "post", {data: nodesGroupService})

services/web/client/source/class/osparc/component/node/GroupNodeView.js

@@ -51,6 +51,17 @@ qx.Class.define("osparc.component.node.GroupNodeView", {
         }
       });
       return settingsEditorLayout;
+    },
+
+    isSettingsGroupShowable: function(innerNodes) {
+      const innerNodesArray = Object.values(innerNodes);
+      for (let i=0; i<innerNodesArray.length; i++) {
+        const innerNode = innerNodesArray[i];
+        if (osparc.component.node.NodeView.isPropsFormShowable(innerNode)) {
+          return true;
+        }
+      }
+      return false;
     }
   },
 
@@ -66,8 +77,14 @@ qx.Class.define("osparc.component.node.GroupNodeView", {
           const innerSettings = osparc.component.node.BaseNodeView.createSettingsGroupBox();
           innerNode.bind("label", innerSettings, "legend");
           innerSettings.add(propsForm);
+          propsForm.addListener("changeChildVisibility", () => {
+            const isSettingsGroupShowable = osparc.component.node.NodeView.isPropsFormShowable(innerNode);
+            innerSettings.setVisibility(isSettingsGroupShowable ? "visible" : "excluded");
+            this.__checkSettingsVisibility();
+          }, this);
           this._settingsLayout.add(innerSettings);
         }
+        this.__checkSettingsVisibility();
         const mapper = innerNode.getInputsMapper();
         if (mapper) {
           this._mapperLayout.add(mapper, {
@@ -82,20 +99,14 @@ qx.Class.define("osparc.component.node.GroupNodeView", {
       });
     },
 
+    __checkSettingsVisibility: function() {
+      const isSettingsGroupShowable = this.isSettingsGroupShowable();
+      this._settingsLayout.setVisibility(isSettingsGroupShowable ? "visible" : "excluded");
+    },
+
     isSettingsGroupShowable: function() {
-      let anyVisible = false;
       const innerNodes = this.getNode().getInnerNodes(true);
-      const innerNodesArray = Object.values(innerNodes);
-      for (let i=0; i<innerNodesArray.length && !anyVisible; i++) {
-        const innerNode = innerNodesArray[i];
-        const propsForm = innerNode.getPropsForm();
-        if (propsForm) {
-          anyVisible = propsForm.hasVisibleInputs();
-        } else {
-          anyVisible = false;
-        }
-      }
-      return anyVisible;
+      return this.self().isSettingsGroupShowable(innerNodes);
     },
 
     __iFrameChanged: function(innerNode, tabPage) {
@@ -167,7 +178,9 @@ qx.Class.define("osparc.component.node.GroupNodeView", {
     _openEditAccessLevel: function() {
       const settingsEditorLayout = this.self().getSettingsEditorLayout(this.getNode().getInnerNodes());
       const title = this.getNode().getLabel();
-      osparc.ui.window.Window.popUpInWindow(settingsEditorLayout, title, 800, 600);
+      osparc.ui.window.Window.popUpInWindow(settingsEditorLayout, title, 800, 600).set({
+        autoDestroy: false
+      });
     },
 
     _applyNode: function(node) {

services/web/client/source/class/osparc/component/node/NodeView.js

@@ -37,8 +37,13 @@
 qx.Class.define("osparc.component.node.NodeView", {
   extend: osparc.component.node.BaseNodeView,
 
-  construct: function() {
-    this.base(arguments);
+  statics: {
+    isPropsFormShowable: function(node) {
+      if (node && ("getPropsForm" in node) && node.getPropsForm()) {
+        return node.getPropsForm().hasVisibleInputs();
+      }
+      return false;
+    }
   },
 
   members: {
@@ -75,10 +80,7 @@ qx.Class.define("osparc.component.node.NodeView", {
 
     isSettingsGroupShowable: function() {
       const node = this.getNode();
-      if (node && ("getPropsForm" in node) && node.getPropsForm()) {
-        return node.getPropsForm().hasVisibleInputs();
-      }
-      return false;
+      return this.self().isPropsFormShowable(node);
     },
 
     __iFrameChanged: function() {
@@ -133,9 +135,12 @@ qx.Class.define("osparc.component.node.NodeView", {
 
     _openEditAccessLevel: function() {
       const settingsEditorLayout = osparc.component.node.BaseNodeView.createSettingsGroupBox(this.tr("Settings"));
-      settingsEditorLayout.add(this.getNode().getPropsFormEditor());
+      const propsFormEditor = this.getNode().getPropsFormEditor();
+      settingsEditorLayout.add(propsFormEditor);
       const title = this.getNode().getLabel();
-      osparc.ui.window.Window.popUpInWindow(settingsEditorLayout, title, 800, 600);
+      osparc.ui.window.Window.popUpInWindow(settingsEditorLayout, title, 800, 600).set({
+        autoDestroy: false
+      });
     },
 
     _applyNode: function(node) {