🎨 [Frontend] Enh: Show who is collaborating

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

@@ -804,34 +804,26 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     __applyState: function(state) {
-      let projectInUse = false;
-      if ("shareState" in state && "locked" in state["shareState"]) {
-        projectInUse = state["shareState"]["locked"];
-      }
+      const projectLocked = osparc.study.Utils.state.getProjectLocked(state);
+      const currentUserGroupIds = osparc.study.Utils.state.getCurrentGroupIds(state);
+      const pipelineState = osparc.study.Utils.state.getPipelineState(state);
 
-      if (osparc.utils.DisabledPlugins.isSimultaneousAccessEnabled()) {
-        if (projectInUse && state["shareState"]["status"] === "OPENED") {
-          this.__showWhoIsIn(state["shareState"]["currentUserGroupids"]);
-        } else {
-          this.__showWhoIsIn(null);
-        }
-      } else {
-        this.setBlocked(projectInUse ? "IN_USE" : false);
-        if (projectInUse) {
-          this.__showBlockedCardFromStatus("IN_USE", state["shareState"]);
-        }
+      this.__showCurrentUserGroupIds(currentUserGroupIds);
+
+      this.setBlocked(projectLocked ? "IN_USE" : false);
+      if (projectLocked) {
+        this.__showBlockedCardFromStatus("IN_USE", state["shareState"]);
       }
 
-      const pipelineState = ("state" in state) ? state["state"]["value"] : undefined;
       if (pipelineState) {
-        this.__applyPipelineState(state["state"]["value"]);
+        this.__applyPipelineState(pipelineState);
       }
     },
 
     __applyDebt: function(debt) {
       this.setBlocked(debt ? "IN_DEBT" : false);
       if (debt) {
-        this.__showBlockedCardFromStatus("IN_DEBT", debt);
+        this.__showBlockedCardFromStatus("IN_DEBT");
       }
     },
 
@@ -899,73 +891,70 @@ qx.Class.define("osparc.dashboard.CardBase", {
       });
     },
 
-    __showWhoIsIn: function(whoIsIn) {
-      let users = [];
-      if (whoIsIn) {
-        // replace this once the backend returns a list of group__ids
-        const allUsers = [
-          { name: "Alice", avatar: "https://i.pravatar.cc/150?img=1" },
-          { name: "Bob", avatar: "https://i.pravatar.cc/150?img=2" },
-          { name: "Charlie", avatar: "https://i.pravatar.cc/150?img=3" },
-          { name: "Dana", avatar: "https://i.pravatar.cc/150?img=4" },
-          { name: "Eve", avatar: "https://i.pravatar.cc/150?img=5" },
-          { name: "Frank", avatar: "https://i.pravatar.cc/150?img=6" },
-        ];
-        // Random number of users between 1 and 6
-        const randomCount = Math.floor(Math.random() * 6) + 1;
-        // Shuffle the array and take the first randomCount users
-        const shuffled = allUsers.sort(() => 0.5 - Math.random());
-        users = shuffled.slice(0, randomCount);
-      }
-      if (osparc.utils.DisabledPlugins.isSimultaneousAccessEnabled() && this.getResourceType() === "study") {
-        const avatarGroup = this.getChildControl("avatar-group");
-        avatarGroup.setUsers(users);
-      }
+    __showCurrentUserGroupIds: function(currentUserGroupIds) {
+      const avatarGroup = this.getChildControl("avatar-group");
+      avatarGroup.setUserGroupIds(currentUserGroupIds);
     },
 
-    __showBlockedCardFromStatus: function(reason, moreInfo) {
+    __showBlockedCardFromStatus: function(reason, shareState) {
       switch (reason) {
         case "IN_USE":
-          this.__blockedInUse(moreInfo);
+          this.__blockedInUse(shareState);
           break;
         case "IN_DEBT":
-          this.__blockedInDebt(moreInfo);
+          this.__blockedInDebt();
           break;
       }
     },
 
-    __blockedInUse: function(lockedStatus) {
-      const status = lockedStatus["status"];
-      const userGroupIDs = lockedStatus["currentUserGroupids"];
-      let toolTip = userGroupIDs[0]
-      //  osparc.utils.Utils.firstsUp(userGroupIDs[0]["first_name"] || this.tr("A user"), userGroupIDs[0]["last_name"] || ""); // it will be replaced by "userName"
+    __blockedInUse: function(shareState) {
+      const status = shareState["status"];
+      const currentUserGroupIds = shareState["currentUserGroupids"];
+      const usersStore = osparc.store.Users.getInstance();
+      const userPromises = currentUserGroupIds.map(userGroupId => usersStore.getUser(userGroupId));
+      const usernames = [];
+      let toolTip = "";
       let image = null;
-      switch (status) {
-        case "CLOSING":
-          image = "@FontAwesome5Solid/key/";
-          toolTip += this.tr(" is closing it...");
-          break;
-        case "CLONING":
-          image = "@FontAwesome5Solid/clone/";
-          toolTip += this.tr(" is cloning it...");
-          break;
-        case "EXPORTING":
-          image = osparc.task.Export.ICON+"/";
-          toolTip += this.tr(" is exporting it...");
-          break;
-        case "OPENING":
-          image = "@FontAwesome5Solid/key/";
-          toolTip += this.tr(" is opening it...");
-          break;
-        case "OPENED":
-          image = "@FontAwesome5Solid/lock/";
-          toolTip += this.tr(" is using it.");
-          break;
-        default:
-          image = "@FontAwesome5Solid/lock/";
-          break;
-      }
-      this.__showBlockedCard(image, toolTip);
+      Promise.all(userPromises)
+        .then(usersResult => {
+          usersResult.forEach(user => {
+            usernames.push(user.getUsername());
+          });
+        })
+        .catch(error => {
+          console.error("Failed to fetch user data for avatars:", error);
+        })
+        .finally(() => {
+          switch (status) {
+            case "CLOSING":
+              image = "@FontAwesome5Solid/key/";
+              toolTip += this.tr("Closing...");
+              break;
+            case "CLONING":
+              image = "@FontAwesome5Solid/clone/";
+              toolTip += this.tr("Cloning...");
+              break;
+            case "EXPORTING":
+              image = osparc.task.Export.ICON+"/";
+              toolTip += this.tr("Exporting...");
+              break;
+            case "OPENING":
+              image = "@FontAwesome5Solid/key/";
+              toolTip += this.tr("Opening...");
+              break;
+            case "OPENED":
+              image = "@FontAwesome5Solid/lock/";
+              toolTip += this.tr("In use...");
+              break;
+            default:
+              image = "@FontAwesome5Solid/lock/";
+              break;
+          }
+          usernames.forEach(username => {
+            toolTip += "<br>" + username;
+          });
+          this.__showBlockedCard(image, toolTip);
+        });
     },
 
     __blockedInDebt: function() {

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

@@ -625,17 +625,6 @@ qx.Class.define("osparc.desktop.StudyEditor", {
           this.__reloadSnapshotsAndIterations();
         }
         this.getStudyLogger().info(null, "Pipeline started");
-        /* If no projectStateUpdated comes in 60 seconds, client must
-        check state of pipeline and update button accordingly. */
-        const timer = setTimeout(() => {
-          osparc.store.Study.getInstance().getStudyState(pipelineId);
-        }, 60000);
-        const socket = osparc.wrapper.WebSocket.getInstance();
-        socket.getSocket().once("projectStateUpdated", ({ "project_uuid": projectUuid }) => {
-          if (projectUuid === pipelineId) {
-            clearTimeout(timer);
-          }
-        });
       }
     },
 

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

@@ -23,11 +23,6 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", {
 
     osparc.utils.Utils.setIdToWidget(this, "creditsIndicatorButton");
 
-    this.set({
-      cursor: "pointer",
-      padding: [3, 8]
-    });
-
     this.getChildControl("image").set({
       width: 24,
       height: 24

services/static-webserver/client/source/class/osparc/jobs/JobsButton.js

@@ -26,9 +26,6 @@ qx.Class.define("osparc.jobs.JobsButton", {
     osparc.utils.Utils.setIdToWidget(this, "jobsButton");
 
     this.set({
-      width: 30,
-      alignX: "center",
-      cursor: "pointer",
       toolTipText: this.tr("Activity Center"),
     });
 
@@ -53,12 +50,12 @@ qx.Class.define("osparc.jobs.JobsButton", {
       switch (id) {
         case "icon": {
           control = new qx.ui.basic.Image("@FontAwesome5Solid/tasks/22");
-
           const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
             alignY: "middle"
-          }));
+          })).set({
+            paddingLeft: 5,
+          });
           logoContainer.add(control);
-
           this._add(logoContainer, {
             height: "100%"
           });

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -54,6 +54,13 @@ qx.Class.define("osparc.navigation.NavigationBar", {
     });
 
     osparc.utils.Utils.setIdToWidget(this, "navigationBar");
+
+    const socket = osparc.wrapper.WebSocket.getInstance();
+    if (socket.isConnected()) {
+      this.__listenToProjectStateUpdated();
+    } else {
+      socket.addListener("connect", () => this.__listenToProjectStateUpdated());
+    }
   },
 
   events: {
@@ -82,6 +89,15 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       minWidth: 30,
       minHeight: 30
     },
+
+    RIGHT_BUTTON_OPTS: {
+      cursor: "pointer",
+      alignX: "center",
+      alignY: "middle",
+      allowGrowX: false,
+      allowGrowY: false,
+      padding: 4,
+    },
   },
 
   members: {
@@ -119,6 +135,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       this.getChildControl("read-only-info");
 
       // right-items
+      this.getChildControl("avatar-group");
       this.getChildControl("tasks-button");
       if (osparc.product.Utils.showComputationalActivity()) {
         this.getChildControl("jobs-button");
@@ -153,7 +170,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           });
           break;
         case "right-items":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6).set({
             alignY: "middle",
             alignX: "right"
           }));
@@ -234,16 +251,31 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           this.getChildControl("center-items").add(control);
           break;
         }
+        case "avatar-group": {
+          const maxWidth = osparc.WindowSizeTracker.getInstance().isCompactVersion() ? 80 : 150;
+          control = new osparc.ui.basic.AvatarGroup(26, "right", maxWidth).set({
+            alignY: "middle",
+          });
+          this.getChildControl("right-items").add(control);
+          break;
+        }
         case "tasks-button":
-          control = new osparc.task.TasksButton();
+          control = new osparc.task.TasksButton().set({
+            visibility: "excluded",
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "jobs-button":
-          control = new osparc.jobs.JobsButton();
+          control = new osparc.jobs.JobsButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "notifications-button":
-          control = new osparc.notification.NotificationsButton();
+          control = new osparc.notification.NotificationsButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "expiration-icon": {
@@ -273,13 +305,16 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           break;
         }
         case "help":
-          control = this.__createHelpMenuBtn();
-          control.set(this.self().BUTTON_OPTIONS);
+          control = this.__createHelpMenuBtn().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           osparc.utils.Utils.setIdToWidget(control, "helpNavigationBtn");
           this.getChildControl("right-items").add(control);
           break;
         case "credits-button":
-          control = new osparc.desktop.credits.CreditsIndicatorButton();
+          control = new osparc.desktop.credits.CreditsIndicatorButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "log-in-button": {
@@ -310,6 +345,21 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       return control || this.base(arguments, id);
     },
 
+    __listenToProjectStateUpdated: function() {
+      const socket = osparc.wrapper.WebSocket.getInstance();
+      socket.on("projectStateUpdated", data => {
+        if (this.getStudy() && data["project_uuid"] === this.getStudy().getUuid()) {
+          const projectState = data["data"];
+          const currentUserGroupIds = osparc.study.Utils.state.getCurrentGroupIds(projectState);
+          // remove myself from the list of users
+          const filteredUserGroupIds = currentUserGroupIds.filter(gid => gid !== osparc.store.Groups.getInstance().getMyGroupId());
+          // show the rest of the users in the avatar group
+          const avatarGroup = this.getChildControl("avatar-group");
+          avatarGroup.setUserGroupIds(filteredUserGroupIds);
+        }
+      }, this);
+    },
+
     __createHelpMenuBtn: function() {
       const menu = new qx.ui.menu.Menu().set({
         position: "top-right",
@@ -351,7 +401,8 @@ qx.Class.define("osparc.navigation.NavigationBar", {
 
     __applyStudy: function(study) {
       const savingStudyIcon = this.getChildControl("saving-study-icon");
-      const readOnlyInfo = this.getChildControl("read-only-info")
+      const readOnlyInfo = this.getChildControl("read-only-info");
+      const avatarGroup = this.getChildControl("avatar-group");
       if (study) {
         this.getChildControl("study-title-options").setStudy(study);
         study.bind("savePending", savingStudyIcon, "visibility", {
@@ -360,9 +411,12 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         study.bind("readOnly", readOnlyInfo, "visibility", {
           converter: value => value ? "visible" : "excluded"
         });
+        avatarGroup.show();
       } else {
         savingStudyIcon.exclude();
         readOnlyInfo.exclude();
+        avatarGroup.exclude();
+        avatarGroup.setUserGroupIds([]);
       }
     },
 

services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js

@@ -25,12 +25,6 @@ qx.Class.define("osparc.notification.NotificationsButton", {
 
     osparc.utils.Utils.setIdToWidget(this, "notificationsButton");
 
-    this.set({
-      width: 30,
-      alignX: "center",
-      cursor: "pointer"
-    });
-
     this._createChildControlImpl("icon");
     this._createChildControlImpl("number");