Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TASK-5566 - Expand and refine CVDB Explorer functionalities #903

Merged
merged 7 commits into from
May 7, 2024
Merged

TASK-5566 - Expand and refine CVDB Explorer functionalities #903

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1e0847e
wc: allow to customize display in interpretation-summary #TASK-5687
jmjuanes Apr 3, 2024
b3a2c8d
wc: minor style fixes in interpretation summary #TASK-5687
jmjuanes Apr 3, 2024
f7efa88
wc: code improvements in variant-cohort-stats #TASK-5687
jmjuanes Apr 10, 2024
7088712
wc: display an info notice if no studies are defined in the variant i…
jmjuanes Apr 10, 2024
3101577
Merge branch 'TASK-1192' into TASK-5566
jmjuanes Apr 12, 2024
db917d7
wc: fix displaying priority badge in clinical-analysis-view #TASK-5687
jmjuanes Apr 15, 2024
6659764
Merge branch 'develop' into TASK-5566
jmjuanes May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/webcomponents/clinical/clinical-analysis-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`,
},
}
},
Expand Down
31 changes: 23 additions & 8 deletions src/webcomponents/clinical/interpretation/clinical-interpretation-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class ClinicalInterpretationSummary extends LitElement {

constructor() {
super();
this._init();
this.#init();
}

createRenderRoot() {
Expand All @@ -40,23 +40,41 @@ export default class ClinicalInterpretationSummary extends LitElement {
opencgaSession: {
type: Object
},
displayConfig: {
type: Object,
},
};
}

_init() {
#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();
}

update(changedProperties) {
if (changedProperties.has("interpretationId")) {
this.interpretationIdObserver();
}

if (changedProperties.has("displayConfig")) {
this._config = this.getDefaultConfig();
}

super.update(changedProperties);
}

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];
})
Expand Down Expand Up @@ -107,11 +125,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: [
{
Expand Down
65 changes: 41 additions & 24 deletions src/webcomponents/variant/variant-cohort-stats.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,14 @@
*/

import {LitElement, html} from "lit";
import UtilsNew from "../../core/utils-new.js";
import "./variant-cohort-stats-grid.js";

export default class VariantCohortStats extends LitElement {

constructor() {
super();

this._init();
this.#init();
}

createRenderRoot() {
Expand All @@ -50,59 +49,77 @@ 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();
}

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`
<div class="alert alert-info">
<i class="fas fa-info-circle" style="margin-right:4px;"></i>
<span>No studies available for this variant.</span>
</div>
`;
}

return html`
${this.variant?.studies?.length > 0 && this.variant.studies.map(study => html`
<h3>
${studyNames[study.studyId]}
</h3>
<div style="padding: 10px">
<variant-cohort-stats-grid .stats="${study.stats}"></variant-cohort-stats-grid>
${this.variant.studies.map(study => html`
<h3>${this.studyNames[study.studyId] || ""}</h3>
<div style="">
<variant-cohort-stats-grid
.stats="${study.stats}">
</variant-cohort-stats-grid>
</div>
`)}
`;
}

}

customElements.define("variant-cohort-stats", VariantCohortStats);
Loading