Add dynamic counts to search filters

app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts

@@ -5,6 +5,8 @@
 import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
 import { i18n } from "i18n/i18n";
+import { FilterOptions } from "components/search/filter_element";
+import { search } from "search";
 
 /**
  * This component represents a list of saved annotations
@@ -43,7 +45,19 @@
         return pagination;
     }
 
+    lastFilters: FilterOptions[] = [];
+    get filters(): FilterOptions[] {
+        const filters = savedAnnotationState.getFilters(this.queryParams, this.arrayQueryParams);
+        if (filters === undefined) {
+            // return last filters if the updated filters are not yet available
+            return this.lastFilters;
+        }
+        this.lastFilters = filters;
+        return filters;
+    }
+
     render(): TemplateResult {
+        search.updateFilters(this.filters);
         return this.savedAnnotations.length > 0 ? html`
             <div class="table-scroll-wrapper">
                 <table class="table table-index table-resource">

app/assets/javascripts/components/search/dropdown_filter.ts

@@ -1,28 +1,28 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, Label, FilterCollectionElement } from "components/search/filter_collection_element";
+import {
+    Label,
+    FilterElement,
+    AccentColor
+} from "components/search/filter_element";
 import { i18n } from "i18n/i18n";
-import { DodonaElement } from "components/meta/dodona_element";
+import { FilterCollection } from "components/search/filter_collection";
 
 /**
  * This component inherits from FilterCollectionElement.
  * It represents a dropdown which allows to select one or multiple labels
  *
  * @element d-dropdown-filter
  *
- * @prop {(s: Label) => string} color - a function that fetches the color associated with each label
- * @prop {string} type - The type of the filter collection, used to determine the dropdown button text
+ * @prop {AccentColor} color - the color associated with the filter
  * @prop {string} param - the searchQuery param to be used for this filter
  * @prop {boolean} multi - whether one or more labels can be selected at the same time
- * @prop {(l: Label) => string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-dropdown-filter")
-export class DropdownFilter extends FilterCollectionElement {
-    @property()
-    color: (s: Label) => string;
-    @property()
-    type: string;
+export class DropdownFilter extends FilterElement {
+    @property({ type: String })
+    color: AccentColor;
 
     @property({ state: true })
     filter = "";
@@ -35,16 +35,16 @@ export class DropdownFilter extends FilterCollectionElement {
         return this.showFilter ? this.labels.filter(s => s.name.toLowerCase().includes(this.filter.toLowerCase())) : this.labels;
     }
 
-    render(): TemplateResult {
-        if (this.labels.length === 0) {
-            return html``;
-        }
+    get disabled(): boolean {
+        return this.labels.length === 0 || (!this.multi && this.labels.length === 1);
+    }
 
+    render(): TemplateResult {
         return html`
             <div class="dropdown dropdown-filter">
-                <a class="token token-bordered" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    ${this.getSelectedLabels().map( s => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color(s)} left-icon"></i>`)}
-                    ${i18n.t(`js.dropdown.${this.multi?"multi":"single"}.${this.type}`)}
+                <a class="token token-bordered ${this.disabled ? "disabled" : ""}" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                    ${this.getSelectedLabels().map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color} left-icon"></i>`)}
+                    ${i18n.t(`js.search.filter.${this.param}`)}
                     <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
                 </a>
 
@@ -54,12 +54,13 @@ export class DropdownFilter extends FilterCollectionElement {
                             <input type="text" class="form-control " @input=${e => this.filter = e.target.value} placeholder="${i18n.t("js.dropdown.search")}">
                         </span></li>
                     ` : ""}
-                    ${this.filteredLabels.map(s => html`
+                    ${this.filteredLabels.sort((a, b) => b.count - a.count).map(s => html`
                             <li><span class="dropdown-item-text ">
                                 <div class="form-check">
                                     <input class="form-check-input" type="${this.multi?"checkbox":"radio"}" .checked=${this.isSelected(s)} @click="${() => this.toggle(s)}" id="check-${this.param}-${s.id}">
                                     <label class="form-check-label" for="check-${this.param}-${s.id}">
                                         ${s.name}
+                                        ${s.count ? html`<span class="text-muted float-end ms-4">${s.count}</span>` : ""}
                                     </label>
                                 </div>
                             </span></li>
@@ -75,27 +76,23 @@ export class DropdownFilter extends FilterCollectionElement {
  *
  * @element d-dropdown-filters
  *
- * @prop {[string, FilterCollection][]} filterCollections - the list of filterCollections for which a dropdown should be displayed
+ * @prop {FilterOptions[]} filters - the list of filterOptions for which a dropdown should be displayed
+ * @prop {string[]} hide - the list of filter params that should be hidden
  */
 @customElement("d-dropdown-filters")
-export class DropdownFilters extends DodonaElement {
-    @property( { type: Array })
-    filterCollections: [string, FilterCollection][];
-
+export class DropdownFilters extends FilterCollection {
     render(): TemplateResult {
-        if (!this.filterCollections) {
+        if (!this.visibleFilters) {
             return html``;
         }
 
         return html`
-            ${this.filterCollections.map(([type, c]) => html`
+            ${this.visibleFilters.map(c => html`
                 <d-dropdown-filter
                     .labels=${c.data}
                     .color=${c.color}
-                    .paramVal=${c.paramVal}
                     .param=${c.param}
                     .multi=${c.multi}
-                    .type=${type}
                 >
                 </d-dropdown-filter>
             `)}

app/assets/javascripts/components/search/filter_collection.ts

@@ -0,0 +1,20 @@
+import { DodonaElement } from "components/meta/dodona_element";
+import { property } from "lit/decorators.js";
+import { FilterOptions } from "components/search/filter_element";
+import { search } from "search";
+
+export class FilterCollection extends DodonaElement {
+    @property({ type: Array })
+    filters: FilterOptions[] = [];
+    @property({ type: Array })
+    hide: string[] = [];
+
+    constructor() {
+        super();
+        search.filterCollections.push(this);
+    }
+
+    get visibleFilters(): FilterOptions[] {
+        return this.filters.filter(f => !this.hide.includes(f.param));
+    }
+}

app/assets/javascripts/components/search/filter_collection_element.ts → app/assets/javascripts/components/search/filter_element.ts

@@ -2,12 +2,14 @@
 import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
 
-export type Label = {id: string, name: string};
-export type FilterCollection = {
+export type Label = {id: string, name: string, count?: number};
+export const ACCENT_COLORS = ["pink", "deep-purple", "teal", "orange", "brown", "blue-gray", "red", "purple", "indigo"];
+export type AccentColor = typeof ACCENT_COLORS[number];
+
+export type FilterOptions = {
     data: Label[],
     multi: boolean,
-    color: (l: Label) => string,
-    paramVal: (l: Label) => string,
+    color?: AccentColor,
     param: string
 };
 
@@ -21,13 +23,11 @@
  * @prop {function(Label): string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
-export class FilterCollectionElement extends DodonaElement {
+export class FilterElement extends DodonaElement {
     @property()
     param: string;
     @property({ type: Boolean })
     multi: boolean;
-    @property()
-    paramVal: (l: Label) => string;
     @property({ type: Array })
     labels: Array<Label> = [];
 
@@ -47,36 +47,32 @@
         super.update(changedProperties);
     }
 
-    private str(label: Label): string {
-        return this.paramVal(label).toString();
-    }
-
     private get multiSelected(): string[] {
         return searchQueryState.arrayQueryParams.get(this.param) || [];
     }
 
     private multiUnSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== this.str(label)));
+        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== label.id));
     }
 
     private multiIsSelected(label: Label): boolean {
-        return this.multiSelected.includes(this.str(label));
+        return this.multiSelected.includes(label.id);
     }
 
     private multiSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, this.str(label)]);
+        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, label.id]);
     }
 
     private singleUnSelect(): void {
         searchQueryState.queryParams.set(this.param, undefined);
     }
 
     private singleSelect(label: Label): void {
-        searchQueryState.queryParams.set(this.param, this.str(label));
+        searchQueryState.queryParams.set(this.param, label.id);
     }
 
     private singleIsSelected(label: Label): boolean {
-        return searchQueryState.queryParams.get(this.param) === this.str(label);
+        return searchQueryState.queryParams.get(this.param) === label.id;
     }
 
     isSelected = this.singleIsSelected;

app/assets/javascripts/components/search/filter_tabs.ts

@@ -1,6 +1,6 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterElement, Label } from "components/search/filter_element";
 import { watchMixin } from "components/meta/watch_mixin";
 
 type TabInfo = {id: string, name: string, title?: string, count?: number};
@@ -14,13 +14,11 @@ type TabInfo = {id: string, name: string, title?: string, count?: number};
  * @prop {{id: string, name: string, title: string}[]} labels - all labels that could potentially be selected
  */
 @customElement("d-filter-tabs")
-export class FilterTabs extends watchMixin(FilterCollectionElement) {
+export class FilterTabs extends watchMixin(FilterElement) {
     @property()
     multi = false;
     @property()
     param = "tab";
-    @property()
-    paramVal = (label: Label): string => label.id.toString();
     @property({ type: Array })
     labels: TabInfo[];
 

app/assets/javascripts/components/search/search_field.ts

@@ -3,18 +3,17 @@ import { html, TemplateResult } from "lit";
 import { createDelayer } from "utilities";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ref } from "lit/directives/ref.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterElement, Label } from "components/search/filter_element";
 import { searchQueryState } from "state/SearchQuery";
 import { search } from "search";
-import { DodonaElement } from "components/meta/dodona_element";
 import { i18n } from "i18n/i18n";
+import { FilterCollection } from "components/search/filter_collection";
 /**
  * This component inherits from FilterCollectionElement.
  * It represents a list of filters to be used in a dropdown as typeahead suggestions
  *
  * @element d-search-field-suggestion
  *
- * @prop {string} type - The type of the filter collection, used to determine the dropdown button text
  * @prop {string} filter - The string for which typeahead suggestions should be provided
  * @prop {number} index - bookkeeping param to remember the order across multiple elements
  * @prop {string} param - the searchQuery param to be used for this filter
@@ -23,9 +22,7 @@ import { i18n } from "i18n/i18n";
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-search-field-suggestion")
-export class SearchFieldSuggestion extends FilterCollectionElement {
-    @property()
-    type: string;
+export class SearchFieldSuggestion extends FilterElement {
     @property()
     filter: string;
     @property({ type: Number })
@@ -54,11 +51,12 @@ export class SearchFieldSuggestion extends FilterCollectionElement {
     render(): TemplateResult {
         return this.getFilteredLabels().length == 0 ? html`` : html`
             <li>
-                <h6 class='dropdown-header'>${i18n.t(`js.${this.type}`)}</h6>
+                <h6 class='dropdown-header'>${i18n.t(`js.search.filter.${this.param}`)}</h6>
             </li>
             ${ this.getFilteredLabels().map( label => html`
                 <li><a class="dropdown-item" href="#" @click=${e => this.handleClick(e, label)}>
                     ${unsafeHTML(this.getHighlightedLabel(label.name))}
+                    ${label.count ? html`<span class="text-muted float-end ms-4">${label.count}</span>` : ""}
                 </a></li>
             `)}
         `;
@@ -73,17 +71,16 @@ export class SearchFieldSuggestion extends FilterCollectionElement {
  *
  * @prop {string} placeholder - The placeholder text for an empty searchfield
  * @prop {boolean} eager - if true a search will be run before user input happens
- * @prop {Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>} filterCollections
+ * @prop {FilterOptions[]} filters - The list of filter lists to be used as search suggestions
+ * @prop {string[]} hide - The list of filter lists to be ignored as search suggestions
  *  - The list of filter lists to be used as search suggestions
  */
 @customElement("d-search-field")
-export class SearchField extends DodonaElement {
+export class SearchField extends FilterCollection {
     @property({ type: String })
     placeholder: string;
     @property({ type: Boolean })
     eager: boolean;
-    @property( { type: Array })
-    filterCollections: Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>;
 
     @property({ state: true })
     filter?: string = "";
@@ -150,7 +147,7 @@ export class SearchField extends DodonaElement {
     }
 
     render(): TemplateResult {
-        if (!this.filterCollections) {
+        if (!this.visibleFilters) {
             return html``;
         }
 
@@ -166,12 +163,10 @@ export class SearchField extends DodonaElement {
                 @keydown=${e => this.keydown(e)}
             />
             <ul class="dropdown-menu ${this.filter && this.hasSuggestions ? "show-search-dropdown" : ""}">
-                ${Object.entries(this.filterCollections).map(([type, c], i) => html`
+                ${this.visibleFilters.map((c, i) => html`
                     <d-search-field-suggestion
                         .labels=${c.data}
-                        .type=${type}
                         .filter=${this.filter}
-                        .paramVal=${c.paramVal}
                         .param=${c.param}
                         .multi=${c.multi}
                         .index=${i}