highlightEdge

Author: odeimaiz

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

@@ -358,7 +358,7 @@ qx.Class.define("osparc.form.renderer.PropForm", {
         const inputNodeIDs = thisNode.getInputNodes();
         inputNodeIDs.forEach(inputNodeId => {
           const inputNode = this.getStudy().getWorkbench().getNode(inputNodeId);
-          if (inputNode) {
+          if (inputNode && inputNode.getMetadata()) {
             for (const outputKey in inputNode.getOutputs()) {
               const paramButton = new qx.ui.menu.Button();
               inputNode.bind("label", paramButton, "label", {
@@ -400,7 +400,7 @@ qx.Class.define("osparc.form.renderer.PropForm", {
       menu.removeAll();
 
       const inputNode = this.getStudy().getWorkbench().getNode(inputNodeId);
-      if (inputNode) {
+      if (inputNode && inputNode.getMetadata()) {
         for (const outputKey in inputNode.getOutputs()) {
           osparc.utils.Ports.arePortsCompatible(inputNode, outputKey, this.getNode(), targetPortId)
             .then(compatible => {

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

@@ -168,6 +168,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
     "nodeMovingStop": "qx.event.type.Event",
     "updateNodeDecorator": "qx.event.type.Event",
     "requestOpenLogger": "qx.event.type.Event",
+    "highlightEdge": "qx.event.type.Data",
   },
 
   members: {
@@ -336,7 +337,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
       }
     },
 
-    populateNodeLayout: function(svgWorkbenchCanvas) {
+    __populateNodeLayout: function(svgWorkbenchCanvas) {
       const node = this.getNode();
       node.bind("label", this, "caption", {
         onUpdate: () => {
@@ -370,6 +371,18 @@ qx.Class.define("osparc.workbench.NodeUI", {
       this.addListener("resize", () => {
         setTimeout(() => this.fireEvent("updateNodeDecorator"), 50);
       });
+
+      if (node.getPropsForm()) {
+        node.getPropsForm().addListener("highlightEdge", e => this.fireDataEvent("highlightEdge", e.getData()), this);
+      }
+    },
+
+    populateNodeLayout: function(svgWorkbenchCanvas) {
+      if (this.getNode().getMetadata()) {
+        this.__populateNodeLayout(svgWorkbenchCanvas);
+      } else {
+        this.getNode().addListenerOnce("changeMetadata", () => this.__populateNodeLayout(svgWorkbenchCanvas), this);
+      }
     },
 
     __applyNode: function(node) {

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

@@ -689,25 +689,22 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
       nodeUI.addListener("markerClicked", e => this.__openMarkerEditor(e.getData()), this);
       nodeUI.addListener("infoNode", e => this.__openNodeInfo(e.getData()), this);
       nodeUI.addListener("removeNode", e => this.fireDataEvent("removeNode", e.getData()), this);
-
-      if (nodeUI.getNode().getPropsForm()) {
-        nodeUI.getNode().getPropsForm().addListener("highlightEdge", e => {
-          const {
-            highlight,
-            fromNodeId,
-            toNodeId,
-          } = e.getData();
-          const edgeFound = this.__edgesUI.find(edgeUI => {
-            const edge = edgeUI.getEdge();
-            const inputNode = edge.getInputNode();
-            const outputNode = edge.getOutputNode();
-            return (inputNode.getNodeId() === fromNodeId && outputNode.getNodeId() === toNodeId)
-          });
-          if (edgeFound) {
-            edgeFound.setHighlighted(highlight);
-          }
+      nodeUI.addListener("highlightEdge", e => {
+        const {
+          highlight,
+          fromNodeId,
+          toNodeId,
+        } = e.getData();
+        const edgeFound = this.__edgesUI.find(edgeUI => {
+          const edge = edgeUI.getEdge();
+          const inputNode = edge.getInputNode();
+          const outputNode = edge.getOutputNode();
+          return (inputNode.getNodeId() === fromNodeId && outputNode.getNodeId() === toNodeId)
         });
-      }
+        if (edgeFound) {
+          edgeFound.setHighlighted(highlight);
+        }
+      });
 
       return nodeUI;
     },