From 1e0847e3601a15b6c2f0d2bc479e68d643b24b8c Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 3 Apr 2024 19:16:38 +0200 Subject: [PATCH 1/5] wc: allow to customize display in interpretation-summary #TASK-5687 --- .../clinical-interpretation-summary.js | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js index a723d96ebc..dedd08e57a 100644 --- a/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js +++ b/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js @@ -40,10 +40,20 @@ export default class ClinicalInterpretationSummary extends LitElement { opencgaSession: { type: Object }, + displayConfig: { + type: Object, + }, }; } _init() { + this.displayConfigDefault = { + titleVisible: false, + titleWidth: 3, + defaultLayout: "horizontal", + style: "background-color:#f3f3f3;border-left: 4px solid #0c2f4c;padding:16px", + buttonsVisible: false, + }; this._config = this.getDefaultConfig(); } @@ -51,6 +61,11 @@ export default class ClinicalInterpretationSummary extends LitElement { if (changedProperties.has("interpretationId")) { this.interpretationIdObserver(); } + + if (changedProperties.has("displayConfig")) { + this._config = this.getDefaultConfig(); + } + super.update(changedProperties); } @@ -107,11 +122,8 @@ export default class ClinicalInterpretationSummary extends LitElement { title: "Case Interpretation Summary", icon: "fas fa-user-md", display: { - titleVisible: false, - titleWidth: 3, - defaultLayout: "horizontal", - style: "background-color:#f3f3f3;border-left: 4px solid #0c2f4c;padding:16px", - buttonsVisible: false, + ...this.displayConfigDefault, + ...(this.displayConfig || {}), }, sections: [ { From b3a2c8d2bb4c17ec55b24cd731b8197e537c9800 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 3 Apr 2024 19:17:42 +0200 Subject: [PATCH 2/5] wc: minor style fixes in interpretation summary #TASK-5687 --- .../interpretation/clinical-interpretation-summary.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js index dedd08e57a..5dc9147502 100644 --- a/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js +++ b/src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js @@ -22,7 +22,7 @@ export default class ClinicalInterpretationSummary extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -46,7 +46,7 @@ export default class ClinicalInterpretationSummary extends LitElement { }; } - _init() { + #init() { this.displayConfigDefault = { titleVisible: false, titleWidth: 3, @@ -71,7 +71,10 @@ export default class ClinicalInterpretationSummary extends LitElement { interpretationIdObserver() { if (this.opencgaSession && this.interpretationId) { - this.opencgaSession.opencgaClient.clinical().infoInterpretation(this.interpretationId, {study: this.opencgaSession.study.fqn}) + this.opencgaSession.opencgaClient.clinical() + .infoInterpretation(this.interpretationId, { + study: this.opencgaSession.study.fqn, + }) .then(response => { this.interpretation = response.responses[0].results[0]; }) From f7efa88971120a5036c1dbe25d6de4829f505843 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 10 Apr 2024 17:01:02 +0200 Subject: [PATCH 3/5] wc: code improvements in variant-cohort-stats #TASK-5687 --- .../variant/variant-cohort-stats.js | 60 +++++++++++-------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/src/webcomponents/variant/variant-cohort-stats.js b/src/webcomponents/variant/variant-cohort-stats.js index 44283a0b24..7265a507f9 100644 --- a/src/webcomponents/variant/variant-cohort-stats.js +++ b/src/webcomponents/variant/variant-cohort-stats.js @@ -15,7 +15,6 @@ */ import {LitElement, html} from "lit"; -import UtilsNew from "../../core/utils-new.js"; import "./variant-cohort-stats-grid.js"; export default class VariantCohortStats extends LitElement { @@ -23,7 +22,7 @@ export default class VariantCohortStats extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -50,12 +49,16 @@ export default class VariantCohortStats extends LitElement { }; } - _init() { - this._prefix = UtilsNew.randomString(8); + #init() { this.active = false; + this.studyNames = {}; } update(changedProperties) { + if (changedProperties.has("opencgaSession")) { + this.opencgaSessionObserver(); + } + if (changedProperties.has("variantId") || changedProperties.has("active")) { this.variantIdObserver(); } @@ -63,46 +66,55 @@ export default class VariantCohortStats extends LitElement { super.update(changedProperties); } + opencgaSessionObserver() { + this.studyNames = {}; + if (this.opencgaSession?.project?.studies) { + this.opencgaSession.project.studies.forEach(study => { + this.studyNames[study.id] = study.name; + this.studyNames[study.fqn] = study.name; + }); + } + } + variantIdObserver() { if (this.variantId && this.variantId.split(":").length > 2 && this.active) { - const params = { - id: this.variantId, - study: this.opencgaSession.study.fqn, - includeStudy: "all", - exclude: "annotation,studies.files,studies.samples,studies.scores,studies.issues", - useSearchIndex: "no" - }; - this.opencgaSession.opencgaClient.variants().query(params) + this.opencgaSession.opencgaClient.variants() + .query({ + id: this.variantId, + study: this.opencgaSession.study.fqn, + includeStudy: "all", + exclude: "annotation,studies.files,studies.samples,studies.scores,studies.issues", + useSearchIndex: "no", + }) .then(response => { if (response.responses[0].results[0]) { this.variant = response.responses[0].results[0]; this.requestUpdate(); } }) - .catch(function(reason) { - console.error(reason); + .catch(error => { + console.error(error); }); } } render() { - let studyNames = {}; - for (let study of this.opencgaSession.project.studies) { - studyNames[study.id] = study.name; - studyNames[study.fqn] = study.name; + if (!this.variant || !(this.variant?.studies?.length > 0)) { + return html``; } return html` - ${this.variant?.studies?.length > 0 && this.variant.studies.map(study => html` -

- ${studyNames[study.studyId]} -

-
- + ${this.variant.studies.map(study => html` +

${this.studyNames[study.studyId]}

+
+ +
`)} `; } + } customElements.define("variant-cohort-stats", VariantCohortStats); From 7088712e327986622aa43dccfd3303b468c8a846 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 10 Apr 2024 17:03:30 +0200 Subject: [PATCH 4/5] wc: display an info notice if no studies are defined in the variant in variant-cohort-stats #TASK-5687 --- src/webcomponents/variant/variant-cohort-stats.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/variant/variant-cohort-stats.js b/src/webcomponents/variant/variant-cohort-stats.js index 7265a507f9..10e5ef537a 100644 --- a/src/webcomponents/variant/variant-cohort-stats.js +++ b/src/webcomponents/variant/variant-cohort-stats.js @@ -100,12 +100,17 @@ export default class VariantCohortStats extends LitElement { render() { if (!this.variant || !(this.variant?.studies?.length > 0)) { - return html``; + return html` +
+ + No studies available for this variant. +
+ `; } return html` ${this.variant.studies.map(study => html` -

${this.studyNames[study.studyId]}

+

${this.studyNames[study.studyId] || ""}

From db917d7f1cdb53dabb921540a2f23c535972123f Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 15 Apr 2024 14:03:28 +0200 Subject: [PATCH 5/5] wc: fix displaying priority badge in clinical-analysis-view #TASK-5687 --- src/webcomponents/clinical/clinical-analysis-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/clinical/clinical-analysis-view.js b/src/webcomponents/clinical/clinical-analysis-view.js index 2d71abade1..963297a353 100644 --- a/src/webcomponents/clinical/clinical-analysis-view.js +++ b/src/webcomponents/clinical/clinical-analysis-view.js @@ -296,7 +296,7 @@ export default class ClinicalAnalysisView extends LitElement { display: { template: "${priority.id}", className: { - "priority.id": (id, data) => this.#priorityFormatter(id, data), + "priority.id": (id, data) => `badge ${this.#priorityFormatter(id, data)}`, }, } },