From 34f35e26164592854ccf7eda6a3f320c636c7901 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Tue, 15 Oct 2024 14:49:38 +0200 Subject: [PATCH 01/35] wc - Clean and improve code #TASK-7033 Signed-off-by: gpveronica --- .../commons/opencga-browser-filter.js | 27 +++++-------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/src/webcomponents/commons/opencga-browser-filter.js b/src/webcomponents/commons/opencga-browser-filter.js index 27d17839b..e956dc2dc 100644 --- a/src/webcomponents/commons/opencga-browser-filter.js +++ b/src/webcomponents/commons/opencga-browser-filter.js @@ -14,7 +14,7 @@ * limitations under the License. */ -import {LitElement, html, nothing} from "lit"; +import {LitElement, html} from "lit"; import UtilsNew from "../../core/utils-new.js"; import LitUtils from "./utils/lit-utils.js"; import "./filters/catalog-search-autocomplete.js"; @@ -34,7 +34,7 @@ export default class OpencgaBrowserFilter extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -67,15 +67,9 @@ export default class OpencgaBrowserFilter extends LitElement { }; } - _init() { + #init() { this._prefix = UtilsNew.randomString(8); - this.annotationFilterConfig = { - class: "small", - buttonClass: "btn-sm", - inputClass: "input-sm" - }; - this.query = {}; this.preparedQuery = {}; this.searchButton = true; @@ -112,12 +106,6 @@ export default class OpencgaBrowserFilter extends LitElement { }; } - connectedCallback() { - super.connectedCallback(); - - this.preparedQuery = {...this.query}; // propagates here the iva-app query object - } - firstUpdated(changedProperties) { super.firstUpdated(changedProperties); @@ -141,17 +129,18 @@ export default class OpencgaBrowserFilter extends LitElement { queryObserver() { this.preparedQuery = this.query || {}; - this.requestUpdate(); } onFilterChange(key, value) { if (value && value !== "") { - this.preparedQuery = {...this.preparedQuery, ...{[key]: value}}; + this.preparedQuery[key] = value; } else { delete this.preparedQuery[key]; - this.preparedQuery = {...this.preparedQuery}; } + this.preparedQuery = {...this.preparedQuery}; this.notifyQuery(this.preparedQuery); + // Note 20241015 Vero: I believe this.requestUpdate() is not needed, but removing it requires further investigation + // (see variant-browser-filter.js, onFilterChange()) this.requestUpdate(); } @@ -163,7 +152,6 @@ export default class OpencgaBrowserFilter extends LitElement { } this.preparedQuery = {...this.preparedQuery}; this.notifyQuery(this.preparedQuery); - this.requestUpdate(); } notifyQuery(query) { @@ -289,7 +277,6 @@ export default class OpencgaBrowserFilter extends LitElement { .opencgaSession="${this.opencgaSession}" .opencgaClient="${this.opencgaSession.opencgaClient}" .resource="${this.resource}" - .config="${this.annotationFilterConfig}" .selectedVariablesText="${this.preparedQuery.annotation}" @annotationChange="${this.onAnnotationChange}"> From 993e947359eaacb44de274578b23729221567971 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Tue, 15 Oct 2024 15:31:37 +0200 Subject: [PATCH 02/35] wc - Fix modal size, #TASK-7033 Signed-off-by: gpveronica --- src/webcomponents/commons/modal/modal-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js index 191d5c43e..15bc022a3 100644 --- a/src/webcomponents/commons/modal/modal-utils.js +++ b/src/webcomponents/commons/modal/modal-utils.js @@ -38,7 +38,7 @@ export default class ModalUtils { aria-hidden="true" data-cy="${modalCyDataName}" > -
+
${ModalUtils.#getTitleHeader(modalTitleHeader, modalTitle, "modal-title " + modalTitleClassName, modalTitleStyle)} From 55b0e16840a0f86116ebb31ad3e6788f28907d1b Mon Sep 17 00:00:00 2001 From: gpveronica Date: Tue, 15 Oct 2024 15:32:33 +0200 Subject: [PATCH 03/35] wc - Fix categorical filter and clean, #TASK-7033 Signed-off-by: gpveronica --- .../opencga-annotation-filter-modal.js | 375 ++++++++++-------- 1 file changed, 200 insertions(+), 175 deletions(-) diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js index b0a4160c7..f34063cb9 100644 --- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js +++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js @@ -17,6 +17,8 @@ import {LitElement, html} from "lit"; import {classMap} from "lit/directives/class-map.js"; import UtilsNew from "../../../../core/utils-new.js"; +import ModalUtils from "../../../commons/modal/modal-utils.js"; +import LitUtils from "../../../commons/utils/lit-utils.js"; import "./../../../commons/forms/select-field-filter.js"; export default class OpencgaAnnotationFilterModal extends LitElement { @@ -43,9 +45,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement { selectedVariablesText: { type: String }, - config: { - type: Object - } }; } @@ -56,38 +55,45 @@ export default class OpencgaAnnotationFilterModal extends LitElement { this.variableMap = {}; } - connectedCallback() { - super.connectedCallback(); - this._config = {...this.getDefaultConfig(), ...this.config}; - } - - updated(changedProperties) { + update(changedProperties) { if (changedProperties.has("opencgaSession")) { this.opencgaSessionObserver(); } if (changedProperties.has("selectedVariablesText")) { this.selectedVariablesTextObserver(); } + + super.update(changedProperties); } - /** - * It builds this.selectedVariables from the serialized string this.selectedVariablesText - */ - async selectedVariablesTextObserver() { + opencgaSessionObserver() { + this.variableSets = []; + if (typeof this.opencgaSession.study.variableSets !== "undefined") { + this._updateVariableSets(this.opencgaSession.study); + } else { + this.opencgaClient.studies() + .info(this.opencgaSession.study.id, {include: "variableSets"}) + .then(response => { + this._updateVariableSets(response.getResult(0)); + }) + .catch(() => { + // this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}})); + console.error("Could not obtain the variable sets of the study " + this.opencgaSession.study); + }); + } + } + + // It builds this.selectedVariables from the serialized string this.selectedVariablesText + selectedVariablesTextObserver() { this.selectedVariables = {}; if (this.selectedVariablesText) { const variables = this.selectedVariablesText.split(";"); - this.requestUpdate(); - await this.updateComplete; for (const v of variables) { - const [, variableSetId, variableId, operator, value] = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+)/g)][0]; + const [, variableSetId, variableId, operator, value] = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+[\s+\w+]*)/g)][0]; this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {operator, value}}; } - } this.selectedVariables = {...this.selectedVariables}; - this.requestUpdate(); - } /** @@ -104,60 +110,24 @@ export default class OpencgaAnnotationFilterModal extends LitElement { .join(";"); selected.push(singleVariableSetvariables); } - const event = new CustomEvent("annotationChange", { - detail: { - value: selected.join(";") - } - }); - this.dispatchEvent(event); + LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";")); } - opencgaSessionObserver() { - - this.variableSets = []; - - /* if (typeof this.opencgaSession.study === "undefined") { - this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}})); - return; - }*/ - - if (typeof this.opencgaSession.study.variableSets !== "undefined") { - this._updateVariableSets(this.opencgaSession.study); - } else { - const _this = this; - - this.opencgaClient.studies().info(this.opencgaSession.study.id, {include: "variableSets"}) - .then(response => { - this._updateVariableSets(response.getResult(0)); - }) - .catch(function () { - // this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}})); - console.error("Could not obtain the variable sets of the study " + _this.opencgaSession.study); - }); - } - - } - - async _updateVariableSets(study) { + _updateVariableSets(study) { + // CAUTION: MAP_BOOLEAN MISSING const sort = ["TEXT", "STRING", "NUMERIC", "INTEGER", "DOUBLE", "CATEGORICAL", "BOOLEAN", "OBJECT", "MAP_STRING", "MAP_DOUBLE", "MAP_INTEGER"]; - if (typeof study.variableSets === "undefined") { - this.variableSets = []; - } else { - const _variableSets = []; - for (const variableSet of study.variableSets) { + this.variableSets = []; + if (typeof study.variableSets !== "undefined") { + this.variableSets = study.variableSets.filter(variableSet => { if (UtilsNew.isEmpty(this.resource) || variableSet.entities.includes(this.resource)) { - variableSet.variables.sort((a, b) => { - return sort.indexOf(a.type) - sort.indexOf(b.type); - }); - _variableSets.push({ + variableSet.variables.sort((a, b) => sort.indexOf(a.type) - sort.indexOf(b.type)); + return { name: variableSet.name || variableSet.id, ...variableSet - }); + }; } - } - this.variableSets = _variableSets; + }); } - this.requestUpdate(); } changeOperator(e) { @@ -197,7 +167,24 @@ export default class OpencgaAnnotationFilterModal extends LitElement { const value = e.target.value.trim(); if (value) { - this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator: "="}}; + this.selectedVariables[variableSetId] = { + ...this.selectedVariables[variableSetId] ?? {}, + [variableId]: {value, operator: "="} + }; + } else { + delete this.selectedVariables[variableSetId][variableId]; + } + this.selectedVariables = {...this.selectedVariables}; + this.selectedVariablesSerializer(); + } + + addCategoricalFilter(variableSetId, variableId, key) { + const value = key.trim(); + if (value) { + this.selectedVariables[variableSetId] = { + ...this.selectedVariables[variableSetId] ?? {}, + [variableId]: {value, operator: "="} + }; } else { delete this.selectedVariables[variableSetId][variableId]; } @@ -208,7 +195,10 @@ export default class OpencgaAnnotationFilterModal extends LitElement { addBooleanFilter(e) { const {variableId, variableSetId, value} = e.target.dataset; console.log(variableId, variableSetId, value); - this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator: "="}}; + this.selectedVariables[variableSetId] = { + ...this.selectedVariables[variableSetId] ?? {}, + [variableId]: {value, operator: "="} + }; this.selectedVariables = {...this.selectedVariables}; this.selectedVariablesSerializer(); } @@ -270,25 +260,26 @@ export default class OpencgaAnnotationFilterModal extends LitElement { .data="${variable?.allowedKeys}" .value="${this.variableMap?.[variableSet.id]?.[variable.id] ?? []}" .config="${{ - multiple: true, - liveSearch: false - }}" + multiple: true, + liveSearch: false + }}" @filterChange="${e => this.changeMap(variableSet.id, variable.id, e.detail.value)}">
${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => { - return html` + return html`
+ @input="${this.addInputFilter}" + .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
`; - }) - } + }) + }
` : html` @@ -309,7 +300,8 @@ export default class OpencgaAnnotationFilterModal extends LitElement { case "MAP_INTEGER": content = html` - ${variable?.allowedKeys?.length ? html` + ${variable?.allowedKeys?.length ? + html`
- `; - }) - } + `; + })}
- ` : html` -
- - - ${variable.id} - - -
`} - - - `; + ` : + html` +
+ + +
+ `} + `; break; case "TEXT": case "STRING": @@ -401,25 +397,47 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
- +
- `; + + `; break; case "CATEGORICAL": content = html` - `; +
+ + + +
+ `; break; case "BOOLEAN": content = html` @@ -431,16 +449,31 @@ export default class OpencgaAnnotationFilterModal extends LitElement { ${variable.id}
- + True - + False
- `; + + `; break; default: throw new Error("Type not recognized " + variable.type + "(" + variable.id + ")"); @@ -448,68 +481,60 @@ export default class OpencgaAnnotationFilterModal extends LitElement { return html`${content}`; } - filterChange() { - - } - showModal() { - const annotationModal = new bootstrap.Modal(`#${this._prefix}annotation-modal`); + const annotationModal = new bootstrap.Modal(`#${this._prefix}AnnotationFilterModal`); annotationModal.show(); UtilsNew.initTooltip(this); } - getDefaultConfig() { - return { - - }; - } - - render() { + renderBody() { return html` - ${this.variableSets?.length ? html` - - -