-
-
-
-
-
-
+
+
`;
}
diff --git a/src/webcomponents/commons/layout/layout-sidebar.js b/src/webcomponents/commons/layout/layout-sidebar.js
index e04ee5534..1cef5c304 100644
--- a/src/webcomponents/commons/layout/layout-sidebar.js
+++ b/src/webcomponents/commons/layout/layout-sidebar.js
@@ -64,7 +64,7 @@ export default class LayoutSidebar extends LitElement {
Jupyter Notebook
+
+
+
+
- ${this.renderButton({id: "dashboard", name: "Dashboard", icon: "fa-home"})}
+ ${this.renderButton({id: "study-dashboard", name: "Dashboard", icon: "fa-home"})}
${this.config?.apps?.length > 0 ? html`
${this.renderSectionSeparator("Apps")}
${this.config.apps.map(app => this.renderButton(app))}
diff --git a/src/webcomponents/commons/pages/welcome-page.js b/src/webcomponents/commons/pages/welcome-page.js
new file mode 100644
index 000000000..91ad345f7
--- /dev/null
+++ b/src/webcomponents/commons/pages/welcome-page.js
@@ -0,0 +1,170 @@
+import {LitElement, html, nothing} from "lit";
+import UtilsNew from "../../../core/utils-new.js";
+import {guardPage} from "../html-utils.js";
+
+export default class WelcomePage extends LitElement {
+
+ createRenderRoot() {
+ return this;
+ }
+
+ static get properties() {
+ return {
+ app: {
+ type: Object
+ },
+ opencgaSession: {
+ type: Object
+ },
+ config: {
+ type: Object
+ }
+ };
+ }
+
+ renderApplications() {
+ const visibleApps = (this.config.apps || []).filter(app => {
+ return UtilsNew.isAppVisible(app, this.opencgaSession);
+ });
+
+ return html`
+
+ ${visibleApps.map(item => html`
+
+ `;
+ }
+
+ renderTools() {
+ const visibleTools = (this.app.menu || []).filter(item => {
+ return UtilsNew.isAppVisible(item, this.opencgaSession);
+ });
+
+ return html`
+
+
+ `)}
+
+
+
+
+
+
+
+ ${item.title || item.name}
+ ${item.description ? html`
+
+ ${item.description}
+
+ ` : nothing}
+
+
+ ${visibleTools.map(item => html`
+
+ `;
+ }
+
+ render() {
+ // this checks if we are in the suite (global welcome) or in a specific app (app welcome)
+ const isWelcomeSuite = !this.app || this.app?.id === "suite";
+ const welcomePage = isWelcomeSuite ? this.config.welcomePage : this.app.welcomePage; // get the welcome page config
+
+ if (!UtilsNew.isNotEmptyArray(this.opencgaSession?.projects) ||
+ this.opencgaSession.projects.every(p => !UtilsNew.isNotEmptyArray(p.studies))) {
+ return guardPage("You don't have projects or/and studies. Please contact the admin");
+ }
+
+ return html`
+
+
+ `)}
+
+
+
+
+
+ ${item.title || item.name}
+ ${item.description ? html`
+
+ ${UtilsNew.renderHTML(item.description)}
+
+ ` : nothing}
+
+ Enter ${item.name || item.title}
+
+
+
+ ${welcomePage?.logo ? html`
+
+ `;
+ }
+
+}
+
+customElements.define("welcome-page", WelcomePage);
diff --git a/src/webcomponents/study/study-dashboard.js b/src/webcomponents/study/study-dashboard.js
new file mode 100644
index 000000000..165cd92a3
--- /dev/null
+++ b/src/webcomponents/study/study-dashboard.js
@@ -0,0 +1,37 @@
+import {LitElement, html, nothing} from "lit";
+import UtilsNew from "../../core/utils-new.js";
+
+export default class StudyDasboard extends LitElement {
+
+ createRenderRoot() {
+ return this;
+ }
+
+ static get properties() {
+ return {
+ app: {
+ type: Object
+ },
+ opencgaSession: {
+ type: Object
+ },
+ config: {
+ type: Object
+ }
+ };
+ }
+
+ render() {
+ return html`
+
+ 
+
+ ` : nothing}
+
+
+ ${welcomePage?.title ? html`
+
+
+ `: nothing}
+
+
+ ${welcomePage?.content ? html`
+
+ ${welcomePage.appLogo?.img ? html`
+ 
+ ` : nothing}
+
+ ${welcomePage?.subtitle ? html`
+
+ ${welcomePage.title}
+
+
+ ${welcomePage.subtitle}
+
+ ` : nothing}
+
+
+ ` : nothing}
+
+
+
+ ${UtilsNew.renderHTML(welcomePage.content)}
+
+
+ ${isWelcomeSuite ? this.renderApplications() : this.renderTools()}
+
+
+
+ ${welcomePage?.bottomLogo?.img ? html`
+
+ ${welcomePage.bottomLogo.link ? html `
+
+ 
+
+ ` : html `
+
+ `}
+
+ ` : nothing}
+
+
+ `;
+ }
+
+}
+
+customElements.define("study-dashboard", StudyDasboard);
Fake Dashboard. Work in progress
+
+ 
+
+
+