From fbe52346fb34283a2a66257085c55ac9eedbfafc Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:31:36 +0200 Subject: [PATCH 01/25] wc Update fetch jobs method in job-monitor #TASK-7039 --- src/webcomponents/job/job-monitor.js | 53 ++++++++++++++++------------ 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 54a247f48..3c522ec9a 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -59,8 +59,9 @@ export class JobMonitor extends LitElement { }, }; this._interval = -1; - this._jobs = []; - this._addedJobs= new Set(); // Used for displaying the NEW label in each new job + this._jobs = null; + this._latestJobs = []; // To store the latest updated jobs + this._updatedJobs= new Set(); // Used for displaying the NEW label in each new job this._updatedJobsCount = 0; // To store the number of changes (new jobs, state changes) this._visibleJobsType = "ALL"; // Current visible jobs types (one of JOB_TYPES) this._config = this.getDefaultConfig(); @@ -74,9 +75,9 @@ export class JobMonitor extends LitElement { update(changedProperties) { if (changedProperties.has("opencgaSession")) { - this._jobs = []; - this._updatedJobsCount = 0; - this._addedJobs = new Set(); + this._jobs = null; + this._latestJobs = []; + this._updatedJobs = new Set(); this._visibleJobsType = "ALL"; } if (changedProperties.has("config")) { @@ -111,22 +112,28 @@ export class JobMonitor extends LitElement { } fetchLastJobs() { - this.opencgaSession.opencgaClient.jobs() - .search({ - study: this.opencgaSession.study.fqn, - internalStatus: "PENDING,QUEUED,RUNNING,DONE,ERROR,ABORTED", - limit: this._config.limit || 10, - sort: "creationDate", - include: "id,internal.status,tool,creationDate", - order: -1, - }) - .then(response => { - const newJobsList = response?.responses?.[0]?.results || []; + // generate the list of job types to fetch. Note that if the visible jobs type is "ALL", + // we will prevent requesting for the same job types multiple times + const jobsTypesToFetch = Array.from(new Set(["ALL", this._visibleJobsType])); + const jobsPromises = jobsTypesToFetch.map(jobType => { + return this.opencgaSession.opencgaClient.jobs() + .search({ + study: this.opencgaSession.study.fqn, + internalStatus: this.JOBS_TYPES[jobType].jobsTypes.join(","), + limit: this._config.limit || 10, + sort: "creationDate", + include: "id,internal.status,tool,creationDate", + order: -1, + }); + }); + Promise.all(jobsPromises) + .then(responses => { + const newJobsList = responses[0]?.responses?.[0]?.results || []; // 1. Process the list of new jobs returned by OpenCGA // Note: we check if the previous list of jobs is not empty, to prevent marking all jobs as new jobs - if (this._jobs.length > 0) { + if (this._latestJobs?.length > 0) { newJobsList.forEach(job => { - const oldJob = this._jobs.find(j => j.id === job.id); + const oldJob = this._latestJobs.find(j => j.id === job.id); if (oldJob) { const statusId = job?.internal?.status?.id || "-"; const oldStatusId = oldJob?.internal?.status?.id || "-"; @@ -135,20 +142,20 @@ export class JobMonitor extends LitElement { NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_INFO, { message: `The job ${job?.id} has now status ${statusId}.`, }); - this._updatedJobsCount = this._updatedJobsCount + 1; } } else { // This is a new job, so we display an info notification to the user NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_INFO, { message: `The job ${job?.id} has been added.`, }); - this._updatedJobsCount = this._updatedJobsCount + 1; - this._addedJobs.add(job.id); + this._updatedJobs.add(job.id); } }); } // 2. Save the new jobs list - this._jobs = newJobsList; + this._latestJobs = newJobsList; + // 3. save the visible jobs list + this._jobs = responses[1]?.responses?.[0]?.results || newJobsList; this.requestUpdate(); }) .catch(response => { @@ -167,7 +174,9 @@ export class JobMonitor extends LitElement { onJobTypeChange(event, newJobType) { event.stopPropagation(); + this._jobs = null; this._visibleJobsType = newJobType; + this.fetchLastJobs(); this.requestUpdate(); } From 77da4165a22c4945ad99df01454227e5305fbf68 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:32:43 +0200 Subject: [PATCH 02/25] wc: Fix displaying jobs in selected category #TASK-7039 --- src/webcomponents/job/job-monitor.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 3c522ec9a..3d725d205 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -189,12 +189,9 @@ export class JobMonitor extends LitElement { } renderVisibleJobsList() { - // Get the list of visible jobs with the selected type - const visibleJobs = this._jobs.filter(job => { - return this._visibleJobsType === "ALL" || this.JOBS_TYPES[this._visibleJobsType].jobsTypes.includes(job?.internal?.status?.id); - }); - if (visibleJobs.length > 0) { - return visibleJobs.map(job => html` + // Display jobs list + if (this._jobs && this._jobs.length > 0) { + return this._jobs.map(job => html`
  • From bd58ba3a5c4d498dc83a6c8fc01d8efcde95d270 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:33:30 +0200 Subject: [PATCH 03/25] wc: Fix displaying number of updated jobs #TASK-7039 --- src/webcomponents/job/job-monitor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 3d725d205..763d5acf8 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -237,9 +237,9 @@ export class JobMonitor extends LitElement {
    - ${this._updatedJobsCount > 0 ? html` + ${this._updatedJobs.size > 0 ? html` - ${this._updatedJobsCount} + ${this._updatedJobs.size} ` : nothing}     From a2b6b05cf2fa00f827ea83de0e6be83ad0c483ad Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:34:10 +0200 Subject: [PATCH 04/25] wc: Change jobs types for the category ALL in job-monitor #TASK-7039 --- src/webcomponents/job/job-monitor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 763d5acf8..6bb3544a2 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -47,7 +47,7 @@ export class JobMonitor extends LitElement { this.JOBS_TYPES = { ALL: { title: "All", - jobsTypes: [], + jobsTypes: ["PENDING", "QUEUED", "RUNNING", "DONE", "ERROR", "ABORTED"], }, RUNNING: { title: "Running", From 013d8176618783c44c4e31094c0d334875a862e2 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:35:30 +0200 Subject: [PATCH 05/25] wc: Display a loading spinner when fetching jobs of selected category #TASK-7039 --- src/webcomponents/job/job-monitor.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 6bb3544a2..0ebf014f7 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -218,6 +218,15 @@ export class JobMonitor extends LitElement {
    • `); + } else if (this._jobs && this._jobs.length === 0) { + return html` +
  • +
    + +
    No jobs on this category
    +
    +
    • + `; } else { return html`
  • From e6ad65e9e665e1b3e65a7c1a1cfbf2a4ec8a6fcf Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:36:41 +0200 Subject: [PATCH 06/25] wc: Fix displaying loading spinner in job monitor #TASK-7039 --- src/webcomponents/job/job-monitor.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 0ebf014f7..709cb339d 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -230,8 +230,9 @@ export class JobMonitor extends LitElement { } else { return html`
  • -
    - No jobs on this category. +
    + +
    Loading jobs...
    • `; From 2c614f7606c44b36b5f511593584a4868d5d784a Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:37:28 +0200 Subject: [PATCH 07/25] wc: Rename All category to Latest in job-monitor #TASK-7039 --- src/webcomponents/job/job-monitor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 709cb339d..383c3a3d8 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -46,7 +46,7 @@ export class JobMonitor extends LitElement { #init() { this.JOBS_TYPES = { ALL: { - title: "All", + title: "Latest", jobsTypes: ["PENDING", "QUEUED", "RUNNING", "DONE", "ERROR", "ABORTED"], }, RUNNING: { From 5c69fac8ef1658542c7b3dc03a99bafd6ca21300 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:38:02 +0200 Subject: [PATCH 08/25] wc: Remove unused variable used to save the updated jobs count #TASK-7039 --- src/webcomponents/job/job-monitor.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 383c3a3d8..733248ec3 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -62,7 +62,6 @@ export class JobMonitor extends LitElement { this._jobs = null; this._latestJobs = []; // To store the latest updated jobs this._updatedJobs= new Set(); // Used for displaying the NEW label in each new job - this._updatedJobsCount = 0; // To store the number of changes (new jobs, state changes) this._visibleJobsType = "ALL"; // Current visible jobs types (one of JOB_TYPES) this._config = this.getDefaultConfig(); } From 98b8ac8801690b4c9a23f1379135d07143606a35 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 15 Oct 2024 18:40:16 +0200 Subject: [PATCH 09/25] wc: Minor final fixes in job-monitor #TASK-7039 --- src/webcomponents/job/job-monitor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js index 733248ec3..0cfcf0f58 100644 --- a/src/webcomponents/job/job-monitor.js +++ b/src/webcomponents/job/job-monitor.js @@ -168,7 +168,9 @@ export class JobMonitor extends LitElement { onRefresh(event) { event.stopPropagation(); + this._jobs = null; this.fetchLastJobs(); + this.requestUpdate(); } onJobTypeChange(event, newJobType) { @@ -198,7 +200,7 @@ export class JobMonitor extends LitElement {
    - ${this._addedJobs.has(job?.id) ? html` + ${this._updatedJobs.has(job?.id) ? html` NEW ` : nothing}
    From c6f5b225f9da1589310eae92556ba2f156416aad Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:14:30 +0200 Subject: [PATCH 10/25] wc: Remove the condition that checks if proteinSubScore is empty #TASK-7079 --- .../annotation/cellbase-variant-annotation-summary.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 4e3b9c2d0..80e820618 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -161,12 +161,7 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } } } - if (Object.keys(proteinSubScore).length === 0 && proteinSubScore.constructor === Object) { - proteinSubScore.sift = {score: "NA", description: "NA", transcript: ""}; - proteinSubScore.polyphen = {score: "NA", description: "NA", transcript: ""}; - $("#" + _this._prefix + "Sift").css("color", "black"); - $("#" + _this._prefix + "Polyphen").css("color", "black"); - } + _this.proteinSubScore = proteinSubScore; // debugger // CADD From c5d4344b6f1052d25bb384c269bc8be9898aa795 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:15:56 +0200 Subject: [PATCH 11/25] wc: Add correct checks for sift and polyphen scores #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 80e820618..0b19d0a1f 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -162,8 +162,18 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } } + // Check if SIFT score is not defined + if (typeof proteinSubScore.sift === "undefined") { + proteinSubScore.sift = {score: "NA", description: "NA", transcript: ""}; + } + // Check if Polyphen score is not defined + if (typeof proteinSubScore.polyphen === "undefined") { + proteinSubScore.polyphen = {score: "NA", description: "NA", transcript: ""}; + } + + // Save the protein substitution scores _this.proteinSubScore = proteinSubScore; - // debugger + // CADD if (typeof _this.variantAnnotation.functionalScore !== "undefined") { for (const i in _this.variantAnnotation.functionalScore) { From 3d1dabb4908759c0a1a87818ea2dda7ec9f1ae32 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:23:18 +0200 Subject: [PATCH 12/25] wc: Minor code style fixes in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 70 +++++++++---------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 0b19d0a1f..9f06f68ef 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -100,29 +100,28 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } variantAnnotationChanged() { - const _this = this; if (typeof this.variantAnnotation !== "undefined") { - if (UtilsNew.isEmpty(_this.variantAnnotation.reference)) { - _this.variantAnnotation.reference = "-"; + if (UtilsNew.isEmpty(this.variantAnnotation.reference)) { + this.variantAnnotation.reference = "-"; } - if (UtilsNew.isEmpty(_this.variantAnnotation.alternate)) { - _this.variantAnnotation.alternate = "-"; + if (UtilsNew.isEmpty(this.variantAnnotation.alternate)) { + this.variantAnnotation.alternate = "-"; } // Consequence type // Color the consequence type - if (typeof _this.consequenceTypeToColor !== "undefined" && typeof _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType] !== "undefined") { - $("#" + _this._prefix + "CT").css("color", _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType]); + if (typeof this.consequenceTypeToColor !== "undefined" && typeof this.consequenceTypeToColor[this.variantAnnotation.displayConsequenceType] !== "undefined") { + $("#" + this._prefix + "CT").css("color", this.consequenceTypeToColor[this.variantAnnotation.displayConsequenceType]); } // Find the gene and transcript that exhibit the display consequence type - if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") { - for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) { - for (let j = 0; j < _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) { - if (_this.variantAnnotation.displayConsequenceType === _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) { - _this.ctGene = _this.variantAnnotation.consequenceTypes[i].geneName; - _this.ctTranscript = _this.variantAnnotation.consequenceTypes[i].transcriptId; + if (typeof this.variantAnnotation.consequenceTypes !== "undefined") { + for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) { + for (let j = 0; j < this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) { + if (this.variantAnnotation.displayConsequenceType === this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) { + this.ctGene = this.variantAnnotation.consequenceTypes[i].geneName; + this.ctTranscript = this.variantAnnotation.consequenceTypes[i].transcriptId; break; } } @@ -132,28 +131,28 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { // PSS const proteinSubScore = {}; // debugger - if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") { + if (typeof this.variantAnnotation.consequenceTypes !== "undefined") { let min = 10; let max = 0; - for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) { - if (typeof _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") { - const gene = _this.variantAnnotation.consequenceTypes[i].geneName; - const transcript = _this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId; - const scores = _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores; + for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) { + if (typeof this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") { + const gene = this.variantAnnotation.consequenceTypes[i].geneName; + const transcript = this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId; + const scores = this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores; if (typeof scores !== "undefined") { for (let j = 0; j < scores.length; j++) { if (scores[j].source === "sift" && scores[j].score <= min) { min = scores[j].score; proteinSubScore.sift = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript}; - // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") { - // $("#" + _this._prefix + "Sift").css("color", _this.pssColor.get(scores[j].description)); + // if (typeof this.pssColor !== "undefined" && typeof this.pssColor.get(scores[j].description) !== "undefined") { + // $("#" + this._prefix + "Sift").css("color", this.pssColor.get(scores[j].description)); // } } else if (scores[j].source === "polyphen" && scores[j].score >= max) { max = scores[j].score; proteinSubScore.polyphen = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript}; - // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") { - // $("#" + _this._prefix + "Polyphen").css("color", _this.pssColor.get(scores[j].description)); + // if (typeof this.pssColor !== "undefined" && typeof this.pssColor.get(scores[j].description) !== "undefined") { + // $("#" + this._prefix + "Polyphen").css("color", this.pssColor.get(scores[j].description)); // } } } @@ -172,28 +171,25 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } // Save the protein substitution scores - _this.proteinSubScore = proteinSubScore; + this.proteinSubScore = proteinSubScore; // CADD - if (typeof _this.variantAnnotation.functionalScore !== "undefined") { - for (const i in _this.variantAnnotation.functionalScore) { - const value = Number(_this.variantAnnotation.functionalScore[i].score).toFixed(2); - if (_this.variantAnnotation.functionalScore[i].source === "cadd_scaled") { + if (typeof this.variantAnnotation.functionalScore !== "undefined") { + (this.variantAnnotation.functionalScore || []).forEach(functionalScore => { + if (functionalScore?.source === "cadd_scaled") { + const value = Number(functionalScore.score).toFixed(2); if (value > 15) { - $("#" + _this._prefix + "Cadd").css("color", "red"); - _this.caddScaled = value; + $("#" + this._prefix + "Cadd").css("color", "red"); + this.caddScaled = value; } else { - $("#" + _this._prefix + "Cadd").css("color", "black"); - _this.caddScaled = value; + $("#" + this._prefix + "Cadd").css("color", "black"); + this.caddScaled = value; } } - } + }); } else { - $("#" + _this._prefix + "Cadd").css("color", "black"); - _this.caddScaled = "NA"; + this.caddScaled = "NA"; } - - // this.requestUpdate(); } } From f80dea338a843ce3da0426064bc4c9d57dafd4ee Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:30:17 +0200 Subject: [PATCH 13/25] wc: Fix displaying CADD score in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 33 ++++++++----------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 9f06f68ef..47cf61d5b 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -174,22 +174,12 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { this.proteinSubScore = proteinSubScore; // CADD - if (typeof this.variantAnnotation.functionalScore !== "undefined") { - (this.variantAnnotation.functionalScore || []).forEach(functionalScore => { - if (functionalScore?.source === "cadd_scaled") { - const value = Number(functionalScore.score).toFixed(2); - if (value > 15) { - $("#" + this._prefix + "Cadd").css("color", "red"); - this.caddScaled = value; - } else { - $("#" + this._prefix + "Cadd").css("color", "black"); - this.caddScaled = value; - } - } - }); - } else { - this.caddScaled = "NA"; - } + this.caddScaled = "NA"; // default value + (this.variantAnnotation.functionalScore || []).forEach(functionalScore => { + if (functionalScore?.source === "cadd_scaled") { + this.caddScaled = Number(functionalScore.score).toFixed(2); + } + }); } } @@ -324,10 +314,13 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { title: "CADD Scaled", type: "custom", display: { - render: data => html ` - ${this.caddScaled} - ` - } + render: () => { + const colorClassName = (this.caddScaled !== "NA" && this.caddScaled > 15) ? "text-danger" : "text-body"; + return html ` + ${this.caddScaled || "NA"} + `; + }, + }, } ] }] From d179c8fc677ba83ee280736f2d5726a43d2109e1 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:36:53 +0200 Subject: [PATCH 14/25] wc: Format default config of variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 246 +++++++++--------- 1 file changed, 122 insertions(+), 124 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 47cf61d5b..f37c0e78e 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -199,132 +199,130 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } getDefaultConfig() { - return Types.dataFormConfig({ - // title: "Summary", - sections: [{ - title: "General", - elements: [{ - title: "Id", - type: "custom", - display: { - render: data => { - const variantRegion = data.chromosome + ":" + data.start + "-" + data.start; - const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`; - return html ` - - ${variantId} - - `; - } - } - }, - { - title: "HGVS", - type: "custom", - display: { - visible: data => data?.hgvs.length > 0, - render: data => html ` - ${data.hgvs.map(item => html` ${item}
    `)} - ` - } - }, - { - title: "Alleles", - type: "custom", - display: { - render: data => html ` - ${data.reference}/${data.alternate} - ` - } - }, - { - title: "Location", - type: "custom", - display: { - render: data => html ` - ${data.chromosome}:${data.start} - ${data.end ? html`
    -${data.end}
    `: nothing} - ` - } - }, - { - title: "Type", - type: "custom", - field: "type", - display: { - visible: data => !UtilsNew.isEmpty(data.type), - } - }, - { - title: "Ancestral Allele", - field: "ancestralAllele", - display: { - visible: data => !UtilsNew.isEmpty(data.ancestralAllele), - } - }, - { - title: "MAF", - type: "custom", - display: { - visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq), - render: data => html `${data.minorAlleleFreq} (${data.minorAllele})` - } - }, - { - title: "Most Severe Consequence Type", - type: "custom", - display: { - render: data => html ` - ${data.displayConsequenceType} - ${this.ctGene ? html` - - (Gene : ${this.ctGene}, Transcript : ${this.ctTranscript}) - - ` : nothing } - ` - } - }, - { - title: "Most Severe Deleterious Score", - type: "custom", - display: { - render: data => html ` - - ${this.proteinSubScore.sift.description} - - ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html` - (Gene:${this.proteinSubScore.sift.gene}, Transcript: ${this.proteinSubScore.sift.transcript}) - ` : nothing } - ` - } - }, - { - title: "Polyphen", - type: "custom", - display: { - render: data => html ` - ${this.proteinSubScore.polyphen.description} - ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html` - (Gene:${this.proteinSubScore.polyphen.gene}, Transcript: ${this.proteinSubScore.polyphen.transcript}) - ` : nothing} - ` - } - }, + return { + sections: [ { - title: "CADD Scaled", - type: "custom", - display: { - render: () => { - const colorClassName = (this.caddScaled !== "NA" && this.caddScaled > 15) ? "text-danger" : "text-body"; - return html ` - ${this.caddScaled || "NA"} - `; + title: "General", + elements: [ + { + title: "Id", + type: "custom", + display: { + render: data => { + const variantRegion = data.chromosome + ":" + data.start + "-" + data.start; + const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`; + const url = BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly); + return html ` + ${variantId} + `; + } + } }, - }, - } - ] - }] - }); + { + title: "HGVS", + type: "custom", + display: { + visible: data => data?.hgvs.length > 0, + render: data => { + return data.hgvs.map(item => html`${item}
    `); + }, + }, + }, + { + title: "Alleles", + type: "custom", + display: { + render: data => html`${data.reference}/${data.alternate}`, + }, + }, + { + title: "Location", + type: "custom", + display: { + render: data => html`${data.chromosome}:${data.start}${data.end ? html`
    -${data.end}
    `: nothing}`, + } + }, + { + title: "Type", + type: "custom", + field: "type", + display: { + visible: data => !UtilsNew.isEmpty(data.type), + }, + }, + { + title: "Ancestral Allele", + field: "ancestralAllele", + display: { + visible: data => !UtilsNew.isEmpty(data.ancestralAllele), + }, + }, + { + title: "MAF", + type: "custom", + display: { + visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq), + render: data => html`${data.minorAlleleFreq} (${data.minorAllele})`, + }, + }, + { + title: "Most Severe Consequence Type", + type: "custom", + display: { + render: data => html` + ${data.displayConsequenceType} + ${this.ctGene ? html` + + (Gene : ${this.ctGene}, Transcript : ${this.ctTranscript}) + + ` : nothing} + `, + }, + }, + { + title: "Most Severe Deleterious Score", + type: "custom", + display: { + render: () => html` + + ${this.proteinSubScore.sift.description} + + ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html` + (Gene:${this.proteinSubScore.sift.gene}, Transcript: ${this.proteinSubScore.sift.transcript}) + ` : nothing } + `, + }, + }, + { + title: "Polyphen", + type: "custom", + display: { + render: () => html` + + ${this.proteinSubScore.polyphen.description} + + ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html` + (Gene:${this.proteinSubScore.polyphen.gene}, Transcript: ${this.proteinSubScore.polyphen.transcript}) + ` : nothing} + `, + }, + }, + { + title: "CADD Scaled", + type: "custom", + display: { + render: () => { + const colorClassName = (this.caddScaled !== "NA" && this.caddScaled > 15) ? "text-danger" : "text-body"; + return html ` + ${this.caddScaled || "NA"} + `; + }, + }, + }, + ], + }, + ], + }; } } From c821eed055d162caecc15b5214e2004da5e5fc9b Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:38:01 +0200 Subject: [PATCH 15/25] wc: Refactor render method of variant annotation summary #TASK-7079 --- .../annotation/cellbase-variant-annotation-summary.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index f37c0e78e..c9bf359ce 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -184,18 +184,16 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } render() { - if (this.variantAnnotation === undefined || this.variantAnnotation === "" || this.proteinSubScore === undefined) { - return; + if (!this.variantAnnotation || !this.proteinSubScore) { + return nothing; } - const variantRegion = this.variantAnnotation.chromosome + ":" + this.variantAnnotation.start + "-" + this.variantAnnotation.start; - const variantId = this.variantAnnotation.id ? this.variantAnnotation.id : `${this.variantAnnotation.chromosome}:${this.variantAnnotation.start}:${this.variantAnnotation.reference}:${this.variantAnnotation.alternate}`; + return html` `; - } getDefaultConfig() { From ac89ffe9ce2dbe5bf79fbeb0ccf8f3ef48063aaa Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:44:11 +0200 Subject: [PATCH 16/25] wc: Minor core refactor in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index c9bf359ce..f86551b11 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -17,13 +17,12 @@ import {LitElement, html, nothing} from "lit"; import UtilsNew from "../../../core/utils-new.js"; import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js"; -import Types from "../../commons/types.js"; export default class CellbaseVariantAnnotationSummary extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -50,19 +49,21 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { }; } - _init() { + #init() { this._prefix = UtilsNew.randomString(8); - this.variantAnnotation = {}; + this.variantAnnotation = null; + this.proteinSubScore = null; + this.consequenceTypeToColor = null; this._config = this.getDefaultConfig(); } update(changedProperties) { - if (changedProperties.has("variantAnnotation")) { - this.variantAnnotationChanged(); - } if (changedProperties.has("consequenceTypes") || changedProperties.has("proteinSubstitutionScores")) { this.setColors(); } + if (changedProperties.has("variantAnnotation")) { + this.variantAnnotationChanged(); + } super.update(changedProperties); } @@ -87,7 +88,7 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { this.consequenceTypeToColor = consequenceTypeToColor; } - if (typeof this.proteinSubstitutionScores !== "undefined") { + if (this.proteinSubstitutionScores) { const pssColor = new Map(); for (const i in this.proteinSubstitutionScores) { const obj = this.proteinSubstitutionScores[i]; @@ -211,7 +212,9 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`; const url = BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly); return html ` - ${variantId} + + ${variantId} + `; } } From 03418179fceb754572eb08a86d9847617bcedab5 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 12:47:46 +0200 Subject: [PATCH 17/25] wc: Fix displaying consequence type color in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index f86551b11..2ba918b44 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -110,12 +110,6 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { this.variantAnnotation.alternate = "-"; } - // Consequence type - // Color the consequence type - if (typeof this.consequenceTypeToColor !== "undefined" && typeof this.consequenceTypeToColor[this.variantAnnotation.displayConsequenceType] !== "undefined") { - $("#" + this._prefix + "CT").css("color", this.consequenceTypeToColor[this.variantAnnotation.displayConsequenceType]); - } - // Find the gene and transcript that exhibit the display consequence type if (typeof this.variantAnnotation.consequenceTypes !== "undefined") { for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) { @@ -129,9 +123,9 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } } - // PSS + // Protein substitution scores const proteinSubScore = {}; - // debugger + if (typeof this.variantAnnotation.consequenceTypes !== "undefined") { let min = 10; let max = 0; @@ -270,14 +264,19 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { title: "Most Severe Consequence Type", type: "custom", display: { - render: data => html` - ${data.displayConsequenceType} - ${this.ctGene ? html` - - (Gene : ${this.ctGene}, Transcript : ${this.ctTranscript}) + render: data => { + const consequenceTypeColor = this.consequenceTypeToColor?.[data.displayConsequenceType] || "black"; + return html` + + ${data.displayConsequenceType} - ` : nothing} - `, + ${this.ctGene ? html` + + (Gene : ${this.ctGene}, Transcript : ${this.ctTranscript}) + + ` : nothing} + `; + }, }, }, { From bd911f15bfe62a25d1d2287890f2ccb38bc5ab15 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 13:07:48 +0200 Subject: [PATCH 18/25] wc: Fix displaying protein substitution scores colors in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 77 ++++++++++--------- 1 file changed, 41 insertions(+), 36 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 2ba918b44..7ef4e5605 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -50,7 +50,6 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } #init() { - this._prefix = UtilsNew.randomString(8); this.variantAnnotation = null; this.proteinSubScore = null; this.consequenceTypeToColor = null; @@ -88,16 +87,8 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { this.consequenceTypeToColor = consequenceTypeToColor; } - if (this.proteinSubstitutionScores) { - const pssColor = new Map(); - for (const i in this.proteinSubstitutionScores) { - const obj = this.proteinSubstitutionScores[i]; - Object.keys(obj).forEach(key => { - pssColor.set(key, obj[key]); - }); - } - this.pssColor = pssColor; - } + // Note Josemi 20241016: colors for protein substitution scores are now managed in the method getProteinSubstitutionScoresColor + // so we do not need to set them in this.pssColor } variantAnnotationChanged() { @@ -139,16 +130,20 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { for (let j = 0; j < scores.length; j++) { if (scores[j].source === "sift" && scores[j].score <= min) { min = scores[j].score; - proteinSubScore.sift = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript}; - // if (typeof this.pssColor !== "undefined" && typeof this.pssColor.get(scores[j].description) !== "undefined") { - // $("#" + this._prefix + "Sift").css("color", this.pssColor.get(scores[j].description)); - // } + proteinSubScore.sift = { + score: scores[j].score, + description: scores[j].description, + gene: gene, + transcript: transcript, + }; } else if (scores[j].source === "polyphen" && scores[j].score >= max) { max = scores[j].score; - proteinSubScore.polyphen = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript}; - // if (typeof this.pssColor !== "undefined" && typeof this.pssColor.get(scores[j].description) !== "undefined") { - // $("#" + this._prefix + "Polyphen").css("color", this.pssColor.get(scores[j].description)); - // } + proteinSubScore.polyphen = { + score: scores[j].score, + description: scores[j].description, + gene: gene, + transcript: transcript, + }; } } } @@ -178,6 +173,10 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } } + getProteinSubstitutionScoresColor(source, description) { + return this.proteinSubstitutionScores?.style?.[source]?.[description] || "black"; + } + render() { if (!this.variantAnnotation || !this.proteinSubScore) { return nothing; @@ -267,7 +266,7 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { render: data => { const consequenceTypeColor = this.consequenceTypeToColor?.[data.displayConsequenceType] || "black"; return html` - + ${data.displayConsequenceType} ${this.ctGene ? html` @@ -283,28 +282,34 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { title: "Most Severe Deleterious Score", type: "custom", display: { - render: () => html` - - ${this.proteinSubScore.sift.description} - - ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html` - (Gene:${this.proteinSubScore.sift.gene}, Transcript: ${this.proteinSubScore.sift.transcript}) - ` : nothing } - `, + render: () => { + const color = this.getProteinSubstitutionScoresColor("sift", this.proteinSubScore?.sift?.description); + return html` + + ${this.proteinSubScore.sift.description || "-"} + + ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html` + (Gene:${this.proteinSubScore.sift.gene}, Transcript: ${this.proteinSubScore.sift.transcript}) + ` : nothing } + `; + }, }, }, { title: "Polyphen", type: "custom", display: { - render: () => html` - - ${this.proteinSubScore.polyphen.description} - - ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html` - (Gene:${this.proteinSubScore.polyphen.gene}, Transcript: ${this.proteinSubScore.polyphen.transcript}) - ` : nothing} - `, + render: () => { + const color = this.getProteinSubstitutionScoresColor("polyphen", this.proteinSubScore?.polyphen?.description); + return html` + + ${this.proteinSubScore.polyphen.description || "-"} + + ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html` + (Gene:${this.proteinSubScore.polyphen.gene}, Transcript: ${this.proteinSubScore.polyphen.transcript}) + ` : nothing} + `; + }, }, }, { From 6878d8a11d82f25474f007b2c8214a94514ef092 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 16 Oct 2024 13:28:35 +0200 Subject: [PATCH 19/25] wc: Refactor for using our naming convention for functions and variables #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 7ef4e5605..7ca8e596e 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -51,26 +51,27 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { #init() { this.variantAnnotation = null; - this.proteinSubScore = null; - this.consequenceTypeToColor = null; + + this._proteinSubScore = null; + this._caddScaled = null; + this._consequenceTypeGene = null; + this._consequenceTypeTranscript = null; + this._consequenceTypeToColor = null; + this._config = this.getDefaultConfig(); } update(changedProperties) { - if (changedProperties.has("consequenceTypes") || changedProperties.has("proteinSubstitutionScores")) { - this.setColors(); + if (changedProperties.has("consequenceTypes")) { + this.consequenceTypesObserver(); } if (changedProperties.has("variantAnnotation")) { - this.variantAnnotationChanged(); + this.variantAnnotationObserver(); } super.update(changedProperties); } - isTranscriptAvailable(item) { - return item !== ""; - } - - setColors() { + consequenceTypesObserver() { if (this.consequenceTypes) { const consequenceTypeToColor = {}; for (const category of this.consequenceTypes.categories) { @@ -84,30 +85,29 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } } } - this.consequenceTypeToColor = consequenceTypeToColor; + this._consequenceTypeToColor = consequenceTypeToColor; } - - // Note Josemi 20241016: colors for protein substitution scores are now managed in the method getProteinSubstitutionScoresColor - // so we do not need to set them in this.pssColor } - variantAnnotationChanged() { - if (typeof this.variantAnnotation !== "undefined") { - if (UtilsNew.isEmpty(this.variantAnnotation.reference)) { + variantAnnotationObserver() { + if (this.variantAnnotation) { + if (!this.variantAnnotation.reference) { this.variantAnnotation.reference = "-"; } - if (UtilsNew.isEmpty(this.variantAnnotation.alternate)) { + if (!this.variantAnnotation.alternate) { this.variantAnnotation.alternate = "-"; } // Find the gene and transcript that exhibit the display consequence type + this._consequenceTypeGene = null; + this._consequenceTypeTranscript = null; if (typeof this.variantAnnotation.consequenceTypes !== "undefined") { for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) { for (let j = 0; j < this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) { if (this.variantAnnotation.displayConsequenceType === this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) { - this.ctGene = this.variantAnnotation.consequenceTypes[i].geneName; - this.ctTranscript = this.variantAnnotation.consequenceTypes[i].transcriptId; + this._consequenceTypeGene = this.variantAnnotation.consequenceTypes[i].geneName; + this._consequenceTypeTranscript = this.variantAnnotation.consequenceTypes[i].transcriptId; break; } } @@ -161,13 +161,13 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } // Save the protein substitution scores - this.proteinSubScore = proteinSubScore; + this._proteinSubScore = proteinSubScore; // CADD - this.caddScaled = "NA"; // default value + this._caddScaled = "NA"; // default value (this.variantAnnotation.functionalScore || []).forEach(functionalScore => { if (functionalScore?.source === "cadd_scaled") { - this.caddScaled = Number(functionalScore.score).toFixed(2); + this._caddScaled = Number(functionalScore.score).toFixed(2); } }); } @@ -177,8 +177,12 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { return this.proteinSubstitutionScores?.style?.[source]?.[description] || "black"; } + isTranscriptAvailable(item) { + return item !== ""; + } + render() { - if (!this.variantAnnotation || !this.proteinSubScore) { + if (!this.variantAnnotation) { return nothing; } @@ -264,14 +268,14 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: data => { - const consequenceTypeColor = this.consequenceTypeToColor?.[data.displayConsequenceType] || "black"; + const consequenceTypeColor = this._consequenceTypeToColor?.[data.displayConsequenceType] || "black"; return html` ${data.displayConsequenceType} - ${this.ctGene ? html` + ${this._consequenceTypeGene ? html` - (Gene : ${this.ctGene}, Transcript : ${this.ctTranscript}) + (Gene : ${this._consequenceTypeGene}, Transcript : ${this._consequenceTypeTranscript}) ` : nothing} `; @@ -283,13 +287,13 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: () => { - const color = this.getProteinSubstitutionScoresColor("sift", this.proteinSubScore?.sift?.description); + const color = this.getProteinSubstitutionScoresColor("sift", this._proteinSubScore?.sift?.description); return html` - - ${this.proteinSubScore.sift.description || "-"} + + ${this._proteinSubScore.sift.description || "-"} - ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html` - (Gene:${this.proteinSubScore.sift.gene}, Transcript: ${this.proteinSubScore.sift.transcript}) + ${this.isTranscriptAvailable(this._proteinSubScore.sift.transcript) ? html` + (Gene:${this._proteinSubScore.sift.gene}, Transcript: ${this._proteinSubScore.sift.transcript}) ` : nothing } `; }, @@ -300,13 +304,13 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: () => { - const color = this.getProteinSubstitutionScoresColor("polyphen", this.proteinSubScore?.polyphen?.description); + const color = this.getProteinSubstitutionScoresColor("polyphen", this._proteinSubScore?.polyphen?.description); return html` - - ${this.proteinSubScore.polyphen.description || "-"} + + ${this._proteinSubScore.polyphen.description || "-"} - ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html` - (Gene:${this.proteinSubScore.polyphen.gene}, Transcript: ${this.proteinSubScore.polyphen.transcript}) + ${this.isTranscriptAvailable(this._proteinSubScore.polyphen.transcript) ? html` + (Gene:${this._proteinSubScore.polyphen.gene}, Transcript: ${this._proteinSubScore.polyphen.transcript}) ` : nothing} `; }, @@ -317,9 +321,9 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: () => { - const colorClassName = (this.caddScaled !== "NA" && this.caddScaled > 15) ? "text-danger" : "text-body"; + const colorClassName = (this._caddScaled !== "NA" && this._caddScaled > 15) ? "text-danger" : "text-body"; return html ` - ${this.caddScaled || "NA"} + ${this._caddScaled} `; }, }, From 1ab41f7ee4b975daeeb986f6659709010cdb9be2 Mon Sep 17 00:00:00 2001 From: Josemi Date: Fri, 18 Oct 2024 18:28:41 +0200 Subject: [PATCH 20/25] wc: Remove useless isTranscriptAvailable method in variant annotation summary #TASK-7079 --- .../cellbase-variant-annotation-summary.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 7ca8e596e..7f8ab6303 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -177,10 +177,6 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { return this.proteinSubstitutionScores?.style?.[source]?.[description] || "black"; } - isTranscriptAvailable(item) { - return item !== ""; - } - render() { if (!this.variantAnnotation) { return nothing; @@ -287,12 +283,12 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: () => { - const color = this.getProteinSubstitutionScoresColor("sift", this._proteinSubScore?.sift?.description); + const color = this.getProteinSubstitutionScoresColor("sift", this._proteinSubScore.sift.description); return html` ${this._proteinSubScore.sift.description || "-"} - ${this.isTranscriptAvailable(this._proteinSubScore.sift.transcript) ? html` + ${this._proteinSubScore.sift?.transcript ? html` (Gene:${this._proteinSubScore.sift.gene}, Transcript: ${this._proteinSubScore.sift.transcript}) ` : nothing } `; @@ -304,12 +300,12 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { type: "custom", display: { render: () => { - const color = this.getProteinSubstitutionScoresColor("polyphen", this._proteinSubScore?.polyphen?.description); + const color = this.getProteinSubstitutionScoresColor("polyphen", this._proteinSubScore.polyphen.description); return html` ${this._proteinSubScore.polyphen.description || "-"} - ${this.isTranscriptAvailable(this._proteinSubScore.polyphen.transcript) ? html` + ${this._proteinSubScore.polyphen?.transcript ? html` (Gene:${this._proteinSubScore.polyphen.gene}, Transcript: ${this._proteinSubScore.polyphen.transcript}) ` : nothing} `; From d0840e2f1147c7c9bf50e5681ecc6e623693c9cb Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 21 Oct 2024 12:46:42 +0200 Subject: [PATCH 21/25] wc: Fix application logo height in custom-navbar #TASK-7117 --- src/webcomponents/commons/layouts/custom-navbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/commons/layouts/custom-navbar.js b/src/webcomponents/commons/layouts/custom-navbar.js index 34fdecec5..18e545dfa 100644 --- a/src/webcomponents/commons/layouts/custom-navbar.js +++ b/src/webcomponents/commons/layouts/custom-navbar.js @@ -240,7 +240,7 @@ export default class CustomNavBar extends LitElement {
    ${this.app?.logo ? html` - App logo + App logo ` : nothing} ${!this.app?.logo && this.app?.name ? html` From 6897ce25443270c2ac5cfcb6e42648d0e76460dc Mon Sep 17 00:00:00 2001 From: gpveronica Date: Mon, 21 Oct 2024 13:56:15 +0200 Subject: [PATCH 22/25] wc - Fix text-danger in data-form error messages #TASK-6759 Signed-off-by: gpveronica --- src/webcomponents/commons/forms/data-form.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js index 7177f8905..0af472e5b 100644 --- a/src/webcomponents/commons/forms/data-form.js +++ b/src/webcomponents/commons/forms/data-form.js @@ -807,7 +807,7 @@ export default class DataForm extends LitElement { } return html` -
    +
    ${contentHtml}
    @@ -815,7 +815,7 @@ export default class DataForm extends LitElement {
    ${helpMessage}
    ` : nothing} ${hasErrorMessages ? html` -
    +
    From 1f441291e38c0a796ebf6823a3414f8045492909 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Mon, 21 Oct 2024 15:01:45 +0200 Subject: [PATCH 23/25] wc - Maintain study or project input on submit operation, #TASK-6930 Signed-off-by: gpveronica --- src/webcomponents/study/admin/variant/operations-admin.js | 7 +++---- .../operation/variant-annotation-index-operation.js | 1 + .../variant/operation/variant-index-operation.js | 1 + .../variant-secondary-annotation-index-operation.js | 1 + .../operation/variant-secondary-sample-index-operation.js | 1 + 5 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/webcomponents/study/admin/variant/operations-admin.js b/src/webcomponents/study/admin/variant/operations-admin.js index 0744dba60..d9d1ecf54 100644 --- a/src/webcomponents/study/admin/variant/operations-admin.js +++ b/src/webcomponents/study/admin/variant/operations-admin.js @@ -194,7 +194,7 @@ export default class OperationsAdmin extends LitElement { } return html` `; @@ -217,7 +217,7 @@ export default class OperationsAdmin extends LitElement { } return html` `; @@ -265,10 +265,9 @@ export default class OperationsAdmin extends LitElement { visibility: "private", type: "navitem", render: (opencgaSession, study) => { - // CAUTION: no .fqn? in toolParams property? return html` `; diff --git a/src/webcomponents/variant/operation/variant-annotation-index-operation.js b/src/webcomponents/variant/operation/variant-annotation-index-operation.js index 526703cf1..f736f47b8 100644 --- a/src/webcomponents/variant/operation/variant-annotation-index-operation.js +++ b/src/webcomponents/variant/operation/variant-annotation-index-operation.js @@ -118,6 +118,7 @@ export default class VariantAnnotationIndexOperation extends LitElement { onClear() { this.toolParams = { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), + project: this.toolParams.project || "", }; this.config = this.getDefaultConfig(); } diff --git a/src/webcomponents/variant/operation/variant-index-operation.js b/src/webcomponents/variant/operation/variant-index-operation.js index 272a80b28..0f06887dc 100644 --- a/src/webcomponents/variant/operation/variant-index-operation.js +++ b/src/webcomponents/variant/operation/variant-index-operation.js @@ -122,6 +122,7 @@ export default class VariantIndexOperation extends LitElement { onClear() { this.toolParams = { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), + study: this.toolParams.study || "", }; this.config = this.getDefaultConfig(); } diff --git a/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js index 282ee38a3..d8bf74c2c 100644 --- a/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js +++ b/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js @@ -118,6 +118,7 @@ export default class VariantSecondaryAnnotationIndexOperation extends LitElement onClear() { this.toolParams = { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), + project: this.toolParams.project || "", }; this.config = this.getDefaultConfig(); } diff --git a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js index 14c82bc04..eb0f06105 100644 --- a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js +++ b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js @@ -125,6 +125,7 @@ export default class VariantSecondarySampleIndexOperation extends LitElement { onClear() { this.toolParams = { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), + study: this.toolParams.study || "", }; this.config = this.getDefaultConfig(); } From bd98273f762eefbf266d6390043a62fbabc356a6 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Mon, 21 Oct 2024 15:04:44 +0200 Subject: [PATCH 24/25] wc - Add parameter cohort and maintain study or project input on submit operation, #TASK-6930 Signed-off-by: gpveronica --- .../variant-stats-index-operation.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/webcomponents/variant/operation/variant-stats-index-operation.js b/src/webcomponents/variant/operation/variant-stats-index-operation.js index e164d2ad8..a93b40d8a 100644 --- a/src/webcomponents/variant/operation/variant-stats-index-operation.js +++ b/src/webcomponents/variant/operation/variant-stats-index-operation.js @@ -56,7 +56,6 @@ export default class VariantStatsIndexOperation extends LitElement { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), }; - this.study = ""; this.config = this.getDefaultConfig(); } @@ -84,6 +83,11 @@ export default class VariantStatsIndexOperation extends LitElement { message: "Study is a mandatory parameter, please select one." }; } + if (!this.toolParams.cohort) { + return { + message: "Cohort IDs is a mandatory parameter, please select some cohorts." + }; + } return null; } @@ -98,6 +102,7 @@ export default class VariantStatsIndexOperation extends LitElement { onSubmit() { const toolParams = { + cohort: this.toolParams.cohort?.split(",") || [], overwriteStats: this.toolParams.overwriteStats || false, resume: this.toolParams.resume || false, }; @@ -116,6 +121,7 @@ export default class VariantStatsIndexOperation extends LitElement { onClear() { this.toolParams = { ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS), + study: this.toolParams.study || "", }; this.config = this.getDefaultConfig(); } @@ -160,6 +166,22 @@ export default class VariantStatsIndexOperation extends LitElement { { title: "Configuration Parameters", elements: [ + { + title: "Cohort IDs", + type: "custom", + required: true, + display: { + render: toolParams => html ` + + + `, + }, + }, { title: "Overwrite Stats", field: "overwriteStats", From 1da8721688605f80d5e4eb4220d0ea16516d43d1 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Mon, 21 Oct 2024 15:06:18 +0200 Subject: [PATCH 25/25] wc - Tiny fix in label, #TASK-6930 Signed-off-by: gpveronica --- .../operation/variant-secondary-sample-index-operation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js index eb0f06105..25a9eb2b2 100644 --- a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js +++ b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js @@ -169,7 +169,7 @@ export default class VariantSecondarySampleIndexOperation extends LitElement { title: "Configuration Parameters", elements: [ { - title: "Sample", + title: "Sample IDs", type: "custom", required: true, display: {