Merge remote-tracking branch 'origin/TASK-7100' into TASK-7100

src/sites/iva/iva-app.js

@@ -96,6 +96,7 @@ import "../../webcomponents/study/admin/variant/operations-admin.js";
 import "../../webcomponents/user/user-profile.js";
 import "../../webcomponents/api/rest-api.js";
 import "../../webcomponents/note/note-browser.js";
+import "../../webcomponents/analysis/analysis-tools.js";
 
 import "../../webcomponents/commons/layouts/custom-footer.js";
 import "../../webcomponents/commons/layouts/custom-navbar.js";
@@ -302,6 +303,7 @@ class IvaApp extends LitElement {
         if (changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
+
         super.update(changedProperties);
     }
 
@@ -706,7 +708,7 @@ class IvaApp extends LitElement {
 
         // 4. parse project and study
         if (hashProject !== this.opencgaSession?.project?.id || hashStudy !== this.opencgaSession?.study?.id) {
-            return this.changeActiveStudy(`${this.opencgaSession.user.id}@${hashProject}:${hashStudy}`);
+            this.changeActiveStudy(`${this.opencgaSession.user.id}@${hashProject}:${hashStudy}`);
         }
 
         // 5. save app and tool
@@ -1876,6 +1878,13 @@ class IvaApp extends LitElement {
                     </div>
                 `;
                 break;
+            case "analysis-tools":
+                content = html`
+                    <analysis-tools
+                        .opencgaSession="${this.opencgaSession}">
+                    </analysis-tools>
+                `;
+                break;
             default:
                 // TODO: check for extensions
                 // ExtensionsManager.getTools().map(tool => html`

src/webcomponents/analysis/analysis-tools.js

@@ -0,0 +1,93 @@
+import {LitElement, html, nothing} from "lit";
+import "../commons/tool-header.js";
+import "../variant/analysis/sample-variant-stats-analysis.js";
+
+export default class AnalysisTools extends LitElement {
+
+    constructor() {
+        super();
+        this.#init();
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    static get properties() {
+        return {
+            opencgaSession: {
+                type: Object,
+            },
+        };
+    }
+
+    #init() {
+        this._tool = "sample-variant-stats";
+        this._config = this.getDefaultConfig();
+    }
+
+    renderSidebarItems() {
+        return this._config.availableTools.map(tool => {
+            if (tool.category) {
+                return html`
+                    <div class="fw-bold text-gray-700 fs-9 user-select-none">
+                        ${tool.name}
+                    </div>
+                `
+            } else {
+                const active = this._tool === tool.id;
+                return html`
+                    <a class="d-block btn w-full text-start ${active ? "btn-primary" : "hover:bg-gray-200"}" href="#${tool.id}">
+                        ${tool.name}
+                    </a>     
+                `;
+            }
+        });
+    }
+
+    renderTool() {
+        let content = nothing;
+        switch (this._tool) {
+            case "sample-variant-stats":
+                content = html`
+                    <sample-variant-stats-analysis
+                        .opencgaSession="${this.opencgaSession}">
+                    </sample-variant-stats-analysis>
+                `;
+                break;
+        }
+        return content;
+    }
+
+    render() {
+        return html`
+            <tool-header
+                .title="${"Analysis Tools"}"
+                .icon="${"fa-tools"}">
+            </tool-header>
+            <div class="row w-full">
+                <div class="col-2 d-flex flex-column gap-1">
+                    ${this.renderSidebarItems()}
+                </div>
+                <div class="col-10">
+                    <div class="w-full mx-auto" style="max-width:768px;">
+                        ${this.renderTool()}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    getDefaultConfig() {
+        return {
+            availableTools: [
+                {name: "Summary Stats", category: true},
+                {id: "sample-variant-stats", name: "Sample Variant Stats"},
+                {id: "cohort-variant-stats", name: "Cohort Variant Stats"},
+            ],
+        };
+    }
+
+}
+
+customElements.define("analysis-tools", AnalysisTools);

src/webcomponents/clinical/clinical-analysis-grid.js

@@ -216,7 +216,9 @@ export default class ClinicalAnalysisGrid extends LitElement {
 
     caseFormatter(value, row) {
         if (row?.id) {
-            const url = `#interpreter/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}/${row.id}`;
+            // Note: we have to maintain the URL structure, so if we are inside an app we have to maintain the app
+            const hashItems = window.location.hash.replace("#", "").split("/");
+            const url = `#${[...hashItems.slice(0, -3), "interpreter", this.opencgaSession.project.id, this.opencgaSession.study.id].join("/")}?id=${row.id}`;
             return `
                 <div class="mt-1 me-0">
                     <a class="text-decoration-none" title="Go to Case Interpreter" href="${url}" data-cy="case-id">

src/webcomponents/commons/layout/layout-sidebar.js

@@ -44,7 +44,7 @@ export default class LayoutSidebar extends LitElement {
     }
 
     renderButton(app) {
-        const active = this.currentUrl.startsWith(`#${app.id}`); // url always start with the app ID
+        const active = this.currentUrl.startsWith(`#${app.id}/`); // url always start with the app ID
         return html`
             <a
                 class="text-decoration-none d-flex align-items-center flex-column gap-2 p-2 rounded-2 cursor-pointer ${active ? "bg-gray-200" : "hover:bg-gray-100"}"

src/webcomponents/variant/interpretation/variant-interpreter.js

@@ -425,6 +425,10 @@ class VariantInterpreter extends LitElement {
     }
 
     renderToolbarRightContent() {
+        // Note: we have to maintain the URL structure, so if we are inside an app we have to maintain the app
+        const hashItems = window.location.hash.replace("#", "").split("/");
+        const exitUrl = "#" + [...hashItems.slice(0, -3), "clinical-analysis-portal", this.opencgaSession.project.id, this.opencgaSession.study.id].join("/");
+
         return html`
             <div class="d-flex align-items-center">
                 ${this.clinicalAnalysis?.interpretation ? html`
@@ -492,7 +496,7 @@ class VariantInterpreter extends LitElement {
                         </li>
                         <li><hr class="dropdown-divider"></li>
                         <li>
-                            <a class="dropdown-item" href="#clinicalAnalysisPortal/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}">
+                            <a class="dropdown-item" href="${exitUrl}">
                                 <i class="fas fa-sign-out-alt pe-1"></i> Exit Interpreter
                             </a>
                         </li>