Merge pull request #997 from opencb/TASK-7033

TASK-7033 - IVA cannot filter by specific variable types in AnnotationSets
opencb · Nov 4, 2024 · a023943 · a023943
2 parents 57388a4 + 4af02be
commit a023943
Show file tree

Hide file tree

Showing 3 changed files with 356 additions and 285 deletions.
diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
@@ -17,15 +17,17 @@ export default class ModalUtils {
 
     static create(self, id, config) {
         // Parse modal parameters, all of them must start with prefix 'modal'
-        const modalWidth = config.display?.modalWidth || "768px";
-        const modalSize = config.display?.modalSize || "";
-        const modalTitle = config.display?.modalTitle || "";
-        const modalTitleHeader = config.display?.modalTitleHeader || "h4";
-        const modalTitleClassName = config.display?.modalTitleClassName || "";
-        const modalTitleStyle = config.display?.modalTitleStyle || "";
-        const btnsVisible = config.display?.modalbtnsVisible;
-        const modalDraggable = config.display?.modalDraggable || false;
-        const modalCyDataName = config.display?.modalCyDataName || "";
+        const modalWidth = config.display?.modalWidth ?? "768px";
+        const modalSize = config.display?.modalSize ?? "";
+        const modalTitle = config.display?.modalTitle ?? "";
+        const modalTitleHeader = config.display?.modalTitleHeader ?? "h4";
+        const modalTitleClassName = config.display?.modalTitleClassName ?? "";
+        const modalTitleStyle = config.display?.modalTitleStyle ?? "";
+        const btnsVisible = config.display?.modalbtnsVisible ?? false;
+        const btnCancelVisible = config.display?.btnCancelVisible ?? true;
+        const btnSaveVisible = config.display?.btnSaveVisible ?? true;
+        const modalDraggable = config.display?.modalDraggable ?? false;
+        const modalCyDataName = config.display?.modalCyDataName ?? "";
 
         return html`
             <div
@@ -38,7 +40,7 @@ export default class ModalUtils {
                 aria-hidden="true"
                 data-cy="${modalCyDataName}"
             >
-                <div class="modal-dialog ${modalSize}" style="width: ${modalWidth}">
+                <div class="modal-dialog ${modalSize}" style="width: ${modalSize ? "": modalWidth}">
                     <div class="modal-content">
                         <div class="modal-header">
                             ${ModalUtils.#getTitleHeader(modalTitleHeader, modalTitle, "modal-title " + modalTitleClassName, modalTitleStyle)}
@@ -53,6 +55,7 @@ export default class ModalUtils {
                         </div>
                         ${btnsVisible? html`
                             <div class="modal-footer">
+                                ${btnCancelVisible ? html`
                                 <button
                                     type="button"
                                     class="btn btn-light"
@@ -61,6 +64,8 @@ export default class ModalUtils {
                                 >
                                     ${config?.display?.cancelButtonText || "Cancel"}
                                 </button>
+                                ` : nothing}
+                                ${btnSaveVisible ? html`
                                 <button
                                     type="button"
                                     class="btn btn-primary"
@@ -69,6 +74,7 @@ export default class ModalUtils {
                                 >
                                     ${config?.display?.okButtonText || "Save"}
                                 </button>
+                                ` : nothing}
                             </div>
                         `: nothing}
                     </div>

diff --git 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}">
                         </opencga-annotation-filter-modal>