🎨 [Frontend] Use cursor paginated storage API

services/static-webserver/client/source/class/osparc/announcement/Tracker.js

@@ -26,7 +26,7 @@ qx.Class.define("osparc.announcement.Tracker", {
   members: {
     __checkInterval: null,
 
-    checkAnnouncements: async function() {
+    checkAnnouncements: function() {
       osparc.data.Resources.get("announcements")
         .then(announcements => {
           osparc.announcement.AnnouncementUIFactory.getInstance().setAnnouncementsData((announcements && announcements.length) ? announcements : []);

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

@@ -1208,10 +1208,18 @@ qx.Class.define("osparc.data.Resources", {
             method: "GET",
             url: statics.API + "/storage/locations/{locationId}/paths?size=1000"
           },
+          getDatasetsPage: {
+            method: "GET",
+            url: statics.API + "/storage/locations/{locationId}/paths?cursor={cursor}&size=1000"
+          },
           getPaths: {
             method: "GET",
             url: statics.API + "/storage/locations/{locationId}/paths?file_filter={path}&size=1000"
           },
+          getPathsPage: {
+            method: "GET",
+            url: statics.API + "/storage/locations/{locationId}/paths?file_filter={path}&cursor={cursor}&size=1000"
+          },
           requestSize: {
             method: "POST",
             url: statics.API + "/storage/locations/0/paths/{pathId}:size"

services/static-webserver/client/source/class/osparc/file/FilesTree.js

@@ -43,7 +43,7 @@ qx.Class.define("osparc.file.FilesTree", {
     this.base(arguments, null, "label", "children");
 
     this.set({
-      openMode: "none",
+      openMode: "dbltap",
       decorator: "no-border",
       font: "text-14",
     });
@@ -244,6 +244,7 @@ qx.Class.define("osparc.file.FilesTree", {
         configureItem: item => {
           item.addListener("changeOpen", e => {
             if (e.getData() && !item.getLoaded()) {
+              item.setLoaded(true);
               const locationId = item.getLocation();
               const path = item.getPath();
               this.requestPathItems(locationId, path);

services/static-webserver/client/source/class/osparc/file/TreeFolderView.js

@@ -101,34 +101,28 @@ qx.Class.define("osparc.file.TreeFolderView", {
       folderTree.addListener("selectionChanged", () => {
         const selectedModel = folderTree.getSelectedItem();
         if (selectedModel) {
-          if (selectedModel.getPath() && !selectedModel.getLoaded()) {
-            folderTree.requestPathItems(selectedModel.getLocation(), selectedModel.getPath())
-              .then(pathModel => {
-                if (osparc.file.FilesTree.isDir(pathModel)) {
-                  folderViewer.setFolder(pathModel);
-                }
-              });
-          } else if (osparc.file.FilesTree.isDir(selectedModel)) {
+          if (osparc.file.FilesTree.isDir(selectedModel)) {
             folderViewer.setFolder(selectedModel);
           }
+          if (selectedModel.getPath() && !selectedModel.getLoaded()) {
+            selectedModel.setLoaded(true);
+            folderTree.requestPathItems(selectedModel.getLocation(), selectedModel.getPath());
+          }
         }
       }, this);
 
       folderViewer.addListener("openItemSelected", e => {
         const selectedModel = e.getData();
         if (selectedModel) {
-          if (selectedModel.getPath() && !selectedModel.getLoaded()) {
-            folderTree.requestPathItems(selectedModel.getLocation(), selectedModel.getPath())
-              .then(pathModel => {
-                folderTree.openNodeAndParents(pathModel);
-                folderTree.setSelection(new qx.data.Array([pathModel]));
-                if (osparc.file.FilesTree.isDir(pathModel)) {
-                  folderViewer.setFolder(pathModel);
-                }
-              });
-          } else if (osparc.file.FilesTree.isDir(selectedModel)) {
+          if (osparc.file.FilesTree.isDir(selectedModel)) {
             folderViewer.setFolder(selectedModel);
           }
+          folderTree.openNodeAndParents(selectedModel);
+          folderTree.setSelection(new qx.data.Array([selectedModel]));
+          if (selectedModel.getPath() && !selectedModel.getLoaded()) {
+            selectedModel.setLoaded(true);
+            folderTree.requestPathItems(selectedModel.getLocation(), selectedModel.getPath());
+          }
         }
       }, this);
 

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

@@ -35,6 +35,45 @@ qx.Class.define("osparc.store.Data", {
     "fileCopied": "qx.event.type.Data",
   },
 
+  statics: {
+    getAllItems: async function(locationId, path, cursor, allItems = []) {
+      if (allItems.length >= 10000) {
+        const msg = qx.locale.Manager.tr("Oops... more than 10.000 items to be listed here. Maybe it's time to make a folder :).");
+        osparc.FlashMessenger.logAs(msg, "WARNING");
+        return allItems;
+      }
+
+      const params = {
+        url: {
+          locationId,
+          path: path || null,
+          cursor: cursor || null,
+        }
+      };
+      let pagResp = null;
+      if (path) {
+        pagResp = await osparc.data.Resources.fetch("storagePaths", cursor ? "getPathsPage" : "getPaths", params);
+      } else {
+        pagResp = await osparc.data.Resources.fetch("storagePaths", cursor ? "getDatasetsPage" : "getDatasets", params);
+      }
+
+      let nextCursor = null;
+      if (pagResp) {
+        if (pagResp["items"]) {
+          allItems.push(...pagResp["items"]);
+        }
+        if (pagResp["next_page"]) {
+          nextCursor = pagResp["next_page"];
+        }
+      }
+
+      if (nextCursor) {
+        return this.getAllItems(locationId, path, nextCursor, allItems);
+      }
+      return allItems;
+    },
+  },
+
   members: {
     __locationsCached: null,
     __datasetsByLocationCached: null,
@@ -84,68 +123,44 @@ qx.Class.define("osparc.store.Data", {
       return null;
     },
 
-    getDatasetsByLocation: function(locationId) {
+    getDatasetsByLocation: async function(locationId) {
       const data = {
         location: locationId,
         items: []
       };
-      return new Promise((resolve, reject) => {
-        if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo("storage.datcore.read")) {
-          reject(data);
-        }
+      if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo("storage.datcore.read")) {
+        return data;
+      }
 
-        const cachedData = this.getDatasetsByLocationCached(locationId);
-        if (cachedData) {
-          resolve(cachedData);
-        } else {
-          const params = {
-            url: {
-              locationId
-            }
-          };
-          osparc.data.Resources.fetch("storagePaths", "getDatasets", params)
-            .then(pagResp => {
-              if (pagResp["items"] && pagResp["items"].length>0) {
-                data.items = pagResp["items"];
-              }
-              // Add it to cache
-              this.__datasetsByLocationCached[locationId] = data.items;
-              resolve(data);
-            })
-            .catch(err => {
-              console.error(err);
-              reject(data);
-            });
-        }
-      });
+      const cachedData = this.getDatasetsByLocationCached(locationId);
+      if (cachedData) {
+        return cachedData;
+      }
+
+      try {
+        const allItems = await this.self().getAllItems(locationId);
+        this.__datasetsByLocationCached[locationId] = allItems;
+        data["items"] = allItems;
+        return data;
+      } catch (err) {
+        console.error(err);
+        return data;
+      }
     },
 
-    getItemsByLocationAndPath: function(locationId, path) {
-      return new Promise((resolve, reject) => {
-        // Get list of file meta data
-        if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo("storage.datcore.read")) {
-          reject([]);
-        }
+    getItemsByLocationAndPath: async function(locationId, path) {
+      // Get list of file meta data
+      if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo("storage.datcore.read")) {
+        return [];
+      }
 
-        const params = {
-          url: {
-            locationId,
-            path,
-          }
-        };
-        osparc.data.Resources.fetch("storagePaths", "getPaths", params)
-          .then(pagResp => {
-            if (pagResp["items"] && pagResp["items"].length>0) {
-              resolve(pagResp["items"]);
-            } else {
-              resolve([]);
-            }
-          })
-          .catch(err => {
-            console.error(err);
-            reject([]);
-          });
-      });
+      try {
+        const allItems = await this.self().getAllItems(locationId, path);
+        return allItems;
+      } catch (err) {
+        console.error(err);
+        return [];
+      }
     },
 
     getPresignedLink: function(download = true, locationId, fileUuid, fileSize) {

services/static-webserver/client/source/class/osparc/widget/StudyDataManager.js

@@ -58,7 +58,9 @@ qx.Class.define("osparc.widget.StudyDataManager", {
       if (!title) {
         title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + qx.locale.Manager.tr(" Files");
       }
-      return osparc.ui.window.Window.popUpInWindow(studyDataManager, title, osparc.dashboard.ResourceDetails.WIDTH, osparc.dashboard.ResourceDetails.HEIGHT);
+      return osparc.ui.window.Window.popUpInWindow(studyDataManager, title, osparc.dashboard.ResourceDetails.WIDTH, osparc.dashboard.ResourceDetails.HEIGHT).set({
+        maxHeight: document.documentElement.clientHeight,
+      });
     },
   },