mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 03:06:41 +00:00
Refactor multi term fuse search to reuse it (#25143)
* Refactor multi term fuse search to re-use * Do not create filter when not open * Update fuse options * Use fuse options
This commit is contained in:
parent
11b8f6210f
commit
94b5ed97c6
@ -1,6 +1,5 @@
|
||||
import { mdiMagnify, mdiPlus } from "@mdi/js";
|
||||
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
|
||||
import type { IFuseOptions } from "fuse.js";
|
||||
import Fuse from "fuse.js";
|
||||
import type { HassEntity } from "home-assistant-js-websocket";
|
||||
import type { PropertyValues, TemplateResult } from "lit";
|
||||
@ -21,6 +20,7 @@ import { domainToName } from "../../data/integration";
|
||||
import type { HelperDomain } from "../../panels/config/helpers/const";
|
||||
import { isHelperDomain } from "../../panels/config/helpers/const";
|
||||
import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
|
||||
import { HaFuse } from "../../resources/fuse";
|
||||
import type { HomeAssistant, ValueChangedEvent } from "../../types";
|
||||
import "../ha-combo-box";
|
||||
import type { HaComboBox } from "../ha-combo-box";
|
||||
@ -482,45 +482,31 @@ export class HaEntityPicker extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private _fuseKeys = [
|
||||
private _fuseIndex = memoizeOne((states: EntityPickerItem[]) =>
|
||||
Fuse.createIndex(
|
||||
[
|
||||
"entity_name",
|
||||
"device_name",
|
||||
"area_name",
|
||||
"translated_domain",
|
||||
"friendly_name", // for backwards compatibility
|
||||
"entity_id", // for technical search
|
||||
];
|
||||
|
||||
private _fuseIndex = memoizeOne((states: EntityPickerItem[]) =>
|
||||
Fuse.createIndex(this._fuseKeys, states)
|
||||
],
|
||||
states
|
||||
)
|
||||
);
|
||||
|
||||
private _filterChanged(ev: CustomEvent): void {
|
||||
if (!this._opened) return;
|
||||
|
||||
const target = ev.target as HaComboBox;
|
||||
const filterString = ev.detail.value.trim().toLowerCase() as string;
|
||||
|
||||
const minLength = 2;
|
||||
|
||||
const searchTerms = (filterString.split(" ") ?? []).filter(
|
||||
(term) => term.length >= minLength
|
||||
);
|
||||
|
||||
if (searchTerms.length > 0) {
|
||||
const index = this._fuseIndex(this._items);
|
||||
const fuse = new HaFuse(this._items, {}, index);
|
||||
|
||||
const options: IFuseOptions<EntityPickerItem> = {
|
||||
isCaseSensitive: false,
|
||||
threshold: 0.3,
|
||||
ignoreDiacritics: true,
|
||||
minMatchCharLength: minLength,
|
||||
};
|
||||
|
||||
const fuse = new Fuse(this._items, options, index);
|
||||
const results = fuse.search({
|
||||
$and: searchTerms.map((term) => ({
|
||||
$or: this._fuseKeys.map((key) => ({ [key]: term })),
|
||||
})),
|
||||
});
|
||||
const results = fuse.multiTermsSearch(filterString);
|
||||
if (results) {
|
||||
target.filteredItems = results.map((result) => result.item);
|
||||
} else {
|
||||
target.filteredItems = this._items;
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { mdiChartLine } from "@mdi/js";
|
||||
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
|
||||
import Fuse, { type IFuseOptions } from "fuse.js";
|
||||
import Fuse from "fuse.js";
|
||||
import type { HassEntity } from "home-assistant-js-websocket";
|
||||
import type { PropertyValues, TemplateResult } from "lit";
|
||||
import { html, LitElement, nothing } from "lit";
|
||||
@ -16,15 +16,16 @@ import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import { getEntityContext } from "../../common/entity/get_entity_context";
|
||||
import { caseInsensitiveStringCompare } from "../../common/string/compare";
|
||||
import { computeRTL } from "../../common/util/compute_rtl";
|
||||
import { domainToName } from "../../data/integration";
|
||||
import type { StatisticsMetaData } from "../../data/recorder";
|
||||
import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
|
||||
import { HaFuse } from "../../resources/fuse";
|
||||
import type { HomeAssistant, ValueChangedEvent } from "../../types";
|
||||
import "../ha-combo-box";
|
||||
import type { HaComboBox } from "../ha-combo-box";
|
||||
import "../ha-combo-box-item";
|
||||
import "../ha-svg-icon";
|
||||
import "./state-badge";
|
||||
import { domainToName } from "../../data/integration";
|
||||
|
||||
type StatisticItemType = "entity" | "external" | "no_state";
|
||||
|
||||
@ -364,7 +365,10 @@ export class HaStatisticPicker extends LitElement {
|
||||
this._getStatisticIds();
|
||||
}
|
||||
|
||||
if (!this._initialItems || (changedProps.has("_opened") && this._opened)) {
|
||||
if (
|
||||
this.statisticIds &&
|
||||
(!this._initialItems || (changedProps.has("_opened") && this._opened))
|
||||
) {
|
||||
this._items = this._getItems(
|
||||
this._opened,
|
||||
this.hass,
|
||||
@ -433,45 +437,32 @@ export class HaStatisticPicker extends LitElement {
|
||||
this._opened = ev.detail.value;
|
||||
}
|
||||
|
||||
private _fuseKeys = [
|
||||
private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
|
||||
Fuse.createIndex(
|
||||
[
|
||||
"label",
|
||||
"entity_name",
|
||||
"device_name",
|
||||
"area_name",
|
||||
"friendly_name", // for backwards compatibility
|
||||
"id", // for technical search
|
||||
];
|
||||
|
||||
private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
|
||||
Fuse.createIndex(this._fuseKeys, states)
|
||||
],
|
||||
states
|
||||
)
|
||||
);
|
||||
|
||||
private _filterChanged(ev: CustomEvent): void {
|
||||
if (!this._opened) return;
|
||||
|
||||
const target = ev.target as HaComboBox;
|
||||
const filterString = ev.detail.value.trim().toLowerCase() as string;
|
||||
|
||||
const minLength = 2;
|
||||
|
||||
const searchTerms = (filterString.split(" ") ?? []).filter(
|
||||
(term) => term.length >= minLength
|
||||
);
|
||||
|
||||
if (searchTerms.length > 0) {
|
||||
const index = this._fuseIndex(this._items);
|
||||
const fuse = new HaFuse(this._items, {}, index);
|
||||
|
||||
const options: IFuseOptions<StatisticItem> = {
|
||||
isCaseSensitive: false,
|
||||
threshold: 0.3,
|
||||
ignoreDiacritics: true,
|
||||
minMatchCharLength: minLength,
|
||||
};
|
||||
const results = fuse.multiTermsSearch(filterString);
|
||||
|
||||
const fuse = new Fuse(this._items, options, index);
|
||||
const results = fuse.search({
|
||||
$and: searchTerms.map((term) => ({
|
||||
$or: this._fuseKeys.map((key) => ({ [key]: term })),
|
||||
})),
|
||||
});
|
||||
if (results) {
|
||||
target.filteredItems = results.map((result) => result.item);
|
||||
} else {
|
||||
target.filteredItems = this._items;
|
||||
|
78
src/resources/fuse.ts
Normal file
78
src/resources/fuse.ts
Normal file
@ -0,0 +1,78 @@
|
||||
import Fuse, {
|
||||
type Expression,
|
||||
type FuseIndex,
|
||||
type FuseResult,
|
||||
type FuseSearchOptions,
|
||||
type IFuseOptions,
|
||||
} from "fuse.js";
|
||||
|
||||
export interface FuseKey {
|
||||
getFn: null;
|
||||
id: string;
|
||||
path: string[];
|
||||
src: string;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
const DEFAULT_OPTIONS: IFuseOptions<any> = {
|
||||
ignoreDiacritics: true,
|
||||
isCaseSensitive: false,
|
||||
threshold: 0.3,
|
||||
minMatchCharLength: 2,
|
||||
};
|
||||
|
||||
export class HaFuse<T> extends Fuse<T> {
|
||||
public constructor(
|
||||
list: readonly T[],
|
||||
options?: IFuseOptions<T>,
|
||||
index?: FuseIndex<T>
|
||||
) {
|
||||
const mergedOptions = {
|
||||
...DEFAULT_OPTIONS,
|
||||
...options,
|
||||
};
|
||||
super(list, mergedOptions, index);
|
||||
}
|
||||
|
||||
/**
|
||||
* Performs a multi-term search across the indexed data.
|
||||
* Splits the search string into individual terms and performs an AND operation between terms,
|
||||
* where each term is searched across all indexed keys with an OR operation. words with less than
|
||||
* 2 characters are ignored. If no valid terms are found, the search will return null.
|
||||
*
|
||||
* @param search - The search string to split into terms. Terms are space-separated.
|
||||
* @param options - Optional Fuse.js search options to customize the search behavior.
|
||||
* @typeParam R - The type of the result items. Defaults to T (the type of the indexed items).
|
||||
* @returns An array of FuseResult objects containing matched items and their matching information.
|
||||
* If no valid terms are found (after filtering by minimum length), returns all items with empty matches.
|
||||
*/
|
||||
public multiTermsSearch(
|
||||
search: string,
|
||||
options?: FuseSearchOptions
|
||||
): FuseResult<T>[] | null {
|
||||
const terms = search.split(" ");
|
||||
|
||||
// @ts-expect-error options is not part of the Fuse type
|
||||
const { minMatchCharLength } = this.options as IFuseOptions<T>;
|
||||
|
||||
const filteredTerms = minMatchCharLength
|
||||
? terms.filter((term) => term.length >= minMatchCharLength)
|
||||
: terms;
|
||||
|
||||
if (filteredTerms.length === 0) {
|
||||
// If no valid terms are found, return null to indicate no search was performed
|
||||
return null;
|
||||
}
|
||||
|
||||
const index = this.getIndex().toJSON();
|
||||
const keys = index.keys as unknown as FuseKey[]; // Fuse type for key is not correct
|
||||
|
||||
const expression: Expression = {
|
||||
$and: filteredTerms.map((term) => ({
|
||||
$or: keys.map((key) => ({ $path: key.path, $val: term })),
|
||||
})),
|
||||
};
|
||||
|
||||
return this.search(expression, options);
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user