✨ Tooltip on node links (ITISFoundation#3441)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/component/widget/NodesSlidesTree.js

@@ -218,7 +218,6 @@ qx.Class.define("osparc.component.widget.NodesSlidesTree", {
           fnct = this.__moveDown;
           break;
       }
-      this.changeSelectedNode(item.getModel().getNodeId());
       if (fnct.call(this, item.getModel())) {
         this.__tree.refresh();
       }

services/static-webserver/client/source/class/osparc/component/workbench/EdgeUI.js

@@ -44,12 +44,15 @@ qx.Class.define("osparc.component.workbench.EdgeUI", {
     this.setEdge(edge);
     this.setRepresentation(representation);
 
+    const hint = new osparc.ui.hint.Hint(null, "");
+    representation.hint = hint;
+
     if (edge.getInputNode()) {
-      edge.getInputNode().getStatus().addListener("changeModified", () => {
-        this.__updateEdgeColor();
-      });
+      edge.getInputNode().getStatus().addListener("changeModified", () => this.__updateEdgeState());
     }
-    this.__updateEdgeColor();
+    edge.addListener("changePortConnected", () => this.__updateEdgeState());
+
+    this.__updateEdgeState();
 
     this.subscribeToFilterGroup("workbench");
   },
@@ -66,7 +69,7 @@ qx.Class.define("osparc.component.workbench.EdgeUI", {
   },
 
   statics: {
-    getEdgeColor(modified) {
+    getEdgeColor: function(modified) {
       let newColor = null;
       if (modified === null) {
         newColor = qx.theme.manager.Color.getInstance().resolve("workbench-edge-comp-active");
@@ -75,26 +78,47 @@ qx.Class.define("osparc.component.workbench.EdgeUI", {
       }
       const colorHex = qx.theme.manager.Color.getInstance().resolve(newColor);
       return colorHex;
+    },
+
+    noPortsConnectedText: function(edge) {
+      return `Connection candidate.<br>Check the ${edge.getOutputNode().getLabel()} inputs`;
     }
   },
 
   members: {
-    __updateEdgeColor: function() {
-      let colorHex = this.self().getEdgeColor(false);
-      if (this.getEdge().getInputNode()) {
-        const modified = this.getEdge().getInputNode().getStatus()
-          .getModified();
-        colorHex = this.self().getEdgeColor(modified);
-      }
+    __updateEdgeState: function() {
+      const inputNode = this.getEdge().getInputNode();
+      const portConnected = this.getEdge().isPortConnected();
+      const modified = inputNode ? inputNode.getStatus().getModified() : false;
+
+      // color
+      const colorHex = this.self().getEdgeColor(modified);
       osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), colorHex);
+
+      // shape
+      osparc.wrapper.Svg.updateCurveDashes(this.getRepresentation(), !portConnected);
+
+      // tooltip
+      const hint = this.getHint();
+      if (this.getEdge().isPortConnected() === false) {
+        hint.setText(this.self().noPortsConnectedText(this.getEdge()));
+      } else if (modified) {
+        hint.setText("Out-of-date");
+      } else {
+        hint.setText(null);
+      }
+    },
+
+    getHint: function() {
+      return this.getRepresentation().hint;
     },
 
     setSelected: function(selected) {
       if (selected) {
         const selectedColor = qx.theme.manager.Color.getInstance().resolve("workbench-edge-selected");
         osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), selectedColor);
       } else {
-        this.__updateEdgeColor();
+        this.__updateEdgeState();
       }
     },
 

services/static-webserver/client/source/class/osparc/component/workbench/WorkbenchUI.js

@@ -730,25 +730,41 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
         const y2 = pointList[1] ? pointList[1][1] : 0;
         const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());
 
-        edge.addListener("changePortConnected", e => {
-          const portConnected = e.getData();
-          osparc.wrapper.Svg.updateCurveDashes(edgeRepresentation, !portConnected);
-        }, this);
-
         const edgeUI = new osparc.component.workbench.EdgeUI(edge, edgeRepresentation);
         this.__edgesUI.push(edgeUI);
 
+        const hint = edgeUI.getHint();
         const that = this;
-        edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
-          // this is needed to get out of the context of svg
-          that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
-          e.stopPropagation();
-        }, this);
-        edgeUI.getRepresentation().node.addEventListener("click", e => {
-          // this is needed to get out of the context of svg
-          that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
-          e.stopPropagation();
-        }, this);
+        [
+          edgeRepresentation.widerCurve.node,
+          edgeRepresentation.node
+        ].forEach(svgEl => {
+          svgEl.addEventListener("click", e => {
+            // this is needed to get out of the context of svg
+            that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
+            e.stopPropagation();
+          }, this);
+
+          const topOffset = 20;
+          [
+            "mouseover",
+            "mousemove"
+          ].forEach(ev => {
+            svgEl.addEventListener(ev, e => {
+              const leftOffset = -(parseInt(hint.getHintBounds().width/2));
+              const properties = {
+                top: e.clientY + topOffset,
+                left: e.clientX + leftOffset
+              };
+              hint.setLayoutProperties(properties);
+              if (hint.getText()) {
+                hint.show();
+              }
+            }, this);
+          });
+        });
+        edgeUI.getRepresentation().widerCurve.node.addEventListener("mouseout", () => hint.exclude(), this);
+        this.__svgLayer.addListener("mouseout", () => hint.exclude(), this);
       }
     },
 

services/static-webserver/client/source/class/osparc/ui/hint/Hint.js

@@ -127,6 +127,13 @@ qx.Class.define("osparc.ui.hint.Hint", {
       }
     },
 
+    getText: function() {
+      if (this.__label) {
+        return this.__label.getValue();
+      }
+      return null;
+    },
+
     setText: function(text) {
       if (this.__label) {
         this.__label.setValue(text);
@@ -145,7 +152,7 @@ qx.Class.define("osparc.ui.hint.Hint", {
           width,
           height
         } = qx.bom.element.Dimension.getSize(element);
-        const selfBounds = this.getBounds() || this.getSizeHint();
+        const selfBounds = this.getHintBounds();
         let properties = {};
         switch (this.getOrientation()) {
           case this.self().orientation.TOP:
@@ -169,6 +176,10 @@ qx.Class.define("osparc.ui.hint.Hint", {
       }
     },
 
+    getHintBounds: function() {
+      return this.getBounds() || this.getSizeHint();
+    },
+
     _applyOrientation: function() {
       this.__createWidget();
       this.__updatePosition();