From b6c1aca059ee8fdbf02afba3a31ce524404b817b Mon Sep 17 00:00:00 2001 From: imedina Date: Sun, 3 Mar 2024 01:59:09 +0000 Subject: [PATCH 01/48] Add column BIALLELIC for genotype 1/2 --- src/core/bioinfo/bioinfo-utils.js | 19 +- .../commons/filters/sample-genotype-filter.js | 13 +- .../variant/family-genotype-filter.js | 220 ++++++------------ .../variant-interpreter-browser-rd.js | 12 +- 4 files changed, 105 insertions(+), 159 deletions(-) diff --git a/src/core/bioinfo/bioinfo-utils.js b/src/core/bioinfo/bioinfo-utils.js index 973ab3de84..39237a1dd8 100644 --- a/src/core/bioinfo/bioinfo-utils.js +++ b/src/core/bioinfo/bioinfo-utils.js @@ -34,6 +34,23 @@ export default class BioinfoUtils { }); } + static getIdName(id, name) { + let text = ""; + if (name) { + text = name; + } + + if (id) { + if (name) { + text += ` (${id})`; + } else { + text = id; + } + } + + return text; + } + // Generate Variant ID in Varsome format // https://varsome.com/how-do-i-create-link-varsome/ static getVariantInVarsomeFormat(variantId) { @@ -255,7 +272,7 @@ export default class BioinfoUtils { static getOboLink(ontologyId) { const ontologyShort = ontologyId.replace(":", "_"); - return `http://purl.obolibrary.org/obo/${ontologyShort}`; + return `https://purl.obolibrary.org/obo/${ontologyShort}`; } static getHpoLink(hpoTerm) { diff --git a/src/webcomponents/commons/filters/sample-genotype-filter.js b/src/webcomponents/commons/filters/sample-genotype-filter.js index b98e7f215a..618ba7c854 100644 --- a/src/webcomponents/commons/filters/sample-genotype-filter.js +++ b/src/webcomponents/commons/filters/sample-genotype-filter.js @@ -85,17 +85,20 @@ export default class SampleGenotypeFilter extends LitElement { id: "0/1", name: "HET" }, { - id: "1/1", name: "HOM ALT" + id: "1/1", name: "HOM_ALT" }, { separator: true }, { - id: "./.", name: "Missing" + id: "1/2", name: "BIALLELIC (1/2)" }, - { - id: "NA", name: "NA" - } + // { + // id: "./.", name: "Missing" + // }, + // { + // id: "NA", name: "NA" + // } ] }; } diff --git a/src/webcomponents/variant/family-genotype-filter.js b/src/webcomponents/variant/family-genotype-filter.js index 71e89532a1..fb1141ffab 100644 --- a/src/webcomponents/variant/family-genotype-filter.js +++ b/src/webcomponents/variant/family-genotype-filter.js @@ -14,8 +14,9 @@ * limitations under the License. */ -import {LitElement, html} from "lit"; +import {html, LitElement, nothing} from "lit"; import LitUtils from "../commons/utils/lit-utils.js"; +import BioinfoUtils from "../../core/bioinfo/bioinfo-utils.js"; import UtilsNew from "../../core/utils-new.js"; import "../commons/forms/select-field-filter.js"; @@ -54,16 +55,6 @@ export default class FamilyGenotypeFilter extends LitElement { this.modeOfInheritanceList = MODE_OF_INHERITANCE; this.modeSelectData = []; - this.depths = [ - {id: "5", name: "5x"}, // , selected: true - {id: "10", name: "10x"}, - {id: "15", name: "15x"}, - {id: "20", name: "20x"}, - {id: "30", name: "30x"}, - {id: "40", name: "40x"}, - {id: "50", name: "50x"} - ]; - this.showModeOfInheritance = true; this.mode = "CUSTOM"; @@ -80,7 +71,6 @@ export default class FamilyGenotypeFilter extends LitElement { if (changedProperties.has("genotype")) { this.genotypeObserver(); } - if (changedProperties.has("clinicalAnalysis")) { this.clinicalAnalysisObserver(); } @@ -90,7 +80,6 @@ export default class FamilyGenotypeFilter extends LitElement { ...this.config, }; } - super.update(changedProperties); } @@ -162,8 +151,6 @@ export default class FamilyGenotypeFilter extends LitElement { genotypeObserver() { this.state = {}; if (this.genotype) { - // TODO handle AND and OR. Comma is already used for GTs. - // this.logicalOperator = this.genotype.split(",") > this.genotype.split(";") ? "," : ";"; this.genotype.split(";").forEach(sample => { const [id, gt] = sample.split(":"); this.state[id] = { @@ -188,16 +175,11 @@ export default class FamilyGenotypeFilter extends LitElement { if (sample.genotypes.length) { _sample.push(id + ":" + sample.genotypes.join(",")); } - /* if (sample.dp) { - _sampleData.push(id + ":DP>=" + sample.dp); - }*/ }); } LitUtils.dispatchCustomEvent(this, "filterChange", null, { value: { sample: _sample.length ? _sample.join(";") : null, - // sampleData: _sampleData.length ? _sampleData.join() : null - // includeSample: this.includeSample, }, errorState: this.errorState, }); @@ -206,40 +188,42 @@ export default class FamilyGenotypeFilter extends LitElement { // Queries variant/family/genotypes to get the genotypes according to family pedigree // @param mode {String} Mode of inheritance onModeOfInheritance(mode) { - this.opencgaSession.opencgaClient.variants().genotypesFamily(mode, { - study: this.opencgaSession.study.fqn, - family: this.clinicalAnalysis.family.id, - disorder: this.clinicalAnalysis.disorder.id, - completePenetrance: true - }).then(response => { - const genotypeResultMap = response.getResult(0); - let countGenoypes = 0; - if (genotypeResultMap) { - const state = {}; - Object.keys(genotypeResultMap).forEach(individualId => { - this.tableData.forEach(sample => { - if (sample.individualId === individualId) { - state[sample.id] = { - id: sample.id, - genotypes: genotypeResultMap[individualId] - }; - countGenoypes += genotypeResultMap[individualId].length; - } + this.opencgaSession.opencgaClient.variants() + .genotypesFamily(mode, { + study: this.opencgaSession.study.fqn, + family: this.clinicalAnalysis.family.id, + disorder: this.clinicalAnalysis.disorder.id, + completePenetrance: true + }) + .then(response => { + const genotypeResultMap = response.getResult(0); + let countGenoypes = 0; + if (genotypeResultMap) { + const state = {}; + Object.keys(genotypeResultMap).forEach(individualId => { + this.tableData.forEach(sample => { + if (sample.individualId === individualId) { + state[sample.id] = { + id: sample.id, + genotypes: genotypeResultMap[individualId] + }; + countGenoypes += genotypeResultMap[individualId].length; + } + }); }); - }); - this.errorState = countGenoypes <= 0 ? "The selected Mode of Inheritance is not compatible with the family pedigree" : false; - // keeps the last legal state - if (!this.errorState) { - this.modeOfInheritance = mode; - this.state = {...state}; + this.errorState = countGenoypes <= 0 ? "The selected Mode of Inheritance is not compatible with the family pedigree" : false; + // keeps the last legal state + if (!this.errorState) { + this.modeOfInheritance = mode; + this.state = {...state}; + } + this.notifySampleFilterChange(); + this.requestUpdate(); } - this.notifySampleFilterChange(); - this.requestUpdate(); - } - - }).catch(function (response) { - console.error(response); - }); + }) + .catch(function (response) { + console.error(response); + }); } // Update state on genotype change @@ -307,72 +291,24 @@ export default class FamilyGenotypeFilter extends LitElement { // Return the default genotype values according the role defaultGenotype(sample) { - return sample.id === this.clinicalAnalysis.proband.samples[0].id ? ["0/1", "1/1"] : [...this._config.defaultGenotypes]; - } - - // Toggle depthAll flag - changeDepthAll() { - this.depthAll = !this.depthAll; - this.requestUpdate(); - } - - // Update state on depth Change - // @param e {Object} Event - // @param sampleId {String} Sample Id - async onSampleTableDepthChange(e, sampleId) { - e.preventDefault(); - - if (this.depthAll) { - Object.keys(this.state).forEach(id => { - this.state[id].dp = e.detail.value; - }); - } else { - this.state[sampleId].dp = e.detail.value; - } - this.state = {...this.state}; - this.notifySampleFilterChange(); - this.requestUpdate(); - } - - getSexIcon(sample) { - const value = sample.sex?.id || sample.sex || null; - return value ? this._config.sexIconMap[value] : ""; + return sample.id === this.clinicalAnalysis.proband.samples[0].id ? ["0/1", "1/1", "1/2"] : [...this._config.defaultGenotypes]; } render() { return html` - - -
+
- You can manually select sample genotypes or select a + You can manually select + Custom Genotypes + or select a Mode of Inheritance - such as RECESSIVE OR COMPOUND HETEROZYGOUS. + such as AUTOSOMAL RECESSIVE or COMPOUND HETEROZYGOUS.
-
+
-

- Select Sample Genoypes +

+ Select Sample Genotypes

@@ -392,27 +328,22 @@ export default class FamilyGenotypeFilter extends LitElement { - - - + + - - - + + + + - ${this.tableData && this.tableData.length ? this.tableData.map(sample => html` + ${this.tableData?.length > 0 ? this.tableData.map(sample => html` - - - - + ` } - - `) : null} + `) : nothing}
Individual Role Sex (karyotype)Affected (${this.clinicalAnalysis.disorder.id})GenotypesAffected
+ + ${BioinfoUtils.getIdName(this.clinicalAnalysis.disorder.id, this.clinicalAnalysis.disorder.name)} + + 		Genotypes
HOM_REFHETHOM_ALTHOM_REF (0/0)HET (0/1)HOM_ALT (1/1)BIALLELIC (1/2)
@@ -424,20 +355,21 @@ export default class FamilyGenotypeFilter extends LitElement {
- ${sample.individualId} + + + ${sample.individualId} + + ${sample.role} + - ${sample.sex?.id || sample.sex || "Not specified"} (${sample.karyotypicSex || "Not specified"}) + ${sample.affected ? html` @@ -476,19 +408,18 @@ export default class FamilyGenotypeFilter extends LitElement { .checked="${this.state?.[sample.id]?.genotypes.includes("1/1")}" ?disabled="${this.mode !== "CUSTOM"}" @change="${this.onSampleTableChange}"> + +
@@ -516,12 +447,7 @@ export default class FamilyGenotypeFilter extends LitElement { getDefaultConfig() { return { - defaultGenotypes: ["0/0", "0/1", "1/1"], - sexIconMap: { - MALE: "fa-mars", - FEMALE: "fa-venus", - UNKNOWN: "fa-genderless" - } + defaultGenotypes: ["0/0", "0/1", "1/1", "1/2"], }; } diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js index bfd91109a1..0e2c7c25be 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js @@ -341,20 +341,20 @@ class VariantInterpreterBrowserRd extends LitElement { params: { genotypes: [ { - id: "0/1", name: "HET" + id: "0/1", name: "HET (0/1)" }, { - id: "1/1", name: "HOM ALT" + id: "1/1", name: "HOM_ALT (1/1)" }, { separator: true }, { - id: "1/2", name: "BIALLELIC HET (Genotype 1/2)" + id: "1/2", name: "BIALLELIC (1/2)" }, - { - id: "1", name: "HEMI" - } + // { + // id: "1", name: "HEMI" + // } ] }, tooltip: tooltips.sample, From 7cb6047fa8f63fc1f2dd494ee0fe4ff30f2d3770 Mon Sep 17 00:00:00 2001 From: imedina Date: Tue, 5 Mar 2024 00:27:33 +0000 Subject: [PATCH 02/48] Add 1/2 to autosomal recessive mode --- src/webcomponents/variant/family-genotype-filter.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/webcomponents/variant/family-genotype-filter.js b/src/webcomponents/variant/family-genotype-filter.js index fb1141ffab..8a2cffb378 100644 --- a/src/webcomponents/variant/family-genotype-filter.js +++ b/src/webcomponents/variant/family-genotype-filter.js @@ -197,6 +197,12 @@ export default class FamilyGenotypeFilter extends LitElement { }) .then(response => { const genotypeResultMap = response.getResult(0); + // Nacho: Autosomal Recessive means two copies of an abnormal gene must be present in order for the disease or trait to develop. + // So we need to add 1/2 to the proband. + if (mode === "AUTOSOMAL_RECESSIVE") { + genotypeResultMap[this.clinicalAnalysis.proband.id].push("1/2"); + } + let countGenoypes = 0; if (genotypeResultMap) { const state = {}; From 877dd26cb1e72f1629a87a3d106f66769aefe881 Mon Sep 17 00:00:00 2001 From: imedina Date: Tue, 12 Mar 2024 03:00:27 +0000 Subject: [PATCH 03/48] Increase case search limit to make sure all cases are found --- src/webcomponents/family/family-grid.js | 11 ++++++++--- src/webcomponents/individual/individual-grid.js | 12 +++++++++--- src/webcomponents/sample/sample-grid.js | 10 +++++++--- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js index c86f671021..1fdacdef94 100644 --- a/src/webcomponents/family/family-grid.js +++ b/src/webcomponents/family/family-grid.js @@ -199,13 +199,18 @@ export default class FamilyGrid extends LitElement { .search(this.filters) .then(familyResponse => { // Fetch Clinical Analysis ID per Family in 1 single query - const familyIds = familyResponse.responses[0].results.map(family => family.id).join(","); + const familyIds = familyResponse.responses[0].results + .map(family => family.id) + .join(","); + if (familyIds) { - this.opencgaSession.opencgaClient.clinical() + this.opencgaSession.opencgaClient + .clinical() .search({ family: familyIds, study: this.opencgaSession.study.fqn, - include: "id,proband.id,family.members,family.id" + include: "id,proband.id,family.members,family.id", + limit: (this._config.pageSize || 10) * 10 }) .then(caseResponse => { familyResponse.getResults().forEach(family => { diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js index 1e64b184c5..6e69b23053 100644 --- a/src/webcomponents/individual/individual-grid.js +++ b/src/webcomponents/individual/individual-grid.js @@ -203,13 +203,19 @@ export default class IndividualGrid extends LitElement { .search(this.filters) .then(individualResponse => { // Fetch Clinical Analysis ID per individual in 1 single query - const individualIds = individualResponse.getResults().map(individual => individual.id).filter(Boolean).join(","); + const individualIds = individualResponse.getResults() + .map(individual => individual.id) + .filter(Boolean) + .join(","); + if (individualIds) { - this.opencgaSession.opencgaClient.clinical() + this.opencgaSession.opencgaClient + .clinical() .search({ individual: individualIds, study: this.opencgaSession.study.fqn, - include: "id,proband.id,family.members" + include: "id,proband.id,family.members", + limit: (this._config.pageSize || 10) * 10 }) .then(caseResponse => { individualResponse.getResults().forEach(individual => { diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js index 37e42f6601..d6d7cabe46 100644 --- a/src/webcomponents/sample/sample-grid.js +++ b/src/webcomponents/sample/sample-grid.js @@ -197,14 +197,18 @@ export default class SampleGrid extends LitElement { // Fetch clinical analysis to display the Case ID const individualIds = sampleResponse.getResults() .map(sample => sample.individualId) - .filter(Boolean).join(","); + .filter(Boolean) + .join(","); + if (individualIds) { - this.opencgaSession.opencgaClient.clinical() + this.opencgaSession.opencgaClient + .clinical() .search( { individual: individualIds, study: this.opencgaSession.study.fqn, - include: "id,proband.id,family.members" + include: "id,proband.id,family.members", + limit: (this._config.pageSize || 10) * 10 }) .then(caseResponse => { sampleResponse.getResults().forEach(sample => { From 14658f471835a27bce7f2cec980eda335d725f31 Mon Sep 17 00:00:00 2001 From: imedina Date: Wed, 13 Mar 2024 00:32:10 +0000 Subject: [PATCH 04/48] Fix actions column visibility configuration --- src/webcomponents/clinical/clinical-analysis-grid.js | 3 +-- src/webcomponents/cohort/cohort-grid.js | 2 +- src/webcomponents/disease-panel/disease-panel-grid.js | 2 +- src/webcomponents/family/family-grid.js | 3 +-- src/webcomponents/file/file-grid.js | 2 +- src/webcomponents/individual/individual-grid.js | 3 +-- src/webcomponents/job/job-grid.js | 2 +- src/webcomponents/sample/sample-grid.js | 3 +-- 8 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index 2e9f9a37a2..e5698fb071 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -806,11 +806,10 @@ export default class ClinicalAnalysisGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } - // _columns = UtilsNew.mergeTable(_columns, this._config.columns || this._config.hiddenColumns, !!this._config.hiddenColumns); this._columns = this.gridCommons.addColumnsFromExtensions(this._columns, this.COMPONENT_ID); return this._columns; } diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index a3e8231778..ac7e697efa 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -360,7 +360,7 @@ export default class CohortGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js index bedfaafbfe..a44c5e54b2 100644 --- a/src/webcomponents/disease-panel/disease-panel-grid.js +++ b/src/webcomponents/disease-panel/disease-panel-grid.js @@ -502,7 +502,7 @@ export default class DiseasePanelGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions"), + visible: this.gridCommons.isColumnVisible("actions"), }); } diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js index c86f671021..8613c90e41 100644 --- a/src/webcomponents/family/family-grid.js +++ b/src/webcomponents/family/family-grid.js @@ -548,11 +548,10 @@ export default class FamilyGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } - // _columns = UtilsNew.mergeTable(_columns, this._config.columns || this._config.hiddenColumns, !!this._config.hiddenColumns); this._columns = this.gridCommons.addColumnsFromExtensions(this._columns, this.COMPONENT_ID); return this._columns; } diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js index 4a29aece6e..e86c89e24c 100644 --- a/src/webcomponents/file/file-grid.js +++ b/src/webcomponents/file/file-grid.js @@ -449,7 +449,7 @@ export default class OpencgaFileGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js index 1e64b184c5..c1cc8d0031 100644 --- a/src/webcomponents/individual/individual-grid.js +++ b/src/webcomponents/individual/individual-grid.js @@ -613,11 +613,10 @@ export default class IndividualGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } - // _columns = UtilsNew.mergeTable(_columns, this._config.columns || this._config.hiddenColumns, !!this._config.hiddenColumns); this._columns = this.gridCommons.addColumnsFromExtensions(this._columns, this.COMPONENT_ID); return this._columns; } diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js index bcca9d7928..7ef2a79185 100644 --- a/src/webcomponents/job/job-grid.js +++ b/src/webcomponents/job/job-grid.js @@ -583,7 +583,7 @@ export default class JobGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js index 37e42f6601..9e67c56686 100644 --- a/src/webcomponents/sample/sample-grid.js +++ b/src/webcomponents/sample/sample-grid.js @@ -478,11 +478,10 @@ export default class SampleGrid extends LitElement { events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: this.gridCommons.isColumnVisible("actions") }); } - // _columns = UtilsNew.mergeTable(_columns, this._config.columns || this._config.hiddenColumns, !!this._config.hiddenColumns); this._columns = this.gridCommons.addColumnsFromExtensions(this._columns, this.COMPONENT_ID); return this._columns; } From 21e053cd55dabd4ad375a2f02fc00b6b449d945a Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Mar 2024 18:46:44 +0100 Subject: [PATCH 05/48] wc: add stock phrases to steiner-report component #TASK-5739 --- src/webcomponents/variant/custom/steiner-report.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/webcomponents/variant/custom/steiner-report.js b/src/webcomponents/variant/custom/steiner-report.js index 85b2efd6c9..8cb438db73 100644 --- a/src/webcomponents/variant/custom/steiner-report.js +++ b/src/webcomponents/variant/custom/steiner-report.js @@ -69,6 +69,12 @@ class SteinerReport extends LitElement { "manta": {type: "Rearrangements", group: "germline", rank: 2}, }; + this.stockPhrases = [ + "No pathogenic variants identified.", + "Results related to other genetic conditions of medical significance (additional findings).", + "Results that are not expected to impact participant health but may be relevant to family members or children.", + ]; + this.somaticSample = null; this.germlineSample = null; @@ -163,6 +169,7 @@ class SteinerReport extends LitElement { .map(analyst=> analyst.name) .join(", "), signedBy: "", + discussionPhrase: "", discussion: "", hrdetects: [], selectedHrdetect: null, From dda720ba768bf9641e0794dc85dd51d04b15475e Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Mar 2024 18:47:52 +0100 Subject: [PATCH 06/48] wc: display dropdown for selecting a stock phrase in the discussion field of the steiner-report #TASK-5924 --- src/webcomponents/variant/custom/steiner-report.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/webcomponents/variant/custom/steiner-report.js b/src/webcomponents/variant/custom/steiner-report.js index 8cb438db73..823594208d 100644 --- a/src/webcomponents/variant/custom/steiner-report.js +++ b/src/webcomponents/variant/custom/steiner-report.js @@ -1181,6 +1181,12 @@ class SteinerReport extends LitElement { }, { title: "Discussion", + field: "discussionPhrase", + type: "select", + allowedValues: this.stockPhrases, + }, + { + title: " ", type: "input-text", field: "discussion", defaultValue: "", From 04ba113523bf51a3f8bdecde44eef37249ffddb1 Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Mar 2024 19:18:41 +0100 Subject: [PATCH 07/48] wc: fix update and updated methods in clinical-analysis-grid #TASK-5674 --- .../clinical/clinical-analysis-grid.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index 2e9f9a37a2..6a4f92f7c5 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -70,14 +70,21 @@ export default class ClinicalAnalysisGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderRemoteTable(); + } } propertyObserver() { From 52d7842b315604096683ca37e9ec83fcd3a9a3ef Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Mar 2024 19:19:34 +0100 Subject: [PATCH 08/48] wc: remove updates in propertyObserver of clinical-analysis-grid #TASK-5674 --- src/webcomponents/clinical/clinical-analysis-grid.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index 6a4f92f7c5..e7e560e2b8 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -121,8 +121,6 @@ export default class ClinicalAnalysisGrid extends LitElement { ` } }; - this.renderRemoteTable(); - this.requestUpdate(); } renderRemoteTable() { From 482310fe4b498ca716a0bc575257397ed63726df Mon Sep 17 00:00:00 2001 From: Josemi Date: Tue, 26 Mar 2024 19:21:35 +0100 Subject: [PATCH 09/48] wc: minor style fixes in clinical-analysis-grid #TASK-5674 --- src/webcomponents/clinical/clinical-analysis-grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index e7e560e2b8..caa582af15 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -118,7 +118,7 @@ export default class ClinicalAnalysisGrid extends LitElement { .displayConfig="${{mode: "page", type: "tabs", buttonsLayout: "upper"}}" .opencgaSession="${this.opencgaSession}"> - ` + `, } }; } From f9523401907114329c3aec555a3446b9120c2096 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 11:25:48 +0100 Subject: [PATCH 10/48] wc: removed commented code in clinical-analysis-grid #TASK-5674 --- .../clinical/clinical-analysis-grid.js | 105 ------------------ 1 file changed, 105 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index caa582af15..d646f06738 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -430,111 +430,6 @@ export default class ClinicalAnalysisGrid extends LitElement { } async onActionClick(e, _, row) { - // const {action} = e.currentTarget.dataset; - - // if (action === "edit") { - // this.clinicalAnalysisUpdateId = row.id; - // this.requestUpdate(); - // await this.updateComplete; - // ModalUtils.show(`${this._prefix}UpdateModal`); - // } - // - // if (action === "delete") { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_CONFIRMATION, { - // title: `Delete case '${row.id}'`, - // message: `Are you sure you want to delete case '${row.id}'?`, - // display: { - // okButtonText: "Yes, delete it", - // }, - // ok: () => { - // const clinicalAnalysisId = row.id; - // this.opencgaSession.opencgaClient.clinical().delete(clinicalAnalysisId, { - // study: this.opencgaSession.study.fqn, - // force: row.interpretation?.primaryFindings?.length === 0 // Only empty Cases can be deleted for now - // }).then(response => { - // if (response.getResultEvents("ERROR").length) { - // return NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // } - // // Display confirmation message and update the table - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { - // message: `Case '${clinicalAnalysisId}' has been deleted.`, - // }); - // LitUtils.dispatchCustomEvent(this, "rowUpdate", row); - // this.removeRowTable(clinicalAnalysisId); - // }).catch(response => { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // }); - // }, - // }); - // } - // - // // Lock or unlock the case - // if (action === "lock") { - // const updateParams = { - // locked: !row.locked, - // }; - // - // return this.opencgaSession.opencgaClient.clinical().update(row.id, updateParams, { - // study: this.opencgaSession.study.fqn, - // }) - // .then(() => { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { - // message: `Case '${row.id}' has been ${row.locked ? "unlocked" : "locked"}.`, - // }); - // LitUtils.dispatchCustomEvent(this, "rowUpdate", row); - // this.renderRemoteTable(); - // }) - // .catch(response => { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // }); - // } - // - // if (action === "download") { - // this.fetchData({id: row.id, study: this.opencgaSession.study.fqn}) - // .then(restResponse => this.download(restResponse)) - // .catch(error => console.error(error)); - // } - // - // if (action === "statusChange") { - // const {status} = e.currentTarget.dataset; - // this.opencgaSession.opencgaClient.clinical().update(row.id, {status: {id: status}}, {study: this.opencgaSession.study.fqn}) - // .then(response => { - // if (!response.getResultEvents("ERROR").length) { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { - // message: `Status of case '${row.id}' has been changed to '${status}'.`, - // }); - // LitUtils.dispatchCustomEvent(this, "rowUpdate", row); - // this.renderRemoteTable(); - // } else { - // // console.error(response); - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // } - // }) - // .catch(response => { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // }); - // } - // - // if (action === "priorityChange") { - // const {priority} = e.currentTarget.dataset; - // this.opencgaSession.opencgaClient.clinical().update(row.id, {priority}, {study: this.opencgaSession.study.fqn}) - // .then(response => { - // if (!response.getResultEvents("ERROR").length) { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { - // message: `Priority of case '${row.id}' has been changed to '${priority}'.`, - // }); - // LitUtils.dispatchCustomEvent(this, "rowUpdate", row); - // this.renderRemoteTable(); - // } else { - // // console.error(response); - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // } - // }) - // .catch(response => { - // NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - // }); - // } - const action = e.target.dataset.action?.toLowerCase() || e.detail.action; switch (action) { case "edit": From 4ec9643d3d82dbf5b21dd775cc7cc122a5672817 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 11:29:48 +0100 Subject: [PATCH 11/48] wc: fix update and updated methods in cohort-grid #TASK-5674 --- src/webcomponents/cohort/cohort-grid.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index a3e8231778..e804d96a1e 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -73,14 +73,22 @@ export default class CohortGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -142,7 +150,6 @@ export default class CohortGrid extends LitElement { // ` // } }; - this.renderTable(this.active); } renderTable(active) { @@ -180,11 +187,7 @@ export default class CohortGrid extends LitElement { }); } - renderRemoteTable(active) { - if (!active) { - return; - } - + renderRemoteTable() { this.cohorts = []; if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) { // const filters = {...this.query}; From dae308c6eb9fdb2400f41d5d876d28fdef74cb49 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 11:36:10 +0100 Subject: [PATCH 12/48] wc: removed requestUpdate call when rendering table in cohort-grid #TAKS-5674 --- src/webcomponents/cohort/cohort-grid.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index e804d96a1e..0b083fad97 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -158,7 +158,6 @@ export default class CohortGrid extends LitElement { } else { this.renderRemoteTable(active); } - this.requestUpdate(); } renderLocalTable() { From 1b44c4862f84b5a67e4a71e583065c10d4e7e7f5 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 12:20:08 +0100 Subject: [PATCH 13/48] wc: remove useless code when rendering the remote table in cohort-grid #TASK-5674 --- src/webcomponents/cohort/cohort-grid.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index 0b083fad97..3ac289e4a1 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -152,11 +152,11 @@ export default class CohortGrid extends LitElement { }; } - renderTable(active) { + renderTable() { if (this.cohorts?.length > 0) { this.renderLocalTable(); } else { - this.renderRemoteTable(active); + this.renderRemoteTable(); } } @@ -187,17 +187,7 @@ export default class CohortGrid extends LitElement { } renderRemoteTable() { - this.cohorts = []; if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) { - // const filters = {...this.query}; - - // Make a copy of the cohorts (if they exist), we will use this private copy until it is assigned to this.cohorts - if (UtilsNew.isNotUndefined(this.cohorts)) { - this._cohorts = this.cohorts; - } else { - this._cohorts = []; - } - this._columns = this._getDefaultColumns(); this.table = $("#" + this.gridId); this.table.bootstrapTable("destroy"); @@ -274,7 +264,7 @@ export default class CohortGrid extends LitElement { onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse) }); } - this.requestUpdate(); + // this.requestUpdate(); } onColumnChange(e) { From 250be07fcf9290fb31863f4fc671de9e4cbdd6ef Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 12:49:24 +0100 Subject: [PATCH 14/48] wc: fix actions dropdown and clean cohort-grid component #TASK-5674 --- src/webcomponents/cohort/cohort-grid.js | 46 ++++++++----------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index 3ac289e4a1..4e14310308 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -65,12 +65,6 @@ export default class CohortGrid extends LitElement { this.gridId = this._prefix + this.COMPONENT_ID; this.active = true; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -169,7 +163,6 @@ export default class CohortGrid extends LitElement { sidePagination: "local", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, @@ -198,7 +191,6 @@ export default class CohortGrid extends LitElement { iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, uniqueId: "id", - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, @@ -208,10 +200,6 @@ export default class CohortGrid extends LitElement { detailView: this._config.detailView, formatLoadingMessage: () => "
", ajax: params => { - const sort = this.table.bootstrapTable("getOptions").sortName ? { - sort: this.table.bootstrapTable("getOptions").sortName, - order: this.table.bootstrapTable("getOptions").sortOrder - } : {}; this.filters = { study: this.opencgaSession.study.fqn, limit: params.data.limit, @@ -264,7 +252,6 @@ export default class CohortGrid extends LitElement { onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse) }); } - // this.requestUpdate(); } onColumnChange(e) { @@ -289,22 +276,20 @@ export default class CohortGrid extends LitElement { id: "id", title: "Cohort ID", field: "id", - formatter: (cohortId, cohort) => { - return ` -
- ${cohortId} - ${cohort.name ? `${cohort.name}` : ""} -
`; - }, - halign: this.displayConfigDefault.header.horizontalAlign, + formatter: (cohortId, cohort) => ` +
+ ${cohortId} + ${cohort.name ? `${cohort.name}` : ""} +
+ `, + halign: "center", visible: this.gridCommons.isColumnVisible("id") }, { id: "numSamples", title: "Number of Samples", field: "numSamples", - // formatter: (value, row) => row.numSamples ?? 0, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("numSamples") }, { @@ -312,7 +297,7 @@ export default class CohortGrid extends LitElement { title: "Creation Date", field: "creationDate", formatter: CatalogGridFormatter.dateFormatter, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("creationDate") }, ]; @@ -327,19 +312,17 @@ export default class CohortGrid extends LitElement { title: "Actions", field: "actions", formatter: () => ` -
+
-
`, - // valign: "middle", +
+ `, + align: "center", events: { - "click a": this.onActionClick.bind(this) + "click a": this.onActionClick.bind(this), }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: !this._config.columns?.hidden?.includes("actions"), }); } From 1305b564d09591186b1cd836eb8fce8414d861d9 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 12:55:08 +0100 Subject: [PATCH 15/48] wc: fix actions dropdown and clean clinical-analysis-grid component #TASK-5674 --- .../clinical/clinical-analysis-grid.js | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index d646f06738..da2c88770a 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -62,12 +62,6 @@ export default class ClinicalAnalysisGrid extends LitElement { this.gridId = this._prefix + this.COMPONENT_ID; this.active = true; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -125,7 +119,6 @@ export default class ClinicalAnalysisGrid extends LitElement { renderRemoteTable() { if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) { - // const filters = {...this.query}; if (this.lastFilters && JSON.stringify(this.lastFilters) === JSON.stringify(this.query)) { // Abort destroying and creating again the grid. The filters have not changed return; @@ -539,7 +532,7 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "caseId", title: "Case", field: "id", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: (value, row) => this.caseFormatter(value, row), visible: this.gridCommons.isColumnVisible("caseId") @@ -548,7 +541,7 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "probandId", title: "Proband (Sample) and Family", field: "proband", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: (value, row) => this.probandFormatter(value, row), visible: this.gridCommons.isColumnVisible("probandId") @@ -557,7 +550,7 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "disorderId", title: "Clinical Condition / Panel", field: "disorder", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: (value, row) => { const panelHtml = row.panels?.length > 0 ? CatalogGridFormatter.panelFormatter(row.panels) : "-"; @@ -572,7 +565,7 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "interpretation", title: "Interpretation", field: "interpretation", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: (value, row) => this.interpretationFormatter(value, row), visible: this.gridCommons.isColumnVisible("interpretation") @@ -581,13 +574,12 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "status", title: "Status", field: "status", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: this.statusFormatter.bind(this), events: { "click a": this.onActionClick.bind(this) }, - // visible: !!this.opencgaSession.study?.internal?.configuration?.clinical?.status visible: this.gridCommons.isColumnVisible("status") }, { @@ -595,13 +587,12 @@ export default class ClinicalAnalysisGrid extends LitElement { title: "Priority", field: "priority", align: "center", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: this.priorityFormatter.bind(this), events: { "click a": this.onActionClick.bind(this) }, - // visible: !!this.opencgaSession.study?.internal?.configuration?.clinical?.priorities visible: this.gridCommons.isColumnVisible("priority") }, { @@ -609,7 +600,7 @@ export default class ClinicalAnalysisGrid extends LitElement { title: "Analysts", field: "analysts", formatter: value => this.analystsFormatter(value), - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", visible: this.gridCommons.isColumnVisible("analysts") }, @@ -618,7 +609,7 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "dates", title: "Due / Creation Date", field: "Dates", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", valign: "middle", formatter: (field, clinicalAnalysis) => { const dueDateString = UtilsNew.dateFormatter(clinicalAnalysis.dueDate); @@ -634,7 +625,6 @@ export default class ClinicalAnalysisGrid extends LitElement { `; }, visible: this.gridCommons.isColumnVisible("dates") - // visible: !this._config.columns.hidden.includes("dueDate") }, ]; @@ -643,8 +633,8 @@ export default class ClinicalAnalysisGrid extends LitElement { id: "actions", title: "Actions", field: "actions", - halign: this.displayConfigDefault.header.horizontalAlign, valign: "middle", + align: "center", formatter: (value, row) => { const session = this.opencgaSession; const url = `#interpreter/${session.project.id}/${session.study.id}/${row.id}`; @@ -652,12 +642,10 @@ export default class ClinicalAnalysisGrid extends LitElement { const hasAdminAccess = OpencgaCatalogUtils.isAdmin(this.opencgaSession.study, this.opencgaSession.user.id) || "disabled"; const lockActionIcon = row.locked ? "fa-unlock" : "fa-lock"; const lockActionText = row.locked ? "Unlock" : "Lock"; - const isOwnOrIsLocked = row.locked || !row.analysts?.some(analyst => analyst.id === this.opencgaSession?.user?.id) ? "disabled" : ""; - // Generate actions dropdown return ` -
+
`; }, - align: "center", events: { "click a": this.onActionClick.bind(this) }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: !this._config.columns?.hidden?.includes("actions"), }); } From 4650c37babd40ed4bf8f89f82b5ac3a1cf34e75f Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 12:59:04 +0100 Subject: [PATCH 16/48] wc: fix update and updated methods in disease-panel-grid #TASK-5674 --- .../disease-panel/disease-panel-grid.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js index bedfaafbfe..6bfe699693 100644 --- a/src/webcomponents/disease-panel/disease-panel-grid.js +++ b/src/webcomponents/disease-panel/disease-panel-grid.js @@ -75,14 +75,21 @@ export default class DiseasePanelGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -141,18 +148,14 @@ export default class DiseasePanelGrid extends LitElement { // ` // } }; - - this.renderTable(); } renderTable() { - // If this.diseasePanel is provided as property we render the array directly if (this.diseasePanels?.length > 0) { this.renderLocalTable(); } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderRemoteTable() { @@ -171,8 +174,6 @@ export default class DiseasePanelGrid extends LitElement { sidePagination: "server", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - - // Table properties uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, @@ -257,7 +258,6 @@ export default class DiseasePanelGrid extends LitElement { sidePagination: "local", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, From 3b1571b65858b255afcdd60e66239a917de0b838 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:10:18 +0100 Subject: [PATCH 17/48] wc: minor style fixes in clinical-analysis-grid #TASK-5674 --- .../clinical/clinical-analysis-grid.js | 53 +++++++++++-------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index da2c88770a..260fccccaf 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -270,7 +270,8 @@ export default class ClinicalAnalysisGrid extends LitElement { ${Object.keys(value.stats.primaryFindings.geneCount).length} genes -
`; +
+ `; } else { if (row.interpretation?.primaryFindings?.length > 0) { const reviewedVariants = row.interpretation.primaryFindings.filter(v => v.status === "REVIEWED"); @@ -280,17 +281,19 @@ export default class ClinicalAnalysisGrid extends LitElement {
${reviewedVariants.length} reviewed -
`; +
+ `; } else { html = "0 variants"; } } + const interpretationUrl = `#interpreter/${this.opencgaSession.project.id}/${this.opencgaSession.study.id}/${row.id}`; return ` - + ${html} - `; + + `; } priorityFormatter(value, row) { @@ -402,7 +405,8 @@ export default class ClinicalAnalysisGrid extends LitElement { html += `
${analyst.id} -
`; +
+ `; } }); html += "
"; @@ -440,22 +444,25 @@ export default class ClinicalAnalysisGrid extends LitElement { }, ok: () => { const clinicalAnalysisId = row.id; - this.opencgaSession.opencgaClient.clinical().delete(clinicalAnalysisId, { - study: this.opencgaSession.study.fqn, - force: row.interpretation?.primaryFindings?.length === 0 // Only empty Cases can be deleted for now - }).then(response => { - if (response.getResultEvents("ERROR").length) { - return NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - } - // Display confirmation message and update the table - NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { - message: `Case '${clinicalAnalysisId}' has been deleted.`, + this.opencgaSession.opencgaClient.clinical() + .delete(clinicalAnalysisId, { + study: this.opencgaSession.study.fqn, + force: row.interpretation?.primaryFindings?.length === 0 // Only empty Cases can be deleted for now + }) + .then(response => { + if (response.getResultEvents("ERROR").length) { + return NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); + } + // Display confirmation message and update the table + NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { + message: `Case '${clinicalAnalysisId}' has been deleted.`, + }); + LitUtils.dispatchCustomEvent(this, "rowUpdate", row); + this.removeRowTable(clinicalAnalysisId); + }) + .catch(response => { + NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); }); - LitUtils.dispatchCustomEvent(this, "rowUpdate", row); - this.removeRowTable(clinicalAnalysisId); - }).catch(response => { - NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, response); - }); }, }); break; @@ -769,8 +776,8 @@ export default class ClinicalAnalysisGrid extends LitElement { @export="${this.onDownload}" @actionClick="${e => this.onActionClick(e)}" @clinicalAnalysisCreate="${this.renderRemoteTable}"> - ` : nothing - } + + ` : nothing}
From 5b4a2deb7e6b5e8605e5d6b4ff3eb36296d53068 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:15:23 +0100 Subject: [PATCH 18/48] wc: simplify fetchData function in clinical-analysis-grid #TASK-5674 --- src/webcomponents/clinical/clinical-analysis-grid.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js index 260fccccaf..edc35f68c8 100644 --- a/src/webcomponents/clinical/clinical-analysis-grid.js +++ b/src/webcomponents/clinical/clinical-analysis-grid.js @@ -196,13 +196,8 @@ export default class ClinicalAnalysisGrid extends LitElement { } } - async fetchData(query) { - try { - return await this.opencgaSession.opencgaClient.clinical().search(query); - } catch (e) { - console.error(e); - await Promise.reject(e); - } + fetchData(query) { + return this.opencgaSession.opencgaClient.clinical().search(query); } onColumnChange(e) { From 9602f15dff0acc0cccb9486df53834c663565fa9 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:17:33 +0100 Subject: [PATCH 19/48] wc: fix actions and clean code in disease-panel-grid #TASK-5674 --- .../disease-panel/disease-panel-grid.js | 165 ++++++++---------- 1 file changed, 73 insertions(+), 92 deletions(-) diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js index 6bfe699693..d6f5d9f4a2 100644 --- a/src/webcomponents/disease-panel/disease-panel-grid.js +++ b/src/webcomponents/disease-panel/disease-panel-grid.js @@ -67,12 +67,6 @@ export default class DiseasePanelGrid extends LitElement { this.gridId = this._prefix + this.COMPONENT_ID; this.active = true; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -114,12 +108,12 @@ export default class DiseasePanelGrid extends LitElement { modalDraggable: true, modalCyDataName: "modal-create", }, - render: () => html ` + render: () => html` - ` + `, } // Uncomment in case we need to change defaults // export: { @@ -372,64 +366,46 @@ export default class DiseasePanelGrid extends LitElement { idLinkHtml = ` ${row?.id ?? "-"} - `; + + `; } return `
${name}
${idLinkHtml}
-
`; +
+ `; }, - halign: this.displayConfigDefault.header.horizontalAlign, - visible: this.gridCommons.isColumnVisible("name") + halign: "center", + visible: this.gridCommons.isColumnVisible("name"), }, - // { - // id: "id", - // title: "Panel ID", - // field: "id", - // rowspan: 2, - // colspan: 1, - // formatter: (value, row) => { - // if (row?.source && row?.source?.project === "PanelApp") { - // return String.raw` - // - // ${row?.id ?? "-"} - // `; - // } - // return row?.id ?? "-"; - // }, - // halign: this.displayConfigDefault.header.horizontalAlign, - // visible: this.gridCommons.isColumnVisible("id") - // }, { id: "disorders", title: "Disorders", field: "disorders", formatter: disorders => CatalogGridFormatter.disorderFormatter(disorders), - halign: this.displayConfigDefault.header.horizontalAlign, - visible: this.gridCommons.isColumnVisible("disorders") + halign: "center", + visible: this.gridCommons.isColumnVisible("disorders"), }, { id: "stats", title: "Stats", field: "stats", - formatter: stats => { - return ` -
-
- Genes: ${stats.numberOfGenes} -
-
- Regions: ${stats.numberOfRegions} -
-
- Variants: ${stats.numberOfVariants} -
+ formatter: stats => ` +
+
+ Genes: ${stats.numberOfGenes}
- `; - }, +
+ Regions: ${stats.numberOfRegions} +
+
+ Variants: ${stats.numberOfVariants} +
+
+ `, align: "center", - visible: this.gridCommons.isColumnVisible("stats") + visible: this.gridCommons.isColumnVisible("stats"), }, { id: "source", @@ -441,9 +417,10 @@ export default class DiseasePanelGrid extends LitElement { let projectAndVersion = ""; if (project?.toUpperCase() === "PANELAPP") { projectAndVersion = ` - - ${project} ${version} - `; + + ${project} ${version} + + `; } else { projectAndVersion = `${project || ""} ${version}`; } @@ -452,7 +429,7 @@ export default class DiseasePanelGrid extends LitElement { return "-"; }, align: "center", - visible: this.gridCommons.isColumnVisible("source") + visible: this.gridCommons.isColumnVisible("source"), }, ]; @@ -461,46 +438,50 @@ export default class DiseasePanelGrid extends LitElement { id: "actions", title: "Actions", field: "actions", - halign: this.displayConfigDefault.header.horizontalAlign, - formatter: (value, row) => ` -
- - -
`, + align: "center", + formatter: () => { + const isAdmin = OpencgaCatalogUtils.isAdmin(this.opencgaSession.study, this.opencgaSession.user.id); + return ` +
+ + +
+ `; + }, events: { - "click a": this.onActionClick.bind(this) + "click a": this.onActionClick.bind(this), }, visible: !this._config.columns?.hidden?.includes("actions"), }); @@ -561,8 +542,8 @@ export default class DiseasePanelGrid extends LitElement { @export="${this.onDownload}" @actionClick="${e => this.onActionClick(e)}" @sessionPanelUpdate="${this.renderTable}"> - ` : nothing - } + + ` : nothing}
From 9ef823c00fa58d8390ded060a1bdf95afdfb328f Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:21:02 +0100 Subject: [PATCH 20/48] wc: remove useless fetchDiseasePanels function in disease-panel-grid #TASK-5674 --- .../disease-panel/disease-panel-grid.js | 28 ++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js index d6f5d9f4a2..d2222cbd0d 100644 --- a/src/webcomponents/disease-panel/disease-panel-grid.js +++ b/src/webcomponents/disease-panel/disease-panel-grid.js @@ -178,7 +178,7 @@ export default class DiseasePanelGrid extends LitElement { detailView: this._config.detailView, gridContext: this, formatLoadingMessage: () => String.raw`
`, - ajax: async params => { + ajax: params => { this.filters = { study: this.opencgaSession.study.fqn, limit: params.data.limit, @@ -189,13 +189,13 @@ export default class DiseasePanelGrid extends LitElement { // Store the current filters this.lastFilters = {...this.filters}; - try { - const data = await this.fetchDiseasePanels(this.filters); - params.success(data); - } catch (e) { - console.log(e); - params.error(e); - } + this.opencgaSession.opencgaClient.panels() + .search(this.filters) + .then(response => params.success(response)) + .catch(error => { + console.error(error); + params.error(error); + }); }, responseHandler: response => { const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions")); @@ -233,16 +233,6 @@ export default class DiseasePanelGrid extends LitElement { } } - async fetchDiseasePanels(query) { - try { - return await this.opencgaSession.opencgaClient.panels() - .search(query); - } catch (e) { - console.error(e); - await Promise.reject(e); - } - } - renderLocalTable() { this.table = $("#" + this.gridId); this.table.bootstrapTable("destroy"); @@ -264,7 +254,7 @@ export default class DiseasePanelGrid extends LitElement { onPostBody: data => { // We call onLoadSuccess to select first row this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 1); - } + }, }); } From be5d7815f984d64e7e22df9c929f78205ff8ff37 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:46:21 +0100 Subject: [PATCH 21/48] wc: fix update and updated methods in family-grid #TAKS-5674 --- src/webcomponents/family/family-grid.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js index c86f671021..1aabaa8f00 100644 --- a/src/webcomponents/family/family-grid.js +++ b/src/webcomponents/family/family-grid.js @@ -69,14 +69,21 @@ export default class FamilyGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -136,9 +143,7 @@ export default class FamilyGrid extends LitElement { // @configChange="${this.onGridConfigChange}"> // ` // } - }; - this.renderTable(); } renderTable() { @@ -147,7 +152,6 @@ export default class FamilyGrid extends LitElement { } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderRemoteTable() { From 581a5ce148adb2b3aaa360eb5e416b11de8d15b5 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:53:32 +0100 Subject: [PATCH 22/48] wc: fix actions dropdown position and code clean in family-grid #TASK-5674 --- src/webcomponents/family/family-grid.js | 63 ++++++++++--------------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js index 1aabaa8f00..9765f046c8 100644 --- a/src/webcomponents/family/family-grid.js +++ b/src/webcomponents/family/family-grid.js @@ -61,12 +61,6 @@ export default class FamilyGrid extends LitElement { this.gridId = this._prefix + this.COMPONENT_ID; this.active = true; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -172,7 +166,6 @@ export default class FamilyGrid extends LitElement { icons: GridCommons.GRID_ICONS, uniqueId: "id", silentSort: false, - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, @@ -184,16 +177,11 @@ export default class FamilyGrid extends LitElement { gridContext: this, formatLoadingMessage: () => "
", ajax: params => { - const sort = this.table.bootstrapTable("getOptions").sortName ? { - sort: this.table.bootstrapTable("getOptions").sortName, - order: this.table.bootstrapTable("getOptions").sortOrder - } : {}; this.filters = { study: this.opencgaSession.study.fqn, limit: params.data.limit, skip: params.data.offset || 0, count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1, - ...sort, ...this.query }; @@ -244,8 +232,8 @@ export default class FamilyGrid extends LitElement { const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions")); return result.response; }, - onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement), - onDblClickRow: (row, element, field) => { + onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement), + onDblClickRow: (row, element) => { // We detail view is active we expand the row automatically. // FIXME: Note that we use a CSS class way of knowing if the row is expand or collapse, this is not ideal but works. if (this._config.detailView) { @@ -256,13 +244,13 @@ export default class FamilyGrid extends LitElement { } } }, - onCheck: (row, $element) => { + onCheck: row => { this.gridCommons.onCheck(row.id, row); }, onCheckAll: rows => { this.gridCommons.onCheckAll(rows); }, - onUncheck: (row, $element) => { + onUncheck: row => { this.gridCommons.onUncheck(row.id, row); }, onUncheckAll: rows => { @@ -272,8 +260,6 @@ export default class FamilyGrid extends LitElement { this.gridCommons.onLoadSuccess(data, 1); }, onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse), - onPostBody: data => { - } }); } } @@ -297,11 +283,11 @@ export default class FamilyGrid extends LitElement { detailFormatter: this.detailFormatter, gridContext: this, formatLoadingMessage: () => "
", - onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement), + onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement), onPostBody: data => { // We call onLoadSuccess to select first row this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 1); - } + }, }); } @@ -424,7 +410,7 @@ export default class FamilyGrid extends LitElement { field: "id", formatter: familyId => `
${familyId}
`, sortable: true, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("id") }, { @@ -452,7 +438,7 @@ export default class FamilyGrid extends LitElement { } return html; }, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("members") }, { @@ -460,7 +446,7 @@ export default class FamilyGrid extends LitElement { title: "Disorders", field: "disorders", formatter: disorders => CatalogGridFormatter.disorderFormatter(disorders), - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("disorders") }, { @@ -468,7 +454,7 @@ export default class FamilyGrid extends LitElement { title: "Phenotypes", field: "phenotypes", formatter: CatalogGridFormatter.phenotypesFormatter, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("phenotypes") }, { @@ -476,7 +462,7 @@ export default class FamilyGrid extends LitElement { title: "Case ID", field: "attributes.OPENCGA_CLINICAL_ANALYSIS", formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.id, this.opencgaSession), - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("caseId") }, { @@ -485,7 +471,7 @@ export default class FamilyGrid extends LitElement { field: "creationDate", formatter: CatalogGridFormatter.dateFormatter, sortable: true, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("creationDate") }, ]; @@ -499,8 +485,9 @@ export default class FamilyGrid extends LitElement { id: "actions", title: "Actions", field: "actions", + align: "center", formatter: (value, row) => ` -
+
`, +
+ `, events: { "click a": this.onActionClick.bind(this) }, @@ -612,8 +601,8 @@ export default class FamilyGrid extends LitElement { @export="${this.onDownload}" @actionClick="${e => this.onActionClick(e)}" @familyCreate="${this.renderTable}"> - ` : nothing - } + + ` : nothing}
From 6a1f6fdbda9e8d5fbebfda83ce5f2a062172be5a Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:54:43 +0100 Subject: [PATCH 23/48] wc: fix table overflow in family-grid #TASK-5674 --- src/webcomponents/family/family-grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js index 9765f046c8..eb5af671ad 100644 --- a/src/webcomponents/family/family-grid.js +++ b/src/webcomponents/family/family-grid.js @@ -604,7 +604,7 @@ export default class FamilyGrid extends LitElement { ` : nothing} -
+
From a31abeb4f35ce7ae60d099edddbdc0d23ab7ac12 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 13:57:43 +0100 Subject: [PATCH 24/48] wc: fix update and updated functions in file-grid #TASK-5674 --- src/webcomponents/file/file-grid.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js index 4a29aece6e..4abcbfc953 100644 --- a/src/webcomponents/file/file-grid.js +++ b/src/webcomponents/file/file-grid.js @@ -67,14 +67,21 @@ export default class OpencgaFileGrid extends LitElement { this._config = this.getDefaultConfig(); } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -106,11 +113,10 @@ export default class OpencgaFileGrid extends LitElement { - ` + + `, }, }; - - this.renderTable(); } renderTable() { @@ -120,7 +126,6 @@ export default class OpencgaFileGrid extends LitElement { } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderRemoteTable() { @@ -140,7 +145,6 @@ export default class OpencgaFileGrid extends LitElement { iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, uniqueId: "id", - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, @@ -207,9 +211,6 @@ export default class OpencgaFileGrid extends LitElement { this.gridCommons.onLoadSuccess(data, 1); }, onLoadError: (e, restResponse) => this.gridCommons.onLoadError(e, restResponse), - // onPostBody: data => { - // // Add tooltips? - // } }); } } @@ -227,8 +228,6 @@ export default class OpencgaFileGrid extends LitElement { sidePagination: "local", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, @@ -246,7 +245,7 @@ export default class OpencgaFileGrid extends LitElement { onPostBody: data => { // We call onLoadSuccess to select first row this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 2); - } + }, }); } From 5ea1f5c82a6fb9ddd2f2cc45ac40086d5c51a4c9 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 14:20:05 +0100 Subject: [PATCH 25/48] wc: fix actions dropdown and minor code clean in file-grid #TASK-5674 --- src/webcomponents/file/file-grid.js | 32 +++++++---------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js index 4abcbfc953..eec2a13a70 100644 --- a/src/webcomponents/file/file-grid.js +++ b/src/webcomponents/file/file-grid.js @@ -291,13 +291,6 @@ export default class OpencgaFileGrid extends LitElement { }, visible: this.gridCommons.isColumnVisible("name") }, - // { - // id: "directory", - // title: "Directory", - // field: "path", - // formatter: (_, row) => "/" + row.path.replace("/" + row.name, ""), - // visible: this.gridCommons.isColumnVisible("directory") - // }, { id: "sampleIds", title: "Samples", @@ -325,13 +318,7 @@ export default class OpencgaFileGrid extends LitElement { id: "jobId", title: "Job ID", field: "jobId", - formatter: jobId => { - if (jobId) { - return `
${jobId}
`; - } else { - return "-"; - } - }, + formatter: jobId => jobId || "-", visible: this.gridCommons.isColumnVisible("jobId") }, { @@ -347,12 +334,6 @@ export default class OpencgaFileGrid extends LitElement { field: "format", visible: this.gridCommons.isColumnVisible("format") }, - // { - // id: "bioformat", - // title: "Bioformat", - // field: "bioformat", - // visible: this.gridCommons.isColumnVisible("bioformat") - // }, { id: "index", title: "Variant Index Status", @@ -400,8 +381,9 @@ export default class OpencgaFileGrid extends LitElement { id: "actions", title: "Actions", field: "actions", + align: "center", formatter: (value, row) => ` -
+
`, - // valign: "middle", +
+ `, events: { "click a": this.onActionClick.bind(this) }, @@ -507,8 +489,8 @@ export default class OpencgaFileGrid extends LitElement { @export="${this.onDownload}" @actionClick="${e => this.onActionClick(e)}" @fileCreate="${this.renderTable}"> - ` : nothing - } + + ` : nothing}
From 31b75b0a1e591a825278913c9c75e16310819a09 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 14:20:30 +0100 Subject: [PATCH 26/48] wc: fix overflow in file-grid #TASK-5674 --- src/webcomponents/file/file-grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js index eec2a13a70..fce9c40696 100644 --- a/src/webcomponents/file/file-grid.js +++ b/src/webcomponents/file/file-grid.js @@ -492,7 +492,7 @@ export default class OpencgaFileGrid extends LitElement { ` : nothing} -
+
`; From 433509c07f38427a2d54db0e65150e78132fdfc9 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 14:21:23 +0100 Subject: [PATCH 27/48] wc: fix overflow in cohort-grid #TASK-5674 --- src/webcomponents/cohort/cohort-grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js index 4e14310308..6d34251420 100644 --- a/src/webcomponents/cohort/cohort-grid.js +++ b/src/webcomponents/cohort/cohort-grid.js @@ -421,7 +421,7 @@ export default class CohortGrid extends LitElement { ` : nothing} -
+
From 632aa75ac95b9f41896589b766a25324c3b28b2a Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 16:54:13 +0100 Subject: [PATCH 28/48] wc: remove html tags from text element in variant-interpreter-grid-config #TASK-5946 --- .../variant/interpretation/variant-interpreter-grid-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js index 28c21ff2d2..f3e6d7cf24 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js @@ -253,7 +253,7 @@ export default class VariantInterpreterGridConfig extends LitElement { }, { type: "text", - text: "Select the columns to be displayed", + text: "Select the columns to be displayed", display: { containerStyle: "margin: 20px 5px 5px 0px", } From 6e89f7879b5824b3684adcdb937ad16000684b77 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:15:28 +0100 Subject: [PATCH 29/48] wc: fix update and updated methods in individual-grid #TASK-5674 --- .../individual/individual-grid.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js index 1e64b184c5..e52e78093f 100644 --- a/src/webcomponents/individual/individual-grid.js +++ b/src/webcomponents/individual/individual-grid.js @@ -72,14 +72,21 @@ export default class IndividualGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -141,17 +148,14 @@ export default class IndividualGrid extends LitElement { // ` // } }; - this.renderTable(); } renderTable() { - // If this.individuals is provided as property we render the array directly if (this.individuals?.length > 0) { this.renderLocalTable(); } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderRemoteTable() { From 6bf545490d4057a43e86202db2b079080acdf63c Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:19:43 +0100 Subject: [PATCH 30/48] wc: fix actions dropdown and some code improvements in individual-grid #TASK-5674 --- .../individual/individual-grid.js | 78 ++++++------------- 1 file changed, 25 insertions(+), 53 deletions(-) diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js index e52e78093f..8ea0c1a915 100644 --- a/src/webcomponents/individual/individual-grid.js +++ b/src/webcomponents/individual/individual-grid.js @@ -64,12 +64,6 @@ export default class IndividualGrid extends LitElement { this.gridId = this._prefix + this.COMPONENT_ID; this.active = true; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -176,7 +170,6 @@ export default class IndividualGrid extends LitElement { icons: GridCommons.GRID_ICONS, uniqueId: "id", silentSort: false, - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, @@ -188,16 +181,11 @@ export default class IndividualGrid extends LitElement { gridContext: this, formatLoadingMessage: () => "
", ajax: params => { - const sort = this.table.bootstrapTable("getOptions").sortName ? { - sort: this.table.bootstrapTable("getOptions").sortName, - order: this.table.bootstrapTable("getOptions").sortOrder - } : {}; this.filters = { study: this.opencgaSession.study.fqn, limit: params.data.limit, skip: params.data.offset || 0, count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1, - ...sort, ...this.query }; @@ -290,7 +278,6 @@ export default class IndividualGrid extends LitElement { sidePagination: "local", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, @@ -439,8 +426,7 @@ export default class IndividualGrid extends LitElement { ${sexHtml}
`; }, - sortable: true, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("id") }, { @@ -456,13 +442,14 @@ export default class IndividualGrid extends LitElement {
${sample.id} (${sample.somatic ? "S" : "G"}) -
`; +
+ `; } html += `
`; } return html; }, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("samples") }, { @@ -470,7 +457,7 @@ export default class IndividualGrid extends LitElement { title: "Father", field: "father.id", formatter: fatherId => fatherId || "-", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("father") }, { @@ -478,7 +465,7 @@ export default class IndividualGrid extends LitElement { title: "Mother", field: "mother.id", formatter: motherId => motherId || "-", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("mother") }, { @@ -486,7 +473,7 @@ export default class IndividualGrid extends LitElement { title: "Disorders", field: "disorders", formatter: CatalogGridFormatter.disorderFormatter, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("disorders") }, { @@ -494,23 +481,15 @@ export default class IndividualGrid extends LitElement { title: "Phenotypes", field: "phenotypes", formatter: CatalogGridFormatter.phenotypesFormatter, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("phenotypes") }, - // { - // id: "sex", - // title: "Sex (Karyotypic)", - // field: "sex", - // formatter: this.sexFormatter, - // halign: this.displayConfigDefault.header.horizontalAlign, - // visible: this.gridCommons.isColumnVisible("sex") - // }, { id: "caseId", title: "Case ID", field: "attributes.OPENCGA_CLINICAL_ANALYSIS", formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.id, this.opencgaSession), - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("caseId") }, { @@ -518,25 +497,15 @@ export default class IndividualGrid extends LitElement { title: "Ethnicity", field: "ethnicity", formatter: (ethnicity, row) => ethnicity?.id || row.population?.name || "-", - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("ethnicity") }, - // { - // id: "dateOfBirth", - // title: "Date of Birth", - // field: "dateOfBirth", - // sortable: true, - // formatter: CatalogGridFormatter.dateFormatter, - // halign: this.displayConfigDefault.header.horizontalAlign, - // visible: this.gridCommons.isColumnVisible("dateOfBirth") - // }, { id: "creationDate", title: "Creation Date", field: "creationDate", formatter: CatalogGridFormatter.dateFormatter, - sortable: true, - halign: this.displayConfigDefault.header.horizontalAlign, + halign: "center", visible: this.gridCommons.isColumnVisible("creationDate") }, ]; @@ -564,8 +533,9 @@ export default class IndividualGrid extends LitElement { id: "actions", title: "Actions", field: "actions", + align: "center", formatter: (value, row) => ` -
+
`, +
+ `, events: { - "click a": this.onActionClick.bind(this) + "click a": this.onActionClick.bind(this), }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: !this._config.columns?.hidden?.includes("actions"), }); } From abdb47db40d9228ed72a7042e3ca6cb1b30fdf91 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:20:56 +0100 Subject: [PATCH 31/48] wc: fix overflow in individual-grid #TASK-5674 --- src/webcomponents/individual/individual-grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js index 8ea0c1a915..49d0f1b62c 100644 --- a/src/webcomponents/individual/individual-grid.js +++ b/src/webcomponents/individual/individual-grid.js @@ -654,7 +654,7 @@ export default class IndividualGrid extends LitElement { ` : nothing} -
+
From 21ba09531efeeb486c65ca07b6452a9d091cd72a Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:24:39 +0100 Subject: [PATCH 32/48] wc: fix update and updated functions in job-grid #TASK-5674 --- src/webcomponents/job/job-grid.js | 35 +++++++++---------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js index bcca9d7928..4ba1ec7e7f 100644 --- a/src/webcomponents/job/job-grid.js +++ b/src/webcomponents/job/job-grid.js @@ -79,14 +79,20 @@ export default class JobGrid extends LitElement { }; } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -147,10 +153,7 @@ export default class JobGrid extends LitElement { // @configChange="${this.onGridConfigChange}"> // ` // } - }; - this.requestUpdate(); - this.renderTable(); } renderTable() { @@ -159,7 +162,6 @@ export default class JobGrid extends LitElement { } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderLocalTable() { @@ -190,8 +192,6 @@ export default class JobGrid extends LitElement { } renderRemoteTable() { - // this.jobs = []; - if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) { // const filters = {...this.query}; if (this.lastFilters && JSON.stringify(this.lastFilters) === JSON.stringify(this.query)) { @@ -199,13 +199,6 @@ export default class JobGrid extends LitElement { return; } - // Make a copy of the jobs (if they exist), we will use this private copy until it is assigned to this.jobs - // if (UtilsNew.isNotUndefined(this.jobs)) { - // this._jobs = this.jobs; - // } else { - // this._jobs = []; - // } - this._columns = this._getDefaultColumns(); this.table = $("#" + this.gridId); this.table.bootstrapTable("destroy"); @@ -216,14 +209,6 @@ export default class JobGrid extends LitElement { uniqueId: "id", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - // NOTE native Bootstrap table autorefresh doesn't clear interval correctly - // showRefresh: true, - // autoRefresh: true, - // autoRefreshSilent: false, - // autoRefreshStatus: true, - // autoRefreshInterval: 5, - - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, From 34f8b8fafdcdf13f4538890070b931e3a4c5d646 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:30:36 +0100 Subject: [PATCH 33/48] wc: fix actions dropdown and code clean in job-grid #TASK-5674 --- src/webcomponents/job/job-grid.js | 71 ++++++++++++++----------------- 1 file changed, 31 insertions(+), 40 deletions(-) diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js index 4ba1ec7e7f..8eaec6ee64 100644 --- a/src/webcomponents/job/job-grid.js +++ b/src/webcomponents/job/job-grid.js @@ -71,12 +71,6 @@ export default class JobGrid extends LitElement { this.autoRefresh = false; this.eventNotifyName = "messageevent"; this._config = this.getDefaultConfig(); - this.displayConfigDefault = { - header: { - horizontalAlign: "center", - verticalAlign: "bottom", - }, - }; } update(changedProperties) { @@ -193,7 +187,6 @@ export default class JobGrid extends LitElement { renderRemoteTable() { if (this.opencgaSession?.opencgaClient && this.opencgaSession?.study?.fqn) { - // const filters = {...this.query}; if (this.lastFilters && JSON.stringify(this.lastFilters) === JSON.stringify(this.query)) { // Abort destroying and creating again the grid. The filters have not changed return; @@ -263,13 +256,13 @@ export default class JobGrid extends LitElement { } } }, - onCheck: (row, $element) => { + onCheck: row => { this.gridCommons.onCheck(row.id, row); }, onCheckAll: rows => { this.gridCommons.onCheckAll(rows); }, - onUncheck: (row, $element) => { + onUncheck: row => { this.gridCommons.onUncheck(row.id, row); }, onUncheckAll: rows => { @@ -397,26 +390,24 @@ export default class JobGrid extends LitElement { id: "id", title: "Job ID", field: "id", - formatter: (id, row) => { - return ` -
- ${id} - ${row.outDir?.path ? `/${row.outDir.path.replace(id, "").replace("//", "/")}` : ""} -
`; - }, + formatter: (id, row) => ` +
+ ${id} + ${row.outDir?.path ? `/${row.outDir.path.replace(id, "").replace("//", "/")}` : ""} +
+ `, visible: this.gridCommons.isColumnVisible("id") }, { id: "toolId", title: "Tool ID", field: "tool.id", - formatter: (toolId, row) => { - return ` -
- ${toolId} - ${row.tool?.type ? `${row.tool.type}` : ""} -
`; - }, + formatter: (toolId, row) => ` +
+ ${toolId} + ${row.tool?.type ? `${row.tool.type}` : ""} +
+ `, visible: this.gridCommons.isColumnVisible("toolId") }, { @@ -446,7 +437,8 @@ export default class JobGrid extends LitElement { ${nestedObject}
` : `${key}: ${params[key]}`} -
`; +
+ `; } html += "
"; } @@ -461,12 +453,6 @@ export default class JobGrid extends LitElement { formatter: outputFiles => CatalogGridFormatter.fileFormatter(outputFiles, null, "name"), visible: this.gridCommons.isColumnVisible("output") }, - // { - // id: "priority", - // title: "Priority", - // field: "priority", - // visible: this.gridCommons.isColumnVisible("priority") - // }, { id: "dependsOn", title: "Depends On", @@ -480,7 +466,11 @@ export default class JobGrid extends LitElement { if (i < 3) { html += `
${dependsOn[i].id}
`; } else { - html += `... view all jobs (${dependsOn.length})`; + html += ` + + ... view all jobs (${dependsOn.length}) + + `; break; } } @@ -507,6 +497,7 @@ export default class JobGrid extends LitElement { const f = moment.utc(duration.asMilliseconds()).format("HH:mm:ss"); return ` ${duration.humanize()} `; } + return "-"; }, visible: this.gridCommons.isColumnVisible("executionR") }, @@ -533,8 +524,9 @@ export default class JobGrid extends LitElement { id: "actions", title: "Actions", field: "actions", - formatter: (value, row) => ` -
+ align: "center", + formatter: () => ` +
`, - // valign: "middle", +
+ `, events: { - "click a": this.onActionClick.bind(this) + "click a": this.onActionClick.bind(this), }, - visible: !this._config.columns?.hidden?.includes("actions") + visible: !this._config.columns?.hidden?.includes("actions"), }); } @@ -641,8 +633,8 @@ export default class JobGrid extends LitElement { @refresh="${this.onRefresh}" @actionClick="${e => this.onActionClick(e)}" @jobCreate="${this.renderRemoteTable}"> - ` : nothing - } + + ` : nothing}
@@ -664,7 +656,6 @@ export default class JobGrid extends LitElement { `; } })} - `; } From ee31230124ba64c1c5a71aedfd2576817424e468 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:32:01 +0100 Subject: [PATCH 34/48] wc: fix update and updated functions in sample-grid #TASK-5674 --- src/webcomponents/sample/sample-grid.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js index 37e42f6601..d5a8f2b006 100644 --- a/src/webcomponents/sample/sample-grid.js +++ b/src/webcomponents/sample/sample-grid.js @@ -68,14 +68,20 @@ export default class SampleGrid extends LitElement { this._config = this.getDefaultConfig(); } - updated(changedProperties) { - if ((changedProperties.has("opencgaSession") || + update(changedProperties) { + if (changedProperties.has("opencgaSession") || changedProperties.has("toolId") || changedProperties.has("query") || - changedProperties.has("config") || - changedProperties.has("active")) && this.active) { + changedProperties.has("config")) { this.propertyObserver(); } + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0 && this.active) { + this.renderTable(); + } } propertyObserver() { @@ -136,7 +142,6 @@ export default class SampleGrid extends LitElement { // ` // } }; - this.renderTable(); } renderTable() { @@ -146,7 +151,6 @@ export default class SampleGrid extends LitElement { } else { this.renderRemoteTable(); } - this.requestUpdate(); } renderRemoteTable() { From a94d38d7b081682015dd3a806608677885e4e559 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:35:57 +0100 Subject: [PATCH 35/48] wc: fix actions dropdown and clean code in sample-grid #TASK-5674 --- src/webcomponents/sample/sample-grid.js | 34 +++++-------------------- 1 file changed, 6 insertions(+), 28 deletions(-) diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js index d5a8f2b006..c50fa49f73 100644 --- a/src/webcomponents/sample/sample-grid.js +++ b/src/webcomponents/sample/sample-grid.js @@ -169,7 +169,6 @@ export default class SampleGrid extends LitElement { iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, uniqueId: "id", - // Table properties pagination: this._config.pagination, pageSize: this._config.pageSize, pageList: this._config.pageList, @@ -179,17 +178,12 @@ export default class SampleGrid extends LitElement { gridContext: this, formatLoadingMessage: () => "
", ajax: params => { - const sort = this.table.bootstrapTable("getOptions").sortName ? { - sort: this.table.bootstrapTable("getOptions").sortName, - order: this.table.bootstrapTable("getOptions").sortOrder - } : {}; this.filters = { study: this.opencgaSession.study.fqn, limit: params.data.limit, skip: params.data.offset || 0, count: !this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1, // exclude: "qualityControl", - ...sort, ...this.query }; @@ -285,8 +279,6 @@ export default class SampleGrid extends LitElement { sidePagination: "local", iconsPrefix: GridCommons.GRID_ICONS_PREFIX, icons: GridCommons.GRID_ICONS, - - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, @@ -341,10 +333,10 @@ export default class SampleGrid extends LitElement { return `
${sampleId} - ${somaticHtml ? `${somaticHtml}` : nothing} -
`; + ${somaticHtml ? `${somaticHtml}` : ""} +
+ `; }, - sortable: true, visible: this.gridCommons.isColumnVisible("id") }, { @@ -374,12 +366,6 @@ export default class SampleGrid extends LitElement { formatter: (value, row) => CatalogGridFormatter.caseFormatter(value, row, row.individualId, this.opencgaSession), visible: this.gridCommons.isColumnVisible("caseId") }, - // { - // id: "cohortIds", - // title: "Cohorts", - // field: "cohortIds", - // // visible: this.gridCommons.isColumnVisible("cohorts") - // }, { id: "collection.method", title: "Collection Method", @@ -392,19 +378,11 @@ export default class SampleGrid extends LitElement { field: "processing.preparationMethod", visible: this.gridCommons.isColumnVisible("processing.preparationMethod") }, - // { - // id: "cellLine", - // title: "Cell Line", - // field: "cellLine", - // formatter: (value, row) => row.somatic ? "Somatic" : "Germline", - // visible: this.gridCommons.isColumnVisible("cellLine") - // }, { id: "creationDate", title: "Creation Date", field: "creationDate", formatter: CatalogGridFormatter.dateFormatter, - sortable: true, visible: this.gridCommons.isColumnVisible("creationDate") }, ]; @@ -418,8 +396,9 @@ export default class SampleGrid extends LitElement { id: "actions", title: "Actions", field: "actions", + align: "center", formatter: (value, row) => ` -
+
+ `, events: { "click a": this.onActionClick.bind(this) }, From 6d662112a5be92b4e2a12ef745d711e33a902595 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 18:47:22 +0100 Subject: [PATCH 37/48] wc: fix update and updated functions in variant-browser-grid #TASK-5674 --- .../variant/variant-browser-grid.js | 41 ++++++++----------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/src/webcomponents/variant/variant-browser-grid.js b/src/webcomponents/variant/variant-browser-grid.js index 5602f9ea25..65d828f527 100644 --- a/src/webcomponents/variant/variant-browser-grid.js +++ b/src/webcomponents/variant/variant-browser-grid.js @@ -81,30 +81,29 @@ export default class VariantBrowserGrid extends LitElement { // TODO move to the configuration? this.maxNumberOfPages = 1000000; - } - firstUpdated() { - // this.gridCommons = new GridCommons(this.gridId, this, this._config); - this.table = this.querySelector("#" + this.gridId); - this._config = { - ...this.getDefaultConfig(), - ...this.config - }; + this.gridCommons = null; + this._config = this.getDefaultConfig(); } - updated(changedProperties) { + update(changedProperties) { if (changedProperties.has("opencgaSession")) { this.opencgaSessionObserver(); } - if (changedProperties.has("query") || changedProperties.has("variants")) { + + if (changedProperties.has("query")) { this.queryObserver(); - // update config to add new columns by filters as sample - this.configObserver(); - this.renderVariants(); } + if (changedProperties.has("config") || changedProperties.has("toolId")) { this.configObserver(); - this.requestUpdate(); + } + + super.update(changedProperties); + } + + updated(changedProperties) { + if (changedProperties.size > 0) { this.renderVariants(); } } @@ -115,6 +114,7 @@ export default class VariantBrowserGrid extends LitElement { ...this.getDefaultConfig(), ...this.config }; + this.gridCommons = new GridCommons(this.gridId, this, this._config); } @@ -131,7 +131,6 @@ export default class VariantBrowserGrid extends LitElement { } } this.samples = _samples; - this.requestUpdate(); } configObserver() { @@ -146,8 +145,6 @@ export default class VariantBrowserGrid extends LitElement { this.toolbarSetting = { ...this._config, showCreate: false, // Caution: Ignore a possible admin configuration change to showCreate: true. - // columns: this._getDefaultColumns()[0].filter(col => col.rowspan === 2 && col.colspan === 1 && col.visible !== false), // flat list for the column dropdown - // gridColumns: this._getDefaultColumns() // original column structure }; this.toolbarConfig = { @@ -155,7 +152,7 @@ export default class VariantBrowserGrid extends LitElement { resource: "VARIANT", disableCreate: true, showInterpreterConfig: true, - columns: this._getDefaultColumns() + columns: this._getDefaultColumns(), }; } @@ -165,13 +162,11 @@ export default class VariantBrowserGrid extends LitElement { } renderVariants() { - this.opencgaSession; if (this.variants?.length > 0) { this.renderFromLocal(); } else { this.renderRemoteVariants(); } - // this.requestUpdate(); } renderRemoteVariants() { @@ -239,7 +234,8 @@ export default class VariantBrowserGrid extends LitElement { } } - this.opencgaSession.opencgaClient.variants().query(this.filters) + this.opencgaSession.opencgaClient.variants() + .query(this.filters) .then(res => { // FIXME A quick temporary fix -> TASK-947 if (this.opencgaSession?.project?.cellbase?.version === "v4" || this.opencgaSession?.project?.internal?.cellbase?.version === "v4") { @@ -293,7 +289,6 @@ export default class VariantBrowserGrid extends LitElement { }); } } - params.success(res); }) .catch(e => params.error(e)) @@ -355,8 +350,6 @@ export default class VariantBrowserGrid extends LitElement { data: this.variants, columns: this._getDefaultColumns(), sidePagination: "local", - - // Set table properties, these are read from config property uniqueId: "id", pagination: this._config.pagination, pageSize: this._config.pageSize, From 466f29bf585ab1a1059fdf9128618b41d14aab41 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 27 Mar 2024 19:00:32 +0100 Subject: [PATCH 38/48] wc: fix variant-samples component #TASK-5674 --- src/webcomponents/variant/variant-samples.js | 46 ++++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js index b45ae996e7..8171013cf7 100644 --- a/src/webcomponents/variant/variant-samples.js +++ b/src/webcomponents/variant/variant-samples.js @@ -27,7 +27,7 @@ export default class VariantSamples extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -44,34 +44,31 @@ export default class VariantSamples extends LitElement { }, active: { type: Boolean - } + }, }; } - _init() { + #init() { this._prefix = UtilsNew.randomString(8); this.active = false; this.gridId = this._prefix + "SampleTable"; - this.toolbarConfig = { + + this.toolbarSettings = { showCreate: false, showExport: true, showSettings: false, }; - } + this.toolbarConfig = { + resource: "SAMPLE", + }; - connectedCallback() { this.config = this.getDefaultConfig(); this.gridCommons = new GridCommons(this.gridId, this, this.config); - super.connectedCallback(); } updated(changedProperties) { - if (changedProperties.has("opencgaSession")) { - // this.catalogGridFormatter = new CatalogGridFormatter(this.opencgaSession); - } - - if ((changedProperties.has("variantId") || changedProperties.has("active")) && this.active) { + if (changedProperties.size > 0 && this.active) { this.renderTable(); } } @@ -120,7 +117,7 @@ export default class VariantSamples extends LitElement { } renderTable() { - if (!this.opencgaSession) { + if (!this.opencgaSession || !this.variantId) { return; } this.table = $("#" + this.gridId); @@ -399,14 +396,6 @@ export default class VariantSamples extends LitElement { this.requestUpdate(); } - getDefaultConfig() { - return { - pagination: true, - pageSize: 10, - pageList: [10, 25, 50], - }; - } - render() { return html`
@@ -420,11 +409,12 @@ export default class VariantSamples extends LitElement {
` : null} + @export="${this.onDownload}">
@@ -433,6 +423,14 @@ export default class VariantSamples extends LitElement { `; } + getDefaultConfig() { + return { + pagination: true, + pageSize: 10, + pageList: [10, 25, 50], + }; + } + } customElements.define("variant-samples", VariantSamples); From 446bccda8b40672efd9d673fc4dc9fce079e19f1 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 13:31:30 +0100 Subject: [PATCH 39/48] wc: reset clinical analysis manager after each clinicalAnalysis object update in variant-interpreter-browser-template #TASK-5852 --- .../interpretation/variant-interpreter-browser-template.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js index 45e87104a1..b85c838d61 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js @@ -115,6 +115,11 @@ class VariantInterpreterBrowserTemplate extends LitElement { } clinicalAnalysisObserver() { + // Reset clinical analysis manager + if (this.opencgaSession && this.clinicalAnalysis) { + this.clinicalAnalysisManager = new ClinicalAnalysisManager(this, this.clinicalAnalysis, this.opencgaSession); + } + // Init saved variants with the primary findings of the main interpretation if (this.clinicalAnalysis?.interpretation?.primaryFindings?.length) { this.savedVariants = this.clinicalAnalysis?.interpretation?.primaryFindings?.map(v => v.id); From 8750bdb503a8b39806d1323dffa685bb0eed6dd8 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 13:32:19 +0100 Subject: [PATCH 40/48] wc: removed connectedCallback function in variant-interpreter-browser-template #TASK-5852 --- .../interpretation/variant-interpreter-browser-template.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js index b85c838d61..c4a478c402 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js @@ -89,15 +89,10 @@ class VariantInterpreterBrowserTemplate extends LitElement { this.variantInclusionState = []; this.currentQueryBeforeSaveEvent = null; + this.clinicalAnalysisManager = null; this._config = this.getDefaultConfig(); } - connectedCallback() { - super.connectedCallback(); - - this.clinicalAnalysisManager = new ClinicalAnalysisManager(this, this.clinicalAnalysis, this.opencgaSession); - } - update(changedProperties) { if (changedProperties.has("clinicalAnalysis")) { this.clinicalAnalysisObserver(); From bbd7f30f2c0cc0b64f9c64f3f975743b513ad210 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 13:37:07 +0100 Subject: [PATCH 41/48] wc: clean and minor fixes in variant-interpreter-browser-template #TASK-5852 --- .../variant-interpreter-browser-template.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js index c4a478c402..956f6f395a 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js @@ -119,7 +119,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { if (this.clinicalAnalysis?.interpretation?.primaryFindings?.length) { this.savedVariants = this.clinicalAnalysis?.interpretation?.primaryFindings?.map(v => v.id); } - this.settingsObserver(); // When refreshing AFTER saving variants we set the same query as before refreshing, check 'onSaveVariants' if (this.currentQueryBeforeSaveEvent) { @@ -134,7 +133,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { this.executedQuery = {study: this.opencgaSession.study.fqn, ...this.query}; this.searchActive = false; } - this.requestUpdate(); } opencgaSessionObserver() { @@ -144,9 +142,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { } settingsObserver() { - if (!this.clinicalAnalysis) { - return; - } // merge filters this._config = { ...this.getDefaultConfig(), @@ -192,26 +187,22 @@ class VariantInterpreterBrowserTemplate extends LitElement { getInclusionVariantIds() { if (this.opencgaSession?.study?.internal?.configuration?.clinical?.interpretation?.inclusion?.length > 0) { const localVariantInclusionState = []; - const promises = []; const inclusionList = this.opencgaSession.study.internal.configuration.clinical.interpretation.inclusion; - for (const inclusion of inclusionList) { - localVariantInclusionState.push( - { - ...inclusion, - variants: [] - } - ); + const promises = inclusionList.map(inclusion => { + localVariantInclusionState.push({ + ...inclusion, + variants: [], + }); const inclusionQuery = { ...inclusion.query, - // Additional filters - sample: this.clinicalAnalysis.proband.samples[0].id, + sample: this.clinicalAnalysis?.proband?.samples?.[0]?.id, include: "id,studies.files,studies.samples", count: false, study: this.opencgaSession.study.fqn, }; - promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(inclusionQuery)); - } + return this.opencgaSession.opencgaClient.clinical().queryVariant(inclusionQuery); + }); // Process all results and update object state Promise.all(promises).then(values => { From 127635c83e61f1ae4f54e07e4888e82a19ac585b Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 13:40:03 +0100 Subject: [PATCH 42/48] wc: moved code to reset saved variants as a new function in variant-interpreter-browser-template #TASK-5852 --- .../variant-interpreter-browser-template.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js index 956f6f395a..ee95793d54 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js @@ -116,9 +116,7 @@ class VariantInterpreterBrowserTemplate extends LitElement { } // Init saved variants with the primary findings of the main interpretation - if (this.clinicalAnalysis?.interpretation?.primaryFindings?.length) { - this.savedVariants = this.clinicalAnalysis?.interpretation?.primaryFindings?.map(v => v.id); - } + this.resetSavedVariants(); // When refreshing AFTER saving variants we set the same query as before refreshing, check 'onSaveVariants' if (this.currentQueryBeforeSaveEvent) { @@ -215,6 +213,13 @@ class VariantInterpreterBrowserTemplate extends LitElement { } } + resetSavedVariants() { + this.savedVariants = []; + if (this.clinicalAnalysis?.interpretation?.primaryFindings?.length) { + this.savedVariants = this.clinicalAnalysis?.interpretation?.primaryFindings?.map(v => v.id); + } + } + notifyQueryChange() { LitUtils.dispatchCustomEvent(this, "queryChange", null, { query: this.query, @@ -270,7 +275,8 @@ class VariantInterpreterBrowserTemplate extends LitElement { delete this.preparedQuery.id; delete this.executedQuery.id; - this.clinicalAnalysis = {...this.clinicalAnalysis}; + this.resetSavedVariants(); + this.requestUpdate(); } onSaveVariants(e) { From 296b494f2e5af8f78d3bcaf9fe7dfba5edd9fee0 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 14:44:50 +0100 Subject: [PATCH 43/48] wc: clean variant-interpreter-browser-template #TASK-5852 --- .../variant-interpreter-browser-template.js | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js index ee95793d54..0e6b1b30c7 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js @@ -78,9 +78,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { this.searchActive = true; this.variant = null; this.query = {}; - this.savedVariants = []; - this.notSavedVariantIds = 0; - this.removedVariantIds = 0; // Saves the current active view this.activeView = "table"; @@ -94,7 +91,7 @@ class VariantInterpreterBrowserTemplate extends LitElement { } update(changedProperties) { - if (changedProperties.has("clinicalAnalysis")) { + if (changedProperties.has("clinicalAnalysis") || changedProperties.has("opencgaSession")) { this.clinicalAnalysisObserver(); } if (changedProperties.has("query")) { @@ -115,9 +112,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { this.clinicalAnalysisManager = new ClinicalAnalysisManager(this, this.clinicalAnalysis, this.opencgaSession); } - // Init saved variants with the primary findings of the main interpretation - this.resetSavedVariants(); - // When refreshing AFTER saving variants we set the same query as before refreshing, check 'onSaveVariants' if (this.currentQueryBeforeSaveEvent) { this.query = {...this.currentQueryBeforeSaveEvent}; @@ -134,8 +128,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { } opencgaSessionObserver() { - this.clinicalAnalysisManager = new ClinicalAnalysisManager(this, this.clinicalAnalysis, this.opencgaSession); - this.getInclusionVariantIds(); } @@ -213,13 +205,6 @@ class VariantInterpreterBrowserTemplate extends LitElement { } } - resetSavedVariants() { - this.savedVariants = []; - if (this.clinicalAnalysis?.interpretation?.primaryFindings?.length) { - this.savedVariants = this.clinicalAnalysis?.interpretation?.primaryFindings?.map(v => v.id); - } - } - notifyQueryChange() { LitUtils.dispatchCustomEvent(this, "queryChange", null, { query: this.query, @@ -275,8 +260,7 @@ class VariantInterpreterBrowserTemplate extends LitElement { delete this.preparedQuery.id; delete this.executedQuery.id; - this.resetSavedVariants(); - this.requestUpdate(); + this.clinicalAnalysis = {...this.clinicalAnalysis}; } onSaveVariants(e) { From 8fe5b322776def62ab6147c18c5ebb643e59539e Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 28 Mar 2024 16:38:03 +0100 Subject: [PATCH 44/48] wc: remove unused clinical analysis manager in variant-interpreter-grid #TASK-5852 --- .../variant/interpretation/variant-interpreter-grid.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js index bd2cdbf3a9..19c35c6481 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js @@ -16,7 +16,6 @@ import {html, LitElement} from "lit"; import UtilsNew from "../../../core/utils-new.js"; -import ClinicalAnalysisManager from "../../clinical/clinical-analysis-manager.js"; import VariantInterpreterGridFormatter from "./variant-interpreter-grid-formatter.js"; import VariantGridFormatter from "../variant-grid-formatter.js"; import GridCommons from "../../commons/grid-commons.js"; @@ -87,7 +86,6 @@ export default class VariantInterpreterGrid extends LitElement { this.review = false; this.gridCommons = null; - this.clinicalAnalysisManager = null; // Set colors // eslint-disable-next-line no-undef @@ -130,8 +128,6 @@ export default class VariantInterpreterGrid extends LitElement { clinicalAnalysisObserver() { if (this.opencgaSession && this.clinicalAnalysis) { - this.clinicalAnalysisManager = new ClinicalAnalysisManager(this, this.clinicalAnalysis, this.opencgaSession); - if (!this.clinicalAnalysis.interpretation) { this.clinicalAnalysis.interpretation = {}; } From f3b1147d939f7bceba7bb19cc18afaee0402474e Mon Sep 17 00:00:00 2001 From: imedina Date: Mon, 1 Apr 2024 02:24:57 +0100 Subject: [PATCH 45/48] Minor improvements --- .../commons/modal/modal-utils.js | 16 +-- .../commons/opencb-grid-toolbar.js | 7 -- .../individual/individual-grid.js | 105 ++++++++++++++++++ src/webcomponents/job/job-grid.js | 58 +++++++++- src/webcomponents/sample/sample-grid.js | 104 ++++++++++++++++- 5 files changed, 268 insertions(+), 22 deletions(-) diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js index 84cb9a6793..b03947a51f 100644 --- a/src/webcomponents/commons/modal/modal-utils.js +++ b/src/webcomponents/commons/modal/modal-utils.js @@ -1,6 +1,5 @@ import {html, nothing} from "lit"; import LitUtils from "../utils/lit-utils"; -import UtilsNew from "../../../core/utils-new"; export default class ModalUtils { @@ -28,10 +27,8 @@ export default class ModalUtils { const modalDraggable = config.display?.modalDraggable || false; const modalCyDataName = config.display?.modalCyDataName || ""; - return html ` -