TASK-5964 - Clinical Improvements

src/core/utils-new.js

@@ -304,30 +304,6 @@ export default class UtilsNew {
         return document.createRange().createContextualFragment(`${html}`);
     }
 
-    static jobStatusFormatter(status, appendDescription = false) {
-        const description = appendDescription && status.description ? `<br>${status.description}` : "";
-        // FIXME remove this backward-compatibility check in next v2.3
-        const statusId = status.id || status.name;
-        switch (statusId) {
-            case "PENDING":
-            case "QUEUED":
-                return `<span class="text-primary"><i class="far fa-clock"></i> ${statusId}${description}</span>`;
-            case "RUNNING":
-                return `<span class="text-primary"><i class="fas fa-sync-alt anim-rotate"></i> ${statusId}${description}</span>`;
-            case "DONE":
-                return `<span class="text-success"><i class="fas fa-check-circle"></i> ${statusId}${description}</span>`;
-            case "ERROR":
-                return `<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${statusId}${description}</span>`;
-            case "UNKNOWN":
-                return `<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${statusId}${description}</span>`;
-            case "ABORTED":
-                return `<span class="text-warning"><i class="fas fa-ban"></i> ${statusId}${description}</span>`;
-            case "DELETED":
-                return `<span class="text-primary"><i class="fas fa-trash-alt"></i> ${statusId}${description}</span>`;
-        }
-        return "-";
-    }
-
     // Capitalizes the first letter of a string and lowercase the rest.
     static capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("").toLowerCase();
 

src/webcomponents/clinical/analysis/rd-tiering-analysis.js

@@ -20,7 +20,6 @@ import UtilsNew from "../../../core/utils-new.js";
 import "../../commons/forms/data-form.js";
 import "../../commons/filters/catalog-search-autocomplete.js";
 
-
 export default class RdTieringAnalysis extends LitElement {
 
     constructor() {
@@ -161,7 +160,7 @@ export default class RdTieringAnalysis extends LitElement {
                         display: {
                             render: (panels, dataFormFilterChange) => {
                                 // Get whether disease panels can be modified or are fixed
-                                const casePanelLock = !!this.clinicalAnalysis;
+                                const casePanelLock = !!this.clinicalAnalysis?.panelLocked;
                                 // Get the list of disease panels for the dropdown
                                 let diseasePanels = [];
                                 if (casePanelLock) {

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

@@ -108,7 +108,7 @@ export default class ClinicalAnalysisCreate extends LitElement {
             //     id: this.opencgaSession?.user?.id
             // },
             comments: [],
-            panelLock: false,
+            panelLocked: false,
             samples: [],
         };
     }
@@ -478,7 +478,7 @@ export default class ClinicalAnalysisCreate extends LitElement {
                         },
                         {
                             title: "Disease Panel Lock",
-                            field: "panelLock",
+                            field: "panelLocked",
                             type: "toggle-switch",
                             display: {
                                 helpMessage: "You must select at least one of the Clinical Analysis panels to enable Disease Panel Lock.",
@@ -502,7 +502,7 @@ export default class ClinicalAnalysisCreate extends LitElement {
                                     return html`
                                         <clinical-flag-filter
                                             .flag="${flags?.map(f => f.id).join(",")}"
-                                            .flags="${this.opencgaSession.study.internal?.configuration?.clinical?.flags[this.clinicalAnalysis.type?.toUpperCase()]}"
+                                            .flags="${this.opencgaSession.study.internal?.configuration?.clinical?.flags || []}"
                                             .multiple="${true}"
                                             @filterChange="${e => handleFlagsFilterChange(e, "flags.id")}">
                                         </clinical-flag-filter>

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

@@ -363,9 +363,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
     }
 
     statusFormatter(value, row) {
-        // TODO remove this code as soon as new OpenCGA configuration is in place
-        const _status = this.opencgaSession.study?.internal?.configuration?.clinical?.status || [];
-
+        const status = this.opencgaSession.study?.internal?.configuration?.clinical?.status || [];
         const hasWriteAccess = OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, "WRITE_CLINICAL_ANALYSIS");
         const isEditable = !this._config.readOnlyMode && hasWriteAccess && !row.locked; // status is editable
 
@@ -380,16 +378,15 @@ export default class ClinicalAnalysisGrid extends LitElement {
             <div class="dropdown">
                 <button class="${btnClassName}" type="button" data-bs-toggle="dropdown" ${!isEditable ? "disabled=\"disabled\"" : ""}>
                     <span class='me-auto'">${currentStatus}</span>
-
                 </button>
                 ${isEditable ? `
                     <ul class="dropdown-menu">
-                        ${_status[row.type].map(({id, description}) => `
+                        ${status.map(({id, description}) => `
                             <li>
-                                <a class="d-flex dropdown-item" data-action="statusChange" data-status="${id}">
+                                <a class="d-flex dropdown-item" data-action="statusChange" data-status="${id}" style="cursor:pointer;">
                                     <div class="flex-grow-1">
                                         ${id === currentStatus ? `<strong>${id}</strong>` : id}
-                                        <p class="form-text"><small>${description}</small></p>
+                                        <div class="small text-secondary">${description}</div>
                                     </div>
                                     ${id === currentStatus ? "<i class=\"fas fa-check\"></i>" : ""}
                                 </a>

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

@@ -285,7 +285,7 @@ export default class ClinicalAnalysisUpdate extends LitElement {
                                     return html `
                                         <clinical-status-filter
                                             .status="${statusId}"
-                                            .statuses="${this.opencgaSession.study.internal?.configuration?.clinical?.status[clinicalAnalysis?.type?.toUpperCase()]}"
+                                            .statuses="${this.opencgaSession.study.internal?.configuration?.clinical?.status || []}"
                                             .multiple=${false}
                                             .forceSelection=${true}
                                             .classes="${updateParams?.["status.id"] ? "selection-updated" : ""}"
@@ -384,7 +384,7 @@ export default class ClinicalAnalysisUpdate extends LitElement {
                                             .panel="${panels?.map(panel => panel.id).join(",")}"
                                             .showExtendedFilters="${false}"
                                             .classes="${updateParams?.panels ? "selection-updated" : ""}"
-                                            .disabled="${(!!clinicalAnalysis?.locked || !!clinicalAnalysis?.panelLock)}"
+                                            .disabled="${(!!clinicalAnalysis?.locked || !!clinicalAnalysis?.panelLocked)}"
                                             @filterChange="${e => handlePanelsFilterChange(e)}">
                                         </disease-panel-filter>
                                     `;
@@ -393,7 +393,7 @@ export default class ClinicalAnalysisUpdate extends LitElement {
                         },
                         {
                             title: "Disease Panel Lock",
-                            field: "panelLock",
+                            field: "panelLocked",
                             type: "toggle-switch",
                             display: {
                                 helpMessage: "All existing interpretations must contain at least one of the Clinical Analysis panels to enable Disease Panel Lock.",
@@ -439,7 +439,7 @@ export default class ClinicalAnalysisUpdate extends LitElement {
                                     return html `
                                         <clinical-flag-filter
                                             .flag="${flags?.map(f => f.id).join(",")}"
-                                            .flags="${this.opencgaSession.study.internal?.configuration?.clinical?.flags[clinicalAnalysis?.type?.toUpperCase()]}"
+                                            .flags="${this.opencgaSession.study.internal?.configuration?.clinical?.flags || []}"
                                             .multiple="${true}"
                                             .classes="${updateParams?.flags ? "selection-updated" : ""}"
                                             .disabled="${!!clinicalAnalysis?.locked}"

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

@@ -478,7 +478,7 @@ export default class ClinicalAnalysisView extends LitElement {
                                     },
                                     {
                                         title: "Status",
-                                        field: "status.name",
+                                        field: "status.id",
                                         display: {
                                             defaultValue: "-",
                                         },

src/webcomponents/clinical/interpretation/clinical-interpretation-create.js

@@ -193,6 +193,11 @@ export default class ClinicalInterpretationCreate extends LitElement {
                                 helpMessage: "The interpretation ID is generated automatically",
                             },
                         },
+                        {
+                            title: "Interpretation Name",
+                            field: "name",
+                            type: "input-text",
+                        },
                         {
                             title: "Assigned To",
                             field: "analyst.id",
@@ -222,7 +227,7 @@ export default class ClinicalInterpretationCreate extends LitElement {
                             type: "custom",
                             display: {
                                 render: (panels, dataFormFilterChange) => {
-                                    const panelLock = !!this.clinicalAnalysis?.panelLock;
+                                    const panelLock = !!this.clinicalAnalysis?.panelLocked;
                                     const panelList = panelLock ? this.clinicalAnalysis.panels : this.opencgaSession.study?.panels;
                                     const handlePanelsFilterChange = e => {
                                         const panelList = (e.detail?.value?.split(",") || [])

src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js

@@ -17,6 +17,7 @@
 import {LitElement, html} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js";
+import WebUtils from "../../commons/utils/web-utils.js";
 
 export default class ClinicalInterpretationSummary extends LitElement {
 
@@ -146,7 +147,7 @@ export default class ClinicalInterpretationSummary extends LitElement {
                                                 </div>
                                             </div>
                                             <div>
-                                                <span style="font-size:1.2em;">${interpretation.id}</span>
+                                                <span style="font-size:1.2em;">${WebUtils.getDisplayName(interpretation)}</span>
                                                 <span style="color:grey;margin-left:8px;">version ${interpretation.version}</span>
                                             </div>
                                         </div>

src/webcomponents/clinical/interpretation/clinical-interpretation-update.js

@@ -149,6 +149,11 @@ export default class ClinicalInterpretationUpdate extends LitElement {
                                 disabled: true,
                             },
                         },
+                        {
+                            title: "Interpretation Name",
+                            field: "name",
+                            type: "input-text",
+                        },
                         {
                             title: "Assigned To",
                             field: "analyst.id",
@@ -188,7 +193,7 @@ export default class ClinicalInterpretationUpdate extends LitElement {
                             display: {
                                 render: (panels, dataFormFilterChange, updateParams) => {
                                     // CAUTION: check if the panelLock condition is the same as clinical-analysis-update.js
-                                    const panelLock = !!this.clinicalAnalysis?.panelLock;
+                                    const panelLock = !!this.clinicalAnalysis?.panelLocked;
                                     const panelList = panelLock ? this.clinicalAnalysis?.panels : this.opencgaSession.study?.panels;
                                     const handlePanelsFilterChange = e => {
                                         const panelList = (e.detail?.value?.split(",") || [])

src/webcomponents/cohort/cohort-create.js

@@ -204,14 +204,6 @@ export default class CohortCreate extends LitElement {
                                         placeholder: "Add an ID",
                                     }
                                 },
-                                {
-                                    title: "Name",
-                                    field: "status.name",
-                                    type: "input-text",
-                                    display: {
-                                        placeholder: "Add source name"
-                                    }
-                                },
                                 {
                                     title: "Description",
                                     field: "status.description",

src/webcomponents/cohort/cohort-grid.js

@@ -413,7 +413,7 @@ export default class CohortGrid extends LitElement {
                                 _.id,
                                 _.samples ? _.samples.map(_ => `${_.id}`).join(",") : "",
                                 _.creationDate ? CatalogGridFormatter.dateFormatter(_.creationDate) : "-",
-                                _.status.name,
+                                _.status.id,
                                 _.type
                             ].join("\t"))];
                         UtilsNew.downloadData(dataString, "cohort_" + this.opencgaSession.study.id + ".tsv", "text/plain");

src/webcomponents/cohort/cohort-update.js

@@ -156,14 +156,6 @@ export default class CohortUpdate extends LitElement {
                                         placeholder: "Add an ID",
                                     }
                                 },
-                                {
-                                    title: "Name",
-                                    field: "status.name",
-                                    type: "input-text",
-                                    display: {
-                                        placeholder: "Add source name"
-                                    }
-                                },
                                 {
                                     title: "Description",
                                     field: "status.description",

src/webcomponents/cohort/cohort-view.js

@@ -239,7 +239,7 @@ export default class CohortView extends LitElement {
                             title: "Status",
                             type: "complex",
                             display: {
-                                template: "${internal.status.name} (${internal.status.date})",
+                                template: "${internal.status.id} (${internal.status.date})",
                                 format: {
                                     "internal.status.date": date => UtilsNew.dateFormatter(date),
                                 }

src/webcomponents/commons/opencga-browser-filter.js

@@ -315,7 +315,7 @@ export default class OpencgaBrowserFilter extends LitElement {
                     content = html`
                         <clinical-status-filter
                             .status="${this.preparedQuery[subsection.id]}"
-                            .statuses="${Object.values(this.opencgaSession.study.internal?.configuration?.clinical?.status)?.flat()}"
+                            .statuses="${this.opencgaSession.study.internal?.configuration?.clinical?.status || []}"
                             .multiple="${true}"
                             @filterChange="${e => this.onFilterChange(subsection.id, e.detail.value)}">
                         </clinical-status-filter>

src/webcomponents/commons/utils/web-utils.js

@@ -16,22 +16,27 @@
 
 export default class WebUtils {
 
-    static getDisplayName(item) {
-        if (item?.id && item?.name) {
-            // First case: both item.id and item.name exists and are not empty
-            return `${item.name} (${item.id})`;
-        } else if (item?.id) {
-            // Second case: only item.id exists
-            return item.id;
-        } else if (item?.name) {
-            // Thids case: only item.name exists
-            return item.name;
+    static formatDisplayName(id, name, defaultValue = "-") {
+        if (id && name) {
+            // First case: both id and name exists and are not empty
+            return `${name} (${id})`;
+        } else if (id) {
+            // Second case: only id exists
+            return id;
+        } else if (name) {
+            // Third case: only name exists
+            return name;
         } else {
-            // Fallback: neither item.id and item.name exists or item is empty
-            return "-";
+            // Fallback: neither id and name exists
+            return defaultValue;
         }
     }
 
+    // Note: this is an alias to 'formatDisplayName', where the argument is an object that contains 'id' and/or 'name'
+    static getDisplayName(item, defaultValue) {
+        return WebUtils.formatDisplayName(item?.id, item?.name, defaultValue);
+    }
+
     static getIVALink(opencgaSession, tool, query = {}) {
         const baseUrl = (new URL(window.location.pathname, window.location.origin));
         let queryStr = "";
@@ -48,4 +53,27 @@ export default class WebUtils {
         return `${baseUrl}#${tool}/${opencgaSession.project.id}/${opencgaSession.study.id}/${queryStr}`;
     }
 
+    static jobStatusFormatter(status, appendDescription = false) {
+        const description = appendDescription && status?.description ? `<br>${status.description}` : "";
+        const statusId = status.id;
+        switch (statusId) {
+            case "PENDING":
+            case "QUEUED":
+                return `<span class="text-primary"><i class="far fa-clock"></i> ${statusId}${description}</span>`;
+            case "RUNNING":
+                return `<span class="text-primary"><i class="fas fa-sync-alt anim-rotate"></i> ${statusId}${description}</span>`;
+            case "DONE":
+                return `<span class="text-success"><i class="fas fa-check-circle"></i> ${statusId}${description}</span>`;
+            case "ERROR":
+                return `<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${statusId}${description}</span>`;
+            case "UNKNOWN":
+                return `<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${statusId}${description}</span>`;
+            case "ABORTED":
+                return `<span class="text-warning"><i class="fas fa-ban"></i> ${statusId}${description}</span>`;
+            case "DELETED":
+                return `<span class="text-primary"><i class="fas fa-trash-alt"></i> ${statusId}${description}</span>`;
+        }
+        return "-";
+    }
+
 }