From d1da92eddd9c6e21ca68255b4888c9764ade8237 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Wed, 27 Sep 2023 15:50:40 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Feature:=20Tour=20de=20S4L=20(#4?= =?UTF-8?q?737)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client/source/class/osparc/Application.js | 1 - .../class/osparc/dashboard/Dashboard.js | 11 +- .../class/osparc/dashboard/GridButtonItem.js | 2 + .../class/osparc/dashboard/ListButtonItem.js | 2 + .../osparc/dashboard/ResourceMoreOptions.js | 2 +- .../class/osparc/dashboard/StudyBrowser.js | 8 +- .../source/class/osparc/desktop/MainPage.js | 21 +- .../class/osparc/desktop/MainPageHandler.js | 10 - .../desktop/credits/CreditsIndicator.js | 2 +- .../{CreditsWindow.js => UserCenterWindow.js} | 4 +- .../desktop/credits/WalletsMiniViewer.js | 6 +- .../source/class/osparc/info/StudyLarge.js | 3 +- .../class/osparc/navigation/NavigationBar.js | 7 +- .../class/osparc/navigation/UserMenuButton.js | 9 +- .../notification/NotificationsButton.js | 2 + .../source/class/osparc/panddy/Panddy.js | 235 ------------------ .../source/class/osparc/panddy/Sequences.js | 119 --------- .../class/osparc/product/AboutProduct.js | 8 +- .../product/panddy/s4llite/Sequences.js | 93 ------- .../{tutorial => quickStart}/SlideBase.js | 4 +- .../{tutorial => quickStart}/SlidesBase.js | 2 +- .../product/{tutorial => quickStart}/Utils.js | 20 +- .../osparc/product/quickStart/s4l/Welcome.js | 145 +++++++++++ .../s4llite/Dashboard.js | 14 +- .../s4llite/S4LLiteSpecs.js | 10 +- .../s4llite/S4LLiteUI.js | 6 +- .../s4llite/Slides.js | 14 +- .../s4llite/Welcome.js | 8 +- .../{tutorial => quickStart}/ti/Dashboard.js | 10 +- .../ti/ElectrodeSelector.js | 12 +- .../{tutorial => quickStart}/ti/PostPro.js | 12 +- .../{tutorial => quickStart}/ti/S4LPostPro.js | 6 +- .../{tutorial => quickStart}/ti/Slides.js | 16 +- .../{tutorial => quickStart}/ti/Welcome.js | 8 +- .../osparc/product/{panddy => tours}/Utils.js | 25 +- .../class/osparc/product/tours/s4l/Tours.js | 40 +++ .../osparc/product/tours/s4llite/Tours.js | 40 +++ .../source/class/osparc/store/Support.js | 33 ++- .../client/source/class/osparc/tours/List.js | 81 ++++++ .../source/class/osparc/tours/ListItem.js | 66 +++++ .../source/class/osparc/tours/Manager.js | 181 ++++++++++++++ .../class/osparc/{panddy => tours}/Step.js | 4 +- .../class/osparc/ui/basic/FloatingHelper.js | 47 +++- .../osparc/ui/switch/ThemeSwitcherFormBtn.js | 2 + .../client/source/resource/hint/hint.css | 39 +++ .../resource/osparc/tours/s4l_tours.json | 127 ++++++++++ .../resource/osparc/tours/s4llite_tours.json | 24 ++ tests/e2e/jest-puppeteer.config.js | 2 +- tests/e2e/jest.config.js | 2 +- 49 files changed, 924 insertions(+), 621 deletions(-) rename services/static-webserver/client/source/class/osparc/desktop/credits/{CreditsWindow.js => UserCenterWindow.js} (90%) delete mode 100644 services/static-webserver/client/source/class/osparc/panddy/Panddy.js delete mode 100644 services/static-webserver/client/source/class/osparc/panddy/Sequences.js delete mode 100644 services/static-webserver/client/source/class/osparc/product/panddy/s4llite/Sequences.js rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/SlideBase.js (86%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/SlidesBase.js (98%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/Utils.js (75%) create mode 100644 services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/s4llite/Dashboard.js (84%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/s4llite/S4LLiteSpecs.js (89%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/s4llite/S4LLiteUI.js (84%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/s4llite/Slides.js (79%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/s4llite/Welcome.js (85%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/Dashboard.js (82%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/ElectrodeSelector.js (80%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/PostPro.js (89%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/S4LPostPro.js (85%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/Slides.js (78%) rename services/static-webserver/client/source/class/osparc/product/{tutorial => quickStart}/ti/Welcome.js (82%) rename services/static-webserver/client/source/class/osparc/product/{panddy => tours}/Utils.js (54%) create mode 100644 services/static-webserver/client/source/class/osparc/product/tours/s4l/Tours.js create mode 100644 services/static-webserver/client/source/class/osparc/product/tours/s4llite/Tours.js create mode 100644 services/static-webserver/client/source/class/osparc/tours/List.js create mode 100644 services/static-webserver/client/source/class/osparc/tours/ListItem.js create mode 100644 services/static-webserver/client/source/class/osparc/tours/Manager.js rename services/static-webserver/client/source/class/osparc/{panddy => tours}/Step.js (98%) create mode 100644 services/static-webserver/client/source/resource/osparc/tours/s4l_tours.json create mode 100644 services/static-webserver/client/source/resource/osparc/tours/s4llite_tours.json diff --git a/services/static-webserver/client/source/class/osparc/Application.js b/services/static-webserver/client/source/class/osparc/Application.js index 7be156f0cf5..c7c842ad1df 100644 --- a/services/static-webserver/client/source/class/osparc/Application.js +++ b/services/static-webserver/client/source/class/osparc/Application.js @@ -478,7 +478,6 @@ qx.Class.define("osparc.Application", { if (this.__mainPage) { this.__mainPage.closeEditor(); } - osparc.panddy.Panddy.getInstance().stop(); osparc.utils.Utils.closeHangingWindows(); osparc.store.Store.getInstance().dispose(); this.__restart(); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js index c5c4fe90f79..dbb68c3241f 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js @@ -38,18 +38,9 @@ qx.Class.define("osparc.dashboard.Dashboard", { construct: function() { this.base(arguments); + osparc.utils.Utils.setIdToWidget(this.getChildControl("bar"), "dashboardTabs"); osparc.utils.Utils.setIdToWidget(this, "dashboard"); - if (osparc.product.panddy.Utils.hasPanddy()) { - const panddy = osparc.panddy.Panddy.getInstance(); - const root = qx.core.Init.getApplication().getRoot(); - root.add(panddy, { - bottom: 10, - right: 10 - }); - setTimeout(() => panddy.start(), 2000); - } - this.set({ contentPaddingTop: 15, contentPaddingLeft: 0, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js index e899a9ee681..70b3fec8c9c 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js @@ -65,6 +65,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", { visibility: "excluded", alignY: "bottom" }); + osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn"); this._mainLayout.add(control, osparc.dashboard.GridButtonBase.POS.UPDATES); break; case "hits-service": @@ -221,6 +222,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", { const menuButton = this.getChildControl("menu-button"); if (value) { menuButton.setMenu(value); + osparc.utils.Utils.setIdToWidget(value, "studyItemMenuMenu"); } menuButton.setVisibility(value ? "visible" : "excluded"); } diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js index a2fd688462a..c1c80e3181a 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js @@ -133,6 +133,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { source: "@MaterialIcons/update/18", visibility: "excluded" }); + osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn"); this._add(control, { row: 0, column: osparc.dashboard.ListButtonBase.POS.UPDATES @@ -251,6 +252,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { const menuButton = this.getChildControl("menu-button"); if (value) { menuButton.setMenu(value); + osparc.utils.Utils.setIdToWidget(value, "studyItemMenuMenu"); } menuButton.setVisibility(value ? "visible" : "excluded"); } diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js index b3e28b853ad..8adde7144bd 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js @@ -109,7 +109,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", { const title = new qx.ui.basic.Label(resourceData.name).set({ font: "text-16", alignY: "middle", - maxWidth: 300, + maxWidth: this.self().WIDTH-100, rich: true, wrap: true }); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index 4c5eac4b076..d2a37ccf0b9 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -212,14 +212,14 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { } // Show Quick Start if studies.length === 0 - const tutorial = osparc.product.tutorial.Utils.getTutorial(); - if (tutorial) { - const dontShow = osparc.utils.Utils.localCache.getLocalStorageItem(tutorial.localStorageStr); + const quickStart = osparc.product.quickStart.Utils.getQuickStart(); + if (quickStart) { + const dontShow = osparc.utils.Utils.localCache.getLocalStorageItem(quickStart.localStorageStr); if (dontShow === "true") { return; } if (nStudies === 0) { - const tutorialWindow = tutorial.tutorial(); + const tutorialWindow = quickStart.tutorial(); tutorialWindow.center(); tutorialWindow.open(); } diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js index 753ef5dadc5..740410ba979 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js +++ b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js @@ -61,11 +61,10 @@ qx.Class.define("osparc.desktop.MainPage", { osparc.desktop.credits.Utils.areWalletsEnabled() .then(walletsEnabled => { if (walletsEnabled) { - const creditsWindow = osparc.desktop.credits.CreditsWindow.openWindow(true); + const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow(walletsEnabled); creditsWindow.openOverview(); } }); - // setTimeout(() => osparc.desktop.MainPageHandler.getInstance().showUserCenter(), 1000); } const preferenceSettings = osparc.Preferences.getInstance(); const preferenceWalletId = preferenceSettings.getPreferredWalletId(); @@ -98,7 +97,6 @@ qx.Class.define("osparc.desktop.MainPage", { __navBar: null, __dashboard: null, __dashboardLayout: null, - __userCenter: null, __loadingPage: null, __studyEditor: null, @@ -203,9 +201,6 @@ qx.Class.define("osparc.desktop.MainPage", { const dashboardLayout = this.__dashboardLayout = this.__createDashboardStack(); mainPageHandler.addDashboard(dashboardLayout); - const userCenterLayout = this.__createUserCenter(); - mainPageHandler.addUserCenter(userCenterLayout); - const loadingPage = this.__loadingPage = new osparc.ui.message.Loading(); mainPageHandler.addLoadingPage(loadingPage); @@ -249,20 +244,6 @@ qx.Class.define("osparc.desktop.MainPage", { return dashboardLayout; }, - __createUserCenter: function() { - const userCenter = this.__userCenter = new osparc.desktop.credits.UserCenter(true); - - const userCenterLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)); - userCenterLayout.add(new qx.ui.core.Widget(), { - flex: 1 - }); - userCenterLayout.add(userCenter); - userCenterLayout.add(new qx.ui.core.Widget(), { - flex: 1 - }); - return userCenterLayout; - }, - __attachHandlers: function() { const studyBrowser = this.__dashboard.getStudyBrowser(); studyBrowser.addListener("publishTemplate", e => this.__publishTemplate(e.getData())); diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js b/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js index eb645e71301..cfaa130d6b0 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js +++ b/services/static-webserver/client/source/class/osparc/desktop/MainPageHandler.js @@ -27,7 +27,6 @@ qx.Class.define("osparc.desktop.MainPageHandler", { __stack: null, __loadingPage: null, __dashboard: null, - __userCenter: null, __studyEditor: null, setStack: function(stack) { @@ -44,11 +43,6 @@ qx.Class.define("osparc.desktop.MainPageHandler", { this.__stack.add(dashboard); }, - addUserCenter: function(userCenter) { - this.__userCenter = userCenter; - this.__stack.add(userCenter); - }, - addStudyEditor: function(studyEditor) { this.__studyEditor = studyEditor; this.__stack.add(studyEditor); @@ -62,10 +56,6 @@ qx.Class.define("osparc.desktop.MainPageHandler", { this.__stack.setSelection([this.__dashboard]); }, - showUserCenter: function() { - this.__stack.setSelection([this.__userCenter]); - }, - showStudyEditor: function() { this.__stack.setSelection([this.__studyEditor]); }, diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js index 4571a5f8618..0bc3bd64c81 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js @@ -52,7 +52,7 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicator", { this.addListener("tap", () => { osparc.desktop.credits.Utils.areWalletsEnabled() .then(walletsEnabled => { - const creditsWindow = osparc.desktop.credits.CreditsWindow.openWindow(walletsEnabled); + const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow(walletsEnabled); creditsWindow.openWallets(); }); }, this); diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsWindow.js b/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenterWindow.js similarity index 90% rename from services/static-webserver/client/source/class/osparc/desktop/credits/CreditsWindow.js rename to services/static-webserver/client/source/class/osparc/desktop/credits/UserCenterWindow.js index 8e002f6ddca..5566915f81d 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsWindow.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenterWindow.js @@ -15,7 +15,7 @@ ************************************************************************ */ -qx.Class.define("osparc.desktop.credits.CreditsWindow", { +qx.Class.define("osparc.desktop.credits.UserCenterWindow", { extend: osparc.ui.window.SingletonWindow, construct: function(walletsEnabled = false) { @@ -41,7 +41,7 @@ qx.Class.define("osparc.desktop.credits.CreditsWindow", { statics: { openWindow: function(walletsEnabled = false) { - const accountWindow = new osparc.desktop.credits.CreditsWindow(walletsEnabled); + const accountWindow = new osparc.desktop.credits.UserCenterWindow(walletsEnabled); accountWindow.center(); accountWindow.open(); return accountWindow; diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js b/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js index 1e7af2e3100..77ea3e4ea11 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js @@ -23,6 +23,8 @@ qx.Class.define("osparc.desktop.credits.WalletsMiniViewer", { this._setLayout(new qx.ui.layout.VBox(3)); + osparc.utils.Utils.setIdToWidget(this, "walletsMiniViewer"); + this.set({ cursor: "pointer", padding: 5, @@ -36,7 +38,7 @@ qx.Class.define("osparc.desktop.credits.WalletsMiniViewer", { this.addListener("tap", () => { osparc.desktop.credits.Utils.areWalletsEnabled() .then(walletsEnabled => { - const creditsWindow = osparc.desktop.credits.CreditsWindow.openWindow(walletsEnabled); + const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow(walletsEnabled); creditsWindow.openOverview(); }); }, this); @@ -101,7 +103,7 @@ qx.Class.define("osparc.desktop.credits.WalletsMiniViewer", { walletsButton.addListener("tap", () => { osparc.desktop.credits.Utils.areWalletsEnabled() .then(walletsEnabled => { - const creditsWindow = osparc.desktop.credits.CreditsWindow.openWindow(walletsEnabled); + const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow(walletsEnabled); creditsWindow.openWallets(); }); }, this); diff --git a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js index bd925340a3e..de9cd86c97b 100644 --- a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js +++ b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js @@ -70,7 +70,8 @@ qx.Class.define("osparc.info.StudyLarge", { const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)); const title = osparc.info.StudyUtils.createTitle(this.getStudy()).set({ - font: "text-14" + font: "text-14", + maxWidth: 400 }); const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor); let text = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id"; diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index 7c3af1c36ae..2b50d77b62b 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -204,6 +204,7 @@ qx.Class.define("osparc.navigation.NavigationBar", { paddingLeft: 10, font: "text-14" }); + osparc.utils.Utils.setIdToWidget(control, "dashboardLabel"); this.getChildControl("left-items").add(control); break; case "study-menu-info": @@ -397,8 +398,10 @@ qx.Class.define("osparc.navigation.NavigationBar", { backgroundColor: "transparent" }); osparc.store.Support.addQuickStartToMenu(menu); - osparc.store.Support.addPanddyToMenu(menu); + osparc.store.Support.addGuidedToursToMenu(menu); osparc.store.Support.addManualButtonsToMenu(menu, menuButton); + osparc.utils.Utils.setIdToWidget(menuButton, "manualsButton"); + osparc.utils.Utils.setIdToWidget(menu, "manualsMenu"); return menuButton; }, @@ -411,6 +414,8 @@ qx.Class.define("osparc.navigation.NavigationBar", { backgroundColor: "transparent" }); osparc.store.Support.addSupportButtonsToMenu(menu, menuButton); + osparc.utils.Utils.setIdToWidget(menuButton, "feedbackButton"); + osparc.utils.Utils.setIdToWidget(menu, "feedbackMenu"); return menuButton; }, diff --git a/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js b/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js index b588f6a0650..7181695ef28 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js +++ b/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js @@ -92,10 +92,9 @@ qx.Class.define("osparc.navigation.UserMenuButton", { control.addListener("execute", () => { osparc.desktop.credits.Utils.areWalletsEnabled() .then(walletsEnabled => { - const creditsWindow = osparc.desktop.credits.CreditsWindow.openWindow(walletsEnabled); + const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow(walletsEnabled); creditsWindow.openOverview(); }); - // osparc.desktop.MainPageHandler.getInstance().showUserCenter(); }, this); this.getMenu().add(control); break; @@ -171,11 +170,11 @@ qx.Class.define("osparc.navigation.UserMenuButton", { this.getChildControl("organizations"); this.getChildControl("clusters"); } - if (osparc.product.tutorial.Utils.getTutorial()) { + if (osparc.product.quickStart.Utils.getQuickStart()) { this.getMenu().addSeparator(); osparc.store.Support.addQuickStartToMenu(this.getMenu()); - osparc.store.Support.addPanddyToMenu(this.getMenu()); } + osparc.store.Support.addGuidedToursToMenu(this.getMenu()); this.getMenu().addSeparator(); const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance(); if (announcementUIFactory.hasUserMenuAnnouncement()) { @@ -231,7 +230,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", { __addQuickStartToMenu: function() { const menu = this.getMenu(); osparc.store.Support.addQuickStartToMenu(menu); - osparc.store.Support.addPanddyToMenu(menu); + osparc.store.Support.addGuidedToursToMenu(menu); }, __addManualsToMenu: async function() { diff --git a/services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js b/services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js index 4abae5a098b..8a8c9515e1f 100644 --- a/services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js +++ b/services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js @@ -23,6 +23,8 @@ qx.Class.define("osparc.notification.NotificationsButton", { this._setLayout(new qx.ui.layout.Canvas()); + osparc.utils.Utils.setIdToWidget(this, "notificationsButton"); + this.set({ width: 30, alignX: "center", diff --git a/services/static-webserver/client/source/class/osparc/panddy/Panddy.js b/services/static-webserver/client/source/class/osparc/panddy/Panddy.js deleted file mode 100644 index 3dc60949a40..00000000000 --- a/services/static-webserver/client/source/class/osparc/panddy/Panddy.js +++ /dev/null @@ -1,235 +0,0 @@ -/* ************************************************************************ - - osparc - the simcore frontend - - https://osparc.io - - Copyright: - 2023 IT'IS Foundation, https://itis.swiss - - License: - MIT: https://opensource.org/licenses/MIT - - Authors: - * Odei Maiz (odeimaiz) - -************************************************************************ */ - -qx.Class.define("osparc.panddy.Panddy", { - extend: qx.ui.core.Widget, - type: "singleton", - - construct: function() { - this.base(arguments); - - this._setLayout(new qx.ui.layout.Canvas()); - - this.set({ - zIndex: 100000 - }); - - this.setSequences(this.self().INTRO_SEQUENCE); - }, - - statics: { - INTRO_SEQUENCE: [{ - name: "Panddy intro", - description: "Introduction to Panddy", - steps: [{ - target: null, - title: qx.locale.Manager.tr("Grüezi!"), - message: qx.locale.Manager.tr("This is Panddy. I'm here to give you hints on how to use the application.") - }, { - preStep: { - target: "osparc-test-id=userMenuBtn", - action: "open" - }, - target: "osparc-test-id=userMenuMenu", - orientation: "left", - message: qx.locale.Manager.tr("You can always find me in the User Menu.") - }] - }] - }, - - properties: { - sequences: { - check: "Array", - init: [], - nullable: true - }, - - steps: { - check: "Array", - init: [], - nullable: true - } - }, - - members: { - __currentBuble: null, - __currentIdx: null, - - _createChildControlImpl: function(id) { - const pandiSize = 150; - let control; - switch (id) { - case "panddy": { - control = new qx.ui.basic.Image("osparc/panda.gif").set({ - width: pandiSize, - height: pandiSize, - scale: true, - cursor: "pointer" - }); - control.addListener("tap", () => { - if (control.getSource().includes("pand")) { - control.setSource("osparc/crocky.gif"); - } else { - control.setSource("osparc/panda.gif"); - } - }); - this._add(control, { - bottom: 0, - right: 0 - }); - break; - } - } - return control || this.base(arguments, id); - }, - - start: function() { - this.getChildControl("panddy").show(); - setTimeout(() => this.__toSequences(), 200); - }, - - stop: function() { - this.__removeCurrentBuble(); - this.getChildControl("panddy").exclude(); - }, - - __removeCurrentBuble: function() { - if (this.__currentBuble) { - qx.core.Init.getApplication().getRoot().remove(this.__currentBuble); - this.__currentBuble.exclude(); - this.__currentBuble = null; - } - }, - - __toSequences: function() { - const sequences = this.getSequences(); - const dontShow = osparc.utils.Utils.localCache.getLocalStorageItem("panddyDontShow"); - if (sequences.length === 0 || (sequences === this.self().INTRO_SEQUENCE && dontShow === "true")) { - this.stop(); - return; - } - - if (sequences.length === 1) { - this.__selectSequence(sequences[0]); - } else { - this.__showSequences(); - } - }, - - __showSequences: function() { - const panddy = this.getChildControl("panddy"); - panddy.show(); - setTimeout(() => { - const sequences = this.getSequences(); - const seqsWidget = new osparc.panddy.Sequences(panddy, sequences); - seqsWidget.setOrientation(osparc.ui.basic.FloatingHelper.ORIENTATION.LEFT); - seqsWidget.addListener("sequenceSelected", e => { - seqsWidget.exclude(); - this.__selectSequence(e.getData()); - }); - seqsWidget.show(); - }, 200); - }, - - __selectSequence: function(sequence) { - if ("steps" in sequence) { - this.setSteps(sequence.steps); - this.__toStepCheck(0); - } - }, - - __toStepCheck: function(idx = 0) { - const steps = this.getSteps(); - if (idx >= steps.length) { - idx = 0; - } - - this.__removeCurrentBuble(); - this.__currentIdx = idx; - const step = steps[idx]; - if (step.preStep) { - const preStep = step.preStep; - if (preStep.target) { - const el = document.querySelector(`[${preStep.target}]`); - const widget = qx.ui.core.Widget.getWidgetByElement(el); - if (widget && preStep.action) { - widget[preStep.action](); - } - setTimeout(() => this.__toStep(steps, idx), 200); - } - } else { - this.__toStep(steps, idx); - } - }, - - __createStep: function(element, text) { - const stepWidget = new osparc.panddy.Step(element, text).set({ - maxWidth: 400 - }); - [ - "skipPressed", - "endPressed" - ].forEach(evName => stepWidget.addListener(evName, () => this.stop(), this)); - stepWidget.addListener("nextPressed", () => this.__toStepCheck(this.__currentIdx+1), this); - return stepWidget; - }, - - __toStep: async function(steps, idx) { - const step = steps[idx]; - const stepWidget = this.__currentBuble = this.__createStep(); - let targetWidget = null; - if (step.target) { - const el = document.querySelector(`[${step.target}]`); - targetWidget = qx.ui.core.Widget.getWidgetByElement(el); - } - if (targetWidget) { - if (step.action) { - targetWidget[step.action](); - } - stepWidget.setElement(targetWidget); - if (step.orientation) { - stepWidget.setOrientation(osparc.ui.basic.FloatingHelper.textToOrientation(step.orientation)); - } - } else { - const panddy = this.getChildControl("panddy"); - stepWidget.setElement(panddy); - stepWidget.setOrientation(osparc.ui.basic.FloatingHelper.ORIENTATION.LEFT); - } - if (step.title) { - stepWidget.setTitle(step.title); - } - if (step.message) { - stepWidget.setText(step.message); - } - if (steps.length > 1) { - stepWidget.set({ - stepIndex: idx+1, - nSteps: steps.length - }); - } - - if (this.getSequences() === this.self().INTRO_SEQUENCE) { - const dontShowCB = osparc.product.tutorial.Utils.createDontShowAgain("panddyDontShow"); - stepWidget.add(dontShowCB); - } - - stepWidget.show(); - // eslint-disable-next-line no-underscore-dangle - setTimeout(() => stepWidget.__updatePosition(), 10); // Hacky: Execute async and give some time for the relevant properties to be set - } - } -}); diff --git a/services/static-webserver/client/source/class/osparc/panddy/Sequences.js b/services/static-webserver/client/source/class/osparc/panddy/Sequences.js deleted file mode 100644 index 6b69aacc425..00000000000 --- a/services/static-webserver/client/source/class/osparc/panddy/Sequences.js +++ /dev/null @@ -1,119 +0,0 @@ -/* ************************************************************************ - - osparc - the simcore frontend - - https://osparc.io - - Copyright: - 2023 IT'IS Foundation, https://itis.swiss - - License: - MIT: https://opensource.org/licenses/MIT - - Authors: - * Odei Maiz (odeimaiz) - -************************************************************************ */ - -qx.Class.define("osparc.panddy.Sequences", { - extend: osparc.ui.basic.FloatingHelper, - - construct: function(element, sequences) { - this.base(arguments, element); - - this.setLayout(new qx.ui.layout.VBox(8)); - - const hintContainer = this.getChildControl("hint-container"); - hintContainer.setPadding(15); - hintContainer.getContentElement().setStyles({ - "border-radius": "8px" - }); - - this.getChildControl("title"); - this.getChildControl("sequences-layout"); - - if (sequences) { - this.setSequences(sequences); - } - }, - - events: { - "sequenceSelected": "qx.event.type.Data" - }, - - properties: { - sequences: { - check: "Array", - init: [], - nullable: true, - apply: "__applySequences" - } - }, - - members: { - _createChildControlImpl: function(id) { - let control; - switch (id) { - case "title": - control = new qx.ui.basic.Label().set({ - value: this.tr("Tutorials:"), - font: "text-14" - }); - this.add(control); - break; - case "sequences-layout": - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); - this.add(control); - break; - } - return control || this.base(arguments, id); - }, - - __isSelectorVisible: function(doc, selector) { - const domEl = doc.querySelector(`[${selector}]`); - if (domEl) { - const domWidget = qx.ui.core.Widget.getWidgetByElement(domEl); - if (qx.ui.core.queue.Visibility.isVisible(domWidget)) { - return true; - } - } - return false; - }, - - __evaluateRequiredTarget: function(sequence, seqButton) { - if (this.__isSelectorVisible(document, sequence.requiredTarget)) { - seqButton.setEnabled(true); - return; - } - const iframes = document.querySelectorAll("iframe"); - for (let i=0; i this.fireDataEvent("sequenceSelected", sequence), this); - return seqButton; - }, - - __applySequences: function(seqs) { - const sequencesLayout = this.getChildControl("sequences-layout"); - seqs.forEach(seq => sequencesLayout.add(this.__getSequenceButton(seq))); - } - } -}); diff --git a/services/static-webserver/client/source/class/osparc/product/AboutProduct.js b/services/static-webserver/client/source/class/osparc/product/AboutProduct.js index 21f0f3d2995..ebd0146b754 100644 --- a/services/static-webserver/client/source/class/osparc/product/AboutProduct.js +++ b/services/static-webserver/client/source/class/osparc/product/AboutProduct.js @@ -63,7 +63,7 @@ qx.Class.define("osparc.product.AboutProduct", { break; default: { const noInfoText = this.tr("Information not available"); - const noInfoLabel = osparc.product.tutorial.Utils.createLabel(noInfoText).set({ + const noInfoLabel = osparc.product.quickStart.Utils.createLabel(noInfoText).set({ maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING }); this.add(noInfoLabel); @@ -89,7 +89,7 @@ qx.Class.define("osparc.product.AboutProduct", { licenseText, moreInfoText ].forEach(text => { - const label = osparc.product.tutorial.Utils.createLabel(text).set({ + const label = osparc.product.quickStart.Utils.createLabel(text).set({ maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING }); this.add(label); @@ -116,7 +116,7 @@ qx.Class.define("osparc.product.AboutProduct", { licenseText, moreInfoText ].forEach(text => { - const label = osparc.product.tutorial.Utils.createLabel(text).set({ + const label = osparc.product.quickStart.Utils.createLabel(text).set({ maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING }); this.add(label); @@ -142,7 +142,7 @@ qx.Class.define("osparc.product.AboutProduct", { licenseText, moreInfoText ].forEach(text => { - const label = osparc.product.tutorial.Utils.createLabel(text).set({ + const label = osparc.product.quickStart.Utils.createLabel(text).set({ maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING }); this.add(label); diff --git a/services/static-webserver/client/source/class/osparc/product/panddy/s4llite/Sequences.js b/services/static-webserver/client/source/class/osparc/product/panddy/s4llite/Sequences.js deleted file mode 100644 index acba77b1ed3..00000000000 --- a/services/static-webserver/client/source/class/osparc/product/panddy/s4llite/Sequences.js +++ /dev/null @@ -1,93 +0,0 @@ -/* ************************************************************************ - - osparc - the simcore frontend - - https://osparc.io - - Copyright: - 2023 IT'IS Foundation, https://itis.swiss - - License: - MIT: https://opensource.org/licenses/MIT - - Authors: - * Odei Maiz (odeimaiz) - -************************************************************************ */ - -qx.Class.define("osparc.product.panddy.s4llite.Sequences", { - type: "static", - - statics: { - getSequences: function() { - return [{ - requiredTarget: "osparc-test-id=dashboard", - name: "Dashboard", - description: "Introduction to Dashboard tabs", - steps: this.__getDashboardSteps() - }, { - requiredTarget: "osparc-test-id=dashboard", - name: "Projects", - description: "Introduction to Studies", - steps: this.__getStudiesSteps() - }, { - requiredTarget: "osparc-test-id=mode-button-modeling", - name: "S4Llite", - description: "Introduction to Studies", - steps: this.__getS4LLiteSteps() - }]; - }, - - __getDashboardSteps: function() { - return [{ - target: "osparc-test-id=studiesTabBtn", - action: "execute", - title: "Projects", - message: "Existing projects can be accessed and managed, and new projects can be created. Each project is represented by a card." - }, { - target: "osparc-test-id=templatesTabBtn", - action: "execute", - title: "Tutorials", - message: "A set of pre-built tutorial projects with results is available to all users. When a tutorial is selected, a copy is automatically created and added to the user’s Projects tab. This new copy is editable." - }]; - }, - - __getStudiesSteps: function() { - return [{ - preStep: { - target: "osparc-test-id=studiesTabBtn", - action: "execute" - }, - target: "osparc-test-id=startS4LButton", - title: "Starting a New Project", - message: "Click here if you want to create a new Project." - }, { - target: "osparc-test-id=searchBarFilter-textField-study", - title: "Project Filter and Search", - message: "Type here the text of the Project you want to search.
Pro tip: click on the field to open filtering options" - }]; - }, - - __getS4LLiteSteps: function() { - return [{ - title: "Welcome to The Rocket", - message: "This is a Proof of Concept" - }, { - target: "osparc-test-id=mode-button-modeling", - action: "execute", - title: "Modeling", - message: "This is the first step in the pipeline. Use our Virtual Population, upload CAD models or build your own model." - }, { - target: "osparc-test-id=mode-button-simulation", - action: "execute", - title: "Simulation", - message: "Simulators, gridders, voxelers and solvers. As you can see, the context chanded so did the avaialble tools." - }, { - target: "osparc-test-id=mode-button-postro", - action: "execute", - title: "Post Processing", - message: "Analyze simulation results and imaging data through advanced visualization and analysis capabilities." - }]; - } - } -}); diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/SlideBase.js b/services/static-webserver/client/source/class/osparc/product/quickStart/SlideBase.js similarity index 86% rename from services/static-webserver/client/source/class/osparc/product/tutorial/SlideBase.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/SlideBase.js index 8587ed95635..0e477503a3a 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/SlideBase.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/SlideBase.js @@ -15,7 +15,7 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.SlideBase", { +qx.Class.define("osparc.product.quickStart.SlideBase", { extend: qx.ui.core.Widget, type: "abstract", @@ -29,7 +29,7 @@ qx.Class.define("osparc.product.tutorial.SlideBase", { }); if (title) { - const label = osparc.product.tutorial.Utils.createTitle(title); + const label = osparc.product.quickStart.Utils.createTitle(title); this._add(label); } diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/SlidesBase.js b/services/static-webserver/client/source/class/osparc/product/quickStart/SlidesBase.js similarity index 98% rename from services/static-webserver/client/source/class/osparc/product/tutorial/SlidesBase.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/SlidesBase.js index 4cb77e1bd3f..e18bada544d 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/SlidesBase.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/SlidesBase.js @@ -15,7 +15,7 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.SlidesBase", { +qx.Class.define("osparc.product.quickStart.SlidesBase", { extend: osparc.ui.window.SingletonWindow, type: "abstract", diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/Utils.js b/services/static-webserver/client/source/class/osparc/product/quickStart/Utils.js similarity index 75% rename from services/static-webserver/client/source/class/osparc/product/tutorial/Utils.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/Utils.js index ba8fd38bd98..2231b754f8b 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/Utils.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/Utils.js @@ -15,26 +15,30 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.Utils", { +qx.Class.define("osparc.product.quickStart.Utils", { type: "static", statics: { - TUTORIALS: { + QUICK_START: { "tis": { localStorageStr: "tiDontShowQuickStart", - tutorial: () => new osparc.product.tutorial.ti.Slides() + tutorial: () => new osparc.product.quickStart.ti.Slides() }, "s4llite": { localStorageStr: "s4lliteDontShowQuickStart", - tutorial: () => new osparc.product.tutorial.s4llite.Slides() + tutorial: () => new osparc.product.quickStart.s4llite.Slides() + }, + "s4l": { + localStorageStr: "s4lDontShowQuickStart", + tutorial: () => new osparc.product.quickStart.s4l.Welcome() } }, - getTutorial: function() { - const tutorials = this.TUTORIALS; + getQuickStart: function() { + const quickStarts = this.QUICK_START; const pName = osparc.product.Utils.getProductName(); - if (Object.keys(tutorials).includes(pName)) { - return tutorials[pName]; + if (Object.keys(quickStarts).includes(pName)) { + return quickStarts[pName]; } return null; }, diff --git a/services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js new file mode 100644 index 00000000000..78b58602490 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js @@ -0,0 +1,145 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.product.quickStart.s4l.Welcome", { + extend: osparc.ui.window.SingletonWindow, + + construct: function() { + this.base(arguments, "s4l-welcome", this.tr("Welcome to Sim4Life")); + + this.set({ + layout: new qx.ui.layout.VBox(20), + contentPadding: 15, + modal: true, + width: 500, + height: 500, + showMaximize: false, + showMinimize: false + }); + + this.__buildLayout(); + }, + + members: { + __buildLayout: function() { + const content = this.__createContent(); + this.add(content, { + flex: 1 + }); + + const footer = this.__createFooter(); + this.add(footer); + }, + + __createContent: function() { + const content = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); + + const introTitle = this.tr("Experience Most Advanced Simulations – All In The Cloud"); + const intro1 = osparc.product.quickStart.Utils.createLabel(introTitle); + intro1.set({ + font: "text-16" + }); + content.add(intro1); + + const welcomeText = this.tr("Welcome onboard ") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getUserName()) + ","; + const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText); + content.add(welcome); + + const introText = this.tr("\ + Sim4Life is a revolutionary simulation platform, combining computable human phantoms with the most powerful physics solvers and the most advanced tissue models, for directly analyzing biological real-world phenomena and complex technical devices in a validated biological and anatomical environment.\ +
\ +
\ + In order to facilitate the introduction to the platform, we have some Guided Tours that can be found under the User Menu.\ +
\ +
\ + For more specific technical information, please refer to the Manuals on the Navigation Bar.\ + "); + const intro2 = osparc.product.quickStart.Utils.createLabel(introText); + content.add(intro2); + + content.add(new qx.ui.core.Spacer(null, 20)); + + const logo = new osparc.ui.basic.Logo().set({ + width: 260, + height: 110 + }); + content.add(logo); + + content.add(new qx.ui.core.Spacer(null, 20)); + + return content; + }, + + __createFooter: function() { + const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({ + alignX: "center" + }); + + const footerItems = this.__getFooterItems(); + footerItems.forEach((footerItem, idx) => { + footer.add(footerItem); + if (idx !== footerItems.length-1) { + footer.add(new qx.ui.core.Widget().set({ + maxHeight: 15 + }), { + flex: 1 + }); + } + }); + + return footer; + }, + + __getFooterItems: function() { + const footerItems = []; + + const docLink = new qx.ui.basic.Label().set({ + visibility: "excluded", + textAlign: "center", + rich : true + }); + osparc.store.Support.getManuals() + .then(manuals => { + if (manuals.length > 0) { + const color = qx.theme.manager.Color.getInstance().resolve("text"); + docLink.setValue(`Documentation`); + } + docLink.show(); + }); + footerItems.push(docLink); + + const licenseLink = new qx.ui.basic.Label().set({ + visibility: "excluded", + textAlign: "center", + rich : true + }); + osparc.store.Support.getLicenseURL() + .then(licenseUrl => { + const color = qx.theme.manager.Color.getInstance().resolve("text"); + const textLink = `Licensing`; + licenseLink.setValue(textLink); + licenseLink.show(); + }); + footerItems.push(licenseLink); + + const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain("s4lDontShowQuickStart"); + footerItems.push(dontShowCB); + + return footerItems; + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Dashboard.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Dashboard.js similarity index 84% rename from services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Dashboard.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Dashboard.js index 96dba364a45..6075367284e 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Dashboard.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Dashboard.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.s4llite.Dashboard", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.s4llite.Dashboard", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Dashboard - Projects & Tutorials"); @@ -28,7 +28,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.Dashboard", { const introText = this.tr("\ The Dashboard is the place where Projects and Tutorials can be accessed and organized.\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); const dashboardProjects = new qx.ui.basic.Image("https://raw.githubusercontent.com/ZurichMedTech/s4l-lite-manual/main/assets/dashboard/projects.png").set({ @@ -42,21 +42,21 @@ qx.Class.define("osparc.product.tutorial.s4llite.Dashboard", { const newProjectText = this.tr("\ 1) Start S4Llite: Click the + Start S4Llite button to create a new project. This will start the user interface of S4Llite.\ "); - const newProject = osparc.product.tutorial.Utils.createLabel(newProjectText); + const newProject = osparc.product.quickStart.Utils.createLabel(newProjectText); this._add(newProject); const otherProjectsText = this.tr("\ 2) Other cards: Each card represents an existing project (own projects, or projects shared by other users) that can be accessed and managed. \ Click on the card to open the project. Click the “three dots” in the upper right corner of the card to perform operations such as rename, share, delete.\ "); - const otherProjects = osparc.product.tutorial.Utils.createLabel(otherProjectsText); + const otherProjects = osparc.product.quickStart.Utils.createLabel(otherProjectsText); this._add(otherProjects); const otherProjects2Text = this.tr("\ 3) TUTORIALS: A set of pre-built read-only tutorial projects with results is available to all S4Llite users. When a tutorial is selected, a \ copy is automatically created and added to the user’s Projects tab. This new copy is editable and can be shared.\ "); - const otherProjects2 = osparc.product.tutorial.Utils.createLabel(otherProjects2Text); + const otherProjects2 = osparc.product.quickStart.Utils.createLabel(otherProjects2Text); this._add(otherProjects2); const dashboardTutorials = new qx.ui.basic.Image("https://raw.githubusercontent.com/ZurichMedTech/s4l-lite-manual/main/assets/opensmash.gif").set({ @@ -75,7 +75,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.Dashboard", { time select “Upload Folder” and then select the result folder from your desktop. Close the window
\ - Click the Menu again and click “Open” to select the file you just uploaded.
\ "); - const importProjects = osparc.product.tutorial.Utils.createLabel(importProjectsText); + const importProjects = osparc.product.quickStart.Utils.createLabel(importProjectsText); this._add(importProjects); } } diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteSpecs.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteSpecs.js similarity index 89% rename from services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteSpecs.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteSpecs.js index 8e79a2f324f..4b605b8c694 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteSpecs.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteSpecs.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteSpecs", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.s4llite.S4LLiteSpecs", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("S4Llite: Features and Limitations"); @@ -31,7 +31,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteSpecs", { facilitate their understanding of computational modeling and simulations for various topics, ranging from wireless communication \ to medical applications. The access to S4Llite is available free of charge to students enrolled at registered universities.\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); const featuresText = this.tr("\ @@ -50,7 +50,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteSpecs", { - Material database
\ - Python and Jupyter Notebook scripting\ "); - const features = osparc.product.tutorial.Utils.createLabel(featuresText); + const features = osparc.product.quickStart.Utils.createLabel(featuresText); this._add(features); const limitationsText = this.tr("\ @@ -69,7 +69,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteSpecs", {  - 5 GB disk space
\  - 16 GB RAM
\ "); - const limitations = osparc.product.tutorial.Utils.createLabel(limitationsText); + const limitations = osparc.product.quickStart.Utils.createLabel(limitationsText); this._add(limitations); } } diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteUI.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteUI.js similarity index 84% rename from services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteUI.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteUI.js index 40ef9ddcbce..59c2d0c81e7 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/S4LLiteUI.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/S4LLiteUI.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteUI", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.s4llite.S4LLiteUI", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("S4Llite"); @@ -28,7 +28,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.S4LLiteUI", { const introText = this.tr("\ To check the S4Llite manual, please open a project and access the documentation via Help in the menu as shown below. Enjoy!\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); const manualGif = new qx.ui.basic.Image("https://zurichmedtech.github.io/s4l-lite-manual/assets/s4l-docs.gif").set({ diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Slides.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Slides.js similarity index 79% rename from services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Slides.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Slides.js index 97d1c1b617a..d0fa923c6b0 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Slides.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Slides.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.s4llite.Slides", { - extend: osparc.product.tutorial.SlidesBase, +qx.Class.define("osparc.product.quickStart.s4llite.Slides", { + extend: osparc.product.quickStart.SlidesBase, construct: function() { this.base(arguments, "s4llite-slides", this.tr("Quick Start")); @@ -25,10 +25,10 @@ qx.Class.define("osparc.product.tutorial.s4llite.Slides", { members: { _getSlides: function() { return [ - new osparc.product.tutorial.s4llite.Welcome(), - new osparc.product.tutorial.s4llite.Dashboard(), - new osparc.product.tutorial.s4llite.S4LLiteSpecs(), - new osparc.product.tutorial.s4llite.S4LLiteUI() + new osparc.product.quickStart.s4llite.Welcome(), + new osparc.product.quickStart.s4llite.Dashboard(), + new osparc.product.quickStart.s4llite.S4LLiteSpecs(), + new osparc.product.quickStart.s4llite.S4LLiteUI() ]; }, // overriden @@ -64,7 +64,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.Slides", { }); footerItems.push(licenseLink); - const dontShowCB = osparc.product.tutorial.Utils.createDontShowAgain("s4lliteDontShowQuickStart"); + const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain("s4lliteDontShowQuickStart"); footerItems.push(dontShowCB); return footerItems; diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Welcome.js b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Welcome.js similarity index 85% rename from services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Welcome.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Welcome.js index 841bf579db9..b6816398a2b 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/s4llite/Welcome.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Welcome.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.s4llite.Welcome", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.s4llite.Welcome", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Quick Start Guide"); @@ -26,7 +26,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.Welcome", { members: { _populateCard: function() { const welcomeText = this.tr("Welcome onboard ") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getUserName()) + ","; - const welcome = osparc.product.tutorial.Utils.createLabel(welcomeText); + const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText); this._add(welcome); const introText = this.tr("\ @@ -38,7 +38,7 @@ qx.Class.define("osparc.product.tutorial.s4llite.Welcome", {
\ For more specific technical information, please refer to the Dashboard Manual and the S4Llite Manual.\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); this._add(new qx.ui.core.Spacer(null, 50)); diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Dashboard.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Dashboard.js similarity index 82% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/Dashboard.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/Dashboard.js index a8d3edfebdc..b7371dcb225 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Dashboard.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Dashboard.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.Dashboard", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.ti.Dashboard", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Dashboard"); @@ -29,7 +29,7 @@ qx.Class.define("osparc.product.tutorial.ti.Dashboard", { The Dashboard is your private hub which contains all of your Plans as well as Plans that have been shared with you. \ From the Dashboard you are able to open your Plan or create a New Plan from scratch.\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); const image = new qx.ui.basic.Image("osparc/tutorial/ti/Dashboard.png").set({ @@ -44,14 +44,14 @@ qx.Class.define("osparc.product.tutorial.ti.Dashboard", { 1) New Plan: by clicking on this card a new study will be created and open.\ The planning process will be presented in three successive steps that will be described more in detail in the following steps.\ "); - const newPlan = osparc.product.tutorial.Utils.createLabel(newPlanText); + const newPlan = osparc.product.quickStart.Utils.createLabel(newPlanText); this._add(newPlan); const otherPlansText = this.tr("\ 2) The other cards are TI Plans that were already created by you or shared with you. You can reopen them to do further anaylisis \ or by clicking three dots, on the top right corner, you can share, delete or check the details and metadata.\ "); - const otherPlans = osparc.product.tutorial.Utils.createLabel(otherPlansText); + const otherPlans = osparc.product.quickStart.Utils.createLabel(otherPlansText); this._add(otherPlans); } } diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/ElectrodeSelector.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/ElectrodeSelector.js similarity index 80% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/ElectrodeSelector.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/ElectrodeSelector.js index ebbc5527e61..afb270a996f 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/ElectrodeSelector.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/ElectrodeSelector.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.ElectrodeSelector", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.ti.ElectrodeSelector", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Electrode Selector"); @@ -28,14 +28,14 @@ qx.Class.define("osparc.product.tutorial.ti.ElectrodeSelector", { const text1 = this.tr("\ After pressing New Plan, three panels will be shown.\ "); - const label1 = osparc.product.tutorial.Utils.createLabel(text1); + const label1 = osparc.product.quickStart.Utils.createLabel(text1); this._add(label1); const text2 = this.tr("\ In a first step, the relevant species, stimulation target, electrode shapes, electrode dimensions and \ potential electrode locations (currently required to narrow down the huge exposure configuration search space) are selected.\ "); - const label2 = osparc.product.tutorial.Utils.createLabel(text2); + const label2 = osparc.product.quickStart.Utils.createLabel(text2); this._add(label2); const image = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/electrode_selector.gif").set({ @@ -49,13 +49,13 @@ qx.Class.define("osparc.product.tutorial.ti.ElectrodeSelector", { const text4 = this.tr("\ After finishing the set up, the big button on the top right will turn blue and by clicking on it you will submit the configuration.\ "); - const label4 = osparc.product.tutorial.Utils.createLabel(text4); + const label4 = osparc.product.quickStart.Utils.createLabel(text4); this._add(label4); const text5 = this.tr("\ Now the Arrow that says 'Next' can be pushed and the optimization will inmediatly start.\ "); - const label5 = osparc.product.tutorial.Utils.createLabel(text5); + const label5 = osparc.product.quickStart.Utils.createLabel(text5); this._add(label5); } } diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/PostPro.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/PostPro.js similarity index 89% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/PostPro.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/PostPro.js index 39152527628..85b183d8669 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/PostPro.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/PostPro.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.PostPro", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.ti.PostPro", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Post Processing"); @@ -30,7 +30,7 @@ qx.Class.define("osparc.product.tutorial.ti.PostPro", { user to interactively explore, using predefined quantification metrics and visualizations. Identified \ conditions-of-interest can be documented and added to a report.\ "); - const label1 = osparc.product.tutorial.Utils.createLabel(text1); + const label1 = osparc.product.quickStart.Utils.createLabel(text1); this._add(label1); const text2 = this.tr("\ @@ -39,7 +39,7 @@ qx.Class.define("osparc.product.tutorial.ti.PostPro", { of the maximum amplitude modulation (MAP) within the head are produced.
\ Pressing the `Load` button on the right, the selected configuration will be loaded.\ "); - const label2 = osparc.product.tutorial.Utils.createLabel(text2); + const label2 = osparc.product.quickStart.Utils.createLabel(text2); this._add(label2); const image1 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_1.gif").set({ @@ -56,7 +56,7 @@ qx.Class.define("osparc.product.tutorial.ti.PostPro", { and saved offline for further inspection and analysis.
\ An isosurface of the TI stimulation distribution for the selected configuration can also be visualized within the head anatomy for inspection.\ "); - const label3 = osparc.product.tutorial.Utils.createLabel(text3); + const label3 = osparc.product.quickStart.Utils.createLabel(text3); this._add(label3); const image2 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_2.gif").set({ @@ -73,7 +73,7 @@ qx.Class.define("osparc.product.tutorial.ti.PostPro", { of the optimized electrode configuration. The report includes electrode placement, current intensities, performance metrics, TI and maximum \ high-frequency field distributions, cumulative dose histograms and all the graphs generated in the post-pro analysis tab.\ "); - const label4 = osparc.product.tutorial.Utils.createLabel(text4); + const label4 = osparc.product.quickStart.Utils.createLabel(text4); this._add(label4); const image3 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_3.gif").set({ diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/S4LPostPro.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/S4LPostPro.js similarity index 85% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/S4LPostPro.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/S4LPostPro.js index 3b9647b7a18..41fd68e91c2 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/S4LPostPro.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/S4LPostPro.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.S4LPostPro", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.ti.S4LPostPro", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Sim4Life Post Processing"); @@ -29,7 +29,7 @@ qx.Class.define("osparc.product.tutorial.ti.S4LPostPro", { Finally, and optionally, exposure conditions-of-interest can be visualized and analyzed freely, using the web-version of the \ Sim4Life (ZMT Zurich MedTech AG) computational life sciences platform.\ "); - const label1 = osparc.product.tutorial.Utils.createLabel(text1); + const label1 = osparc.product.quickStart.Utils.createLabel(text1); this._add(label1); const image1 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_s4l.gif").set({ diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Slides.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Slides.js similarity index 78% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/Slides.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/Slides.js index 10e27bab4c6..789be1e8523 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Slides.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Slides.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.Slides", { - extend: osparc.product.tutorial.SlidesBase, +qx.Class.define("osparc.product.quickStart.ti.Slides", { + extend: osparc.product.quickStart.SlidesBase, construct: function() { this.base(arguments, "ti-slides", this.tr("Quick Start")); @@ -26,11 +26,11 @@ qx.Class.define("osparc.product.tutorial.ti.Slides", { // overriden _getSlides: function() { return [ - new osparc.product.tutorial.ti.Welcome(), - new osparc.product.tutorial.ti.Dashboard(), - new osparc.product.tutorial.ti.ElectrodeSelector(), - new osparc.product.tutorial.ti.PostPro(), - new osparc.product.tutorial.ti.S4LPostPro() + new osparc.product.quickStart.ti.Welcome(), + new osparc.product.quickStart.ti.Dashboard(), + new osparc.product.quickStart.ti.ElectrodeSelector(), + new osparc.product.quickStart.ti.PostPro(), + new osparc.product.quickStart.ti.S4LPostPro() ]; }, @@ -67,7 +67,7 @@ qx.Class.define("osparc.product.tutorial.ti.Slides", { }); footerItems.push(licenseLabel); - const dontShowCB = osparc.product.tutorial.Utils.createDontShowAgain("tiDontShowQuickStart"); + const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain("tiDontShowQuickStart"); footerItems.push(dontShowCB); return footerItems; diff --git a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Welcome.js b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Welcome.js similarity index 82% rename from services/static-webserver/client/source/class/osparc/product/tutorial/ti/Welcome.js rename to services/static-webserver/client/source/class/osparc/product/quickStart/ti/Welcome.js index 90354ea1b30..583affedc91 100644 --- a/services/static-webserver/client/source/class/osparc/product/tutorial/ti/Welcome.js +++ b/services/static-webserver/client/source/class/osparc/product/quickStart/ti/Welcome.js @@ -15,8 +15,8 @@ ************************************************************************ */ -qx.Class.define("osparc.product.tutorial.ti.Welcome", { - extend: osparc.product.tutorial.SlideBase, +qx.Class.define("osparc.product.quickStart.ti.Welcome", { + extend: osparc.product.quickStart.SlideBase, construct: function() { const title = this.tr("Quick Start Guide"); @@ -26,7 +26,7 @@ qx.Class.define("osparc.product.tutorial.ti.Welcome", { members: { _populateCard: function() { const welcomeText = this.tr("Welcome onboard ") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getUserName()) + ","; - const welcome = osparc.product.tutorial.Utils.createLabel(welcomeText); + const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText); this._add(welcome); const introText = this.tr("\ @@ -35,7 +35,7 @@ qx.Class.define("osparc.product.tutorial.ti.Welcome", { - Use the platform
\ - Get started with a New Plan
\ "); - const intro = osparc.product.tutorial.Utils.createLabel(introText); + const intro = osparc.product.quickStart.Utils.createLabel(introText); this._add(intro); this._add(new qx.ui.core.Spacer(null, 50)); diff --git a/services/static-webserver/client/source/class/osparc/product/panddy/Utils.js b/services/static-webserver/client/source/class/osparc/product/tours/Utils.js similarity index 54% rename from services/static-webserver/client/source/class/osparc/product/panddy/Utils.js rename to services/static-webserver/client/source/class/osparc/product/tours/Utils.js index 1963c131049..4fbac14b512 100644 --- a/services/static-webserver/client/source/class/osparc/product/panddy/Utils.js +++ b/services/static-webserver/client/source/class/osparc/product/tours/Utils.js @@ -15,29 +15,26 @@ ************************************************************************ */ -qx.Class.define("osparc.product.panddy.Utils", { +qx.Class.define("osparc.product.tours.Utils", { type: "static", statics: { - SEQUENCES: { + TOURS: { "s4llite": { - getSequences: () => osparc.product.panddy.s4llite.Sequences.getSequences() + fetchTours: () => osparc.product.tours.s4llite.Tours.fetchTours() + }, + "s4l": { + fetchTours: () => osparc.product.tours.s4l.Tours.fetchTours() } }, - hasPanddy: function() { + // it returns a promise + getTours: function() { if (osparc.utils.Utils.isDevelEnv()) { - const sequences = this.SEQUENCES; const pName = osparc.product.Utils.getProductName(); - return Object.keys(sequences).includes(pName); - } - return false; - }, - - getSequences: function() { - if (this.hasPanddy()) { - const pName = osparc.product.Utils.getProductName(); - return this.SEQUENCES[pName].getSequences(); + if (Object.keys(this.TOURS).includes(pName)) { + return this.TOURS[pName].fetchTours(); + } } return null; } diff --git a/services/static-webserver/client/source/class/osparc/product/tours/s4l/Tours.js b/services/static-webserver/client/source/class/osparc/product/tours/s4l/Tours.js new file mode 100644 index 00000000000..a0f05e375be --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/product/tours/s4l/Tours.js @@ -0,0 +1,40 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +/** + * @asset(osparc/tours/s4l_tours.json) + */ + +qx.Class.define("osparc.product.tours.s4l.Tours", { + type: "static", + + statics: { + fetchTours: function() { + return new Promise((resolve, reject) => { + osparc.utils.Utils.fetchJSON("/resource/osparc/tours/s4l_tours.json") + .then(toursObj => { + const tours = Object.values(toursObj); + resolve(tours); + }) + .catch(err => { + console.error(err); + reject(); + }); + }); + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/product/tours/s4llite/Tours.js b/services/static-webserver/client/source/class/osparc/product/tours/s4llite/Tours.js new file mode 100644 index 00000000000..c71a2955eef --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/product/tours/s4llite/Tours.js @@ -0,0 +1,40 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +/** + * @asset(osparc/tours/s4llite_tours.json) + */ + +qx.Class.define("osparc.product.tours.s4llite.Tours", { + type: "static", + + statics: { + fetchTours: function() { + return new Promise((resolve, reject) => { + osparc.utils.Utils.fetchJSON("/resource/osparc/tours/s4llite_tours.json") + .then(toursObj => { + const tours = Object.values(toursObj); + resolve(tours); + }) + .catch(err => { + console.error(err); + reject(); + }); + }); + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/store/Support.js b/services/static-webserver/client/source/class/osparc/store/Support.js index 7881d86f3b3..d3be25e4375 100644 --- a/services/static-webserver/client/source/class/osparc/store/Support.js +++ b/services/static-webserver/client/source/class/osparc/store/Support.js @@ -28,14 +28,14 @@ qx.Class.define("osparc.store.Support", { }, addQuickStartToMenu: function(menu) { - const tutorial = osparc.product.tutorial.Utils.getTutorial(); - if (tutorial) { + const quickStart = osparc.product.quickStart.Utils.getQuickStart(); + if (quickStart) { const qsButton = new qx.ui.menu.Button(qx.locale.Manager.tr("Quick Start")); qsButton.getChildControl("label").set({ rich: true }); qsButton.addListener("execute", () => { - const tutorialWindow = tutorial.tutorial(); + const tutorialWindow = quickStart.tutorial(); tutorialWindow.center(); tutorialWindow.open(); }); @@ -43,16 +43,23 @@ qx.Class.define("osparc.store.Support", { } }, - addPanddyToMenu: function(menu) { - if (osparc.product.panddy.Utils.hasPanddy()) { - const sequences = osparc.product.panddy.Utils.getSequences(); - const panddyButton = new qx.ui.menu.Button(qx.locale.Manager.tr("Panddy")); - panddyButton.addListener("execute", () => { - const panddy = osparc.panddy.Panddy.getInstance(); - panddy.setSequences(sequences); - panddy.start(); - }); - menu.add(panddyButton); + addGuidedToursToMenu: function(menu) { + const guidedToursButton = new qx.ui.menu.Button(qx.locale.Manager.tr("Guided Tours")); + guidedToursButton.exclude(); + menu.add(guidedToursButton); + const fetchTours = osparc.product.tours.Utils.getTours(); + if (fetchTours) { + fetchTours + .then(tours => { + if (tours) { + guidedToursButton.show(); + guidedToursButton.addListener("execute", () => { + const toursManager = new osparc.tours.Manager(); + toursManager.setTours(tours); + toursManager.start(); + }); + } + }); } }, diff --git a/services/static-webserver/client/source/class/osparc/tours/List.js b/services/static-webserver/client/source/class/osparc/tours/List.js new file mode 100644 index 00000000000..808a4549e08 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/tours/List.js @@ -0,0 +1,81 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.tours.List", { + extend: qx.ui.core.Widget, + + construct: function(tours) { + this.base(arguments); + + this._setLayout(new qx.ui.layout.VBox(8)); + + this.getChildControl("tours-layout"); + + if (tours) { + this.setTours(tours); + } + }, + + events: { + "tourSelected": "qx.event.type.Data" + }, + + properties: { + tours: { + check: "Array", + init: [], + nullable: true, + event: "changeTours", + apply: "__applyTours" + } + }, + + members: { + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "tours-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); + this._add(control); + break; + } + return control || this.base(arguments, id); + }, + + __isSelectorVisible: function(doc, selector) { + const domEl = doc.querySelector(`[${selector}]`); + if (domEl) { + const domWidget = qx.ui.core.Widget.getWidgetByElement(domEl); + if (qx.ui.core.queue.Visibility.isVisible(domWidget)) { + return true; + } + } + return false; + }, + + __getTourButton: function(tour) { + const seqButton = new osparc.tours.ListItem(tour); + seqButton.addListener("tap", () => this.fireDataEvent("tourSelected", tour), this); + return seqButton; + }, + + __applyTours: function(tours) { + const toursLayout = this.getChildControl("tours-layout"); + tours.forEach(tour => toursLayout.add(this.__getTourButton(tour))); + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/tours/ListItem.js b/services/static-webserver/client/source/class/osparc/tours/ListItem.js new file mode 100644 index 00000000000..c0f536f017a --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/tours/ListItem.js @@ -0,0 +1,66 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.tours.ListItem", { + extend: qx.ui.core.Widget, + + construct: function(tour) { + this.base(arguments); + + const layout = new qx.ui.layout.Grid(5, 5); + layout.setColumnFlex(0, 1); + + this._setLayout(layout); + + this.set({ + backgroundColor: "material-button-background", + cursor: "pointer", + allowGrowX: true, + padding: 10 + }); + + const titleLabel = new qx.ui.basic.Label(tour.name).set({ + font: "text-14", + rich: true + }); + this._add(titleLabel, { + row: 0, + column: 0 + }); + if (tour.description) { + const descriptionLabel = new qx.ui.basic.Label(tour.description).set({ + font: "text-13", + rich: true + }); + this._add(descriptionLabel, { + row: 1, + column: 0 + }); + } + const image = new qx.ui.basic.Image("@FontAwesome5Solid/arrow-right/14").set({ + alignY: "middle" + }); + this._add(image, { + row: 0, + column: 1, + rowSpan: 2 + }); + + this.addListener("pointerover", () => this.setBackgroundColor("material-button-background-hovered"), this); + this.addListener("pointerout", () => this.setBackgroundColor("material-button-background"), this); + } +}); diff --git a/services/static-webserver/client/source/class/osparc/tours/Manager.js b/services/static-webserver/client/source/class/osparc/tours/Manager.js new file mode 100644 index 00000000000..a0d8ca05946 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -0,0 +1,181 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.tours.Manager", { + extend: osparc.ui.window.SingletonWindow, + + construct: function() { + this.base(arguments, "guided-torus", this.tr("Guided Tours")); + + this.set({ + layout: new qx.ui.layout.VBox(20), + contentPadding: 15, + modal: true, + width: 300, + height: 300, + showMaximize: false, + showMinimize: false + }); + + this.__buildLayout(); + }, + + properties: { + tours: { + check: "Array", + init: [], + nullable: true, + event: "changeTours" + }, + + steps: { + check: "Array", + init: [], + nullable: true + } + }, + + members: { + __currentBubble: null, + __currentIdx: null, + + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "intro-text": + control = new qx.ui.basic.Label().set({ + value: this.tr("This collection of Guided Tours will show you how to use the framework:"), + rich: true, + wrap: true, + font: "text-14" + }); + this.add(control); + break; + case "guided-tours-list": { + control = new osparc.tours.List(); + control.addListener("tourSelected", e => this.__selectTour(e.getData())); + this.bind("tours", control, "tours"); + this.add(control); + break; + } + } + return control || this.base(arguments, id); + }, + + __buildLayout: function() { + this.getChildControl("intro-text"); + this.getChildControl("guided-tours-list"); + }, + + start: function() { + this.center(); + this.open(); + }, + + stop: function() { + this.__removeCurrentBubble(); + }, + + __removeCurrentBubble: function() { + if (this.__currentBubble) { + qx.core.Init.getApplication().getRoot().remove(this.__currentBubble); + this.__currentBubble.exclude(); + this.__currentBubble = null; + } + }, + + __selectTour: function(tour) { + this.close(); + if ("steps" in tour) { + this.setSteps(tour.steps); + this.__toStepCheck(0); + } + }, + + __toStepCheck: function(idx = 0) { + const steps = this.getSteps(); + if (idx >= steps.length) { + idx = 0; + } + + this.__removeCurrentBubble(); + this.__currentIdx = idx; + const step = steps[idx]; + if (step.beforeClick && step.beforeClick.selector) { + const element = document.querySelector(`[${step.beforeClick.selector}]`); + const widget = qx.ui.core.Widget.getWidgetByElement(element); + if (step.beforeClick.action) { + widget[step.beforeClick.action](); + } else { + widget.execute(); + } + setTimeout(() => this.__toStep(steps, idx), 100); + } else { + this.__toStep(steps, idx); + } + }, + + __createStep: function(element, text) { + const stepWidget = new osparc.tours.Step(element, text).set({ + maxWidth: 400 + }); + [ + "skipPressed", + "endPressed" + ].forEach(evName => stepWidget.addListener(evName, () => this.stop(), this)); + stepWidget.addListener("nextPressed", () => this.__toStepCheck(this.__currentIdx+1), this); + return stepWidget; + }, + + __toStep: async function(steps, idx) { + const step = steps[idx]; + const stepWidget = this.__currentBubble = this.__createStep(); + if (step.anchorEl) { + const el = document.querySelector(`[${step.anchorEl}]`); + const targetWidget = qx.ui.core.Widget.getWidgetByElement(el); + if (targetWidget) { + stepWidget.setElement(targetWidget); + if (step.placement) { + stepWidget.setOrientation(osparc.ui.basic.FloatingHelper.textToOrientation(step.placement)); + } + } else { + // target not found, move to the next step + this.__toStepCheck(this.__currentIdx+1); + } + } else { + stepWidget.getChildControl("caret").exclude(); + stepWidget.moveToTheCenter(); + } + if (step.title) { + stepWidget.setTitle(step.title); + } + if (step.text) { + stepWidget.setText(step.text); + } + if (steps.length > 1) { + stepWidget.set({ + stepIndex: idx+1, + nSteps: steps.length + }); + } + + stepWidget.show(); + // eslint-disable-next-line no-underscore-dangle + setTimeout(() => stepWidget.__updatePosition(), 10); // Hacky: Execute async and give some time for the relevant properties to be set + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/panddy/Step.js b/services/static-webserver/client/source/class/osparc/tours/Step.js similarity index 98% rename from services/static-webserver/client/source/class/osparc/panddy/Step.js rename to services/static-webserver/client/source/class/osparc/tours/Step.js index d646f959a78..de0aa3ca267 100644 --- a/services/static-webserver/client/source/class/osparc/panddy/Step.js +++ b/services/static-webserver/client/source/class/osparc/tours/Step.js @@ -15,11 +15,11 @@ ************************************************************************ */ -qx.Class.define("osparc.panddy.Step", { +qx.Class.define("osparc.tours.Step", { extend: osparc.ui.basic.FloatingHelper, construct: function(element, title, message) { - this.base(arguments, element); + this.base(arguments, element, "large"); this.setLayout(new qx.ui.layout.VBox(8)); diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/FloatingHelper.js b/services/static-webserver/client/source/class/osparc/ui/basic/FloatingHelper.js index 7dc65388955..d5ff9233b03 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/FloatingHelper.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/FloatingHelper.js @@ -14,7 +14,7 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { extend: qx.ui.core.Widget, include: [qx.ui.core.MRemoteChildrenHandling, qx.ui.core.MRemoteLayoutHandling], - construct: function(element) { + construct: function(element, caretSize) { this.base(arguments); this.set({ backgroundColor: "transparent", @@ -22,6 +22,10 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { zIndex: 110000 }); + if (caretSize) { + this.setCaretSize(caretSize); + } + const hintCssUri = qx.util.ResourceManager.getInstance().toUri("hint/hint.css"); qx.module.Css.includeStylesheet(hintCssUri); @@ -68,6 +72,12 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { apply: "__applyOrientation" }, + caretSize: { + check: ["small", "large"], + nullable: false, + init: "small" + }, + active: { check: "Boolean", nullable: false, @@ -85,12 +95,14 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { backgroundColor: "node-selected-background" }); break; - case "caret": + case "caret": { control = new qx.ui.container.Composite().set({ backgroundColor: "transparent" }); - control.getContentElement().addClass("hint"); + const classPrefix = this.getCaretSize() === "large" ? "hint-large" : "hint"; + control.getContentElement().addClass(classPrefix); break; + } } return control || this.base(arguments, id); }, @@ -98,16 +110,18 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { __buildWidget: function() { this._removeAll(); + const classPrefix = this.getCaretSize() === "large" ? "hint-large" : "hint"; + const hintContainer = this.getChildControl("hint-container"); const caret = this.getChildControl("caret"); - caret.getContentElement().removeClass("hint-top"); - caret.getContentElement().removeClass("hint-right"); - caret.getContentElement().removeClass("hint-bottom"); - caret.getContentElement().removeClass("hint-left"); + caret.getContentElement().removeClass(classPrefix+"-top"); + caret.getContentElement().removeClass(classPrefix+"-right"); + caret.getContentElement().removeClass(classPrefix+"-bottom"); + caret.getContentElement().removeClass(classPrefix+"-left"); switch (this.getOrientation()) { case this.self().ORIENTATION.TOP: case this.self().ORIENTATION.LEFT: { - caret.getContentElement().addClass(this.getOrientation() === this.self().ORIENTATION.LEFT ? "hint-left" : "hint-top"); + caret.getContentElement().addClass(this.getOrientation() === this.self().ORIENTATION.LEFT ? classPrefix+"-left" : classPrefix+"-top"); this._setLayout(this.getOrientation() === this.self().ORIENTATION.LEFT ? new qx.ui.layout.HBox() : new qx.ui.layout.VBox()); this._add(hintContainer, { flex: 1 @@ -117,7 +131,7 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { } case this.self().ORIENTATION.RIGHT: case this.self().ORIENTATION.BOTTOM: { - caret.getContentElement().addClass(this.getOrientation() === this.self().ORIENTATION.RIGHT ? "hint-right" : "hint-bottom"); + caret.getContentElement().addClass(this.getOrientation() === this.self().ORIENTATION.RIGHT ? classPrefix+"-right" : classPrefix+"-bottom"); this._setLayout(this.getOrientation() === this.self().ORIENTATION.RIGHT ? new qx.ui.layout.HBox() : new qx.ui.layout.VBox()); this._add(caret); this._add(hintContainer, { @@ -126,16 +140,17 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { break; } } + const caretSize = this.getCaretSize() === "large" ? 10 : 5; switch (this.getOrientation()) { case this.self().ORIENTATION.RIGHT: case this.self().ORIENTATION.LEFT: caret.setHeight(0); - caret.setWidth(5); + caret.setWidth(caretSize); break; case this.self().ORIENTATION.TOP: case this.self().ORIENTATION.BOTTOM: caret.setWidth(0); - caret.setHeight(5); + caret.setHeight(caretSize); break; } }, @@ -176,6 +191,14 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { } }, + moveToTheCenter: function() { + const properties = {}; + const selfBounds = this.getHintBounds(); + properties.top = Math.floor((window.innerHeight - selfBounds.width) / 2); + properties.left = Math.floor((window.innerWidth - selfBounds.height) / 2); + this.setLayoutProperties(properties); + }, + getHintBounds: function() { return this.getBounds() || this.getSizeHint(); }, @@ -254,7 +277,7 @@ qx.Class.define("osparc.ui.basic.FloatingHelper", { case "resize": case "scrollX": case "scrollY": - setTimeout(() => this.__updatePosition(), 50); // Hacky: Execute async and give some time for the relevant properties to be set + setTimeout(() => this.__updatePosition(), 20); // Hacky: Execute async and give some time for the relevant properties to be set break; } }, diff --git a/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcherFormBtn.js b/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcherFormBtn.js index c0e789f3ec1..afb65184b50 100644 --- a/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcherFormBtn.js +++ b/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcherFormBtn.js @@ -15,6 +15,8 @@ qx.Class.define("osparc.ui.switch.ThemeSwitcherFormBtn", { construct: function() { this.base(arguments); + osparc.utils.Utils.setIdToWidget(this, "themeSwitcher"); + if (!osparc.ui.switch.ThemeSwitcher.isSwitchUseful()) { this.setVisibility("excluded"); return; diff --git a/services/static-webserver/client/source/resource/hint/hint.css b/services/static-webserver/client/source/resource/hint/hint.css index 7dc466da399..98e75cd0ba9 100644 --- a/services/static-webserver/client/source/resource/hint/hint.css +++ b/services/static-webserver/client/source/resource/hint/hint.css @@ -34,4 +34,43 @@ top: 50%; margin-top: -5px; border-left-color: #666; +} + + +.hint-large:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 10px; +} + +.hint-large-top:after { + top: 0; + left: 50%; + margin-left: -10px; + border-top-color: #69747b; +} + +.hint-large-right:after { + right: 0; + top: 50%; + margin-top: -10px; + border-right-color: #69747b; +} + +.hint-large-bottom:after { + bottom: 0; + left: 50%; + margin-left: -10px; + border-bottom-color: #69747b; +} + +.hint-large-left:after { + left: 0; + top: 50%; + margin-top: -10px; + border-left-color: #69747b; } \ No newline at end of file diff --git a/services/static-webserver/client/source/resource/osparc/tours/s4l_tours.json b/services/static-webserver/client/source/resource/osparc/tours/s4l_tours.json new file mode 100644 index 00000000000..e629b3170ab --- /dev/null +++ b/services/static-webserver/client/source/resource/osparc/tours/s4l_tours.json @@ -0,0 +1,127 @@ +{ + "dashboard": { + "id": "dashboard", + "name": "Dashboard", + "description": "Introduction to the Dashboard tabs", + "steps": [{ + "anchorEl": "osparc-test-id=dashboardLabel", + "title": "Dashboard", + "text": "The Dashboard is your private hub which contains all of your simulation Projects, as well as Projects that have been shared with you.
From the Dashboard you are able to open your projects and create new ones.", + "placement": "bottom" + }, { + "anchorEl": "osparc-test-id=dashboardTabs", + "title": "Dashboard Menu", + "text": "The menu tabs give you quick access to a set of core elements of the platform, namely Projects, Tutorials, Services and Data.", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=studiesTabBtn" + }, + "anchorEl": "osparc-test-id=studiesTabBtn", + "text": "Any Project is accessible via the Dashboard. The Projects, which belong to or are shared with you, can be found here.", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=templatesTabBtn" + }, + "anchorEl": "osparc-test-id=templatesTabBtn", + "text": "Clicking on a Tutorial will create a copy of that Study, which will appear in your own Project ts tab with thee same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=servicesTabBtn" + }, + "anchorEl": "osparc-test-id=servicesTabBtn", + "text": "Every Project in Sim4Life is composed of at lease one so-called Service.
Services are building blocks for Studies and can provide data/files, visualize results (2D, 3D), implement code in Jupyter notebooks or perform computations to execute simulations within a Project.", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=dataTabBtn" + }, + "anchorEl": "osparc-test-id=dataTabBtn", + "text": "The Data tab allow you to browse the output files of all of your active pipelines in one place. This is most useful for downloading the data created on the online platform.", + "placement": "bottom" + }] + }, + "navbar": { + "id": "navbar", + "name": "Navigation Bar", + "description": "Introduction to the Navigation Bar", + "steps": [{ + "anchorEl": "osparc-test-id=walletsMiniViewer", + "title": "Credits", + "text": "It will open the User Center", + "placement": "bottom" + }, { + "anchorEl": "osparc-test-id=notificationsButton", + "title": "Notifications", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=manualsButton", + "action": "open" + }, + "anchorEl": "osparc-test-id=manualsMenu", + "text": "The Manuals menu groups the oSPARC Manual and oSPARC Z43 Manual. It also provides quick access to other interactive Guides.", + "placement": "left" + }, { + "beforeClick": { + "selector": "osparc-test-id=feedbackButton", + "action": "open" + }, + "anchorEl": "osparc-test-id=feedbackMenu", + "text": "The Support menu gives you a way of providing feedback or questions, via the ZMT Forum or the official Sim4Life Support.", + "placement": "left" + }, { + "anchorEl": "osparc-test-id=themeSwitcher", + "text": "Switch between dark and light modes", + "placement": "bottom" + }, { + "beforeClick": { + "selector": "osparc-test-id=userMenuBtn", + "action": "open" + }, + "anchorEl": "osparc-test-id=userMenuMenu", + "text": "The User menu gives you access to the User Center, Preferences, Organizations and more.", + "placement": "left" + }] + }, + "projects": { + "id": "projects", + "name": "Projects", + "description": "All you need to know about Project handling", + "steps": [{ + "beforeClick": { + "selector": "osparc-test-id=studiesTabBtn" + }, + "anchorEl": "osparc-test-id=searchBarFilter-textField-study", + "title": "Project Filter and Search", + "text": "This tool allows you to filter Projects, Tutorials and Services.
You can search and filter by:
- Title, description, owner, id...
- Tags
- Shared with", + "placement": "bottom" + }, { + "anchorEl": "osparc-test-id=startS4LButton", + "title": "Start Sim4Life", + "text": "Clicking on this (+) Start Sim4Life button, allows you to create and open a new Sim4Life project", + "placement": "right" + }, { + "anchorEl": "osparc-test-id=startJSmashButton", + "title": "Start Sim4Life lab", + "text": "Clicking on this (+) Start Sim4Life lab button, allows you to create and open a new Sim4Life powered Jupyter notebook.", + "placement": "right" + }, { + "beforeClick": { + "selector": "osparc-test-id=studyItemMenuButton", + "action": "open" + }, + "anchorEl": "osparc-test-id=studyItemMenuMenu", + "title": "More options button", + "text": "On the Project card, you can use the three dots button to access more information and operation on the Project.", + "placement": "left" + }, { + "anchorEl": "osparc-test-id=updateStudyBtn", + "title": "Update Services", + "text": "On the Project card, you can use the Update button to update the corresponding service to the latest version.", + "placement": "bottom" + }] + } +} diff --git a/services/static-webserver/client/source/resource/osparc/tours/s4llite_tours.json b/services/static-webserver/client/source/resource/osparc/tours/s4llite_tours.json new file mode 100644 index 00000000000..7cfe8df14e4 --- /dev/null +++ b/services/static-webserver/client/source/resource/osparc/tours/s4llite_tours.json @@ -0,0 +1,24 @@ +{ + "dashboard": { + "id": "dashboard", + "name": "Dashboard", + "description": "Introduction to Dashboard tabs", + "steps": [{ + "anchorEl": "osparc-test-id=studiesTabBtn", + "beforeClick": { + "selector": "osparc-test-id=studiesTabBtn" + }, + "title": "Projects", + "text": "Existing projects can be accessed and managed, and new projects can be created. Each project is represented by a card.", + "placement": "bottom" + }, { + "anchorEl": "osparc-test-id=templatesTabBtn", + "beforeClick": { + "selector": "osparc-test-id=templatesTabBtn" + }, + "title": "Tutorials", + "text": "A set of pre-built tutorial projects with results is available to all users. When a tutorial is selected, a copy is automatically created and added to the user’s Projects tab. This new copy is editable.", + "placement": "bottom" + }] + } +} diff --git a/tests/e2e/jest-puppeteer.config.js b/tests/e2e/jest-puppeteer.config.js index 03196d60d30..0e7169df578 100644 --- a/tests/e2e/jest-puppeteer.config.js +++ b/tests/e2e/jest-puppeteer.config.js @@ -1,4 +1,4 @@ -const demo = false; +const demo = false; // For local testing, set this to true to make it non headless module.exports = { launch: { diff --git a/tests/e2e/jest.config.js b/tests/e2e/jest.config.js index 1d7a1ab04af..9d977d4be17 100644 --- a/tests/e2e/jest.config.js +++ b/tests/e2e/jest.config.js @@ -4,7 +4,7 @@ module.exports = { collectCoverage: true, coverageReporters: ["lcov", "text"], globals: { - url: "http://127.0.0.1:9081/", + url: "http://127.0.0.1:9081/", // For local testing, set your deployed url here apiVersion: 'v0/', ourTimeout: 40000, }