Apply changes from filter chip dropdowns immediately (#2877)

Co-authored-by: sua yoo <[email protected]>

Author: emma-sg

frontend/src/features/archived-items/archived-item-state-filter.ts

@@ -15,6 +15,7 @@ import {
   state,
 } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { isEqual } from "lodash";
 import { isFocusable } from "tabbable";
 
 import { CrawlStatus } from "./crawl-status";
@@ -52,14 +53,8 @@ export class ArchivedItemStateFilter extends BtrixElement {
 
   private readonly fuse = new Fuse<CrawlState>(finishedCrawlStates);
 
-  @state()
-  private get selectedStates() {
-    return Array.from(this.selected.entries())
-      .filter(([_tag, selected]) => selected)
-      .map(([tag]) => tag);
-  }
-
-  private selected = new Map<CrawlState, boolean>();
+  @state({ hasChanged: isEqual })
+  selected = new Map<CrawlState, boolean>();
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("states")) {
@@ -71,6 +66,22 @@ export class ArchivedItemStateFilter extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected")) {
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
+        >("btrix-change", {
+          detail: {
+            value: Array.from(this.selected.entries())
+              .filter(([_tag, selected]) => selected)
+              .map(([tag]) => tag),
+          },
+        }),
+      );
+    }
+  }
+
   render() {
     const options = this.searchString
       ? this.fuse.search(this.searchString)
@@ -87,14 +98,6 @@ export class ArchivedItemStateFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
-            >("btrix-change", {
-              detail: { value: this.selectedStates },
-            }),
-          );
         }}
       >
         ${this.states?.length
@@ -250,8 +253,9 @@ export class ArchivedItemStateFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value as CrawlState, checked);
-          this.requestUpdate("selectedStates");
+          this.selected = new Map(
+            this.selected.set(value as CrawlState, checked),
+          );
         }}
       >
         ${repeat(

frontend/src/features/archived-items/archived-item-tag-filter.ts

@@ -17,6 +17,7 @@ import {
   state,
 } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { isEqual } from "lodash";
 import { isFocusable } from "tabbable";
 
 import { BtrixElement } from "@/classes/BtrixElement";
@@ -56,17 +57,11 @@ export class ArchivedItemTagFilter extends BtrixElement {
     keys: ["tag"],
   });
 
-  @state()
-  private get selectedTags() {
-    return Array.from(this.selected.entries())
-      .filter(([_tag, selected]) => selected)
-      .map(([tag]) => tag);
-  }
-
-  private selected = new Map<string, boolean>();
+  @state({ hasChanged: isEqual })
+  selected = new Map<string, boolean>();
 
   @state()
-  private type: "and" | "or" = "or";
+  type: "and" | "or" = "or";
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("tags")) {
@@ -78,6 +73,25 @@ export class ArchivedItemTagFilter extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected") || changedProperties.has("type")) {
+      const selectedTags = Array.from(this.selected.entries())
+        .filter(([_tag, selected]) => selected)
+        .map(([tag]) => tag);
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
+        >("btrix-change", {
+          detail: {
+            value: selectedTags.length
+              ? { tags: selectedTags, type: this.type }
+              : undefined,
+          },
+        }),
+      );
+    }
+  }
+
   private readonly orgTagsTask = new Task(this, {
     task: async () => {
       const { tags } = await this.api.fetch<WorkflowTags>(
@@ -105,18 +119,6 @@ export class ArchivedItemTagFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
-            >("btrix-change", {
-              detail: {
-                value: this.selectedTags.length
-                  ? { tags: this.selectedTags, type: this.type }
-                  : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.tags?.length
@@ -304,8 +306,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value, checked);
-          this.requestUpdate("selectedTags");
+          this.selected = new Map(this.selected.set(value, checked));
         }}
       >
         ${repeat(

frontend/src/features/crawl-workflows/workflow-profile-filter.ts

@@ -17,6 +17,7 @@ import {
   state,
 } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { isEqual } from "lodash";
 import queryString from "query-string";
 import { isFocusable } from "tabbable";
 
@@ -57,7 +58,8 @@ export class WorkflowProfileFilter extends BtrixElement {
     keys: ["id", "name", "description", "origins"],
   });
 
-  private selected = new Map<string, boolean>();
+  @state({ hasChanged: isEqual })
+  selected = new Map<string, boolean>();
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("profiles")) {
@@ -69,6 +71,26 @@ export class WorkflowProfileFilter extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected")) {
+      const selectedProfiles = [];
+
+      for (const [profile, value] of this.selected) {
+        if (value) {
+          selectedProfiles.push(profile);
+        }
+      }
+
+      this.dispatchEvent(
+        new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
+          detail: {
+            value: selectedProfiles.length ? selectedProfiles : undefined,
+          },
+        }),
+      );
+    }
+  }
+
   private readonly profilesTask = new Task(this, {
     task: async () => {
       const query = queryString.stringify(
@@ -105,22 +127,6 @@ export class WorkflowProfileFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          const selectedProfiles = [];
-
-          for (const [profile, value] of this.selected) {
-            if (value) {
-              selectedProfiles.push(profile);
-            }
-          }
-
-          this.dispatchEvent(
-            new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
-              detail: {
-                value: selectedProfiles.length ? selectedProfiles : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.profiles?.length
@@ -160,17 +166,7 @@ export class WorkflowProfileFilter extends BtrixElement {
                       this.checkboxes.forEach((checkbox) => {
                         checkbox.checked = false;
                       });
-
-                      this.dispatchEvent(
-                        new CustomEvent<BtrixChangeEvent["detail"]>(
-                          "btrix-change",
-                          {
-                            detail: {
-                              value: undefined,
-                            },
-                          },
-                        ),
-                      );
+                      this.selected = new Map();
                     }}
                     >${msg("Clear")}</sl-button
                   >`
@@ -343,7 +339,7 @@ export class WorkflowProfileFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value, checked);
+          this.selected = new Map(this.selected.set(value, checked));
         }}
       >
         ${repeat(