🎨 [Frontend] Enh ViP Market: Display bundled models in thumbnail list

services/static-webserver/client/source/class/osparc/editor/ThumbnailSuggestions.js

@@ -209,15 +209,18 @@ qx.Class.define("osparc.editor.ThumbnailSuggestions", {
       this.setSuggestions(this.__thumbnails);
     },
 
-    thumbnailTapped: function(thumbnail) {
+    __thumbnailTapped: function(thumbnail) {
+      // reset decoration
+      const unselectedBorderColor = qx.theme.manager.Color.getInstance().resolve("text");
+      const unselectedBGColor = qx.theme.manager.Color.getInstance().resolve("fab-background");
       this.getChildren().forEach(thumbnailImg => {
-        osparc.utils.Utils.updateBorderColor(thumbnailImg, qx.theme.manager.Color.getInstance().resolve("box-shadow"));
-        osparc.utils.Utils.addBackground(thumbnailImg, qx.theme.manager.Color.getInstance().resolve("fab-background"));
+        osparc.utils.Utils.updateBorderColor(thumbnailImg, unselectedBorderColor);
+        osparc.utils.Utils.addBackground(thumbnailImg, unselectedBGColor);
       });
-      const color = qx.theme.manager.Color.getInstance().resolve("background-selected-dark");
-      const bgColor = qx.theme.manager.Color.getInstance().resolve("background-selected");
-      osparc.utils.Utils.updateBorderColor(thumbnail, color);
-      osparc.utils.Utils.addBackground(thumbnail, bgColor);
+      const selectedBorderColor = qx.theme.manager.Color.getInstance().resolve("strong-main");
+      const selectedBGColor = qx.theme.manager.Color.getInstance().resolve("background-selected");
+      osparc.utils.Utils.updateBorderColor(thumbnail, selectedBorderColor);
+      osparc.utils.Utils.addBackground(thumbnail, selectedBGColor);
       this.fireDataEvent("thumbnailTapped", {
         type: thumbnail.thumbnailType || "templateThumbnail",
         source: thumbnail.thumbnailFileUrl || thumbnail.getSource()
@@ -238,9 +241,7 @@ qx.Class.define("osparc.editor.ThumbnailSuggestions", {
         thumbnail.thumbnailFileUrl = suggestion.fileUrl || suggestion;
         thumbnail.addListener("mouseover", () => thumbnail.set({decorator: "thumbnail-selected"}), this);
         thumbnail.addListener("mouseout", () => thumbnail.set({decorator: "thumbnail"}), this);
-        thumbnail.addListener("tap", () => {
-          this.thumbnailTapped(thumbnail);
-        }, this);
+        thumbnail.addListener("tap", () => this.__thumbnailTapped(thumbnail), this);
         this.add(thumbnail);
       });
     }

services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js

@@ -21,7 +21,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
   construct: function() {
     this.base(arguments);
 
-    const layout = new qx.ui.layout.VBox(10);
+    const layout = new qx.ui.layout.VBox(15);
     this._setLayout(layout);
 
     this.__populateLayout();
@@ -48,7 +48,25 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
     },
   },
 
+  statics: {
+    createThumbnail: function(source, size) {
+      return new qx.ui.basic.Image().set({
+        source: source,
+        alignY: "middle",
+        scale: true,
+        allowGrowX: true,
+        allowGrowY: true,
+        allowShrinkX: true,
+        allowShrinkY: true,
+        maxWidth: size,
+        maxHeight: size,
+      });
+    },
+  },
+
   members: {
+    __selectedModelLayout: null,
+
     __populateLayout: function() {
       this._removeAll();
 
@@ -71,43 +89,56 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
     },
 
     __addModelsInfo: function() {
-      const modelLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(16));
+      const modelLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6));
+
+      this.__selectedModelLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6));
+      modelLayout.add(this.__selectedModelLayout);
 
       const anatomicalModelsData = this.getAnatomicalModelsData();
       const modelsInfo = anatomicalModelsData["licensedResources"];
       if (modelsInfo.length > 1) {
-        const sBox = new qx.ui.form.SelectBox().set({
-          minWidth: 200,
-          allowGrowX: false,
-        });
-        modelsInfo.forEach(modelInfo => {
-          const sbItem = new qx.ui.form.ListItem(modelInfo["source"]["features"]["name"]);
-          sbItem.modelId = modelInfo["source"]["id"];
-          sBox.add(sbItem);
+        const modelSelectionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4));
+        const titleLabel = new qx.ui.basic.Label(this.tr("This bundle contains:"));
+        modelSelectionLayout.add(titleLabel);
+        const thumbnailsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2));
+        modelSelectionLayout.add(thumbnailsLayout);
+        const thumbnailTapped = idx => {
+          this.__populateSelectedModelInfo(idx);
+          const selectedBorderColor = qx.theme.manager.Color.getInstance().resolve("strong-main");
+          const unselectedBorderColor = "transparent";
+          thumbnailsLayout.getChildren().forEach((thumbnail, index) => {
+            osparc.utils.Utils.updateBorderColor(thumbnail, index === idx ? selectedBorderColor : unselectedBorderColor);
+          });
+        }
+        modelsInfo.forEach((modelInfo, idx) => {
+          const miniThumbnail = this.self().createThumbnail(modelInfo["source"]["thumbnail"], 32);
+          miniThumbnail.set({
+            toolTipText: osparc.store.LicensedItems.licensedResourceNameAndVersion(modelInfo),
+          });
+          osparc.utils.Utils.addBorder(miniThumbnail);
+          miniThumbnail.addListener("tap", () => thumbnailTapped(idx));
+          thumbnailsLayout.add(miniThumbnail);
         });
-        this._add(sBox);
-        sBox.addListener("changeSelection", e => {
-          const selection = e.getData();
-          if (selection.length) {
-            const idxFound = modelsInfo.findIndex(mdlInfo => mdlInfo["source"]["id"] === selection[0].modelId)
-            this.__populateModelInfo(modelLayout, anatomicalModelsData, idxFound);
-          }
-        }, this);
-        this.__populateModelInfo(modelLayout, anatomicalModelsData, 0);
+        modelLayout.add(modelSelectionLayout);
+        thumbnailTapped(0);
+
+        this.__populateSelectedModelInfo();
       } else {
-        this.__populateModelInfo(modelLayout, anatomicalModelsData, 0);
+        this.__populateSelectedModelInfo();
       }
 
       this._add(modelLayout);
     },
 
-    __populateModelInfo: function(modelLayout, anatomicalModelsData, selectedIdx = 0) {
-      modelLayout.removeAll();
+    __populateSelectedModelInfo: function(selectedIdx = 0) {
+      this.__selectedModelLayout.removeAll();
 
-      const anatomicalModel = anatomicalModelsData["licensedResources"][selectedIdx]["source"];
-      const topGrid = new qx.ui.layout.Grid(8, 8);
+      const anatomicalModelsData = this.getAnatomicalModelsData();
+
+      const topGrid = new qx.ui.layout.Grid(8, 6);
       topGrid.setColumnFlex(0, 1);
-      const topLayout = new qx.ui.container.Composite(topGrid);
+      const headerLayout = new qx.ui.container.Composite(topGrid);
+      const anatomicalModel = anatomicalModelsData["licensedResources"][selectedIdx]["source"];
       let description = anatomicalModel["description"] || "";
       description = description.replace(/SPEAG/g, " "); // remove SPEAG substring
       const delimiter = " - ";
@@ -120,7 +151,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
           allowGrowX: true,
           allowGrowY: true,
         });
-        topLayout.add(titleLabel, {
+        headerLayout.add(titleLabel, {
           column: 0,
           row: 0,
         });
@@ -135,7 +166,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
           allowGrowX: true,
           allowGrowY: true,
         });
-        topLayout.add(subtitleLabel, {
+        headerLayout.add(subtitleLabel, {
           column: 0,
           row: 1,
         });
@@ -166,27 +197,17 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
           decorator: "rounded",
         });
         manufacturerLink.addListener("tap", () => window.open(manufacturerData["link"]));
-        topLayout.add(manufacturerLink, {
+        headerLayout.add(manufacturerLink, {
           column: 1,
           row: 0,
           rowSpan: 2,
         });
       }
-      modelLayout.add(topLayout);
+      this.__selectedModelLayout.add(headerLayout);
 
 
       const middleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(16));
-      const thumbnail = new qx.ui.basic.Image().set({
-        source: anatomicalModel["thumbnail"],
-        alignY: "middle",
-        scale: true,
-        allowGrowX: true,
-        allowGrowY: true,
-        allowShrinkX: true,
-        allowShrinkY: true,
-        maxWidth: 256,
-        maxHeight: 256,
-      });
+      const thumbnail = this.self().createThumbnail(anatomicalModel["thumbnail"], 256);
       middleLayout.add(thumbnail);
 
       const features = anatomicalModel["features"];
@@ -264,14 +285,14 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
 
       middleLayout.add(featuresLayout);
 
-      modelLayout.add(middleLayout);
+      this.__selectedModelLayout.add(middleLayout);
 
-      const importButton = this.__createImportSection(anatomicalModelsData, selectedIdx);
-      modelLayout.add(importButton);
+      const importSection = this.__createImportSection(anatomicalModelsData, selectedIdx);
+      this.__selectedModelLayout.add(importSection);
     },
 
     __createImportSection: function(anatomicalModelsData, selectedIdx) {
-      const importSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
+      const importSection = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
         alignX: "center"
       }));
 
@@ -281,6 +302,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         center: true,
         maxWidth: 200,
         alignX: "center",
+        marginTop: 10,
       });
       this.bind("openBy", importButton, "visibility", {
         converter: openBy => openBy ? "visible" : "excluded"
@@ -344,7 +366,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         .then(licensedItems => {
           const lowerLicensedItems = osparc.store.LicensedItems.getLowerLicensedItems(licensedItems, licensedItemData["key"], licensedItemData["version"])
           if (licensedItemData["licensedResources"].length > 1 || lowerLicensedItems.length) {
-            let text = this.tr("This Bundle gives you access to:") + "<br>";
+            let text = this.tr("This bundle gives you access to:") + "<br>";
             licensedItemData["licensedResources"].forEach(licensedResource => {
               text += `- ${osparc.store.LicensedItems.licensedResourceNameAndVersion(licensedResource)}<br>`;
             });

services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js

@@ -177,6 +177,10 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
 
     __applyDisplayName: function(value) {
       this.getChildControl("name").setValue(value);
+
+      this.set({
+        toolTipText: value
+      });
     },
 
     __applySeats: function(seats) {