TASK-4668 - Port Patch 1.7.2 -> 1.8.1

src/sites/iva/conf/opencga-variant-constants.js

@@ -868,7 +868,7 @@ const tooltips = {
         "This knowledge is both human-readable and machine-readable, and is a foundation for computational analysis of large-scale molecular biology and genetics experiments in biomedical research.",
     hpo: "The Human Phenotype Ontology (HPO) provides a standardized vocabulary of phenotypic abnormalities encountered in human disease.",
     clinvar: "Filter out variants falling outside the genomic features (gene, transcript, SNP, etc.) defined",
-    fullTextSearch: "Filter out variants falling outside the genomic features (gene, transcript, SNP, etc.) defined",
+    fullTextSearch: "Filter out variants that do not match with the IDs or the full text provided",
     cadd: "Raw values have relative meaning, with higher values indicating that a variant is more likely to be " +
         "simulated (or not observed) and therefore more likely to have deleterious effects. If discovering causal variants " +
         "within an individual, or small groups, of exomes or genomes te use of the scaled CADD score is recommended",

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

@@ -23,6 +23,7 @@ import UtilsNew from "../../core/utils-new.js";
 import "../commons/forms/data-form.js";
 import "../commons/filters/disease-panel-filter.js";
 import "../commons/filters/catalog-search-autocomplete.js";
+import "../commons/image-viewer.js";
 import "./filters/clinical-priority-filter.js";
 import "./filters/clinical-flag-filter.js";
 
@@ -107,14 +108,17 @@ export default class ClinicalAnalysisCreate extends LitElement {
         }
 
         // In FAMILY, changing the proband only sets the 'proband.id' field of the clinicalAnalysis object
-        // We have to add also the disorders list to 'proband.disorders'.
+        // We need to save the full member object in proband.
         if (e.detail.param === "proband.id" && this.clinicalAnalysis.type === "FAMILY") {
+            // Changing the 'proband.id' means we have to reset the disorder field
+            delete this.clinicalAnalysis.disorder;
             if (this.clinicalAnalysis.proband?.id) {
                 const proband = this.clinicalAnalysis.family.members.find(member => member.id === this.clinicalAnalysis.proband?.id);
-                this.clinicalAnalysis.proband.disorders = proband?.disorders || [];
-            } else if (this.clinicalAnalysis.proband?.disorders) {
-                // If we have remove the 'proband.id', we have to remove also the 'proband.disorders' field
-                delete this.clinicalAnalysis.proband.disorders;
+                this.clinicalAnalysis.proband = UtilsNew.objectClone(proband);
+                this.clinicalAnalysis.proband.disorders = this.clinicalAnalysis.proband.disorders || [];
+            } else {
+                // If we have removed the 'proband.id' field, we have to remove also the full proband object
+                delete this.clinicalAnalysis.proband;
             }
         }
 
@@ -175,7 +179,7 @@ export default class ClinicalAnalysisCreate extends LitElement {
                     if (this.clinicalAnalysis.family && this.clinicalAnalysis.family.members) {
                         for (const member of this.clinicalAnalysis.family.members) {
                             if (member.disorders && member.disorders.length > 0 && member.father.id && member.mother.id) {
-                                this.clinicalAnalysis.proband = member;
+                                this.clinicalAnalysis.proband = UtilsNew.objectClone(member);
                                 break;
                             }
                         }
@@ -646,11 +650,15 @@ export default class ClinicalAnalysisCreate extends LitElement {
                             title: "Pedigree",
                             type: "custom",
                             display: {
-                                // defaultLayout: "vertical",
                                 render: data => {
-                                    if (data.family) {
-                                        return html`<pedigree-view .family="${data.family}"></pedigree-view>`;
+                                    if (data?.family?.pedigreeGraph?.base64) {
+                                        return html`
+                                            <image-viewer
+                                                .data="${data.family?.pedigreeGraph?.base64}">
+                                            </image-viewer>
+                                        `;
                                     }
+                                    return "-";
                                 },
                                 errorMessage: "No family selected",
                             }

src/webcomponents/disease-panel/disease-panel-create.js

@@ -83,7 +83,8 @@ export default class DiseasePanelCreate extends LitElement {
                     const params = {
                         exclude: "transcripts,annotation",
                     };
-                    this.opencgaSession.cellbaseClient.getGeneClient(gene.name, "info", params)
+                    this.opencgaSession.cellbaseClient
+                        .getGeneClient(gene.name, "info", params)
                         .then(res => {
                             const g = res.responses[0].results[0];
                             gene.id = g.id;
@@ -106,6 +107,46 @@ export default class DiseasePanelCreate extends LitElement {
                 }
             }
         }
+        // Set the region coordinates if needed: location, assembly, and source
+        if (e.detail?.data?.regions?.length > 0) {
+            for (const region of e.detail.data.regions) {
+                if (region.id) {
+                    if (region.id !== region.coordinates?.[0]?.location) {
+                        region.coordinates = [
+                            {
+                                location: region.id,
+                                assembly: this.opencgaSession?.project?.organism?.assembly || "",
+                                // source: region.source || "",
+                            }
+                        ];
+                    }
+                } else {
+                    if (region.coordinates) {
+                        region.coordinates = null;
+                    }
+                }
+            }
+        }
+        // Set the variant coordinates if needed: location, assembly, and source
+        if (e.detail?.data?.variants?.length > 0) {
+            for (const variant of e.detail.data.variants) {
+                if (variant.id) {
+                    if (variant.id !== variant.coordinates?.[0]?.location) {
+                        variant.coordinates = [
+                            {
+                                location: variant.id,
+                                assembly: this.opencgaSession?.project?.organism?.assembly || "",
+                                // source: region.source || "",
+                            }
+                        ];
+                    }
+                } else {
+                    if (variant.coordinates) {
+                        variant.coordinates = null;
+                    }
+                }
+            }
+        }
         this.diseasePanel = {...e.detail.data}; // force to refresh the object-list
         this.requestUpdate();
     }
@@ -297,8 +338,11 @@ export default class DiseasePanelCreate extends LitElement {
                                 view: gene => html`
                                     <div>
                                         <div>${gene?.name} (<a href="${BioinfoUtils.getGeneLink(gene?.id)}" target="_blank">${gene?.id}</a>)</div>
-                                        <div style="margin: 5px 0">MoI: ${gene?.modeOfInheritance || "NA"} (Confidence: ${gene.confidence || "NA"})</div>
-                                        <div class="help-block">${gene.coordinates?.[0]?.location}</div>
+                                        <div style="margin: 5px 0">MoI: ${gene?.modesOfInheritance?.join(", ") || "-"} (Confidence: ${gene.confidence || "NA"})</div>
+                                        <div class="help-block">
+                                            Location: ${gene.coordinates?.[0]?.location || "-"},
+                                            Assembly: ${gene.coordinates?.[0]?.assembly || "-"},
+                                        </div>
                                     </div>
                                 `,
                             },
@@ -326,7 +370,7 @@ export default class DiseasePanelCreate extends LitElement {
                                     field: "genes[].modesOfInheritance",
                                     type: "select",
                                     multiple: true,
-                                    save: value => value.split(","), // Array when select and multiple
+                                    save: value => value?.split(",") || [], // Array when select and multiple
                                     allowedValues: MODE_OF_INHERITANCE,
                                     display: {
                                         placeholder: "Select a mode of inheritance..."
@@ -346,7 +390,7 @@ export default class DiseasePanelCreate extends LitElement {
                                     field: "genes[].cancer.roles",
                                     type: "select",
                                     multiple: true,
-                                    save: value => value.split(","), // Array when select and multiple
+                                    save: value => value?.split(",") || [], // Array when select and multiple
                                     allowedValues: ROLE_IN_CANCER,
                                     display: {
                                         placeholder: "Select role in cancer..."
@@ -366,25 +410,32 @@ export default class DiseasePanelCreate extends LitElement {
                             display: {
                                 style: "border-left: 2px solid #0c2f4c; padding-left: 12px; margin-bottom:24px",
                                 collapsedUpdate: true,
-                                view: region => html`
-                                    <div>${region.id} - ${region?.modeOfInheritance || "-"}</div>
+                                view: region => html `
+                                    <div>
+                                        <div>${region?.id}</div>
+                                        <div style="margin: 5px 0">MoI: ${region?.modesOfInheritance?.join(", ") || "-"} (Confidence: ${region?.confidence || "NA"})</div>
+                                        <div class="help-block">
+                                            Location: ${region.coordinates?.[0]?.location || "-"},
+                                            Assembly: ${region.coordinates?.[0]?.assembly || "-"},
+                                        </div>
+                                    </div>
                                 `,
                             },
                             elements: [
                                 {
-                                    title: "Region ID",
+                                    title: "Region ID/Location",
                                     field: "regions[].id",
                                     type: "input-text",
                                     display: {
-                                        placeholder: "Add region...",
+                                        placeholder: "Add a region ID/Location (e.g. 1:10100-10110)...",
                                     }
                                 },
                                 {
                                     title: "Mode of Inheritance",
                                     field: "regions[].modesOfInheritance",
                                     type: "select",
                                     multiple: true,
-                                    save: value => value.split(","), // Array when select and multiple
+                                    save: value => value?.split(",") || [], // Array when select and multiple
                                     allowedValues: MODE_OF_INHERITANCE,
                                     display: {
                                         placeholder: "Select a mode of inheritance..."
@@ -414,24 +465,31 @@ export default class DiseasePanelCreate extends LitElement {
                                 style: "border-left: 2px solid #0c2f4c; padding-left: 12px; margin-bottom:24px",
                                 collapsedUpdate: true,
                                 view: variant => html`
-                                    <div>${variant.id} - ${variant?.modeOfInheritance || "-"}</div>
+                                    <div>
+                                        <div>${variant.id}</div>
+                                        <div style="margin: 5px 0">MoI: ${variant?.modesOfInheritance?.join(", ") || "-"}</div>
+                                        <div class="help-block">
+                                            Location: ${variant.coordinates?.[0]?.location || "-"},
+                                            Assembly: ${variant.coordinates?.[0]?.assembly || "-"},
+                                        </div>
+                                    </div>
                                 `,
                             },
                             elements: [
                                 {
-                                    title: "Variant ID",
+                                    title: "Variant ID/Location",
                                     field: "variants[].id",
                                     type: "input-text",
                                     display: {
-                                        placeholder: "Add variant ID...",
+                                        placeholder: "Add the variant ID/Location...",
                                     }
                                 },
                                 {
                                     title: "Mode of Inheritance",
                                     field: "variants[].modesOfInheritance",
                                     type: "select",
                                     multiple: true,
-                                    save: value => value.split(","), // Array when select and multiple
+                                    save: value => value?.split(",") || [], // Array when select and multiple
                                     allowedValues: MODE_OF_INHERITANCE,
                                     display: {
                                         placeholder: "Select a mode of inheritance..."

src/webcomponents/disease-panel/disease-panel-region-view.js

@@ -132,9 +132,19 @@ export default class DiseasePanelRegionView extends LitElement {
                     halign: this._config.header.horizontalAlign,
                 },
                 {
-                    id: "modeOfInheritance",
+                    id: "modesOfInheritance",
                     title: "Mode of Inheritance",
-                    field: "modeOfInheritance",
+                    field: "modesOfInheritance",
+                    formatter: (value, row) => {
+                        const modesOfInheritanceContent = this.generateList(row.modesOfInheritance, "");
+                        return String.raw `
+                            ${modesOfInheritanceContent ? String.raw `
+                                <ul>
+                                    ${modesOfInheritanceContent}
+                                </ul>` : "-"
+                        }
+                        `;
+                    },
                 },
                 {
                     id: "confidence",
@@ -190,17 +200,16 @@ export default class DiseasePanelRegionView extends LitElement {
 
     render() {
         return html`
-            ${this._config.showToolbar ?
-                html`
-                    <opencb-grid-toolbar
-                        .config="${this.toolbarConfig}"
-                        .query="${this.query}"
-                        .opencgaSession="${this.opencgaSession}"
-                        @columnChange="${this.onColumnChange}"
-                        @download="${this.onDownload}"
-                        @export="${this.onDownload}">
-                    </opencb-grid-toolbar>` : nothing
-            }
+            ${this._config.showToolbar ? html`
+                <opencb-grid-toolbar
+                    .config="${this.toolbarConfig}"
+                    .query="${this.query}"
+                    .opencgaSession="${this.opencgaSession}"
+                    @columnChange="${this.onColumnChange}"
+                    @download="${this.onDownload}"
+                    @export="${this.onDownload}">
+                </opencb-grid-toolbar>
+            ` : nothing}
 
             <div id="${this._prefix}GridTableDiv" class="force-overflow">
                 <table id="${this._prefix}GenePanelBrowserGrid"></table>