🎨 [Frontend] Lazy load stranger-users' metadata

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

@@ -148,7 +148,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return false;
     },
 
-    populateShareIcon: async function(shareIcon, accessRights) {
+    populateShareIcon: function(shareIcon, accessRights) {
       const gids = Object.keys(accessRights).map(key => parseInt(key));
 
       const groupsStore = osparc.store.Groups.getInstance();
@@ -169,6 +169,17 @@ qx.Class.define("osparc.dashboard.CardBase", {
       }
 
       // Tooltip
+      const canIWrite = osparc.data.model.Study.canIWrite(accessRights);
+      const myGroupId = groupsStore.getMyGroupId();
+      if (gids.length === 0 || (gids.length === 1 && gids[0] === myGroupId)) {
+        if (canIWrite) {
+          shareIcon.set({
+            toolTipText: qx.locale.Manager.tr("Share")
+          });
+        }
+        return;
+      }
+
       const sharedGrps = [];
       const groups = [];
       groups.push(groupEveryone);
@@ -181,43 +192,44 @@ qx.Class.define("osparc.dashboard.CardBase", {
           gids.splice(idx, 1);
         }
       });
-      // once the groups were removed, the remaining group ids are users' primary groups ids
-      const usersStore = osparc.store.Users.getInstance();
-      const myGroupId = groupsStore.getMyGroupId();
-      for (let i=0; i<gids.length; i++) {
-        const gid = gids[i];
-        if (myGroupId !== gid) {
-          const user = await usersStore.getUser(gid);
-          if (user) {
-            sharedGrps.push(user);
+
+      const hint = new osparc.ui.hint.Hint(shareIcon);
+      shareIcon.addListener("mouseover", async () => {
+        hint.show();
+
+        // lazy load tooltip, this can be an expensive call
+
+        // once the groups were removed, the remaining group ids are users' primary groups ids
+        const usersStore = osparc.store.Users.getInstance();
+        for (let i=0; i<gids.length; i++) {
+          const gid = gids[i];
+          if (myGroupId !== gid) {
+            const user = await usersStore.getUser(gid);
+            if (user) {
+              sharedGrps.push(user);
+            }
           }
         }
-      }
 
-      const canIWrite = osparc.data.model.Study.canIWrite(accessRights);
-      if (sharedGrps.length === 0) {
-        if (canIWrite) {
-          shareIcon.set({
-            toolTipText: qx.locale.Manager.tr("Share")
-          });
-        }
-        return;
-      }
-      const sharedGrpLabels = [];
-      const maxItems = 6;
-      for (let i=0; i<sharedGrps.length; i++) {
-        if (i > maxItems) {
-          sharedGrpLabels.push("...");
-          break;
-        }
-        const sharedGrpLabel = sharedGrps[i].getLabel();
-        if (!sharedGrpLabels.includes(sharedGrpLabel)) {
-          sharedGrpLabels.push(sharedGrpLabel);
+        if (hint.getText() === "") {
+          const sharedGrpLabels = [];
+          const maxItems = 6;
+          for (let i=0; i<sharedGrps.length; i++) {
+            if (i > maxItems) {
+              sharedGrpLabels.push("...");
+              break;
+            }
+            const sharedGrpLabel = sharedGrps[i].getLabel();
+            if (!sharedGrpLabels.includes(sharedGrpLabel)) {
+              sharedGrpLabels.push(sharedGrpLabel);
+            }
+          }
+          const hintText = sharedGrpLabels.join("<br>");
+          if (hintText) {
+            hint.setText(hintText);
+          }
         }
-      }
-      const hintText = sharedGrpLabels.join("<br>");
-      const hint = new osparc.ui.hint.Hint(shareIcon, hintText);
-      shareIcon.addListener("mouseover", () => hint.show(), this);
+      }, this);
       shareIcon.addListener("mouseout", () => hint.exclude(), this);
     },
   },

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

@@ -208,13 +208,15 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
 
       const myGroupId = osparc.auth.Data.getInstance().getGroupId();
       const membersList = [];
-      const potentialCollaborators = osparc.store.Groups.getInstance().getPotentialCollaborators(true);
       const canIWrite = wallet.getMyAccessRights()["write"];
-      wallet.getAccessRights().forEach(accessRights => {
+      const accessRightss = wallet.getAccessRights();
+      const usersStore = osparc.store.Users.getInstance();
+      for (let i=0; i<Object.keys(accessRightss).length; i++) {
+        const accessRights = accessRightss[i];
         const gid = parseInt(accessRights["gid"]);
-        if (Object.prototype.hasOwnProperty.call(potentialCollaborators, gid)) {
-          // only users or groupMe
-          const collab = potentialCollaborators[gid];
+        // only users or groupMe
+        const collab = await usersStore.getUser(gid);
+        if (collab) {
           const collaborator = {};
           collaborator["userId"] = gid === myGroupId ? osparc.auth.Data.getInstance().getUserId() : collab.getUserId();
           collaborator["groupId"] = collab.getGroupId();
@@ -250,7 +252,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
           collaborator["showOptions"] = Boolean(options.length);
           membersList.push(collaborator);
         }
-      });
+      }
       membersList.sort(this.self().sortWalletMembers);
       membersList.forEach(member => membersModel.append(qx.data.marshal.Json.createModel(member)));
     },

services/static-webserver/client/source/class/osparc/filter/OrganizationsAndMembers.js

@@ -59,18 +59,6 @@ qx.Class.define("osparc.filter.OrganizationsAndMembers", {
       return selectedGIDs;
     },
 
-    reloadVisibleCollaborators: function(collaboratorsToBeRemoved = null) {
-      if (collaboratorsToBeRemoved) {
-        this.__collaboratorsToBeRemoved = collaboratorsToBeRemoved.map(collaboratorToBeRemoved => parseInt(collaboratorToBeRemoved));
-      }
-
-      osparc.store.Groups.getInstance().getPotentialCollaborators()
-        .then(potentialCollaborators => {
-          this.__visibleCollaborators = potentialCollaborators;
-          this.__addOrgsAndMembers();
-        });
-    },
-
     __addOrgsAndMembers: function() {
       this.reset();
 

services/static-webserver/client/source/class/osparc/form/tag/TagItem.js

@@ -14,6 +14,9 @@ qx.Class.define("osparc.form.tag.TagItem", {
   construct: function() {
     this.base(arguments);
     this._setLayout(new qx.ui.layout.HBox(5));
+    this.set({
+      alignY: "middle",
+    });
     this.__validationManager = new qx.ui.form.validation.Manager();
   },
 
@@ -94,25 +97,26 @@ qx.Class.define("osparc.form.tag.TagItem", {
       let control;
       switch (id) {
         case "tag":
-          control = new osparc.ui.basic.Tag();
+          control = new osparc.ui.basic.Tag().set({
+            alignY: "middle",
+          });
           this.bind("name", control, "value");
           this.bind("color", control, "color");
           break;
         case "description":
           control = new qx.ui.basic.Label().set({
             rich: true,
             allowGrowX: true,
+            alignY: "middle",
           });
           this.bind("description", control, "value");
           break;
         case "shared-icon":
           control = new qx.ui.basic.Image().set({
             minWidth: 30,
             alignY: "middle",
-            cursor: "pointer",
           });
-          osparc.dashboard.CardBase.populateShareIcon(control, this.getAccessRights())
-          control.addListener("tap", () => this.__openAccessRights(), this);
+          osparc.dashboard.CardBase.populateShareIcon(control, this.getAccessRights());
           break;
         case "name-input":
           control = new qx.ui.form.TextField().set({
@@ -202,7 +206,6 @@ qx.Class.define("osparc.form.tag.TagItem", {
       this._add(this.getChildControl("description"), {
         flex: 1
       });
-      this._add(this.getChildControl("shared-icon"));
       this._add(this.__tagItemButtons());
       this.resetBackgroundColor();
     },
@@ -228,28 +231,40 @@ qx.Class.define("osparc.form.tag.TagItem", {
       const canIWrite = osparc.share.CollaboratorsTag.canIWrite(this.getMyAccessRights());
       const canIDelete = osparc.share.CollaboratorsTag.canIDelete(this.getMyAccessRights());
 
-      const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+      const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
+
+      const sharedIcon = this.getChildControl("shared-icon");
+      sharedIcon.set({
+        cursor: canIWrite ? "pointer" : null,
+      });
+      if (canIWrite) {
+        sharedIcon.addListener("tap", () => this.__openAccessRights(), this);
+      }
+      buttonContainer.add(sharedIcon);
+
       const editButton = new qx.ui.form.Button().set({
         icon: "@FontAwesome5Solid/pencil-alt/12",
         toolTipText: this.tr("Edit"),
         enabled: canIWrite,
       });
+      buttonContainer.add(editButton);
+      editButton.addListener("execute", () => this.setMode(this.self().modes.EDIT), this);
+
       const deleteButton = new osparc.ui.form.FetchButton().set({
         appearance: "danger-button",
         icon: "@FontAwesome5Solid/trash/12",
         toolTipText: this.tr("Delete"),
         enabled: canIDelete,
       });
-      buttonContainer.add(editButton);
       buttonContainer.add(deleteButton);
-      editButton.addListener("execute", () => this.setMode(this.self().modes.EDIT), this);
       deleteButton.addListener("execute", () => {
         deleteButton.setFetching(true);
         osparc.store.Tags.getInstance().deleteTag(this.getId())
           .then(() => this.fireEvent("deleteTag"))
           .catch(console.error)
           .finally(() => deleteButton.setFetching(false));
       }, this);
+
       return buttonContainer;
     },
     /**

services/static-webserver/client/source/class/osparc/share/AddCollaborators.js

@@ -51,6 +51,10 @@ qx.Class.define("osparc.share.AddCollaborators", {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "intro-text":
+          control = new qx.ui.basic.Label();
+          this._addAt(control, 0);
+          break;
         case "buttons-layout":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox());
           this._add(control);

services/static-webserver/client/source/class/osparc/share/Collaborators.js

@@ -392,7 +392,7 @@ qx.Class.define("osparc.share.Collaborators", {
       return null;
     },
 
-    _reloadCollaboratorsList: function() {
+    _reloadCollaboratorsList: async function() {
       // reload "Share with..." list
       if (this.__addCollaborators) {
         const serializedDataCopy = osparc.utils.Utils.deepCloneObject(this._serializedDataCopy);
@@ -412,10 +412,17 @@ qx.Class.define("osparc.share.Collaborators", {
       const accessRights = this._serializedDataCopy["accessRights"];
       const collaboratorsList = [];
       const showOptions = this.__canIChangePermissions();
-      const allGroupsAndUsers = groupsStore.getAllGroupsAndUsers();
-      Object.keys(accessRights).forEach(gid => {
-        if (gid in allGroupsAndUsers) {
-          const collab = allGroupsAndUsers[gid];
+      const allGroups = groupsStore.getAllGroups();
+      const usersStore = osparc.store.Users.getInstance();
+      for (let i=0; i<Object.keys(accessRights).length; i++) {
+        const gid = parseInt(Object.keys(accessRights)[i]);
+        let collab = null;
+        if (gid in allGroups) {
+          collab = allGroups[gid];
+        } else {
+          collab = await usersStore.getUser(gid);
+        }
+        if (collab) {
           // Do not override collaborator object
           const collaborator = {
             "gid": collab.getGroupId(),
@@ -436,7 +443,7 @@ qx.Class.define("osparc.share.Collaborators", {
           collaborator["resourceType"] = this._resourceType;
           collaboratorsList.push(collaborator);
         }
-      });
+      }
       collaboratorsList.sort(this.self().sortStudyOrServiceCollabs);
       collaboratorsList.forEach(c => this.__collaboratorsModel.append(qx.data.marshal.Json.createModel(c)));
     },

services/static-webserver/client/source/class/osparc/store/Groups.js

@@ -131,7 +131,7 @@ qx.Class.define("osparc.store.Groups", {
       })
     },
 
-    getAllGroupsAndUsers: function() {
+    getAllGroups: function() {
       const allGroupsAndUsers = {};
 
       const groupEveryone = this.getEveryoneGroup();
@@ -147,11 +147,6 @@ qx.Class.define("osparc.store.Groups", {
         allGroupsAndUsers[organization.getGroupId()] = organization;
       });
 
-      const users = osparc.store.Users.getInstance().getUsers();
-      users.forEach(user => {
-        allGroupsAndUsers[user.getGroupId()] = user;
-      });
-
       return allGroupsAndUsers;
     },