✨ New Product: Sim4Life Engineering, coming soon! (🚨) (#6036)

Author: odeimaiz

services/docker-compose.yml

@@ -502,7 +502,7 @@ services:
         - traefik.http.services.${SWARM_STACK_NAME}_static_webserver.loadbalancer.healthcheck.interval=2000ms
         - traefik.http.services.${SWARM_STACK_NAME}_static_webserver.loadbalancer.healthcheck.timeout=1000ms
         - traefik.http.middlewares.${SWARM_STACK_NAME}_static_webserver_retry.retry.attempts=2
-        - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.rule=hostregexp(`{host:.+}`) && (Path(`/osparc`,`/s4l`,`/s4llite`,`/s4lacad`,`/s4ldesktop`,`/s4ldesktopacad`,`/tis`,`/transpiled`,`/resource`) || PathPrefix(`/osparc/`,`/s4l/`,`/s4llite/`,`/s4lacad/`,`/s4ldesktop/`,`/s4ldesktopacad/`,`/tis/`,`/transpiled/`,`/resource/`))
+        - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.rule=hostregexp(`{host:.+}`) && (Path(`/osparc`,`/s4l`,`/s4llite`,`/s4lacad`,`/s4lengine`,`/s4ldesktop`,`/s4ldesktopacad`,`/tis`,`/transpiled`,`/resource`) || PathPrefix(`/osparc/`,`/s4l/`,`/s4llite/`,`/s4lacad/`,`/s4lengine/`,`/s4ldesktop/`,`/s4ldesktopacad/`,`/tis/`,`/transpiled/`,`/resource/`))
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.service=${SWARM_STACK_NAME}_static_webserver
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.entrypoints=http
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.priority=2

services/static-webserver/README.md

@@ -6,5 +6,5 @@ Used for static content serving.
 
 In the future will fully serve all static content. Currently the `webserver` is still serving the following routes:
 
-- `/` resolves to one of the three index.html pages inside the 4 products (osparc, tis, s4l, s4llite, s4lacad, s4ldesktop, s4ldesktopacad)
+- `/` resolves to one of the three index.html pages inside the 4 products (osparc, tis, s4l, s4llite, s4lacad, s4lengine, s4ldesktop, s4ldesktopacad)
 - `/static-frontend-data.json` contains information required by the fronted

services/static-webserver/client/compile.json

@@ -84,6 +84,22 @@
       "addTimestampsToUrls": true,
       "bootPath": "source/boot"
     },
+    {
+      "class": "osparc.Application",
+      "theme": "osparc.theme.products.s4l.ThemeDark",
+      "name": "s4lengine",
+      "title": "Sim4Life Engineering",
+      "include": [
+        "iconfont.material.Load",
+        "iconfont.fontawesome5.Load",
+        "osparc.theme.products.s4l.ThemeLight"
+      ],
+      "environment": {
+        "product.name": "s4lengine"
+      },
+      "addTimestampsToUrls": true,
+      "bootPath": "source/boot"
+    },
     {
       "class": "osparc.Application",
       "theme": "osparc.theme.products.s4l.ThemeDark",

services/static-webserver/client/scripts/apps_metadata.json

@@ -21,6 +21,13 @@
                 "replace_me_og_description": "Sim4Life for Science - Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
                 "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-academy.png"
             }
+        }, {
+            "application": "s4lengine",
+            "replacements": {
+                "replace_me_og_title": "Sim4Life Engineering",
+                "replace_me_og_description": "Sim4Life for Engineers - Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-default.png"
+            }
         }, {
             "application": "s4ldesktop",
             "replacements": {

services/static-webserver/client/source/class/osparc/Application.js

@@ -42,8 +42,6 @@ qx.Class.define("osparc.Application", {
       // Call super class
       this.base();
 
-      this.__preventAutofillBrowserStyles();
-
       // Enable logging in debug variant
       if (qx.core.Environment.get("qx.debug")) {
         // support native logging capabilities, e.g. Firebug for Firefox
@@ -52,6 +50,17 @@ qx.Class.define("osparc.Application", {
 
       await this.__preloadCalls();
 
+      this.__preventAutofillBrowserStyles();
+      this.__loadCommonCss();
+      this.__updateTabName();
+      this.__updateFavicon();
+
+      if (qx.core.Environment.get("product.name") === "s4lengine") {
+        const view = new osparc.auth.BlurredLoginPageS4LEngineering();
+        this.__loadView(view);
+        return;
+      }
+
       const intlTelInput = osparc.wrapper.IntlTelInput.getInstance();
       intlTelInput.init();
 
@@ -83,11 +92,6 @@ qx.Class.define("osparc.Application", {
       // Setting up auth manager
       osparc.auth.Manager.getInstance().addListener("logout", () => this.__restart(), this);
 
-      this.__loadCommonCss();
-
-      this.__updateTabName();
-      this.__updateFavicon();
-
       this.__initRouting();
       this.__startupChecks();
     },

services/static-webserver/client/source/class/osparc/auth/BlurredLoginPageS4LEngineering.js

@@ -0,0 +1,43 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.auth.BlurredLoginPageS4LEngineering", {
+  extend: qx.ui.core.Widget,
+
+  construct: function() {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.Grow());
+
+    this.__loadHtml();
+  },
+
+  members: {
+    __loadHtml: function() {
+      const htmlEmbed = new qx.ui.embed.Html();
+      this._add(htmlEmbed);
+
+      // Fetch the HTML file
+      const req = new qx.io.request.Xhr("resource/osparc/S4LEngine_ComingSoon.html");
+      req.addListener("success", function(e) {
+        var response = e.getTarget().getResponse();
+        htmlEmbed.setHtml(response);
+      });
+      req.send();
+    }
+  }
+});

services/static-webserver/client/source/resource/osparc/S4LEngine_ComingSoon.html

@@ -0,0 +1,38 @@
+<head>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+    }
+    .bg {
+      position: fixed;
+      top: 0;
+      left: 0;
+      /* Preserve aspet ratio */
+      min-width: 100%;
+      min-height: 100%;
+    }
+    .container {
+      position: relative;
+      text-align: center;
+      color: white;
+    }
+    .centered {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+</head>
+<body>
+  <img class="bg" src="https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L_engineering/Login_blurred.png" alt="S4L Engineering" style="width:100%;">
+  <div class="container"></div>
+    <div class="centered">
+      <img src="https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L_engineering/ComingSoon.png" alt="Coming Soon" style="width:100%;">
+    </div>
+  </section>
+</body>
+
+</html>

services/web/server/src/simcore_service_webserver/statics/_constants.py

@@ -1,6 +1,17 @@
 # these are the apps built right now by static-webserver/client
 
-FRONTEND_APPS_AVAILABLE = frozenset({"osparc", "tis", "s4l", "s4llite", "s4lacad", "s4ldesktop", "s4ldesktopacad"})
+FRONTEND_APPS_AVAILABLE = frozenset(
+    {
+        "osparc",
+        "tis",
+        "s4l",
+        "s4llite",
+        "s4lacad",
+        "s4lengine",
+        "s4ldesktop",
+        "s4ldesktopacad",
+    }
+)
 FRONTEND_APP_DEFAULT = "osparc"
 
 assert FRONTEND_APP_DEFAULT in FRONTEND_APPS_AVAILABLE  # nosec

services/web/server/src/simcore_service_webserver/statics/_events.py

@@ -48,7 +48,7 @@
 
 async def create_cached_indexes(app: web.Application) -> None:
     """
-    Currently the static resources are contain 4 folders: osparc, s4l, s4llite, s4lacad, tis
+    Currently the static resources contain N folders: osparc, s4l, s4llite, s4lacad, s4lengine, tis
     each of them contain and index.html to be served to as the root of the site
     for each type of frontend.
 

services/web/server/src/simcore_service_webserver/statics/plugin.py

@@ -30,8 +30,8 @@ def setup_statics(app: web.Application) -> None:
 
     setup_products(app)
 
-    # serves information composed by making 4 http requests (once for each product)
-    # to the index.html in each of the 4 product directories /osparc, /s4l, /s4llite, /s4lacad, /s4ldesktop, /s4ldesktopacad,  and /tis
+    # serves information composed by making N http requests (once for each product)
+    # to the index.html in each of the N product directories /osparc, /s4l, /s4llite, /s4lacad, /s4lengine, /s4ldesktop, /s4ldesktopacad, and /tis
     app.router.add_get("/", get_cached_frontend_index, name=INDEX_RESOURCE_NAME)
 
     # statics.json is computed here and contains information used