UI improvements

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -110,6 +110,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
         collapsedMinWidth: collapsedWidth,
         collapsedWidth: collapsedWidth
       });
+      sidePanel.getLayout().resetSeparator();
 
       const sideHeader = new qx.ui.toolbar.ToolBar();
       const titlePart = new qx.ui.toolbar.Part();

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

@@ -72,11 +72,11 @@ qx.Class.define("osparc.component.widget.Thumbnail", {
     }
 
     [
-      "changeSource",
+      "appear",
       "loaded"
     ].forEach(eventName => {
       image.addListener(eventName, e => {
-        this.__calculateMaxHeight();
+        this.recheckSize();
       }, this);
     });
   },
@@ -102,14 +102,20 @@ qx.Class.define("osparc.component.widget.Thumbnail", {
       return control || this.base(arguments, id);
     },
 
-    __calculateMaxHeight: function() {
+    recheckSize: 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 srcWidth = qx.io.ImageLoader.getWidth(source);
+        const srcHeight = qx.io.ImageLoader.getHeight(source);
+        if (srcWidth && srcHeight) {
+          const aspectRatio = srcWidth/srcHeight;
+          if (this.getBounds() && this.getBounds().width < image.getMaxWidth()) {
+            image.setMaxWidth(this.getBounds().width);
+          }
+          if (this.getBounds() && this.getBounds().height < image.getMaxHeight()) {
+            image.setMaxHeight(this.getBounds().height);
+          }
           const maxWidth = image.getMaxWidth();
           const maxHeight = image.getMaxHeight();
 

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

@@ -139,7 +139,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
 
     TOP_OFFSET: osparc.navigation.NavigationBar.HEIGHT + 46,
 
-    ZoomValues: [0.25, 0.4, 0.5, 0.6, 0.8, 1, 1.25, 1.5, 2, 3]
+    ZOOM_VALUES: [0.25, 0.4, 0.5, 0.6, 0.8, 1, 1.25, 1.5, 2, 3]
   },
 
   events: {
@@ -156,7 +156,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     },
 
     scale: {
-      check: "osparc.component.workbench.WorkbenchUI.ZoomValues",
+      check: "osparc.component.workbench.WorkbenchUI.ZOOM_VALUES",
       init: 1,
       apply: "__applyScale",
       event: "changeScale",
@@ -178,8 +178,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     __svgWidgetDrop: null,
     __tempEdgeNodeId: null,
     __tempEdgeRepr: null,
-    __pointerPosX: null,
-    __pointerPosY: null,
+    __pointerPos: null,
     __selectedItemId: null,
     __currentModel: null,
     __startHint: null,
@@ -201,40 +200,43 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       return zoomToolbar;
     },
 
-    __getZoomBtn: function(icon) {
+    __getZoomBtn: function(icon, tooltip) {
       const btn = new qx.ui.toolbar.Button(null, icon+"/18").set({
         width: ZOOM_BUTTON_SIZE,
         height: ZOOM_BUTTON_SIZE
       });
+      if (tooltip) {
+        btn.setToolTipText(tooltip);
+      }
       return btn;
     },
 
     __getZoomInButton: function() {
-      const btn = this.__getZoomBtn("@MaterialIcons/zoom_in");
+      const btn = this.__getZoomBtn("@MaterialIcons/zoom_in", this.tr("Zoom In"));
       btn.addListener("execute", () => {
         this.__zoom(true);
       }, this);
       return btn;
     },
 
     __getZoomOutButton: function() {
-      const btn = this.__getZoomBtn("@MaterialIcons/zoom_out");
+      const btn = this.__getZoomBtn("@MaterialIcons/zoom_out", this.tr("Zoom Out"));
       btn.addListener("execute", () => {
         this.__zoom(false);
       }, this);
       return btn;
     },
 
     __getZoomResetButton: function() {
-      const btn = this.__getZoomBtn("@MaterialIcons/find_replace");
+      const btn = this.__getZoomBtn("@MaterialIcons/find_replace", this.tr("Reset Zoom"));
       btn.addListener("execute", () => {
         this.setScale(1);
       }, this);
       return btn;
     },
 
     __getZoomAllButton: function() {
-      const btn = this.__getZoomBtn("@MaterialIcons/zoom_out_map");
+      const btn = this.__getZoomBtn("@MaterialIcons/zoom_out_map", this.tr("Zoom All"));
       btn.addListener("execute", () => {
         this.__zoomAll();
       }, this);
@@ -596,12 +598,8 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
         let dragNodeId = data.nodeId;
 
         if (this.__tempEdgeNodeId === dragNodeId) {
-          const winPos = this.__unscaleCoordinates(this.__pointerPosX, this.__pointerPosY);
-          const srvPos = {
-            x: this.__pointerPosX,
-            y: this.__pointerPosY
-          };
-          const srvCat = this.__createServiceCatalog(winPos, srvPos);
+          const winPos = this.__unscaleCoordinates(this.__pointerPos.x, this.__pointerPos.y);
+          const srvCat = this.__createServiceCatalog(winPos, this.__pointerPos);
           if (this.__tempEdgeIsInput === true) {
             srvCat.setContext(dragNodeId, this.getNodeUI(dragNodeId).getInputPort());
           } else {
@@ -770,8 +768,10 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       const scrollX = this.__workbenchLayoutScroll.getScrollX();
       const scrollY = this.__workbenchLayoutScroll.getScrollY();
       const scaledScroll = this.__scaleCoordinates(scrollX, scrollY);
-      this.__pointerPosX = scaledPos.x + scaledScroll.x;
-      this.__pointerPosY = scaledPos.y + scaledScroll.y;
+      this.__pointerPos = {
+        x: scaledPos.x + scaledScroll.x,
+        y: scaledPos.y + scaledScroll.y
+      };
 
       let portPos = nodeUI.getEdgePoint(port);
       if (portPos[0] === null) {
@@ -783,15 +783,15 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       let x2;
       let y2;
       if (port.isInput) {
-        x1 = this.__pointerPosX;
-        y1 = this.__pointerPosY;
+        x1 = this.__pointerPos.x;
+        y1 = this.__pointerPos.y;
         x2 = portPos[0];
         y2 = portPos[1];
       } else {
         x1 = portPos[0];
         y1 = portPos[1];
-        x2 = this.__pointerPosX;
-        y2 = this.__pointerPosY;
+        x2 = this.__pointerPos.x;
+        y2 = this.__pointerPos.y;
       }
 
       if (this.__tempEdgeRepr === null) {
@@ -807,8 +807,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       }
       this.__tempEdgeRepr = null;
       this.__tempEdgeNodeId = null;
-      this.__pointerPosX = null;
-      this.__pointerPosY = null;
+      this.__pointerPos = null;
     },
 
     __getEdgePoints: function(node1, port1, node2, port2) {
@@ -1001,13 +1000,14 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       };
     },
 
-
     __mouseWheel: function(e) {
-      this.__zoom(e.getWheelDelta() < 0);
+      this.__pointerPos = this.__pointerEventToWorkbenchPos(e, false);
+      const zoomIn = e.getWheelDelta() < 0;
+      this.__zoom(zoomIn);
     },
 
     __zoom: function(zoomIn = true) {
-      const zoomValues = this.self().ZoomValues;
+      const zoomValues = this.self().ZOOM_VALUES;
       const nextItem = () => {
         const i = zoomValues.indexOf(this.getScale());
         if (i+1<zoomValues.length) {
@@ -1028,7 +1028,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     },
 
     __zoomAll: function() {
-      const zoomValues = this.self().ZoomValues;
+      const zoomValues = this.self().ZOOM_VALUES;
       const bounds = this.__getNodesBounds();
       if (bounds === null) {
         return;
@@ -1151,12 +1151,12 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
         this.resetSelectedNodes();
       }, this);
 
-      this.__workbenchLayout.addListener("dbltap", e => {
+      this.__workbenchLayout.addListener("dbltap", pointerEvent => {
         if (this.getStudy().isReadOnly()) {
           return;
         }
-        const winPos = this.__pointerEventToWorkbenchPos(e, false);
-        const scaledPos = this.__pointerEventToWorkbenchPos(e, true);
+        const winPos = this.__pointerEventToWorkbenchPos(pointerEvent, false);
+        const scaledPos = this.__pointerEventToWorkbenchPos(pointerEvent, true);
         const srvCat = this.__createServiceCatalog(winPos, scaledPos);
         srvCat.open();
       }, this);
@@ -1177,27 +1177,27 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       return files.length === 1;
     },
 
-    __dragEnter: function(e) {
-      this.__dragging(e, true);
+    __dragEnter: function(pointerEvent) {
+      this.__dragging(pointerEvent, true);
     },
 
-    __dragOver: function(e) {
-      this.__dragging(e, true);
+    __dragOver: function(pointerEvent) {
+      this.__dragging(pointerEvent, true);
     },
 
-    __dragLeave: function(e) {
-      this.__dragging(e, false);
+    __dragLeave: function(pointerEvent) {
+      this.__dragging(pointerEvent, false);
     },
 
-    __drop: function(e) {
-      this.__dragging(e, false);
+    __drop: function(pointerEvent) {
+      this.__dragging(pointerEvent, false);
 
-      if (this.__allowDropFile(e)) {
+      if (this.__allowDropFile(pointerEvent)) {
         const pos = {
-          x: e.offsetX,
-          y: e.offsetY
+          x: pointerEvent.offsetX,
+          y: pointerEvent.offsetY
         };
-        const fileList = e.dataTransfer.files;
+        const fileList = pointerEvent.dataTransfer.files;
         if (fileList.length) {
           const data = {
             service: qx.data.marshal.Json.createModel(osparc.utils.Services.getFilePicker())

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

@@ -39,7 +39,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
 
     this._setLayout(new qx.ui.layout.Canvas());
 
-    const mainLayout = this._mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
+    const mainLayout = this._mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(this.self().V_SPACING)).set({
       maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING,
       maxHeight: this.self().ITEM_HEIGHT - 2*this.self().PADDING
     });
@@ -58,6 +58,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
     ITEM_WIDTH: 190,
     ITEM_HEIGHT: 220,
     PADDING: 10,
+    V_SPACING: 6,
     SPACING: 12,
     POS: {
       TITLE: 0,
@@ -128,11 +129,11 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
         }
         case "icon": {
           const maxWidth = this.self().ITEM_WIDTH - 2*this.self().PADDING;
-          const image = new osparc.component.widget.Thumbnail(null, maxWidth, 124);
-          control = image.getChildControl("image").set({
+          control = new osparc.component.widget.Thumbnail(null, maxWidth, 124);
+          control.getChildControl("image").set({
             anonymous: true
           });
-          this._mainLayout.addAt(image, this.self().POS.THUMBNAIL, {
+          this._mainLayout.addAt(control, this.self().POS.THUMBNAIL, {
             flex: 1
           });
           break;
@@ -159,10 +160,28 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
     },
 
     _applyIcon: function(value, old) {
-      let icon = this.getChildControl("icon");
-      icon.set({
+      const iconLayout = this.getChildControl("icon");
+      const image = iconLayout.getChildControl("image");
+      image.set({
         source: value
       });
+
+      [
+        "appear",
+        "loaded"
+      ].forEach(eventName => {
+        image.addListener(eventName, () => {
+          let maxHeight = this.self().ITEM_HEIGHT - 2*this.self().PADDING;
+          // eslint-disable-next-line no-underscore-dangle
+          this._mainLayout._getChildren().forEach(child => {
+            if (child.getSubcontrolId() !== "icon") {
+              maxHeight -= (child.getBounds().height + 6);
+            }
+          });
+          iconLayout.setMaxHeight(maxHeight);
+          iconLayout.recheckSize();
+        }, this);
+      });
     },
 
     /**

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

@@ -42,7 +42,6 @@ qx.Class.define("osparc.desktop.ControlsBar", {
   },
 
   events: {
-    "showSweeper": "qx.event.type.Event",
     "showWorkbench": "qx.event.type.Event",
     "showSettings": "qx.event.type.Event",
     "groupSelection": "qx.event.type.Event",
@@ -95,21 +94,6 @@ qx.Class.define("osparc.desktop.ControlsBar", {
       if (osparc.data.Permissions.getInstance().canDo("study.node.grouping")) {
         this.add(groupCtrls);
       }
-
-      const moreCtrls = new qx.ui.toolbar.Part();
-      osparc.data.model.Sweeper.isSweeperEnabled()
-        .then(isSweeperEnabled => {
-          if (isSweeperEnabled) {
-            const sweeperButton = this.__createShowSweeperButton();
-            moreCtrls.add(sweeperButton);
-          }
-        });
-      this.add(moreCtrls);
-    },
-
-    __createShowSweeperButton: function() {
-      const parametersButton = this.__createButton(this.tr("Sweeper"), "paw", "showSweeperButton", "showSweeper");
-      return parametersButton;
     },
 
     __createWorkbenchButton: function() {

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

@@ -47,7 +47,7 @@ qx.Class.define("osparc.desktop.SlideShowToolbar", {
     },
 
     // overriden
-    _populateGuidedNodesLayout: function() {
+    _populateNodesNavigationLayout: function() {
       const study = this.getStudy();
       if (study) {
         const slideShow = study.getUi().getSlideshow();

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

@@ -92,19 +92,19 @@ qx.Class.define("osparc.desktop.Toolbar", {
     __applyStudy: function(study) {
       if (study) {
         study.getUi().addListener("changeCurrentNodeId", () => {
-          this._populateGuidedNodesLayout();
+          this._populateNodesNavigationLayout();
         });
         this._startStopBtns.setVisibility(study.isReadOnly() ? "excluded" : "visible");
 
-        this._populateGuidedNodesLayout();
+        this._populateNodesNavigationLayout();
       }
     },
 
     _buildLayout: function() {
       throw new Error("Abstract method called!");
     },
 
-    _populateGuidedNodesLayout: function() {
+    _populateNodesNavigationLayout: function() {
       throw new Error("Abstract method called!");
     }
   }