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-4451 - Variant and Sample Variant Browser discrepancies and other visualisation details to fix #900

Merged
merged 8 commits into from
May 16, 2024
Merged

TASK-4451 - Variant and Sample Variant Browser discrepancies and other visualisation details to fix #900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a89145e
wc: fix pop freqs issues
imedina Jun 12, 2023
dc226b2
wc: minor fixes in the the cellbase grid
imedina Jun 12, 2023
d0b7ff7
Fix cohort-stats rounded freqs
imedina Apr 4, 2024
efe847a
Merge branch 'release-2.8.x' into TASK-4451
imedina Apr 4, 2024
40be6ca
Merge branch 'release-2.12.x' into TASK-4451
imedina Apr 4, 2024
f869daa
Merge branch 'release-2.12.x' into TASK-4451
jmjuanes Apr 24, 2024
8c705e3
Merge branch 'release-2.12.x' into TASK-4451
jmjuanes Apr 30, 2024
4615c01
Merge branch 'release-2.12.x' into TASK-4451
jmjuanes May 16, 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
8 changes: 7 additions & 1 deletion src/sites/iva/conf/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const hosts = [
url: "https://ws.opencb.org/opencga-prod"
},
{
id: "test1",
id: "demo",
url: "https://demo.app.zettagenomics.com/opencga"
},
{
Expand Down Expand Up @@ -194,6 +194,12 @@ const SUITE = {
{id: "getting-started", name: "Getting Started", tab: false, url: "#getting-started", icon: "fa fa-book"}
]
},
jobMonitor: {
visibility: "private"
},
fileExplorer: {
visibility: "private"
},
restApi: {
visibility: "private"
},
Expand Down
61 changes: 35 additions & 26 deletions src/webcomponents/variant/annotation/cellbase-population-frequency-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
constructor() {
super();

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

createRenderRoot() {
Expand All @@ -50,7 +50,7 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
};
}

_init() {
#init() {
this._prefix = UtilsNew.randomString(8);

this.populationFrequencies = [];
Expand All @@ -76,15 +76,12 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
}

variantIdObserver() {
console.log("variantIdObserver", this.variantId, this.cellbaseClient);
if (this.cellbaseClient && this.variantId) {
this.cellbaseClient.get("genomic", "variant", this.variantId, "annotation", {assembly: this.assembly}, {})
.then(restResponse => {
this.populationFrequencies = restResponse.getResult(0).populationFrequencies;
this.requestUpdate();
});
} else {
// this.populationFrequencies = null;
}
}

Expand All @@ -94,17 +91,20 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
return refAllele + "/" + altAllele;
}

freqFormatter(value, row, index) {
return (value !== 0 && value !== 1) ? Number(value).toFixed(4) : value;
freqFormatter(value, count) {
if (typeof value === "undefined") {
return "NA";
}
return (value !== 0 && value !== 1) ? `<span style="margin:0 5px">${Number(value).toPrecision(4)}</span> / <span style="margin:0 5px">${count}</span> (${(value * 100).toPrecision(4)} %)` : value;
}

renderPlot() {
const popArray = [];
const mafArray = [];
if (typeof this.populationFrequencies !== "undefined") {
if (this.populationFrequencies) {
for (let i = 0; i < this.populationFrequencies.length; i++) {
popArray.push(this.populationFrequencies[i].study + "-" + this.populationFrequencies[i].population);
mafArray.push(Math.min(Number(this.populationFrequencies[i].refAlleleFreq).toFixed(4), Number(this.populationFrequencies[i].altAlleleFreq).toFixed(4)));
mafArray.push(Math.min(Number(this.populationFrequencies[i].refAlleleFreq).toPrecision(4), Number(this.populationFrequencies[i].altAlleleFreq).toPrecision(4)));
}
}

Expand Down Expand Up @@ -203,14 +203,28 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
colspan: 1
},
{
title: "Allele Frequency",
title: "Number of Samples",
rowspan: 2,
colspan: 1,
formatter: (value, row) => {
if (row.refHomGenotypeCount || row.hetGenotypeCount || row.altHomGenotypeCount) {
return row.refHomGenotypeCount + row.hetGenotypeCount + row.altHomGenotypeCount;
} else {
return (row?.refAlleleCount + row?.altAlleleCount) / 2;
}
},
halign: "center",
align: "right"
},
{
title: "Allele Info",
rowspan: 1,
colspan: 2,
formatter: this.alleleFormatter,
halign: "center"
},
{
title: "Genotype Frequency",
title: "Genotype Info",
rowspan: 1,
colspan: 3,
formatter: this.alleleFormatter,
Expand All @@ -219,52 +233,47 @@ export default class CellbasePopulationFrequencyGrid extends LitElement {
],
[
{
title: "Reference",
field: "refAlleleFreq",
title: `Reference Allele<br><span style="font-style: italic">Freq / Count (%)</span>`,
rowspan: 1,
colspan: 1,
sortable: true,
formatter: this.freqFormatter,
formatter: (value, row) => this.freqFormatter(row.refAlleleFreq, row.refAlleleCount),
halign: "center",
align: "right"
},
{
title: "Alternate",
field: "altAlleleFreq",
title: `Alternate Allele<br><span style="font-style: italic">Freq / Count (%)</span>`,
rowspan: 1,
colspan: 1,
sortable: true,
formatter: this.freqFormatter,
formatter: (value, row) => this.freqFormatter(row.altAlleleFreq, row.altAlleleCount),
halign: "center",
align: "right"
},
{
title: "Ref/Ref",
field: "refHomGenotypeFreq",
title: `Ref/Ref Genotype<br><span style="font-style: italic">Freq / Count (%)</span>`,
rowspan: 1,
colspan: 1,
sortable: true,
formatter: this.freqFormatter,
formatter: (value, row) => this.freqFormatter(row.refHomGenotypeFreq, row.refHomGenotypeCount),
halign: "center",
align: "right"
},
{
title: "Ref/Alt",
field: "hetGenotypeFreq",
title: `Ref/Alt Genotype<br><span style="font-style: italic">Freq / Count (%)</span>`,
rowspan: 1,
colspan: 1,
sortable: true,
formatter: this.freqFormatter,
formatter: (value, row) => this.freqFormatter(row.hetGenotypeFreq, row.hetGenotypeCount),
halign: "center",
align: "right"
},
{
title: "Alt/Alt",
field: "altHomGenotypeFreq",
title: `Alt/Alt Genotype<br><span style="font-style: italic">Freq / Count (%)</span>`,
rowspan: 1,
colspan: 1,
sortable: true,
formatter: this.freqFormatter,
formatter: (value, row) => this.freqFormatter(row.altHomGenotypeFreq, row.altHomGenotypeCount),
halign: "center",
align: "right"
}
Expand Down
17 changes: 8 additions & 9 deletions src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,19 @@ export default class VariantInterpreterGridFormatter {
}

static clinicalPopulationFrequenciesFormatter(value, row) {
const popFreqMap = new Map();
// If variant population freqs exist read values
if (row?.annotation?.populationFrequencies?.length > 0) {
const popFreqMap = new Map();
row.annotation.populationFrequencies.forEach(popFreq => {
popFreqMap.set(popFreq.study + ":" + popFreq.population, popFreq);
});
return VariantGridFormatter.renderPopulationFrequencies(
this._config.populationFrequencies,
popFreqMap,
POPULATION_FREQUENCIES.style,
this._config.populationFrequenciesConfig,
);
} else {
return "-";
}
return VariantGridFormatter.renderPopulationFrequencies(
this._config.populationFrequencies,
popFreqMap,
POPULATION_FREQUENCIES.style,
this._config.populationFrequenciesConfig,
);
}

static predictionFormatter(value, row) {
Expand Down
53 changes: 30 additions & 23 deletions src/webcomponents/variant/variant-cohort-stats-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class VariantCohortStatsGrid extends LitElement {
constructor() {
super();

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

createRenderRoot() {
Expand All @@ -44,7 +44,7 @@ class VariantCohortStatsGrid extends LitElement {
};
}

_init() {
#init() {
this._prefix = UtilsNew.randomString(8);
}

Expand Down Expand Up @@ -79,7 +79,6 @@ class VariantCohortStatsGrid extends LitElement {
pageSize: this._config.pageSize,
pageList: this._config.pageList,
formatLoadingMessage: () =>"<loading-spinner></loading-spinner>",

onLoadError: (status, res) => {
console.log(status);
console.log(res);
Expand All @@ -88,18 +87,30 @@ class VariantCohortStatsGrid extends LitElement {
}
}

idFormatter(value) {
return `<span style="font-weight: bold">${value}</span>`;
numSamplesFormatter(value, row) {
if (row.sampleCount > 0) {
return row.sampleCount;
} else {
let total = 0;
for (const genotype of Object.keys(row.genotypeCount)) {
total += row.genotypeCount[genotype];
}
return total || "NA";
}
}

filterFormatter(value, row) {
let content = "";
for (const filter of Object.keys(row.filterFreq)) {
let fixedFreq = row.filterFreq[filter];
if (fixedFreq !== 0 && fixedFreq !== 1) {
fixedFreq = Number(fixedFreq).toFixed(4);
let freq = row.filterFreq[filter];
if (freq !== 0 && freq !== 1) {
freq = Number(freq).toPrecision(4);
}
const s = `<span style="padding-right: 20px">${filter}</span><span>${fixedFreq} (${row.filterCount[filter]})</span><br>`;
const s = `
<span style="padding-right: 20px">${filter}</span>
<span>${freq} (${row.filterCount[filter]})</span><br>
`;

// PASS must be the first element
if (filter === "PASS") {
content = s + content;
Expand All @@ -110,16 +121,8 @@ class VariantCohortStatsGrid extends LitElement {
return content;
}

numSamplesFormatter(value, row) {
if (value) {
return value;
} else {
let total = 0;
for (const genotype of Object.keys(row.genotypeCount)) {
total += row.genotypeCount[genotype];
}
return total;
}
idFormatter(value) {
return `<span style="font-weight: bold">${value}</span>`;
}

statsFormatter(value, row) {
Expand Down Expand Up @@ -150,8 +153,12 @@ class VariantCohortStatsGrid extends LitElement {
count = row.genotypeCount["1/1"];
break;
}
const fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toPrecision(4) : freq;
return `${fixedFreq} (${count})`;
const formattedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toPrecision(5) : freq;
if (formattedFreq >= 0) {
return `${formattedFreq} (${count})`;
} else {
return "NA";
}
}

othersFormatter(value, row) {
Expand All @@ -160,7 +167,7 @@ class VariantCohortStatsGrid extends LitElement {
if (genotype !== "0/0" && genotype !== "0/1" && genotype !== "1/1") {
const freq = row.genotypeFreq[genotype];
const count = row.genotypeCount[genotype];
const fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toPrecision(4) : freq;
const fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toPrecision(5) : freq;
str += `<span style="margin: 0 5px">${genotype}:</span> ${fixedFreq} (${count})<br>`;
}
}
Expand Down Expand Up @@ -207,7 +214,7 @@ class VariantCohortStatsGrid extends LitElement {
},
{
title: "Number of Samples",
field: "sampleCount",
// field: "sampleCount",
rowspan: 2,
colspan: 1,
formatter: this.numSamplesFormatter,
Expand Down
34 changes: 17 additions & 17 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 @@ -14,7 +14,7 @@
* limitations under the License.
*/

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

Expand All @@ -23,7 +23,7 @@ export default class VariantCohortStats extends LitElement {
constructor() {
super();

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

createRenderRoot() {
Expand All @@ -50,7 +50,7 @@ export default class VariantCohortStats extends LitElement {
};
}

_init() {
#init() {
this._prefix = UtilsNew.randomString(8);
this.active = false;
}
Expand All @@ -72,14 +72,15 @@ export default class VariantCohortStats extends LitElement {
exclude: "annotation,studies.files,studies.samples,studies.scores,studies.issues",
useSearchIndex: "no"
};
this.opencgaSession.opencgaClient.variants().query(params)
this.opencgaSession.opencgaClient.variants()
.query(params)
.then(response => {
if (response.responses[0].results[0]) {
this.variant = response.responses[0].results[0];
this.requestUpdate();
// this.requestUpdate();
}
})
.catch(function(reason) {
.catch(reason => {
console.error(reason);
});
}
Expand All @@ -93,17 +94,16 @@ export default class VariantCohortStats extends LitElement {
}

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>
</div>
`)}
${(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>
</div>
`)}
`;
}

Expand Down
Loading
Loading