✨ [Frontend] RTC: Node Lock State

services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js

@@ -100,7 +100,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
             paddingBottom: 5,
             allowGrowX: false
           });
-          control.getChildControl("icon").set(this.getThumbnailProps(32));
+          control.getChildControl("icon").set(osparc.utils.Utils.getThumbnailProps(32));
           control.getChildControl("label").set({
             rich: true,
             wrap: true

services/static-webserver/client/source/class/osparc/data/model/IframeHandler.js

@@ -30,6 +30,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
     });
 
     this.__initLoadingPage();
+    this.__initLockedPage();
     this.__initIFrame();
   },
 
@@ -44,7 +45,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
     node: {
       check: "osparc.data.model.Node",
       init: null,
-      nullable: false
+      nullable: false,
+      event: "changeNode",
+      apply: "__applyNode",
     },
 
     loadingPage: {
@@ -53,6 +56,12 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       nullable: true
     },
 
+    lockedPage: {
+      check: "osparc.ui.message.NodeLockedPage",
+      init: null,
+      nullable: true
+    },
+
     iFrame: {
       check: "osparc.widget.PersistentIframe",
       init: null,
@@ -61,7 +70,19 @@ qx.Class.define("osparc.data.model.IframeHandler", {
   },
 
   events: {
-    "iframeChanged": "qx.event.type.Event"
+    "iframeStateChanged": "qx.event.type.Event"
+  },
+
+  statics: {
+    evalShowToolbar: function(loadingPage, study) {
+      if (osparc.product.Utils.isProduct("s4llite")) {
+        loadingPage.setShowToolbar(false);
+      } else {
+        study.getUi().bind("mode", loadingPage, "showToolbar", {
+          converter: mode => mode !== "standalone"
+        });
+      }
+    },
   },
 
   members: {
@@ -89,16 +110,14 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       }
     },
 
+    __applyNode: function(node) {
+      node.getStatus().getLockState().addListener("changeLocked", () => this.fireEvent("iframeStateChanged"), this);
+    },
+
     __initIFrame: function() {
       const iframe = new osparc.widget.PersistentIframe();
       osparc.utils.Utils.setIdToWidget(iframe.getIframe(), "iframe_"+this.getNode().getNodeId());
-      if (osparc.product.Utils.isProduct("s4llite")) {
-        iframe.setShowToolbar(false);
-      } else {
-        this.getStudy().getUi().bind("mode", iframe, "showToolbar", {
-          converter: mode => mode !== "standalone"
-        });
-      }
+      this.self().evalShowToolbar(iframe, this.getStudy());
       iframe.addListener("restart", () => this.restartIFrame(), this);
       iframe.getDiskUsageIndicator().setCurrentNode(this.getNode())
       this.setIFrame(iframe);
@@ -108,13 +127,8 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       const loadingPage = new osparc.ui.message.Loading().set({
         header: this.__getLoadingPageHeader()
       });
-      if (osparc.product.Utils.isProduct("s4llite")) {
-        loadingPage.setShowToolbar(false);
-      } else {
-        this.getStudy().getUi().bind("mode", loadingPage, "showToolbar", {
-          converter: mode => mode !== "standalone"
-        });
-      }
+
+      this.self().evalShowToolbar(loadingPage, this.getStudy());
 
       const node = this.getNode();
       const thumbnail = node.getMetadata()["thumbnail"];
@@ -146,6 +160,13 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       return statusText + " " + node.getLabel() + " <span style='font-size: 16px;font-weight: normal;'><sub>v" + versionDisplay + "</sub></span>";
     },
 
+    __initLockedPage: function() {
+      const lockedPage = new osparc.ui.message.NodeLockedPage();
+      this.self().evalShowToolbar(lockedPage, this.getStudy());
+      this.bind("node", lockedPage, "node");
+      this.setLockedPage(lockedPage);
+    },
+
     __nodeState: function() {
       // Check if study is still there
       if (this.getStudy() === null || this.__stopRequestingStatus === true) {
@@ -381,7 +402,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
         if (this.getIFrame()) {
           this.getIFrame().resetSource();
         }
-        this.fireEvent("iframeChanged");
+        this.fireEvent("iframeStateChanged");
       }
     },
 
@@ -418,7 +439,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
 
         // fire event to force switching to iframe's content:
         // it is required in those cases where the native 'load' event isn't triggered (voila)
-        this.fireEvent("iframeChanged");
+        this.fireEvent("iframeStateChanged");
       }
     }
   }

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -528,7 +528,8 @@ qx.Class.define("osparc.data.model.Node", {
           this.setLabel(nodeData.label);
         }
         this.__populateInputOutputData(nodeData);
-        this.populateStates(nodeData);
+        this.populateProgress(nodeData);
+        this.populateState(nodeData);
         if (nodeData.bootOptions) {
           this.setBootOptions(nodeData.bootOptions);
         }
@@ -570,7 +571,7 @@ qx.Class.define("osparc.data.model.Node", {
       this.setInputsRequired(nodeData.inputsRequired || []);
     },
 
-    populateStates: function(nodeData) {
+    populateProgress: function(nodeData) {
       if ("progress" in nodeData) {
         const progress = Number.parseInt(nodeData["progress"]);
         const oldProgress = this.getStatus().getProgress();
@@ -581,6 +582,9 @@ qx.Class.define("osparc.data.model.Node", {
           this.getStatus().setProgress(progress);
         }
       }
+    },
+
+    populateState: function(nodeData) {
       if ("state" in nodeData) {
         this.getStatus().setState(nodeData.state);
       }
@@ -608,6 +612,10 @@ qx.Class.define("osparc.data.model.Node", {
       return this.getIframeHandler() ? this.getIframeHandler().getLoadingPage() : null;
     },
 
+    getLockedPage: function() {
+      return this.getIframeHandler() ? this.getIframeHandler().getLockedPage() : null;
+    },
+
     __applyPropsForm: function(propsForm) {
       osparc.utils.Utils.setIdToWidget(propsForm, "settingsForm_" + this.getNodeId());
     },

services/static-webserver/client/source/class/osparc/data/model/NodeLockState.js

@@ -0,0 +1,73 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.data.model.NodeLockState", {
+  extend: qx.core.Object,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.initCurrentUserGroupIds();
+    this.initLocked();
+    this.initStatus();
+  },
+
+  properties: {
+    currentUserGroupIds: {
+      check: "Array",
+      init: [],
+      nullable: false,
+      event: "changeCurrentUserGroupIds",
+    },
+
+    locked: {
+      check: "Boolean",
+      init: false,
+      nullable: false,
+      event: "changeLocked",
+    },
+
+    status: {
+      // check: ["NOT_STARTED", "STARTED", "OPENED"],
+      check: "String",
+      init: false,
+      nullable: false,
+      event: "changeStatus",
+    }
+  },
+
+  members: {
+    stateReceived: function(state) {
+      if (state) {
+        this.set({
+          currentUserGroupIds: "current_user_groupids" in state ? state["current_user_groupids"] : [],
+          locked: "locked" in state ? state["locked"] : false,
+          status: "status" in state ? state["status"] : "NOT_STARTED",
+        });
+      }
+    },
+
+    isLockedBySomeoneElse: function() {
+      if (this.isLocked()) {
+        const currentUserGroupIds = this.getCurrentUserGroupIds();
+        const myGroupId = osparc.auth.Data.getInstance().getGroupId();
+        return !currentUserGroupIds.includes(myGroupId);
+      }
+      return false;
+    }
+  }
+});

services/static-webserver/client/source/class/osparc/data/model/NodeStatus.js

@@ -93,6 +93,13 @@ qx.Class.define("osparc.data.model.NodeStatus", {
     hasOutputs: {
       check: "Boolean",
       init: false
+    },
+
+    lockState: {
+      check: "osparc.data.model.NodeLockState",
+      nullable: true,
+      init: "unlocked",
+      event: "changeLockState"
     }
   },
 
@@ -139,17 +146,20 @@ qx.Class.define("osparc.data.model.NodeStatus", {
 
   members: {
     __applyNode: function(node) {
-      const addNodeProgressSequence = () => {
+      const initNode = () => {
         if (node.isDynamic()) {
           const progressSequence = new osparc.data.model.NodeProgressSequence();
           this.setProgressSequence(progressSequence);
         }
+
+        const lockState = new osparc.data.model.NodeLockState();
+        this.setLockState(lockState);
       };
 
       if (node.getMetadata()) {
-        addNodeProgressSequence();
+        initNode();
       } else {
-        node.addListenerOnce("changeMetadata", () => addNodeProgressSequence(), this);
+        node.addListenerOnce("changeMetadata", () => initNode(), this);
       }
     },
 
@@ -217,6 +227,9 @@ qx.Class.define("osparc.data.model.NodeStatus", {
           this.setModified(null);
         }
       }
+      if ("lock_state" in state) {
+        this.getLockState().stateReceived(state.lock_state);
+      }
     },
 
     serialize: function() {

services/static-webserver/client/source/class/osparc/data/model/Study.js

@@ -576,11 +576,8 @@ qx.Class.define("osparc.data.model.Study", {
       if (node) {
         if (nodeData && !osparc.data.model.Node.isFrontend(node.getMetadata())) {
           node.setOutputData(nodeData.outputs);
-          if ("progress" in nodeData) {
-            const progress = Number.parseInt(nodeData["progress"]);
-            node.getStatus().setProgress(progress);
-          }
-          node.populateStates(nodeData);
+          node.populateProgress(nodeData);
+          node.populateState(nodeData);
         }
         if ("errors" in nodeUpdatedData) {
           const errors = nodeUpdatedData["errors"];

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -58,7 +58,33 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       const win = osparc.widget.StudyDataManager.popUpInWindow(node.getStudy().serialize(), node.getNodeId(), node.getLabel());
       const closeBtn = win.getChildControl("close-button");
       osparc.utils.Utils.setIdToWidget(closeBtn, "nodeDataManagerCloseBtn");
-    }
+    },
+
+    __handleIframeStateChange: function(node, iframeLayout) {
+      iframeLayout.removeAll();
+      if (node && node.getIFrame()) {
+        const iFrame = node.getIFrame();
+        const src = iFrame.getSource();
+        let showPage = iFrame;
+        if (node.getStatus().getLockState().isLockedBySomeoneElse()) {
+          showPage = node.getLockedPage();
+        } else if (src === null || src === "about:blank") {
+          showPage = node.getLoadingPage();
+        }
+        iframeLayout.add(showPage, {
+          flex: 1
+        });
+      }
+    },
+
+    listenToIframeStateChanges: function(node, iframeLayout) {
+      if (node && node.getIFrame()) {
+        const iFrame = node.getIFrame();
+        node.getIframeHandler().addListener("iframeStateChanged", () => this.__handleIframeStateChange(node, iframeLayout), this);
+        iFrame.addListener("load", () => this.__handleIframeStateChange(node, iframeLayout));
+        this.__handleIframeStateChange(node, iframeLayout);
+      }
+    },
   },
 
   events: {
@@ -357,6 +383,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         alignX: "center",
         marginLeft: 10
       });
+      // do not allow modifying the pipeline
       this.getStudy().bind("pipelineRunning", addNewNodeBtn, "enabled", {
         converter: running => !running
       });
@@ -755,9 +782,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
             widget.addListener("restore", () => this.setMaximized(false), this);
           }
         });
-        node.getIframeHandler().addListener("iframeChanged", () => this.__iFrameChanged(node), this);
-        iFrame.addListener("load", () => this.__iFrameChanged(node), this);
-        this.__iFrameChanged(node);
+        osparc.desktop.WorkbenchView.listenToIframeStateChanges(node, this.__iframePage);
       } else {
         // This will keep what comes after at the bottom
         this.__iframePage.add(new qx.ui.core.Spacer(), {
@@ -766,20 +791,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       }
     },
 
-    __iFrameChanged: function(node) {
-      this.__iframePage.removeAll();
-
-      if (node && node.getIFrame()) {
-        const loadingPage = node.getLoadingPage();
-        const iFrame = node.getIFrame();
-        const src = iFrame.getSource();
-        const iFrameView = (src === null || src === "about:blank") ? loadingPage : iFrame;
-        this.__iframePage.add(iFrameView, {
-          flex: 1
-        });
-      }
-    },
-
     __populateSecondaryColumn: function(node) {
       [
         this.__studyOptionsPage,
@@ -803,8 +814,12 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         this.__populateSecondaryColumnNode(node);
       }
 
-      if (node instanceof osparc.data.model.Node) {
-        node.getStudy().bind("pipelineRunning", this.__serviceOptionsPage, "enabled", {
+      if (
+        node instanceof osparc.data.model.Node &&
+        node.isComputational() &&
+        node.getPropsForm()
+      ) {
+        node.getStudy().bind("pipelineRunning", node.getPropsForm(), "enabled", {
           converter: pipelineRunning => !pipelineRunning
         });
       }