Improve filtering and performance for icon picker (#14401)

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/components/ha-combo-box.ts

@@ -3,6 +3,7 @@ import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import type {
+  ComboBoxDataProvider,
   ComboBoxLight,
   ComboBoxLightFilterChangedEvent,
   ComboBoxLightOpenedChangedEvent,
@@ -82,6 +83,9 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: false }) public filteredItems?: any[];
 
+  @property({ attribute: false })
+  public dataProvider?: ComboBoxDataProvider<any>;
+
   @property({ attribute: "allow-custom-value", type: Boolean })
   public allowCustomValue = false;
 
@@ -148,6 +152,7 @@ export class HaComboBox extends LitElement {
         .items=${this.items}
         .value=${this.value || ""}
         .filteredItems=${this.filteredItems}
+        .dataProvider=${this.dataProvider}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
         .required=${this.required}
@@ -225,13 +230,13 @@ export class HaComboBox extends LitElement {
   }
 
   private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
+    ev.stopPropagation();
     const opened = ev.detail.value;
     // delay this so we can handle click event for toggle button before setting _opened
     setTimeout(() => {
       this.opened = opened;
     }, 0);
-    // @ts-ignore
+    fireEvent(this, "opened-changed", { value: ev.detail.value });
-    fireEvent(this, ev.type, ev.detail);
 
     if (opened) {
       const overlay = document.querySelector<HTMLElement>(
@@ -300,8 +305,8 @@ export class HaComboBox extends LitElement {
   }
 
   private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
-    // @ts-ignore
+    ev.stopPropagation();
-    fireEvent(this, ev.type, ev.detail, { composed: false });
+    fireEvent(this, "filter-changed", { value: ev.detail.value });
   }
 
   private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
@@ -363,3 +368,10 @@ declare global {
     "ha-combo-box": HaComboBox;
   }
 }
+
+declare global {
+  interface HASSDomEvents {
+    "filter-changed": { value: string };
+    "opened-changed": { value: boolean };
+  }
+}

src/components/ha-icon-picker.ts

@@ -1,28 +1,76 @@
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  ComboBoxDataProviderCallback,
+  ComboBoxDataProviderParams,
+} from "@vaadin/combo-box/vaadin-combo-box-light";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { customIcons } from "../data/custom_icons";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-icon";
 
 type IconItem = {
   icon: string;
+  parts: Set<string>;
   keywords: string[];
 };
-let iconItems: IconItem[] = [];
-let iconLoaded = false;
 
-// eslint-disable-next-line lit/prefer-static-styles
+type RankedIcon = {
-const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<mwc-list-item
+  icon: string;
-  graphic="avatar"
+  rank: number;
->
+};
-  <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+
-  ${item.icon}
+let ICONS: IconItem[] = [];
-</mwc-list-item>`;
+let ICONS_LOADED = false;
+
+const loadIcons = async () => {
+  ICONS_LOADED = true;
+
+  const iconList = await import("../../build/mdi/iconList.json");
+  ICONS = iconList.default.map((icon) => ({
+    icon: `mdi:${icon.name}`,
+    parts: new Set(icon.name.split("-")),
+    keywords: icon.keywords,
+  }));
+
+  const customIconLoads: Promise<IconItem[]>[] = [];
+  Object.keys(customIcons).forEach((iconSet) => {
+    customIconLoads.push(loadCustomIconItems(iconSet));
+  });
+  (await Promise.all(customIconLoads)).forEach((customIconItems) => {
+    ICONS.push(...customIconItems);
+  });
+};
+
+const loadCustomIconItems = async (iconsetPrefix: string) => {
+  try {
+    const getIconList = customIcons[iconsetPrefix].getIconList;
+    if (typeof getIconList !== "function") {
+      return [];
+    }
+    const iconList = await getIconList();
+    const customIconItems = iconList.map((icon) => ({
+      icon: `${iconsetPrefix}:${icon.name}`,
+      parts: new Set(icon.name.split("-")),
+      keywords: icon.keywords ?? [],
+    }));
+    return customIconItems;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
+    return [];
+  }
+};
+
+const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) =>
+  html`<mwc-list-item graphic="avatar">
+    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+    ${item.icon}
+  </mwc-list-item>`;
 
 @customElement("ha-icon-picker")
 export class HaIconPicker extends LitElement {
@@ -46,10 +94,6 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public invalid = false;
 
-  @state() private _opened = false;
-
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
-
   protected render(): TemplateResult {
     return html`
       <ha-combo-box
@@ -58,7 +102,7 @@ export class HaIconPicker extends LitElement {
         item-label-path="icon"
         .value=${this._value}
         allow-custom-value
-        .filteredItems=${iconItems}
+        .dataProvider=${ICONS_LOADED ? this._iconProvider : undefined}
         .label=${this.label}
         .helper=${this.helper}
         .disabled=${this.disabled}
@@ -70,7 +114,6 @@ export class HaIconPicker extends LitElement {
         icon
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
       >
         ${this._value || this.placeholder
           ? html`
@@ -87,46 +130,55 @@ export class HaIconPicker extends LitElement {
     `;
   }
 
-  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
+  // Filter can take a significant chunk of frame (up to 3-5 ms)
-    this._opened = ev.detail.value;
+  private _filterIcons = memoizeOne(
-    if (this._opened && !iconLoaded) {
+    (filter: string, iconItems: IconItem[] = ICONS) => {
-      const iconList = await import("../../build/mdi/iconList.json");
+      if (!filter) {
-
+        return iconItems;
-      iconItems = iconList.default.map((icon) => ({
-        icon: `mdi:${icon.name}`,
-        keywords: icon.keywords,
-      }));
-      iconLoaded = true;
-
-      this.comboBox.filteredItems = iconItems;
-
-      Object.keys(customIcons).forEach((iconSet) => {
-        this._loadCustomIconItems(iconSet);
-      });
-    }
-  }
-
-  private async _loadCustomIconItems(iconsetPrefix: string) {
-    try {
-      const getIconList = customIcons[iconsetPrefix].getIconList;
-      if (typeof getIconList !== "function") {
-        return;
       }
-      const iconList = await getIconList();
-      const customIconItems = iconList.map((icon) => ({
-        icon: `${iconsetPrefix}:${icon.name}`,
-        keywords: icon.keywords ?? [],
-      }));
-      iconItems.push(...customIconItems);
-      this.comboBox.filteredItems = iconItems;
-    } catch (e) {
-      // eslint-disable-next-line
-      console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
-    }
-  }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
+      const filteredItems: RankedIcon[] = [];
-    return !this._opened || changedProps.has("_opened");
+      const addIcon = (icon: string, rank: number) =>
+        filteredItems.push({ icon, rank });
+
+      // Filter and rank such that exact matches rank higher, and prefer icon name matches over keywords
+      for (const item of iconItems) {
+        if (item.parts.has(filter)) {
+          addIcon(item.icon, 1);
+        } else if (item.keywords.includes(filter)) {
+          addIcon(item.icon, 2);
+        } else if (item.icon.includes(filter)) {
+          addIcon(item.icon, 3);
+        } else if (item.keywords.some((word) => word.includes(filter))) {
+          addIcon(item.icon, 4);
+        }
+      }
+
+      // Allow preview for custom icon not in list
+      if (filteredItems.length === 0) {
+        addIcon(filter, 0);
+      }
+
+      return filteredItems.sort((itemA, itemB) => itemA.rank - itemB.rank);
+    }
+  );
+
+  private _iconProvider = (
+    params: ComboBoxDataProviderParams,
+    callback: ComboBoxDataProviderCallback<IconItem | RankedIcon>
+  ) => {
+    const filteredItems = this._filterIcons(params.filter.toLowerCase(), ICONS);
+    const iStart = params.page * params.pageSize;
+    const iEnd = iStart + params.pageSize;
+    callback(filteredItems.slice(iStart, iEnd), filteredItems.length);
+  };
+
+  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    const opened = ev.detail.value;
+    if (opened && !ICONS_LOADED) {
+      await loadIcons();
+      this.requestUpdate();
+    }
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
@@ -147,35 +199,6 @@ export class HaIconPicker extends LitElement {
     );
   }
 
-  private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    const characterCount = filterString.length;
-    if (characterCount >= 2) {
-      const filteredItems: IconItem[] = [];
-      const filteredItemsByKeywords: IconItem[] = [];
-
-      iconItems.forEach((item) => {
-        if (item.icon.includes(filterString)) {
-          filteredItems.push(item);
-          return;
-        }
-        if (item.keywords.some((t) => t.includes(filterString))) {
-          filteredItemsByKeywords.push(item);
-        }
-      });
-
-      filteredItems.push(...filteredItemsByKeywords);
-
-      if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
-      } else {
-        this.comboBox.filteredItems = [{ icon: filterString, keywords: [] }];
-      }
-    } else {
-      this.comboBox.filteredItems = iconItems;
-    }
-  }
-
   private get _value() {
     return this.value || "";
   }