wc: Style landing of jupyter notebook tool #TASK-7216 #TASK-7100

opencb · Jan 9, 2025 · 12be2df · 12be2df
1 parent 4fda44f
commit 12be2df
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/src/webcomponents/commons/analysis/jupyter-notebook.js b/src/webcomponents/commons/analysis/jupyter-notebook.js
@@ -18,6 +18,7 @@ import {LitElement, html} from "lit";
 import {guardPage} from "../html-utils.js";
 import "../../text-icon.js";
 import "./opencga-analysis-tool-form.js";
+import "../tool-header.js";
 
 export default class JupyterNotebook extends LitElement {
 
@@ -68,23 +69,28 @@ export default class JupyterNotebook extends LitElement {
         // }));
     }
 
-    render() {
+    renderContent() {
         // Check Project exists
         if (!this.opencgaSession.study) {
             return guardPage("No OpenCGA study available to run an analysis. Please login to continue.");
         }
 
         if (!this.enter) {
             return html`
-                <div>
-                    <div>
-                        <h2>Jupyter Notebook</h2>
-                    </div>
-                    <div>
-                        <span>Open Jupyter Notebook</span>
-                    </div>
-                    <div>
-                        <button type="button" class="btn btn-primary" @click="${this.onEnterClick}">Click me!</button>
+                <div class="card">
+                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-5">
+                        <div class="d-flex text-gray-600 mb-3 mt-5" style="font-size:3rem;">
+                            <i class="fas fa-rocket"></i>
+                        </div>
+                        <div class="text-center fs-5 text-gray-700 mb-4" style="max-width:560px;">
+                            <span>Create and execute Jupyter Notebooks to analyze your data on this OpenCGA instance. </span>
+                            <span class="fw-bold">Please note that this may involve additional costs.</span>
+                        </div>
+                        <div class="mb-5">
+                            <button type="button" class="btn btn-lg btn-primary" @click="${this.onEnterClick}">
+                                <span>Run Jupyter Notebook</span>
+                            </button>
+                        </div>
                     </div>
                 </div>
             `;
@@ -96,12 +102,11 @@ export default class JupyterNotebook extends LitElement {
             const token = this.opencgaSession.token;
 
             return html`
-                <div class="p-2">
-                    <h2>Jupyter Notebook</h2>
-                    <div class="m-3">
+                <div class="card">
+                    <div class="card-body p-0">
                         <iframe
                             src="${jupyterLoginUrl}?userId=${userId}&organizationId=${organizationId}&opencgaUrl=${serverUrl}&logoutUrl=https:%2F%2Fwww.google.com&token=${token}"
-                            width="1600"
+                            width="100%"
                             height="720">
                         </iframe>
                     </div>
@@ -110,6 +115,13 @@ export default class JupyterNotebook extends LitElement {
         }
     }
 
+    render() {
+        return html`
+            <tool-header title="Jupyter Notebook"></tool-header>
+            ${this.renderContent()}
+        `;
+    }
+
 }
 
 customElements.define("jupyter-notebook", JupyterNotebook);