🎨 [Frontend] Lazy load stranger-users' metadata (ITISFoundation#7021)

Author: odeimaiz

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/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;
     },