diff --git a/src/webcomponents/variant/variant-browser-horizontal-filter.js b/src/webcomponents/variant/variant-browser-horizontal-filter.js index 692426297..64e24bff1 100644 --- a/src/webcomponents/variant/variant-browser-horizontal-filter.js +++ b/src/webcomponents/variant/variant-browser-horizontal-filter.js @@ -122,6 +122,20 @@ export default class VariantBrowserHorizontalFilter extends LitElement { // this.preparedQuery = {...this.query}; // propagates here the iva-app query object // } + firstUpdated() { + // register listeners to bootstrap collapse events + Array.from(this.querySelectorAll(`[data-bs-role="collapse"]`)).forEach(el => { + el.addEventListener("show.bs.collapse", e => { + e.target.previousElementSibling.querySelector("i").classList.remove("fa-chevron-down"); + e.target.previousElementSibling.querySelector("i").classList.add("fa-chevron-up"); + }); + el.addEventListener("hide.bs.collapse", e => { + e.target.previousElementSibling.querySelector("i").classList.remove("fa-chevron-up"); + e.target.previousElementSibling.querySelector("i").classList.add("fa-chevron-down"); + }); + }); + } + update(changedProperties) { // if (changedProperties.has("opencgaSession")) { // this.opencgaSessionObserver(); @@ -778,16 +792,47 @@ export default class VariantBrowserHorizontalFilter extends LitElement { } renderAdvancedFilters() { - return this.advancedFilters.map(section => { + return this.advancedFilters.map((section, index) => { return html` -