Skip to content

🎨 [Frontend] Licensed items: Adapt to new model and backend's catalog #7146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Feb 3, 2025
Merged

🎨 [Frontend] Licensed items: Adapt to new model and backend's catalog #7146

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
032520b
[skip ci] AnatomicalModelListItem
odeimaiz Jan 31, 2025
25756ff
cache purchasedLicensedItems
odeimaiz Jan 31, 2025
fb7d0c7
minor
odeimaiz Jan 31, 2025
cc457aa
[skip ci] AnatomicalModelDetails working
odeimaiz Jan 31, 2025
7b6a48b
all good
odeimaiz Jan 31, 2025
880100d
minor
odeimaiz Jan 31, 2025
66053bc
no cache for purchases
odeimaiz Jan 31, 2025
c790edb
minors
odeimaiz Jan 31, 2025
2144add
update categories
odeimaiz Jan 31, 2025
1caab15
Merge branch 'master' into enh/licensed-items-from-backend
odeimaiz Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/credits/CheckoutsTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTable", {
id: "user",
column: 6,
label: qx.locale.Manager.tr("User"),
width: 100
width: 150
},
}
}
Expand Down
7 changes: 2 additions & 5 deletions services/static-webserver/client/source/class/osparc/desktop/credits/CheckoutsTableModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,19 +122,16 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTableModel", {
return Promise.all([
licensedItemsStore.getLicensedItems(),
licensedItemsStore.getCheckedOutLicensedItems(walletId, urlParams),
licensedItemsStore.getVipModels(),
])
.then(values => {
const licensedItems = values[0];
const checkoutsItems = values[1];
const vipModels = values[2];

const data = [];
const checkoutsCols = osparc.desktop.credits.CheckoutsTable.COLS;
checkoutsItems.forEach(checkoutsItem => {
const licensedItemId = checkoutsItem["licensedItemId"];
const licensedItem = licensedItems.find(licItem => licItem["licensedItemId"] === licensedItemId);
const vipModel = vipModels.find(vipMdl => licensedItem && (vipMdl["modelId"] == licensedItem["name"]));
let start = "";
let duration = "";
if (checkoutsItem["startedAt"]) {
Expand All @@ -146,11 +143,11 @@ qx.Class.define("osparc.desktop.credits.CheckoutsTableModel", {
data.push({
[checkoutsCols.CHECKOUT_ID.id]: checkoutsItem["licensedItemCheckoutId"],
[checkoutsCols.ITEM_ID.id]: licensedItemId,
[checkoutsCols.ITEM_LABEL.id]: vipModel ? vipModel["name"] : "unknown model",
[checkoutsCols.ITEM_LABEL.id]: licensedItem ? licensedItem["displayName"] : "unknown model",
[checkoutsCols.START.id]: start,
[checkoutsCols.DURATION.id]: duration,
[checkoutsCols.SEATS.id]: checkoutsItem["numOfSeats"],
[checkoutsCols.USER.id]: checkoutsItem["userId"],
[checkoutsCols.USER.id]: checkoutsItem["userEmail"],
});
});
return data;
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/credits/PurchasesTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ qx.Class.define("osparc.desktop.credits.PurchasesTable", {
id: "user",
column: 7,
label: qx.locale.Manager.tr("User"),
width: 100
width: 150
},
}
}
Expand Down
7 changes: 2 additions & 5 deletions services/static-webserver/client/source/class/osparc/desktop/credits/PurchasesTableModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,28 +121,25 @@ qx.Class.define("osparc.desktop.credits.PurchasesTableModel", {
return Promise.all([
licensedItemsStore.getLicensedItems(),
licensedItemsStore.getPurchasedLicensedItems(walletId, urlParams),
licensedItemsStore.getVipModels(),
])
.then(values => {
const licensedItems = values[0];
const purchasesItems = values[1];
const vipModels = values[2];

const data = [];
const purchasesCols = osparc.desktop.credits.PurchasesTable.COLS;
purchasesItems.forEach(purchasesItem => {
const licensedItemId = purchasesItem["licensedItemId"];
const licensedItem = licensedItems.find(licItem => licItem["licensedItemId"] === licensedItemId);
const vipModel = vipModels.find(vipMdl => licensedItem && (vipMdl["modelId"] == licensedItem["name"]));
data.push({
[purchasesCols.PURCHASE_ID.id]: purchasesItem["licensedItemPurchaseId"],
[purchasesCols.ITEM_ID.id]: licensedItemId,
[purchasesCols.ITEM_LABEL.id]: vipModel ? vipModel["name"] : "unknown model",
[purchasesCols.ITEM_LABEL.id]: licensedItem ? licensedItem["displayName"] : "unknown model",
[purchasesCols.START.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem["startAt"])),
[purchasesCols.END.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem["expireAt"])),
[purchasesCols.SEATS.id]: purchasesItem["numOfSeats"],
[purchasesCols.COST.id]: purchasesItem["pricingUnitCost"] ? ("-" + parseFloat(purchasesItem["pricingUnitCost"]).toFixed(2)) : "", // show it negative
[purchasesCols.USER.id]: purchasesItem["purchasedByUser"],
[purchasesCols.USER.id]: purchasesItem["userEmail"],
});
});
return data;
Expand Down
79 changes: 0 additions & 79 deletions services/static-webserver/client/source/class/osparc/store/LicensedItems.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,46 +23,10 @@ qx.Class.define("osparc.store.LicensedItems", {
this.base(arguments);

this.__licensedItems = null;
this.__modelsCache = {};
},

statics: {
VIP_MODELS: {
HUMAN_BODY: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanWholeBody",
HUMAN_BODY_REGION: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanBodyRegion",
ANIMAL: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/AnimalWholeBody",
PHANTOM: "https://speag.swiss/PD_DirectDownload/getDownloadableItems/ComputationalPhantom",
},

curateAnatomicalModels: function(anatomicalModelsRaw) {
const anatomicalModels = [];
const models = anatomicalModelsRaw["availableDownloads"];
models.forEach(model => {
const curatedModel = {};
Object.keys(model).forEach(key => {
if (key === "Features") {
let featuresRaw = model["Features"];
featuresRaw = featuresRaw.substring(1, featuresRaw.length-1); // remove brackets
featuresRaw = featuresRaw.split(","); // split the string by commas
const features = {};
featuresRaw.forEach(pair => { // each pair is "key: value"
const keyValue = pair.split(":");
features[keyValue[0].trim()] = keyValue[1].trim()
});
curatedModel["Features"] = features;
} else {
curatedModel[key] = model[key];
}
});
anatomicalModels.push(curatedModel);
});
return anatomicalModels;
},
},

members: {
__licensedItems: null,
__modelsCache: null,

getLicensedItems: function() {
if (this.__licensedItems) {
Expand Down Expand Up @@ -118,48 +82,5 @@ qx.Class.define("osparc.store.LicensedItems", {
}
return osparc.data.Resources.fetch("licensedItems", "checkouts", purchasesParams, options);
},

__fetchVipModels: async function(vipSubset) {
if (!(vipSubset in this.self().VIP_MODELS)) {
return [];
}

if (vipSubset in this.__modelsCache) {
return this.__modelsCache[vipSubset];
}

return await fetch(this.self().VIP_MODELS[vipSubset], {
method:"POST"
})
.then(resp => resp.json())
.then(anatomicalModelsRaw => {
const allAnatomicalModels = this.self().curateAnatomicalModels(anatomicalModelsRaw);
const anatomicalModels = [];
allAnatomicalModels.forEach(model => {
const anatomicalModel = {};
anatomicalModel["modelId"] = model["ID"];
anatomicalModel["thumbnail"] = model["Thumbnail"];
anatomicalModel["name"] = model["Features"]["name"] + " " + model["Features"]["version"];
anatomicalModel["description"] = model["Description"];
anatomicalModel["features"] = model["Features"];
anatomicalModel["date"] = model["Features"]["date"];
anatomicalModel["DOI"] = model["DOI"];
anatomicalModels.push(anatomicalModel);
});
this.__modelsCache[vipSubset] = anatomicalModels;
return anatomicalModels;
});
},

getVipModels: async function(vipSubset) {
const vipModels = this.self().VIP_MODELS;
if (vipSubset && vipSubset in vipModels) {
return await this.__fetchVipModels(vipSubset);
}
const promises = [];
Object.keys(vipModels).forEach(sbs => promises.push(this.__fetchVipModels(sbs)));
return await Promise.all(promises)
.then(values => values.flat());
},
}
});
12 changes: 6 additions & 6 deletions services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
const layout = new qx.ui.layout.VBox(15);
this._setLayout(layout);

this.__poplulateLayout();
this.__populateLayout();
},

events: {
Expand All @@ -44,17 +44,17 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
check: "Object",
init: null,
nullable: true,
apply: "__poplulateLayout"
apply: "__populateLayout"
},
},

members: {
__poplulateLayout: function() {
__populateLayout: function() {
this._removeAll();

const anatomicalModelsData = this.getAnatomicalModelsData();
if (anatomicalModelsData) {
const modelInfo = this.__createModelInfo(anatomicalModelsData);
const modelInfo = this.__createModelInfo(anatomicalModelsData["licensedResourceData"]);
const pricingUnits = this.__createPricingUnits(anatomicalModelsData);
const importButton = this.__createImportSection(anatomicalModelsData);
this._add(modelInfo);
Expand All @@ -77,7 +77,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
const cardGrid = new qx.ui.layout.Grid(16, 16);
const cardLayout = new qx.ui.container.Composite(cardGrid);

const description = anatomicalModelsData["description"];
const description = anatomicalModelsData["description"] || "";
description.split(" - ").forEach((desc, idx) => {
const titleLabel = new qx.ui.basic.Label().set({
value: desc,
Expand Down Expand Up @@ -162,7 +162,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
});

const doiValue = new qx.ui.basic.Label().set({
value: anatomicalModelsData["DOI"] ? anatomicalModelsData["DOI"] : "-",
value: anatomicalModelsData["doi"] ? anatomicalModelsData["doi"] : "-",
font: "text-14",
alignX: "left",
marginTop: 16,
Expand Down
8 changes: 4 additions & 4 deletions services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
apply: "__applyThumbnail",
},

name: {
displayName: {
check: "String",
init: null,
nullable: false,
event: "changeName",
apply: "__applyName",
event: "changeDisplayName",
apply: "__applyDisplayName",
},

date: {
Expand Down Expand Up @@ -157,7 +157,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
this.getChildControl("thumbnail").setSource(value);
},

__applyName: function(value) {
__applyDisplayName: function(value) {
this.getChildControl("name").setValue(value);
},

Expand Down
54 changes: 37 additions & 17 deletions services/static-webserver/client/source/class/osparc/vipMarket/Market.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
qx.Class.define("osparc.vipMarket.Market", {
extend: osparc.ui.window.TabbedView,

construct: function(category) {
construct: function(openCategory) {
this.base(arguments);

const miniWallet = osparc.desktop.credits.BillingCenter.createMiniWalletView().set({
Expand All @@ -27,34 +27,54 @@ qx.Class.define("osparc.vipMarket.Market", {
});
this.addWidgetOnTopOfTheTabs(miniWallet);

osparc.store.LicensedItems.getInstance().getLicensedItems()
.then(() => {
[{
const store = osparc.store.Store.getInstance();
const contextWallet = store.getContextWallet();
if (!contextWallet) {
return;
}

const walletId = contextWallet.getWalletId();
const licensedItemsStore = osparc.store.LicensedItems.getInstance();
Promise.all([
licensedItemsStore.getLicensedItems(),
licensedItemsStore.getPurchasedLicensedItems(walletId),
])
.then(values => {
const licensedItems = values[0];
const categories = {};
licensedItems.forEach(licensedItem => {
if (licensedItem["licensedResourceData"] && licensedItem["licensedResourceData"]["category"]) {
const category = licensedItem["licensedResourceData"]["category"];
if (!(category in categories)) {
categories[category] = [];
}
categories[category].push(licensedItem);
}
});

const expectedCategories = [{
category: "human",
label: "Humans",
icon: "@FontAwesome5Solid/users/20",
vipSubset: "HUMAN_BODY",
}, {
category: "human_region",
label: "Humans (Region)",
icon: "@FontAwesome5Solid/users/20",
vipSubset: "HUMAN_BODY_REGION",
}, {
category: "animal",
label: "Animals",
icon: "@FontAwesome5Solid/users/20",
vipSubset: "ANIMAL",
}, {
category: "phantom",
label: "Phantoms",
icon: "@FontAwesome5Solid/users/20",
vipSubset: "PHANTOM",
}].forEach(marketInfo => {
this.__buildViPMarketPage(marketInfo);
}]
expectedCategories.forEach(expectedCategory => {
this.__buildViPMarketPage(expectedCategory, categories[expectedCategory["category"]]);
});

if (category) {
this.openCategory(category);
if (openCategory) {
this.openCategory(openCategory);
}
});
},
Expand All @@ -73,15 +93,15 @@ qx.Class.define("osparc.vipMarket.Market", {
},

members: {
__buildViPMarketPage: function(marketInfo) {
const vipMarketView = new osparc.vipMarket.VipMarket();
__buildViPMarketPage: function(marketTabInfo, licensedItems = []) {
const vipMarketView = new osparc.vipMarket.VipMarket(licensedItems);
vipMarketView.set({
vipSubset: marketInfo["vipSubset"],
category: marketTabInfo["category"],
});
this.bind("openBy", vipMarketView, "openBy");
vipMarketView.addListener("importMessageSent", () => this.fireEvent("importMessageSent"));
const page = this.addTab(marketInfo["label"], marketInfo["icon"], vipMarketView);
page.category = marketInfo["category"];
const page = this.addTab(marketTabInfo["label"], marketTabInfo["icon"], vipMarketView);
page.category = marketTabInfo["category"];
return page;
},

Expand Down
Loading
Loading