🐛 [Frontend] FIXES: Add nodes (#8312)

odeimaiz · web-flow · commit 3fb8eddec115 · 2025-09-05T09:15:15.000Z
diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeStatus.js b/services/static-webserver/client/source/class/osparc/data/model/NodeStatus.js
@@ -26,6 +26,9 @@ qx.Class.define("osparc.data.model.NodeStatus", {
   construct: function(node) {
     this.base(arguments);
 
+    const lockState = new osparc.data.model.NodeLockState();
+    this.setLockState(lockState);
+
     this.setNode(node);
   },
 
@@ -151,11 +154,7 @@ qx.Class.define("osparc.data.model.NodeStatus", {
           const progressSequence = new osparc.data.model.NodeProgressSequence();
           this.setProgressSequence(progressSequence);
         }
-
-        const lockState = new osparc.data.model.NodeLockState();
-        this.setLockState(lockState);
       };
-
       if (node.getMetadata()) {
         initNode();
       } else {
diff --git a/services/static-webserver/client/source/class/osparc/data/model/Workbench.js b/services/static-webserver/client/source/class/osparc/data/model/Workbench.js
@@ -497,36 +497,43 @@ qx.Class.define("osparc.data.model.Workbench", {
         return;
       }
 
-      const requesterNode = this.getNode(nodeId);
-      const freePos = this.getFreePosition(requesterNode);
-      filePicker.setPosition(freePos);
+      const populateNewNode = () => {
+        const requesterNode = this.getNode(nodeId);
+        const freePos = this.getFreePosition(requesterNode);
+        filePicker.setPosition(freePos);
 
-      // create connection
-      const filePickerId = filePicker.getNodeId();
-      requesterNode.addInputNode(filePickerId);
-      // reload also before port connection happens
-      this.fireEvent("reloadModel");
-      requesterNode.addPortLink(portId, filePickerId, "outFile")
-        .then(success => {
-          if (success) {
-            if (file) {
-              const fileObj = file.data;
-              osparc.file.FilePicker.setOutputValueFromStore(
-                filePicker,
-                fileObj.getLocation(),
-                fileObj.getDatasetId(),
-                fileObj.getFileId(),
-                fileObj.getLabel()
-              );
+        // create connection
+        const filePickerId = filePicker.getNodeId();
+        requesterNode.addInputNode(filePickerId);
+        // reload also before port connection happens
+        this.fireEvent("reloadModel");
+        requesterNode.addPortLink(portId, filePickerId, "outFile")
+          .then(success => {
+            if (success) {
+              if (file) {
+                const fileObj = file.data;
+                osparc.file.FilePicker.setOutputValueFromStore(
+                  filePicker,
+                  fileObj.getLocation(),
+                  fileObj.getDatasetId(),
+                  fileObj.getFileId(),
+                  fileObj.getLabel()
+                );
+              }
+              this.fireDataEvent("openNode", filePicker.getNodeId());
+              this.fireEvent("reloadModel");
+            } else {
+              this.removeNode(filePickerId);
+              const msg = qx.locale.Manager.tr("File couldn't be assigned");
+              osparc.FlashMessenger.logError(msg);
             }
-            this.fireDataEvent("openNode", filePicker.getNodeId());
-            this.fireEvent("reloadModel");
-          } else {
-            this.removeNode(filePickerId);
-            const msg = qx.locale.Manager.tr("File couldn't be assigned");
-            osparc.FlashMessenger.logError(msg);
-          }
-        });
+          });
+      };
+      if (filePicker.getMetadata()) {
+        populateNewNode();
+      } else {
+        filePicker.addListenerOnce("changeMetadata", () => populateNewNode(), this);
+      }
     },
 
     __parameterNodeRequested: async function(nodeId, portId) {
@@ -541,20 +548,27 @@ qx.Class.define("osparc.data.model.Workbench", {
           return;
         }
 
-        // do not overlap the new Parameter Node with other nodes
-        const freePos = this.getFreePosition(requesterNode);
-        parameterNode.setPosition(freePos);
-
-        // create connection
-        const pmId = parameterNode.getNodeId();
-        requesterNode.addInputNode(pmId);
-        // bypass the compatibility check
-        if (requesterNode.getPropsForm().addPortLink(portId, pmId, "out_1") !== true) {
-          this.removeNode(pmId);
-          const msg = qx.locale.Manager.tr("Parameter couldn't be assigned");
-          osparc.FlashMessenger.logError(msg);
+        const populateNewNode = () => {
+          // do not overlap the new Parameter Node with other nodes
+          const freePos = this.getFreePosition(requesterNode);
+          parameterNode.setPosition(freePos);
+
+          // create connection
+          const pmId = parameterNode.getNodeId();
+          requesterNode.addInputNode(pmId);
+          // bypass the compatibility check
+          if (requesterNode.getPropsForm().addPortLink(portId, pmId, "out_1") !== true) {
+            this.removeNode(pmId);
+            const msg = qx.locale.Manager.tr("Parameter couldn't be assigned");
+            osparc.FlashMessenger.logError(msg);
+          }
+          this.fireEvent("reloadModel");
+        };
+        if (parameterNode.getMetadata()) {
+          populateNewNode();
+        } else {
+          parameterNode.addListenerOnce("changeMetadata", () => populateNewNode(), this);
         }
-        this.fireEvent("reloadModel");
       }
     },
 
@@ -571,22 +585,29 @@ qx.Class.define("osparc.data.model.Workbench", {
           return;
         }
 
-        probeNode.setLabel(requesterPortMD.label);
+        const populateNewNode = () => {
+          probeNode.setLabel(requesterPortMD.label);
 
-        // do not overlap the new Parameter Node with other nodes
-        const freePos = this.getFreePosition(requesterNode, false);
-        probeNode.setPosition(freePos);
+          // do not overlap the new Parameter Node with other nodes
+          const freePos = this.getFreePosition(requesterNode, false);
+          probeNode.setPosition(freePos);
 
-        // create connection
-        const probeId = probeNode.getNodeId();
-        probeNode.addInputNode(nodeId);
-        // bypass the compatibility check
-        if (probeNode.getPropsForm().addPortLink("in_1", nodeId, portId) !== true) {
-          this.removeNode(probeId);
-          const msg = qx.locale.Manager.tr("Probe couldn't be assigned");
-          osparc.FlashMessenger.logError(msg);
+          // create connection
+          const probeId = probeNode.getNodeId();
+          probeNode.addInputNode(nodeId);
+          // bypass the compatibility check
+          if (probeNode.getPropsForm().addPortLink("in_1", nodeId, portId) !== true) {
+            this.removeNode(probeId);
+            const msg = qx.locale.Manager.tr("Probe couldn't be assigned");
+            osparc.FlashMessenger.logError(msg);
+          }
+          this.fireEvent("reloadModel");
+        };
+        if (probeNode.getMetadata()) {
+          populateNewNode();
+        } else {
+          probeNode.addListenerOnce("changeMetadata", () => populateNewNode(), this);
         }
-        this.fireEvent("reloadModel");
       }
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js b/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js
@@ -70,7 +70,7 @@ qx.Class.define("osparc.desktop.MainPageHandler", {
             const msg = qx.locale.Manager.tr("Project not found");
             throw new Error(msg);
           }
-          this.loadStudy(studyData);
+          return this.loadStudy(studyData); // return so errors propagate
         })
         .catch(err => {
           osparc.FlashMessenger.logError(err);
@@ -104,7 +104,7 @@ qx.Class.define("osparc.desktop.MainPageHandler", {
       this.setLoadingPageHeader(qx.locale.Manager.tr("Loading ") + studyData.name);
       this.showLoadingPage();
 
-      osparc.store.Services.getStudyServicesMetadata(studyData)
+      return osparc.store.Services.getStudyServicesMetadata(studyData)
         .finally(() => {
           const inaccessibleServices = osparc.store.Services.getInaccessibleServices(studyData["workbench"]);
           if (inaccessibleServices.length) {
diff --git a/services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js b/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 => {
diff --git a/services/static-webserver/client/source/class/osparc/workbench/NodeUI.js b/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: {
@@ -236,6 +237,8 @@ qx.Class.define("osparc.workbench.NodeUI", {
           let nodeType = this.getNode().getMetadata().type;
           if (this.getNode().isIterator()) {
             nodeType = "iterator";
+          } else if (this.getNode().isParameter()) {
+            nodeType = "parameter";
           } else if (this.getNode().isProbe()) {
             nodeType = "probe";
           }
@@ -308,14 +311,15 @@ qx.Class.define("osparc.workbench.NodeUI", {
     },
 
     __resetNodeUILayout: function() {
-      this.set({
-        width: this.self(arguments).NODE_WIDTH,
-        maxWidth: this.self(arguments).NODE_WIDTH,
-        minWidth: this.self(arguments).NODE_WIDTH
-      });
+      this.__setNodeUIWidth(this.self().NODE_WIDTH);
       this.resetThumbnail();
 
-      this.__createContentLayout();
+      // make sure metadata is ready
+      if (this.getNode().getMetadata()) {
+        this.__createContentLayout();
+      } else {
+        this.getNode().addListenerOnce("changeMetadata", () => this.__createContentLayout(), this);
+      }
     },
 
     __createContentLayout: function() {
@@ -330,7 +334,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
       }
     },
 
-    populateNodeLayout: function(svgWorkbenchCanvas) {
+    __populateNodeLayout: function(svgWorkbenchCanvas) {
       const node = this.getNode();
       node.bind("label", this, "caption", {
         onUpdate: () => {
@@ -364,6 +368,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) {
@@ -576,7 +592,7 @@ qx.Class.define("osparc.workbench.NodeUI", {
     },
 
     __turnIntoParameterUI: function() {
-      const width = 100;
+      const width = 120;
       this.__setNodeUIWidth(width);
 
       const label = new qx.ui.basic.Label().set({
diff --git a/services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js b/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;
     },
