diff --git a/src/webcomponents/variant/variant-browser-horizontal-filter.js b/src/webcomponents/variant/variant-browser-horizontal-filter.js index 5a799b2a4..2795821a9 100644 --- a/src/webcomponents/variant/variant-browser-horizontal-filter.js +++ b/src/webcomponents/variant/variant-browser-horizontal-filter.js @@ -83,6 +83,9 @@ export default class VariantBrowserHorizontalFilter extends LitElement { this.queryList = []; this.preparedQuery = {}; + // history filters + this.history = []; + // quick and advanced filters this.quickFiltersList = []; this.advancedFilters = []; @@ -172,7 +175,11 @@ export default class VariantBrowserHorizontalFilter extends LitElement { // 4. you will see again the deleted filter in active-filters this.preparedQuery = {...this.query}; this.updateQueryList(); - // this.requestUpdate(); + + // update the history only if it is empty + if (this.history.length === 0) { + this.updateHistory(); + } } configObserver() { @@ -198,10 +205,6 @@ export default class VariantBrowserHorizontalFilter extends LitElement { .filter(section => section.filters.length > 0); } - onSearch() { - this.notifySearch(this.preparedQuery); - } - notifyQuery(query) { LitUtils.dispatchCustomEvent(this, "queryChange", null, {query}); } @@ -210,6 +213,28 @@ export default class VariantBrowserHorizontalFilter extends LitElement { LitUtils.dispatchCustomEvent(this, "querySearch", null, {query}); } + updateHistory() { + // 1. remove all identical filters + const _history = this.history.filter(historyItem => { + return JSON.stringify(historyItem.query) !== JSON.stringify(this.preparedQuery); + }); + + // 2. remove previous latest + if (_history?.length > 0) { + _history[0].latest = false; + } + + // 3. prepare new latest filter and add at the beginning + _history.unshift({ + date: UtilsNew.getDatetime(), + query: UtilsNew.objectClone(this.preparedQuery), + latest: true, + }); + + // 4. limit up to 10 history items + this.history = _history.slice(0, 10); + } + updateQueryList() { this.queryList = []; Object.keys(this.preparedQuery).forEach(key => { @@ -349,6 +374,14 @@ export default class VariantBrowserHorizontalFilter extends LitElement { this.requestUpdate(); } + onApplyQuery(query) { + } + + onSearch() { + this.notifySearch(this.preparedQuery); + this.updateHistory(); + } + _isFilterVisible(subsection) { let visible = true; if (typeof subsection?.visible !== "undefined" && subsection?.visible !== null) { @@ -848,6 +881,43 @@ export default class VariantBrowserHorizontalFilter extends LitElement { `; } + renderHistoryItems() { + return this.history.map(item => { + const filterTitle = UtilsNew.dateFormatter(item.date, "HH:mm:ss"); + const filterParams = Object.keys(item.query) + .filter(key => key !== "study" && !!item.query[key]); + const filterTooltip = filterParams + .map(key => `${key} = ${item.query[key]}`) + .join("
"); + + return html` + +
+
+
+ ${filterTitle} ${item.latest ? html` (latest)` : nothing} +
+
+ ${filterParams?.length > 0 ? html` + ${filterParams.slice(0, 2).map(key => html` +
+ ${key}: ${UtilsNew.substring(item.query[key], 20)} +
+ `)} + ` : html`Empty query.`} +
+
+
+ + + +
+
+
+ `; + }); + } + render() { const advancedFiltersCount = this.advancedFilters.reduce((count, section) => { const appliedFilters = section.filters.filter(filter => { @@ -881,8 +951,8 @@ export default class VariantBrowserHorizontalFilter extends LitElement { History -