Toolbar with Breadcrumbs, improved Start/Stop and more

services/web/client/source/class/explorer/NavigationBar.js

@@ -16,7 +16,7 @@
 ************************************************************************ */
 
 qx.Class.define("explorer.NavigationBar", {
-  extend: osparc.desktop.NavigationBar,
+  extend: osparc.navigation.NavigationBar,
 
   members: {
     buildLayout: function() {

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

@@ -594,10 +594,12 @@ qx.Class.define("osparc.component.metadata.QualityEditor", {
     __isUserOwner: function() {
       const myGid = osparc.auth.Data.getInstance().getGroupId();
       if (myGid) {
-        if (osparc.utils.Resources.isService(this.__resourceData)) {
+        if ("access_rights" in this.__resourceData) {
           return osparc.component.export.ServicePermissions.canGroupWrite(this.__resourceData["access_rights"], myGid);
         }
-        return osparc.component.export.StudyPermissions.canGroupWrite(this.__resourceData["accessRights"], myGid);
+        if ("accessRights" in this.__resourceData) {
+          return osparc.component.export.StudyPermissions.canGroupWrite(this.__resourceData["accessRights"], myGid);
+        }
       }
       return false;
     }

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

@@ -57,11 +57,7 @@ qx.Class.define("osparc.component.widget.Thumbnail", {
       });
     });
 
-    const image = this.getChildControl("image").set({
-      scale: true,
-      allowStretchX: true,
-      allowStretchY: true
-    });
+    const image = this.getChildControl("image");
 
     if (source) {
       image.setSource(source);
@@ -91,6 +87,9 @@ qx.Class.define("osparc.component.widget.Thumbnail", {
       switch (id) {
         case "image":
           control = new qx.ui.basic.Image().set({
+            scale: true,
+            allowStretchX: true,
+            allowStretchY: true,
             alignX: "center",
             alignY: "middle"
           });

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

@@ -38,14 +38,12 @@ qx.Class.define("osparc.component.workbench.SvgWidget", {
   construct: function() {
     this.base();
     this.addListenerOnce("appear", () => {
-      const randomID = Math.random().toString(36).substring(7);
       const el = this.getContentElement().getDomElement();
-      qx.bom.element.Attribute.set(el, "id", randomID);
       const svgWrapper = osparc.wrapper.Svg.getInstance();
       svgWrapper.init()
         .then(() => {
           if (this.__canvas === null) {
-            this.__canvas = svgWrapper.createEmptyCanvas(randomID);
+            this.__canvas = svgWrapper.createEmptyCanvas(el);
             this.setReady(true);
             this.fireDataEvent("SvgWidgetReady", true);
           }

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

@@ -137,6 +137,8 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       return borderStyle;
     },
 
+    TOP_OFFSET: 50 + 46,
+
     ZoomValues: [0.25, 0.4, 0.5, 0.6, 0.8, 1, 1.25, 1.5, 2, 3]
   },
 
@@ -282,7 +284,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       const maxHeight = this.getBounds().height - osparc.component.workbench.ServiceCatalog.Height;
       const posX = Math.min(winPos.x, maxLeft);
       const posY = Math.min(winPos.y, maxHeight);
-      srvCat.moveTo(posX + this.__getSidePanelWidth(), posY + 50);
+      srvCat.moveTo(posX + this.__getSidePanelWidth(), posY + this.self().TOP_OFFSET);
       srvCat.addListener("addService", e => {
         this.__addServiceFromCatalog(e.getData(), srvPos);
       }, this);
@@ -410,6 +412,14 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       return this.__selectedNodes;
     },
 
+    getSelectedNodeIDs: function() {
+      const selectedNodeIDs = [];
+      this.__selectedNodes.forEach(nodeUI => {
+        selectedNodeIDs.push(nodeUI.getNodeId());
+      });
+      return selectedNodeIDs;
+    },
+
     resetSelectedNodes: function() {
       this.__selectedNodes.forEach(node => node.removeState("selected"));
       this.__selectedNodes = [];
@@ -725,11 +735,10 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
     },
 
     __pointerEventToWorkbenchPos: function(pointerEvent, scale = false) {
-      const topOffset = 50;
       const leftOffset = this.__getSidePanelWidth();
       const inputNodesLayoutWidth = this.__inputNodesLayout.isVisible() ? this.__inputNodesLayout.getWidth() : 0;
       const x = pointerEvent.getDocumentLeft() - leftOffset - inputNodesLayoutWidth;
-      const y = pointerEvent.getDocumentTop() - topOffset;
+      const y = pointerEvent.getDocumentTop() - this.self().TOP_OFFSET;
       if (scale) {
         return this.__scaleCoordinates(x, y);
       }
@@ -1105,9 +1114,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
 
       const commandDel = new qx.ui.command.Command("Delete");
       commandDel.addListener("execute", () => {
-        const selectedNodes = this.getSelectedNodes();
-        if (selectedNodes.length === 1) {
-          this.fireDataEvent("removeNode", selectedNodes[0].getNodeId());
+        const selectedNodeIDs = this.getSelectedNodeIDs();
+        if (selectedNodeIDs.length === 1) {
+          this.fireDataEvent("removeNode", selectedNodeIDs[0]);
         }
       });
 

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

@@ -349,7 +349,13 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
       this.self().sortTemplateList(tempStudyList);
       tempStudyList.forEach(tempStudy => {
         tempStudy["resourceType"] = "template";
-        this.__templatesContainer.add(this.__createStudyItem(tempStudy));
+        const templateItem = this.__createStudyItem(tempStudy);
+        templateItem.addListener("updateQualityTemplate", e => {
+          const updatedTemplateData = e.getData();
+          updatedTemplateData["resourceType"] = "template";
+          this._resetTemplateItem(updatedTemplateData);
+        }, this);
+        this.__templatesContainer.add(templateItem);
       });
       osparc.component.filter.UIFilterController.dispatch("sideSearchFilter");
     },
@@ -370,7 +376,13 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
       this.__servicesContainer.removeAll();
       servicesList.forEach(service => {
         service["resourceType"] = "service";
-        this.__servicesContainer.add(this.__createStudyItem(service));
+        const serviceItem = this.__createStudyItem(service);
+        serviceItem.addListener("updateQualityService", e => {
+          const updatedServiceData = e.getData();
+          updatedServiceData["resourceType"] = "service";
+          this._resetServiceItem(updatedServiceData);
+        }, this);
+        this.__servicesContainer.add(serviceItem);
       });
       osparc.component.filter.UIFilterController.dispatch("sideSearchFilter");
     },
@@ -462,11 +474,7 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
 
       const permissionsButton = new qx.ui.menu.Button(this.tr("Permissions"));
       permissionsButton.addListener("execute", () => {
-        if (osparc.utils.Resources.isTemplate(studyData)) {
-          this.__openTemplatePermissions(studyData);
-        } else if (osparc.utils.Resources.isService(studyData)) {
-          this.__openServicePermissions(studyData);
-        }
+        this.__openPermissions(studyData);
       }, this);
       return permissionsButton;
     },
@@ -483,27 +491,6 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
       return classifiersButton;
     },
 
-    __openClassifiers: function(studyData) {
-      const title = this.tr("Classifiers");
-      let classifiers = null;
-      if (osparc.data.model.Study.isOwner(studyData)) {
-        classifiers = new osparc.component.metadata.ClassifiersEditor(studyData);
-        osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
-        classifiers.addListener("updateResourceClassifiers", e => {
-          if (osparc.utils.Resources.isTemplate(studyData)) {
-            const studyId = e.getData();
-            this._reloadTemplate(studyId);
-          } else if (osparc.utils.Resources.isService(studyData)) {
-            const serviceKey = e.getData();
-            this.__reloadService(serviceKey, studyData.version);
-          }
-        }, this);
-      } else {
-        classifiers = new osparc.component.metadata.ClassifiersViewer(studyData);
-      }
-      osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
-    },
-
     __getStudyServicesMenuButton: function(studyData) {
       if (osparc.utils.Resources.isService(studyData)) {
         return null;
@@ -579,6 +566,14 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
       });
     },
 
+    __openPermissions: function(studyData) {
+      if (osparc.utils.Resources.isTemplate(studyData)) {
+        this.__openTemplatePermissions(studyData);
+      } else if (osparc.utils.Resources.isService(studyData)) {
+        this.__openServicePermissions(studyData);
+      }
+    },
+
     __openServicePermissions: function(serviceData) {
       const permissionsView = new osparc.component.export.ServicePermissions(serviceData);
       const title = this.tr("Available to");
@@ -600,6 +595,27 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
       });
     },
 
+    __openClassifiers: function(studyData) {
+      const title = this.tr("Classifiers");
+      let classifiers = null;
+      if (osparc.data.model.Study.isOwner(studyData)) {
+        classifiers = new osparc.component.metadata.ClassifiersEditor(studyData);
+        osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
+        classifiers.addListener("updateResourceClassifiers", e => {
+          if (osparc.utils.Resources.isTemplate(studyData)) {
+            const studyId = e.getData();
+            this._reloadTemplate(studyId);
+          } else if (osparc.utils.Resources.isService(studyData)) {
+            const serviceKey = e.getData();
+            this.__reloadService(serviceKey, studyData.version);
+          }
+        }, this);
+      } else {
+        classifiers = new osparc.component.metadata.ClassifiersViewer(studyData);
+      }
+      osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
+    },
+
     __deleteTemplate: function(studyData) {
       const myGid = osparc.auth.Data.getInstance().getGroupId();
       const collabGids = Object.keys(studyData["accessRights"]);

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

@@ -350,7 +350,13 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         if (osparc.data.model.Study.isStudySecondary(userStudy)) {
           return;
         }
-        this.__userStudyContainer.add(this.__createStudyItem(userStudy));
+        const studyItem = this.__createStudyItem(userStudy);
+        studyItem.addListener("updateQualityStudy", e => {
+          const updatedStudyData = e.getData();
+          updatedStudyData["resourceType"] = "study";
+          this._resetStudyItem(updatedStudyData);
+        }, this);
+        this.__userStudyContainer.add(studyItem);
       });
       osparc.component.filter.UIFilterController.dispatch("sideSearchFilter");
     },
@@ -455,13 +461,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __getPermissionsMenuButton: function(studyData) {
       const permissionsButton = new qx.ui.menu.Button(this.tr("Permissions"));
       permissionsButton.addListener("execute", () => {
-        const permissionsView = new osparc.component.export.StudyPermissions(studyData);
-        const title = this.tr("Share with Collaborators and Organizations");
-        osparc.ui.window.Window.popUpInWindow(permissionsView, title, 400, 300);
-        permissionsView.addListener("updateStudy", e => {
-          const studyId = e.getData();
-          this._reloadStudy(studyId);
-        }, this);
+        this.__openPermissions(studyData);
       }, this);
       return permissionsButton;
     },
@@ -478,6 +478,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return classifiersButton;
     },
 
+    __openPermissions: function(studyData) {
+      const permissionsView = new osparc.component.export.StudyPermissions(studyData);
+      const title = this.tr("Share with Collaborators and Organizations");
+      osparc.ui.window.Window.popUpInWindow(permissionsView, title, 400, 300);
+      permissionsView.addListener("updateStudy", e => {
+        const studyId = e.getData();
+        this._reloadStudy(studyId);
+      }, this);
+    },
+
     __openClassifiers: function(studyData) {
       const title = this.tr("Classifiers");
       let classifiers = null;

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

@@ -39,7 +39,10 @@ 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));
+    const mainLayout = this._mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
+      maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING,
+      maxHeight: this.self().ITEM_HEIGHT - 2*this.self().PADDING
+    });
     this._add(mainLayout, {
       top: 0,
       right: 0,
@@ -125,7 +128,7 @@ 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, 130);
+          const image = new osparc.component.widget.Thumbnail(null, maxWidth, 124);
           control = image.getChildControl("image").set({
             anonymous: true
           });

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

@@ -129,6 +129,12 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
     }
   },
 
+  events: {
+    "updateQualityStudy": "qx.event.type.Data",
+    "updateQualityTemplate": "qx.event.type.Data",
+    "updateQualityService": "qx.event.type.Data"
+  },
+
   statics: {
     MENU_BTN_WIDTH: 25,
     SHARED_USER: "@FontAwesome5Solid/user/14",
@@ -428,6 +434,12 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
           nStars: 4,
           showScore: true
         });
+        // Stop propagation of the pointer event in case the tag is inside a button that we don't want to trigger
+        tsrRating.addListener("tap", e => {
+          e.stopPropagation();
+          this.__openQualityEditor();
+        }, this);
+        tsrRating.addListener("pointerdown", e => e.stopPropagation());
       }
     },
 
@@ -488,6 +500,25 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
       });
     },
 
+    __openQualityEditor: function() {
+      const resourceData = this.getResourceData();
+      const qualityEditor = new osparc.component.metadata.QualityEditor(resourceData);
+      const title = resourceData.name + " - " + this.tr("Quality Assessment");
+      osparc.ui.window.Window.popUpInWindow(qualityEditor, title, 650, 760);
+      qualityEditor.addListener("updateStudy", e => {
+        const updatedStudyData = e.getData();
+        this.fireDataEvent("updateQualityStudy", updatedStudyData);
+      });
+      qualityEditor.addListener("updateTemplate", e => {
+        const updatedTemplateData = e.getData();
+        this.fireDataEvent("updateQualityTemplate", updatedTemplateData);
+      });
+      qualityEditor.addListener("updateService", e => {
+        const updatedServiceData = e.getData();
+        this.fireDataEvent("updateQualityService", updatedServiceData);
+      });
+    },
+
     __filterText: function(text) {
       if (text) {
         const checks = [

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

@@ -57,6 +57,22 @@ qx.Class.define("osparc.data.model.StudyUI", {
     }
   },
 
+  statics: {
+    getSortedNodes: function(study) {
+      const slideShow = study.getUi().getSlideshow();
+      const nodes = [];
+      for (let nodeId in slideShow) {
+        const node = slideShow[nodeId];
+        nodes.push({
+          ...node,
+          nodeId
+        });
+      }
+      nodes.sort((a, b) => (a.position > b.position) ? 1 : -1);
+      return nodes;
+    }
+  },
+
   members: {
     serialize: function() {
       const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();