Fix zoom/scroll workbench (ITISFoundation#2632)

Author: odeimaiz

services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js

@@ -51,8 +51,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUIPreview", {
       });
     },
 
+    // overriden
     _loadModel: function(model) {
-      this.clearAll();
+      this._clearAll();
       this.resetSelectedNodes();
       this._currentModel = model;
       if (model) {

services/web/client/source/class/osparc/component/workbench/WorkbenchUIPreview.js

@@ -15,9 +15,7 @@ qx.Class.define("osparc.dashboard.SideSearch", {
 
     this.set({
       padding: 15,
-      marginTop: 15,
-      maxWidth: 330,
-      minWidth: 220
+      marginTop: 15
     });
 
     this.__buildLayout();

services/web/client/source/class/osparc/dashboard/SideSearch.js

@@ -134,11 +134,26 @@ qx.Class.define("osparc.desktop.MainPage", {
     },
 
     __createDashboardStack: function() {
-      const nStudyItemsPerRow = 5;
-      const dashboard = this.__dashboard = new osparc.dashboard.Dashboard().set({
-        width: nStudyItemsPerRow * (osparc.dashboard.GridButtonBase.ITEM_WIDTH + osparc.dashboard.GridButtonBase.SPACING) + 8 // padding + scrollbar
+      const dashboard = this.__dashboard = new osparc.dashboard.Dashboard();
+      const minNStudyItemsPerRow = 5;
+      const itemWidth = osparc.dashboard.GridButtonBase.ITEM_WIDTH + osparc.dashboard.GridButtonBase.SPACING;
+      dashboard.setMinWidth(minNStudyItemsPerRow * itemWidth + 8);
+      const sideSearch = new osparc.dashboard.SideSearch().set({
+        maxWidth: 330,
+        minWidth: 220
       });
-      const sideSearch = new osparc.dashboard.SideSearch();
+      const fitResourceCards = () => {
+        const w = document.documentElement.clientWidth;
+        const nStudies = Math.floor((w - 2*sideSearch.getSizeHint().width - 8) / itemWidth);
+        const newWidth = nStudies * itemWidth + 8;
+        if (newWidth > dashboard.getMinWidth()) {
+          dashboard.setWidth(newWidth);
+        } else {
+          dashboard.setWidth(dashboard.getMinWidth());
+        }
+      };
+      fitResourceCards();
+      window.addEventListener("resize", () => fitResourceCards());
       dashboard.bind("selection", sideSearch, "visibility", {
         converter: value => {
           const tabIndex = dashboard.getChildren().indexOf(value[0]);

services/web/client/source/class/osparc/desktop/MainPage.js

@@ -69,10 +69,6 @@ qx.Class.define("osparc.desktop.SidePanel", {
     }
   },
 
-  events: {
-    "panelResized": "qx.event.type.Data"
-  },
-
   members: {
     __savedWidth: null,
     __savedMinWidth: null,
@@ -200,10 +196,6 @@ qx.Class.define("osparc.desktop.SidePanel", {
             }
           });
       }, this);
-
-      this.addListener("resize", e => {
-        this.fireDataEvent("panelResized", e.getData());
-      }, this);
     }
   }
 });

services/web/client/source/class/osparc/desktop/SidePanel.js

@@ -320,7 +320,13 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         alignX: "left",
         marginLeft: 14
       });
-      addNewNodeBtn.addListener("execute", () => this.__workbenchUI.openServiceCatalog());
+      addNewNodeBtn.addListener("execute", () => this.__workbenchUI.openServiceCatalog({
+        x: 50,
+        y: 50
+      }, {
+        x: 50,
+        y: 50
+      }));
       homeAndNodesTree.add(addNewNodeBtn);
 
       const nodesPage = this.__createTabPage("@FontAwesome5Solid/list", this.tr("Nodes"), homeAndNodesTree, primaryColumnBGColor);

services/web/client/source/class/osparc/desktop/WorkbenchView.js

@@ -250,12 +250,12 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       });
 
       const newGHIssueBtn = new qx.ui.menu.Button(this.tr("Issue in GitHub"));
-      newGHIssueBtn.addListener("execute", () => osparc.navigation.UserMenuButton.openGithubIssueInfoDialog, this);
+      newGHIssueBtn.addListener("execute", () => osparc.navigation.UserMenuButton.openGithubIssueInfoDialog(), this);
       menu.add(newGHIssueBtn);
 
       if (osparc.utils.Utils.isInZ43()) {
         const newFogbugzIssueBtn = new qx.ui.menu.Button(this.tr("Issue in Fogbugz"));
-        newFogbugzIssueBtn.addListener("execute", () => osparc.navigation.UserMenuButton.openFogbugzIssueInfoDialog, this);
+        newFogbugzIssueBtn.addListener("execute", () => osparc.navigation.UserMenuButton.openFogbugzIssueInfoDialog(), this);
         menu.add(newFogbugzIssueBtn);
       }
 

services/web/client/source/class/osparc/navigation/NavigationBar.js

@@ -0,0 +1,71 @@
+// node Voila.js [url_prefix] [template_uuid] [--demo]
+
+const tutorialBase = require('../tutorials/tutorialBase');
+const utils = require('../utils/utils');
+
+const args = process.argv.slice(2);
+const {
+  urlPrefix,
+  templateUuid,
+  enableDemoMode
+} = utils.parseCommandLineArgumentsTemplate(args);
+
+const anonURL = urlPrefix + templateUuid;
+const screenshotPrefix = "Voila_";
+
+
+async function runTutorial () {
+  const tutorial = new tutorialBase.TutorialBase(anonURL, screenshotPrefix, null, null, null, enableDemoMode);
+
+  try {
+    const page = await tutorial.beforeScript();
+    const studyData = await tutorial.openStudyLink();
+    const studyId = studyData["data"]["uuid"];
+    console.log("Study ID:", studyId);
+
+    const workbenchData = utils.extractWorkbenchData(studyData["data"]);
+    console.log("Workbench Data:", workbenchData);
+    const voilaIdViewer = workbenchData["nodeIds"][0];
+    await tutorial.waitForServices(workbenchData["studyId"], [voilaIdViewer]);
+
+    await tutorial.waitFor(40000, 'Some time for starting the service');
+    await utils.takeScreenshot(page, screenshotPrefix + 'service_started');
+
+    const iframeHandles = await page.$$("iframe");
+    const iframes = [];
+    for (let i=0; i<iframeHandles.length; i++) {
+      const frame = await iframeHandles[i].contentFrame();
+      iframes.push(frame);
+    }
+    // url/x/voilaIdViewer
+    const frame = iframes.find(iframe => iframe._url.includes(voilaIdViewer));
+
+    // check title says "VISUALIZATION"
+    const titleSelector = '#VISUALIZATION';
+    const element = await frame.$(titleSelector);
+    const titleText = await frame.evaluate(el => el.innerText, element);
+    console.log("titleText", titleText);
+    if (titleText !== "VISUALIZATION") {
+      throw new Error("Voila page title doesn't match the expected");
+    }
+    await utils.takeScreenshot(page, screenshotPrefix + 'iFrame1');
+  }
+  catch(err) {
+    tutorial.setTutorialFailed(true);
+    console.log('Tutorial error: ' + err);
+  }
+  finally {
+    await tutorial.logOut();
+    await tutorial.close();
+  }
+
+  if (tutorial.getTutorialFailed()) {
+    throw "Tutorial Failed";
+  }
+}
+
+runTutorial()
+  .catch(error => {
+    console.log('Puppeteer error: ' + error);
+    process.exit(1);
+  });