From dd88d8633f00c984ae1eef219a950add7ea4aed3 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 25 Sep 2024 16:41:12 +0200
Subject: [PATCH] Optimize helpers filtering (#22080)

---
 .../config/helpers/ha-config-helpers.ts       | 77 +++++++++++--------
 1 file changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 3051c1e55c..43f08bd164 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -44,7 +44,6 @@ import {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
-import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
@@ -53,6 +52,7 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-overflow-menu";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import {
@@ -67,9 +67,8 @@ import {
 import { getConfigFlowHandlers } from "../../../data/config_flow";
 import { fullEntitiesContext } from "../../../data/context";
 import {
-  DataTableFilters,
-  deserializeFilters,
-  serializeFilters,
+  DataTableFiltersItems,
+  DataTableFiltersValues,
 } from "../../../data/data_table_filters";
 import {
   EntityRegistryEntry,
@@ -202,13 +201,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
   @storage({
     storage: "sessionStorage",
-    key: "helpers-table-filters-full",
+    key: "helpers-table-filters",
     state: true,
     subscribe: false,
-    serializer: serializeFilters,
-    deserializer: deserializeFilters,
   })
-  private _filters: DataTableFilters = {};
+  private _filters: DataTableFiltersValues = {};
+
+  @state() private _filteredItems: DataTableFiltersItems = {};
 
   @state() private _expandedFilter?: string;
 
@@ -567,10 +566,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         @selection-changed=${this._handleSelectionChanged}
         hasFilters
         .filters=${Object.values(this._filters).filter((filter) =>
-          Array.isArray(filter.value)
-            ? filter.value.length
-            : filter.value &&
-              Object.values(filter.value).some((val) =>
+          Array.isArray(filter)
+            ? filter.length
+            : filter &&
+              Object.values(filter).some((val) =>
                 Array.isArray(val) ? val.length : val
               )
         ).length}
@@ -600,7 +599,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         <ha-filter-floor-areas
           .hass=${this.hass}
           .type=${"entity"}
-          .value=${this._filters["ha-filter-floor-areas"]?.value}
+          .value=${this._filters["ha-filter-floor-areas"]}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           .expanded=${this._expandedFilter === "ha-filter-floor-areas"}
@@ -610,7 +609,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         <ha-filter-devices
           .hass=${this.hass}
           .type=${"entity"}
-          .value=${this._filters["ha-filter-devices"]?.value}
+          .value=${this._filters["ha-filter-devices"]}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           .expanded=${this._expandedFilter === "ha-filter-devices"}
@@ -619,7 +618,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         ></ha-filter-devices>
         <ha-filter-labels
           .hass=${this.hass}
-          .value=${this._filters["ha-filter-labels"]?.value}
+          .value=${this._filters["ha-filter-labels"]}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           .expanded=${this._expandedFilter === "ha-filter-labels"}
@@ -629,7 +628,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         <ha-filter-categories
           .hass=${this.hass}
           scope="helpers"
-          .value=${this._filters["ha-filter-categories"]?.value}
+          .value=${this._filters["ha-filter-categories"]}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           .expanded=${this._expandedFilter === "ha-filter-categories"}
@@ -763,36 +762,44 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
   private _filterChanged(ev) {
     const type = ev.target.localName;
-    this._filters = { ...this._filters, [type]: ev.detail };
+
+    this._filters = { ...this._filters, [type]: ev.detail.value };
+    this._filteredItems = { ...this._filteredItems, [type]: ev.detail.items };
     this._applyFilters();
   }
 
   private _applyFilters() {
     const filters = Object.entries(this._filters);
+
     let items: Set<string> | undefined;
-    for (const [key, filter] of filters) {
-      if (filter.items) {
-        if (!items) {
-          items = filter.items;
-          continue;
-        }
-        items =
-          "intersection" in items
-            ? // @ts-ignore
-              items.intersection(filter.items)
-            : new Set([...items].filter((x) => filter.items!.has(x)));
+
+    Object.values(this._filteredItems).forEach((itms) => {
+      if (!itms) {
+        return;
       }
+      if (!items) {
+        items = itms;
+        return;
+      }
+      items =
+        "intersection" in items
+          ? // @ts-ignore
+            items.intersection(itms)
+          : new Set([...items].filter((x) => itms!.has(x)));
+    });
+
+    for (const [key, filter] of filters) {
       if (
         key === "ha-filter-labels" &&
-        Array.isArray(filter.value) &&
-        filter.value.length
+        Array.isArray(filter) &&
+        filter.length
       ) {
         const labelItems: Set<string> = new Set();
         this._stateItems
           .filter((stateItem) =>
             this._entityReg
               .find((reg) => reg.entity_id === stateItem.entity_id)
-              ?.labels.some((lbl) => (filter.value as string[]).includes(lbl))
+              ?.labels.some((lbl) => filter.includes(lbl))
           )
           .forEach((stateItem) => labelItems.add(stateItem.entity_id));
         if (!items) {
@@ -807,14 +814,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       }
       if (
         key === "ha-filter-categories" &&
-        Array.isArray(filter.value) &&
-        filter.value.length
+        Array.isArray(filter) &&
+        filter.length
       ) {
         const categoryItems: Set<string> = new Set();
         this._stateItems
           .filter(
             (stateItem) =>
-              filter.value![0] ===
+              filter[0] ===
               this._entityReg.find(
                 (reg) => reg.entity_id === stateItem.entity_id
               )?.categories.helpers
@@ -831,11 +838,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             : new Set([...items].filter((x) => categoryItems!.has(x)));
       }
     }
+
     this._filteredStateItems = items ? [...items] : undefined;
   }
 
   private _clearFilter() {
     this._filters = {};
+    this._filteredItems = {};
     this._applyFilters();
   }