Metamodeling II + Markers (#2966)

ITISFoundation · Apr 9, 2022 · 68a981d · 68a981d
1 parent 1a9fc15
commit 68a981d
Show file tree

Hide file tree

Showing 29 changed files with 670 additions and 231 deletions.
diff --git a/api/specs/common/schemas/project-v0.0.1-converted.yaml b/api/specs/common/schemas/project-v0.0.1-converted.yaml
@@ -378,6 +378,18 @@ properties:
                     description: The y position
                     example:
                       - '15'
+              marker:
+                type: object
+                additionalProperties: false
+                required:
+                  - color
+                properties:
+                  color:
+                    type: string
+                    description: Marker's color
+                    example:
+                      - '#FF0000'
+                      - '#0000FF'
         additionalProperties: true
       slideshow:
         type: object

diff --git a/api/specs/common/schemas/project-v0.0.1.json b/api/specs/common/schemas/project-v0.0.1.json
@@ -513,6 +513,23 @@
                       ]
                     }
                   }
+                },
+                "marker": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "color"
+                  ],
+                  "properties": {
+                    "color": {
+                      "type": "string",
+                      "description": "Marker's color",
+                      "examples": [
+                        "#FF0000",
+                        "#0000FF"
+                      ]
+                    }
+                  }
                 }
               }
             }

diff --git a/packages/models-library/src/models_library/projects_nodes_ui.py b/packages/models-library/src/models_library/projects_nodes_ui.py
@@ -3,6 +3,7 @@
 """
 
 from pydantic import BaseModel, Extra, Field
+from pydantic.color import Color
 
 
 class Position(BaseModel):
@@ -11,3 +12,10 @@ class Position(BaseModel):
 
     class Config:
         extra = Extra.forbid
+
+
+class Marker(BaseModel):
+    color: Color = Field(...)
+
+    class Config:
+        extra = Extra.forbid
diff --git a/packages/models-library/src/models_library/projects_ui.py b/packages/models-library/src/models_library/projects_ui.py
@@ -8,11 +8,12 @@
 from pydantic.color import Color
 
 from .projects_nodes_io import NodeID, NodeIDStr
-from .projects_nodes_ui import Position
+from .projects_nodes_ui import Marker, Position
 
 
 class WorkbenchUI(BaseModel):
     position: Position = Field(..., description="The node position in the workbench")
+    marker: Optional[Marker] = None
 
     class Config:
         extra = Extra.forbid

diff --git a/services/director-v2/tests/unit/test_db_comp_tasks.py b/services/director-v2/tests/unit/test_db_comp_tasks.py
@@ -60,6 +60,7 @@ def test_only_filepicker_service_gets_some_service_details(
         "simcore/services/frontend/nodes-group/macros/",  # FIXME: PC->OM: This front-end service needs to be re-defined
         "simcore/services/frontend/nodes-group",
         "simcore/services/frontend/parameter/",
+        "simcore/services/frontend/iterator-consumer/probe/",
     ]
     for frontend_service_key in all_frontend_services:
         if frontend_service_key in EXCLUDE:

diff --git a/services/director/src/simcore_service_director/api/v0/schemas/project-v0.0.1.json b/services/director/src/simcore_service_director/api/v0/schemas/project-v0.0.1.json
@@ -513,6 +513,23 @@
                       ]
                     }
                   }
+                },
+                "marker": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "color"
+                  ],
+                  "properties": {
+                    "color": {
+                      "type": "string",
+                      "description": "Marker's color",
+                      "examples": [
+                        "#FF0000",
+                        "#0000FF"
+                      ]
+                    }
+                  }
                 }
               }
             }

diff --git a/services/storage/src/simcore_service_storage/api/v0/openapi.yaml b/services/storage/src/simcore_service_storage/api/v0/openapi.yaml
@@ -1182,6 +1182,18 @@ components:
                           description: The y position
                           example:
                             - '15'
+                    marker:
+                      type: object
+                      additionalProperties: false
+                      required:
+                        - color
+                      properties:
+                        color:
+                          type: string
+                          description: Marker's color
+                          example:
+                            - '#FF0000'
+                            - '#0000FF'
               additionalProperties: true
             slideshow:
               type: object

diff --git a/services/storage/src/simcore_service_storage/api/v0/schemas/project-v0.0.1.json b/services/storage/src/simcore_service_storage/api/v0/schemas/project-v0.0.1.json
@@ -513,6 +513,23 @@
                       ]
                     }
                   }
+                },
+                "marker": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "color"
+                  ],
+                  "properties": {
+                    "color": {
+                      "type": "string",
+                      "description": "Marker's color",
+                      "examples": [
+                        "#FF0000",
+                        "#0000FF"
+                      ]
+                    }
+                  }
                 }
               }
             }

diff --git a/services/web/client/source/class/osparc/component/editor/AnnotationEditor.js b/services/web/client/source/class/osparc/component/editor/AnnotationEditor.js
@@ -38,28 +38,45 @@ qx.Class.define("osparc.component.editor.AnnotationEditor", {
   properties: {
     annotation: {
       check: "osparc.component.workbench.Annotation",
+      init: null,
+      nullable: true,
       apply: "__applyAnnotation"
+    },
+
+    marker: {
+      check: "Object",
+      init: null,
+      nullable: true,
+      apply: "__applyMarker"
     }
   },
 
   members: {
-    __applyAnnotation: function(annotation) {
-      this._removeAll();
-
-      let row = 0;
+    __addColor: function() {
       this._add(new qx.ui.basic.Label(this.tr("Color")), {
-        row,
+        row: 0,
         column: 0
       });
       const colorPicker = new osparc.component.form.ColorPicker();
-      annotation.bind("color", colorPicker, "color");
-      colorPicker.bind("color", annotation, "color");
       this._add(colorPicker, {
-        row,
+        row: 0,
         column: 1
       });
-      row++;
+      return colorPicker;
+    },
+
+    __applyAnnotation: function(annotation) {
+      this._removeAll();
+
+      if (annotation === null) {
+        return;
+      }
 
+      const colorPicker = this.__addColor();
+      annotation.bind("color", colorPicker, "color");
+      colorPicker.bind("color", annotation, "color");
+
+      let row = 1;
       if (annotation.getType() === "text") {
         const attrs = annotation.getAttributes();
         this._add(new qx.ui.basic.Label(this.tr("Text")), {
@@ -86,6 +103,42 @@ qx.Class.define("osparc.component.editor.AnnotationEditor", {
         });
         row++;
       }
+
+      this.__makeItModal();
+    },
+
+    __applyMarker: function(marker) {
+      this._removeAll();
+
+      if (marker === null) {
+        return;
+      }
+
+      const colorPicker = this.__addColor();
+      marker.bind("color", colorPicker, "color");
+      colorPicker.bind("color", marker, "color");
+
+      this.__makeItModal();
+    },
+
+    __makeItModal: function() {
+      this.show();
+
+      const showHint = () => this.show();
+      const hideHint = () => this.exclude();
+      const tapListener = event => {
+        if (osparc.utils.Utils.isMouseOnElement(this, event)) {
+          return;
+        }
+        hideHint();
+        this.set({
+          annotation: null,
+          marker: null
+        });
+        document.removeEventListener("mousedown", tapListener);
+      };
+      showHint();
+      document.addEventListener("mousedown", tapListener);
     }
   }
 });
diff --git a/services/web/client/source/class/osparc/component/form/renderer/PropForm.js b/services/web/client/source/class/osparc/component/form/renderer/PropForm.js
@@ -746,7 +746,8 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
       if (!this.__isPortAvailable(toPortId)) {
         return false;
       }
-      this.getControlLink(toPortId).setEnabled(false);
+      const ctrlLink = this.getControlLink(toPortId);
+      ctrlLink.setEnabled(false);
       this._form.getControl(toPortId)["link"] = {
         nodeUuid: fromNodeId,
         output: fromPortId
@@ -756,9 +757,17 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
       const fromNode = workbench.getNode(fromNodeId);
       const port = fromNode.getOutput(fromPortId);
       const fromPortLabel = port ? port.label : null;
-      fromNode.bind("label", this.getControlLink(toPortId), "value", {
+      fromNode.bind("label", ctrlLink, "value", {
         converter: label => label + ": " + fromPortLabel
       });
+      // Hack: Show tooltip if element is disabled
+      const addToolTip = () => {
+        ctrlLink.getContentElement().removeAttribute("title");
+        const toolTipText = fromNode.getLabel() + ":\n" + fromPortLabel;
+        ctrlLink.getContentElement().setAttribute("title", toolTipText);
+      };
+      fromNode.addListener("changeLabel", () => addToolTip());
+      addToolTip();
 
       this.__portLinkAdded(toPortId, fromNodeId, fromPortId);
 

diff --git a/services/web/client/source/class/osparc/component/widget/NodeOutputs.js b/services/web/client/source/class/osparc/component/widget/NodeOutputs.js
@@ -34,10 +34,13 @@ qx.Class.define("osparc.component.widget.NodeOutputs", {
   construct: function(node, ports) {
     this.base(arguments);
 
-    const layout = new qx.ui.layout.Grid(5, 5);
-    layout.setColumnFlex(1, 1);
-    layout.setColumnMaxWidth(1, 130);
-    this._setLayout(layout);
+    const grid = new qx.ui.layout.Grid(5, 5);
+    grid.setColumnMaxWidth(this.self().POS.NAME, 140);
+    grid.setColumnFlex(this.self().POS.VALUE, 1);
+    Object.keys(this.self().POS).forEach((_, idx) => {
+      grid.setColumnAlign(idx, "left", "middle");
+    });
+    this._setLayout(grid);
 
     this.set({
       node,
@@ -56,9 +59,19 @@ qx.Class.define("osparc.component.widget.NodeOutputs", {
     ports: {
       nullable: false,
       apply: "__populateLayout"
+    },
+
+    offerProbes: {
+      check: "Boolean",
+      init: false,
+      event: "changeOfferProbes"
     }
   },
 
+  events: {
+    "probeRequested": "qx.event.type.Data"
+  },
+
   statics: {
     POS: {
       KEY: {
@@ -78,6 +91,9 @@ qx.Class.define("osparc.component.widget.NodeOutputs", {
       },
       UNIT: {
         col: 5
+      },
+      PROBE: {
+        col: 6
       }
     }
   },
@@ -86,9 +102,11 @@ qx.Class.define("osparc.component.widget.NodeOutputs", {
     __populateLayout: function() {
       this._removeAll();
 
-      const ports = Object.values(this.getPorts());
-      for (let i=0; i<ports.length; i++) {
-        const port = ports[i];
+      const ports = this.getPorts();
+      const portKeys = Object.keys(ports);
+      for (let i=0; i<portKeys.length; i++) {
+        const portKey = portKeys[i];
+        const port = ports[portKey];
 
         const name = new qx.ui.basic.Label(port.label).set({
           toolTipText: port.label
@@ -154,6 +172,24 @@ qx.Class.define("osparc.component.widget.NodeOutputs", {
           row: i,
           column: this.self().POS.UNIT.col
         });
+
+        const probeBtn = new qx.ui.form.Button().set({
+          icon: osparc.utils.Services.TYPES["probe"].icon + "12",
+          height: 23,
+          focusable: false,
+          toolTipText: this.tr("Connects a Probe to this output")
+        });
+        this.bind("offerProbes", probeBtn, "visibility", {
+          converter: val => val ? "visible" : "excluded"
+        });
+        probeBtn.addListener("execute", () => this.getNode().fireDataEvent("probeRequested", {
+          portId: portKey,
+          nodeId: this.getNode().getNodeId()
+        }));
+        this._add(probeBtn, {
+          row: i,
+          column: this.self().POS.PROBE.col
+        });
       }
     }
   }