UI/UX: Thumbnail and loading iframe

services/web/client/source/class/osparc/component/metadata/StudyDetails.js

@@ -24,17 +24,17 @@ qx.Class.define("osparc.component.metadata.StudyDetails", {
 
   /**
     * @param studyData {Object|osparc.data.model.Study} studyData (metadata)
-    * @param maxHeight {Integer} Max Height of the thumbnail
+    * @param widgetWidth {Integer} widget width, needed for scaling the thumbnail
     */
-  construct: function(studyData, maxHeight) {
+  construct: function(studyData, widgetWidth) {
     this.base(arguments);
     this._setLayout(new qx.ui.layout.VBox(10));
 
     this.set({
       study: (studyData instanceof osparc.data.model.Study) ? studyData : new osparc.data.model.Study(studyData, false)
     });
 
-    this.__populateLayout(maxHeight);
+    this.__populateLayout(widgetWidth);
   },
 
   properties: {
@@ -45,29 +45,26 @@ qx.Class.define("osparc.component.metadata.StudyDetails", {
   },
 
   members: {
-    __populateLayout: function(maxHeight) {
+    __populateLayout: function(widgetWidth) {
       const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(8));
       const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
       vBox.add(this.__createTitle());
       vBox.add(this.__createExtraInfo());
       hBox.add(vBox);
-      hBox.add(this.__createThumbnail(maxHeight), {
+      hBox.add(this.__createThumbnail(widgetWidth), {
         flex: 1
       });
       this._add(hBox);
       this._add(this.__createDescription());
     },
 
-    __createThumbnail: function(maxHeight) {
-      const image = new qx.ui.basic.Image().set({
-        scale: true,
-        allowStretchX: true,
-        allowStretchY: true,
-        maxHeight: maxHeight ? parseInt(maxHeight) : 200
-      });
-
-      this.getStudy().bind("thumbnail", image, "source");
-      this.getStudy().bind("thumbnail", image, "visibility", {
+    __createThumbnail: function(widgetWidth) {
+      const maxWidth = widgetWidth ? (widgetWidth - 220) : 200;
+      const maxHeight = 200;
+      const image = new osparc.component.widget.Thumbnail(null, maxWidth, maxHeight);
+      const img = image.getChildControl("image");
+      this.getStudy().bind("thumbnail", img, "source");
+      this.getStudy().bind("thumbnail", img, "visibility", {
         converter: thumbnail => {
           if (thumbnail) {
             return "visible";

services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js

@@ -28,8 +28,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
   /**
     * @param study {Object|osparc.data.model.Study} Study (metadata)
     * @param isTemplate {Boolean} Weather the study is template or not
+    * @param winWidth {Number} Width for the window, needed for stretching the thumbnail
     */
-  construct: function(study, isTemplate) {
+  construct: function(study, isTemplate, winWidth) {
     this.base(arguments);
     this._setLayout(new qx.ui.layout.Grow());
 
@@ -38,7 +39,7 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
     this.__model = qx.data.marshal.Json.createModel(study);
 
     this.__stack = new qx.ui.container.Stack();
-    this.__displayView = this.__createDisplayView(study);
+    this.__displayView = this.__createDisplayView(study, winWidth);
     this.__editView = this.__createEditView();
     this.__stack.add(this.__displayView);
     this.__stack.add(this.__editView);
@@ -73,12 +74,10 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
     __fields: null,
     __selectedTags: null,
 
-    __createDisplayView: function(study) {
+    __createDisplayView: function(study, winWidth) {
       const displayView = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
       displayView.add(this.__createButtons());
-      displayView.add(new osparc.component.metadata.StudyDetails(study), {
-        flex: 1
-      });
+      displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth));
       return displayView;
     },
 

services/web/client/source/class/osparc/component/metadata/StudyDetailsWindow.js

@@ -41,8 +41,7 @@ qx.Class.define("osparc.component.metadata.StudyDetailsWindow", {
       height: windowHeight
     });
 
-    const thumbnailWidth = (windowWidth - 250)/1.67;
-    const studyDetails = new osparc.component.metadata.StudyDetails(study, thumbnailWidth);
+    const studyDetails = new osparc.component.metadata.StudyDetails(study, windowWidth);
     const scroll = new qx.ui.container.Scroll().set({
       height: windowHeight
     });

services/web/client/source/class/osparc/component/metadata/StudyInfo.js

@@ -39,11 +39,8 @@ qx.Class.define("osparc.component.metadata.StudyInfo", {
     this.__study = study;
 
     this._add(this.__createExpandButton());
-    const windowWidth = 500;
-    const thumbnailWidth = (windowWidth - 250)/1.67;
-    this._add(new osparc.component.metadata.StudyDetails(study, thumbnailWidth), {
-      flex: 1
-    });
+    const windowWidth = 400;
+    this._add(new osparc.component.metadata.StudyDetails(study, windowWidth));
   },
 
   members: {

services/web/client/source/class/osparc/component/widget/Thumbnail.js

@@ -0,0 +1,143 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Widget that shows an image well centered and scaled.
+ *  ___________________________________
+ * |     x     |flex Spacer|     x     |
+ * |flex Spacer|   Image   |flex Spacer|
+ * |_____x_____|flex Spacer|_____x_____|
+ */
+qx.Class.define("osparc.component.widget.Thumbnail", {
+  extend: qx.ui.core.Widget,
+
+  /**
+   * @param {String} source Source of the Image
+   * @param {Number} maxWidth Maximum Width
+   * @param {Number} maxHeight Maximum Height
+   */
+  construct: function(source, maxWidth, maxHeight) {
+    this.base(arguments);
+
+    const layout = new qx.ui.layout.Grid();
+    layout.setRowFlex(0, 1);
+    layout.setRowFlex(2, 1);
+    layout.setColumnFlex(0, 1);
+    layout.setColumnFlex(2, 1);
+    this._setLayout(layout);
+
+    [
+      [0, 0],
+      [0, 1],
+      [0, 2],
+      [1, 0],
+      [1, 2],
+      [2, 0],
+      [2, 1],
+      [2, 2]
+    ].forEach(quad => {
+      const empty = new qx.ui.core.Spacer();
+      this._add(empty, {
+        row: quad[0],
+        column: quad[1]
+      });
+    });
+
+    const image = this.getChildControl("image").set({
+      scale: true,
+      allowStretchX: true,
+      allowStretchY: true
+    });
+
+    if (source) {
+      image.setSource(source);
+    }
+
+    if (maxWidth) {
+      image.setMaxWidth(maxWidth);
+    }
+
+    if (maxHeight) {
+      image.setMaxHeight(maxHeight);
+    }
+
+    [
+      "changeSource",
+      "loaded"
+    ].forEach(eventName => {
+      image.addListener(eventName, e => {
+        this.__calculateMaxHeight();
+      }, this);
+    });
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "image":
+          control = new qx.ui.basic.Image();
+          this._add(control, {
+            row: 1,
+            column: 1
+          });
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __calculateMaxHeight: function() {
+      const image = this.getChildControl("image");
+      const source = image.getSource();
+      if (source) {
+        const width = qx.io.ImageLoader.getWidth(source);
+        const height = qx.io.ImageLoader.getHeight(source);
+        if (width && height) {
+          const aspectRatio = width/height;
+          const maxWidth = image.getMaxWidth();
+          const maxHeight = image.getMaxHeight();
+
+          if (maxWidth && maxHeight) {
+            const newMaxHeight = maxWidth/aspectRatio;
+            if (newMaxHeight < maxHeight) {
+              image.setMaxHeight(parseInt(newMaxHeight));
+              return;
+            }
+            const newMaxWidth = maxHeight*aspectRatio;
+            if (newMaxWidth < maxWidth) {
+              image.setMaxWidth(parseInt(newMaxWidth));
+              return;
+            }
+            return;
+          }
+
+          if (maxWidth) {
+            const newMaxHeight = maxWidth/aspectRatio;
+            image.setMaxHeight(parseInt(newMaxHeight));
+            return;
+          }
+
+          if (maxHeight) {
+            const newMaxWidth = maxHeight*aspectRatio;
+            image.setMaxWidth(parseInt(newMaxWidth));
+            return;
+          }
+        }
+      }
+    }
+  }
+});

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

@@ -606,16 +606,16 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     },
 
     __getSidePanelWidth: function() {
-      const sidePanelWidth = window.screen.width - this.getInnerSize().width;
+      const sidePanelWidth = window.innerWidth - this.getInnerSize().width;
       return sidePanelWidth;
     },
 
     __getPointEventPosition: function(pointerEvent) {
-      const navBarHeight = 50;
-      const sidePanelWidth = this.__getSidePanelWidth();
+      const topOffset = 50;
+      const leftOffset = this.__getSidePanelWidth();
       const inputNodesLayoutWidth = this.__inputNodesLayout.isVisible() ? this.__inputNodesLayout.getWidth() : 0;
-      const x = pointerEvent.getDocumentLeft() - sidePanelWidth - inputNodesLayoutWidth;
-      const y = pointerEvent.getDocumentTop() - navBarHeight;
+      const x = pointerEvent.getDocumentLeft() - leftOffset - inputNodesLayoutWidth;
+      const y = pointerEvent.getDocumentTop() - topOffset;
       return [x, y];
     },
 

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

@@ -495,7 +495,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __getMoreInfoMenuButton: function(studyData, isTemplate) {
       const moreInfoButton = new qx.ui.menu.Button(this.tr("More Info"));
       moreInfoButton.addListener("execute", () => {
-        const studyDetailsEditor = this.__createStudyDetailsEditor(studyData, isTemplate);
+        const winWidth = 400;
+        const studyDetailsEditor = this.__createStudyDetailsEditor(studyData, isTemplate, winWidth);
         const win = new qx.ui.window.Window(this.tr("Study Details Editor")).set({
           autoDestroy: true,
           layout: new qx.ui.layout.VBox(),
@@ -504,7 +505,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           showMaximize: false,
           resizable: true,
           contentPadding: 10,
-          width: 400,
+          width: winWidth,
           height: 400,
           modal: true
         });
@@ -612,8 +613,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
     },
 
-    __createStudyDetailsEditor: function(studyData, isTemplate) {
-      const studyDetails = new osparc.component.metadata.StudyDetailsEditor(studyData, isTemplate);
+    __createStudyDetailsEditor: function(studyData, isTemplate, winWidth) {
+      const studyDetails = new osparc.component.metadata.StudyDetailsEditor(studyData, isTemplate, winWidth);
       studyDetails.addListener("closed", () => this.__itemSelected(null), this);
       studyDetails.addListener("updatedStudy", () => this.reloadUserStudies(), this);
       studyDetails.addListener("updatedTemplate", () => this.reloadTemplateStudies(), this);

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

@@ -131,29 +131,12 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
           this._mainLayout.addAt(control, 3);
           break;
         case "icon": {
-          control = new qx.ui.basic.Image().set({
-            anonymous: true,
-            scale: true,
-            allowStretchX: true,
-            allowStretchY: true,
-            alignX: "center",
-            alignY: "middle",
-            allowGrowX: true,
-            allowGrowY: true
-          });
-          const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
+          const maxWidth = this.self().ITEM_WIDTH - 2*this.self().PADDING;
+          const image = new osparc.component.widget.Thumbnail(null, maxWidth, 130);
+          control = image.getChildControl("image").set({
             anonymous: true
           });
-          iconContainer.add(new qx.ui.core.Spacer(), {
-            flex: 2
-          });
-          iconContainer.add(control, {
-            flex: 1
-          });
-          iconContainer.add(new qx.ui.core.Spacer(), {
-            flex: 2
-          });
-          this._mainLayout.addAt(iconContainer, 4, {
+          this._mainLayout.addAt(image, 4, {
             flex: 1
           });
           break;

services/web/client/source/class/osparc/data/model/Node.js

@@ -763,8 +763,27 @@ qx.Class.define("osparc.data.model.Node", {
       return true;
     },
 
+    __getLoadingPageHeader: function() {
+      const status = this.getInteractiveStatus();
+      const label = this.getLabel();
+      if (status) {
+        const sta = status.charAt(0).toUpperCase() + status.slice(1);
+        const header = sta + " " + label;
+        return header;
+      }
+      return this.tr("Starting ") + label;
+    },
+
     __initLoadingIPage: function() {
-      const loadingPage = new osparc.ui.message.Loading(this.tr("Starting Service"), [], true);
+      const loadingPage = new osparc.ui.message.Loading(this.__getLoadingPageHeader(), [], true);
+      [
+        "changeLabel",
+        "changeInteractiveStatus"
+      ].forEach(event => {
+        this.addListener(event, e => {
+          loadingPage.setHeader(this.__getLoadingPageHeader());
+        }, this);
+      });
       this.setLoadingPage(loadingPage);
     },