Drop hass from the statistic pickers (#55372)

src/common/entity/compute_entity_name_display.ts

@@ -3,7 +3,10 @@ import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
 } from "../../data/entity/entity_registry";
-import type { HomeAssistant, HomeAssistantRegistries } from "../../types";
+import type {
+  HomeAssistantInternationalization,
+  HomeAssistantRegistries,
+} from "../../types";
 import { ensureArray } from "../array/ensure-array";
 import { computeRTL } from "../util/compute_rtl";
 import { computeAreaName } from "./compute_area_name";
@@ -211,16 +214,20 @@ export interface EntityPickerDisplay {
   secondary?: string;
 }
 
+export interface EntityPickerDisplayOptions extends HomeAssistantRegistries {
+  language: HomeAssistantInternationalization["language"];
+  translationMetadata: HomeAssistantInternationalization["translationMetadata"];
+}
+
 export const computeEntityPickerDisplay = (
-  hass: HomeAssistantRegistries &
-    Pick<HomeAssistant, "language" | "translationMetadata">,
+  options: EntityPickerDisplayOptions,
   stateObj: HassEntity
 ): EntityPickerDisplay => {
-  const parts = computeEntityNameParts(stateObj, hass);
+  const parts = computeEntityNameParts(stateObj, options);
 
   const isRTL = computeRTL(
-    hass.language,
-    hass.translationMetadata.translations
+    options.language,
+    options.translationMetadata.translations
   );
 
   const primary = parts.entity || parts.device || stateObj.entity_id;

src/components/entity/ha-entity-picker.ts

@@ -253,7 +253,10 @@ export class HaEntityPicker extends LitElement {
 
     const { primary, secondary } = computeEntityPickerDisplay(
       {
-        ...this._registries,
+        entities: this._registries.entities,
+        devices: this._registries.devices,
+        areas: this._registries.areas,
+        floors: this._registries.floors,
         language: this._i18n.language,
         translationMetadata: this._i18n.translationMetadata,
       },

src/components/entity/ha-favorite-entity-list-item.ts

@@ -47,7 +47,10 @@ export class HaFavoriteEntityListItem extends LitElement {
     const { primary, secondary } = stateObj
       ? computeEntityPickerDisplay(
           {
-            ...this._registries,
+            entities: this._registries.entities,
+            devices: this._registries.devices,
+            areas: this._registries.areas,
+            floors: this._registries.floors,
             language: this._i18n.language,
             translationMetadata: this._i18n.translationMetadata,
           },

src/components/entity/ha-statistic-picker.ts

@@ -1,4 +1,5 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import type { ContextType } from "@lit/context";
 import {
   mdiChartLine,
   mdiHelpCircleOutline,
@@ -7,21 +8,31 @@ import {
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
+import { consume } from "../../common/decorators/consume";
+import { transform } from "../../common/decorators/transform";
 import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import {
   computeEntityPickerDisplay,
   computeEntitySearchLabels,
 } from "../../common/entity/compute_entity_name_display";
+import {
+  apiContext,
+  configContext,
+  formattersContext,
+  internationalizationContext,
+  registriesContext,
+  statesContext,
+} from "../../data/context";
 import { domainToName } from "../../data/integration";
 import {
   getStatisticLabel,
   type StatisticsMetaData,
 } from "../../data/recorder";
 import { getStatisticIds } from "../../data/recorder_statistic_ids";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { HomeAssistantFormatters, ValueChangedEvent } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
@@ -72,7 +83,34 @@ declare global {
 
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _states!: ContextType<typeof statesContext>;
+
+  @state()
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: ContextType<typeof registriesContext>;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  @transform<
+    HomeAssistantFormatters,
+    HomeAssistantFormatters["formatEntityName"]
+  >({
+    transformer: (formatters) => formatters?.formatEntityName,
+  })
+  private _formatEntityName!: HomeAssistantFormatters["formatEntityName"];
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config!: ContextType<typeof configContext>;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -163,14 +201,17 @@ export class HaStatisticPicker extends LitElement {
   }
 
   private async _getStatisticIds() {
-    this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
+    this.statisticIds = await getStatisticIds(this._api, this.statisticTypes);
     this._picker?.requestUpdate();
     this._valueRenderer = this._makeValueRenderer();
   }
 
   private _getItems = () =>
     this._getStatisticsItems(
-      this.hass,
+      this._states,
+      this._registries,
+      this._i18n,
+      this._formatEntityName,
       this.statisticIds,
       this.includeStatisticsUnitOfMeasurement,
       this.includeUnitClass,
@@ -183,7 +224,7 @@ export class HaStatisticPicker extends LitElement {
   private _getAdditionalItems = (): StatisticComboBoxItem[] => [
     {
       id: MISSING_ID,
-      primary: this.hass.localize(
+      primary: this._i18n.localize(
         "ui.components.statistic-picker.missing_entity"
       ),
       icon_path: mdiHelpCircleOutline,
@@ -192,7 +233,10 @@ export class HaStatisticPicker extends LitElement {
 
   private _getStatisticsItems = memoizeOne(
     (
-      hass: HomeAssistant,
+      states: ContextType<typeof statesContext>,
+      registries: ContextType<typeof registriesContext>,
+      i18n: ContextType<typeof internationalizationContext>,
+      formatEntityName: HomeAssistantFormatters["formatEntityName"],
       statisticIds?: StatisticsMetaData[],
       includeStatisticsUnitOfMeasurement?: string | string[],
       includeUnitClass?: string | string[],
@@ -201,7 +245,7 @@ export class HaStatisticPicker extends LitElement {
       excludeStatistics?: string[],
       value?: string
     ): StatisticComboBoxItem[] | undefined => {
-      if (!statisticIds) {
+      if (!statisticIds || !states || !registries) {
         return undefined;
       }
 
@@ -224,7 +268,7 @@ export class HaStatisticPicker extends LitElement {
         const includeDeviceClasses: (string | null)[] =
           ensureArray(includeDeviceClass);
         statisticIds = statisticIds.filter((meta) => {
-          const stateObj = this.hass.states[meta.statistic_id];
+          const stateObj = states[meta.statistic_id];
           if (!stateObj) {
             return true;
           }
@@ -244,14 +288,14 @@ export class HaStatisticPicker extends LitElement {
         ) {
           return;
         }
-        const stateObj = this.hass.states[meta.statistic_id];
+        const stateObj = states[meta.statistic_id];
 
         if (!stateObj) {
           if (!entitiesOnly) {
             const id = meta.statistic_id;
             const label = getStatisticLabel(
-              this.hass.states,
-              this.hass.formatEntityName,
+              states,
+              formatEntityName,
               meta.statistic_id,
               meta
             );
@@ -266,7 +310,7 @@ export class HaStatisticPicker extends LitElement {
               output.push({
                 id,
                 primary: label,
-                secondary: this.hass.localize(
+                secondary: i18n.localize(
                   "ui.components.statistic-picker.no_state"
                 ),
                 type,
@@ -275,7 +319,7 @@ export class HaStatisticPicker extends LitElement {
               });
             } else if (type === "external") {
               const domain = id.split(":")[0];
-              const domainName = domainToName(this.hass.localize, domain);
+              const domainName = domainToName(i18n.localize, domain);
               output.push({
                 id,
                 statistic_id: id,
@@ -293,10 +337,17 @@ export class HaStatisticPicker extends LitElement {
         const id = meta.statistic_id;
 
         const { primary, secondary } = computeEntityPickerDisplay(
-          hass,
+          {
+            entities: registries.entities,
+            devices: registries.devices,
+            areas: registries.areas,
+            floors: registries.floors,
+            language: i18n.language,
+            translationMetadata: i18n.translationMetadata,
+          },
           stateObj
         );
-        const searchLabels = computeEntitySearchLabels(stateObj, hass);
+        const searchLabels = computeEntitySearchLabels(stateObj, registries);
 
         const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
         output.push({
@@ -361,7 +412,7 @@ export class HaStatisticPicker extends LitElement {
           ? html`<ha-icon-button
               slot="end"
               .value=${statisticId}
-              .label=${this.hass.localize("ui.common.edit")}
+              .label=${this._i18n.localize("ui.common.edit")}
               .path=${mdiPencil}
               @click=${this._editItem}
             ></ha-icon-button>`
@@ -383,14 +434,24 @@ export class HaStatisticPicker extends LitElement {
   }
 
   private _computeItem(statisticId: string): StatisticComboBoxItem {
-    const stateObj = this.hass.states[statisticId];
+    const stateObj = this._states?.[statisticId];
 
-    if (stateObj) {
+    if (stateObj && this._registries) {
       const { primary, secondary } = computeEntityPickerDisplay(
-        this.hass,
+        {
+          entities: this._registries.entities,
+          devices: this._registries.devices,
+          areas: this._registries.areas,
+          floors: this._registries.floors,
+          language: this._i18n.language,
+          translationMetadata: this._i18n.translationMetadata,
+        },
         stateObj
       );
-      const searchLabels = computeEntitySearchLabels(stateObj, this.hass);
+      const searchLabels = computeEntitySearchLabels(
+        stateObj,
+        this._registries
+      );
 
       const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
       return {
@@ -422,13 +483,13 @@ export class HaStatisticPicker extends LitElement {
       if (type === "external") {
         const sortingPrefix = `${TYPE_ORDER.indexOf("external")}`;
         const label = getStatisticLabel(
-          this.hass.states,
-          this.hass.formatEntityName,
+          this._states ?? {},
+          this._formatEntityName,
           statisticId,
           statistic
         );
         const domain = statisticId.split(":")[0];
-        const domainName = domainToName(this.hass.localize, domain);
+        const domainName = domainToName(this._i18n.localize, domain);
 
         return {
           id: statisticId,
@@ -445,8 +506,8 @@ export class HaStatisticPicker extends LitElement {
 
     const sortingPrefix = `${TYPE_ORDER.indexOf("external")}`;
     const label = getStatisticLabel(
-      this.hass.states,
-      this.hass.formatEntityName,
+      this._states ?? {},
+      this._formatEntityName,
       statisticId,
       statistic
     );
@@ -454,7 +515,7 @@ export class HaStatisticPicker extends LitElement {
     return {
       id: statisticId,
       primary: label,
-      secondary: this.hass.localize("ui.components.statistic-picker.no_state"),
+      secondary: this._i18n.localize("ui.components.statistic-picker.no_state"),
       type: "no_state",
       sorting_label: [sortingPrefix, label].join("_"),
       search_labels: { label, statisticId },
@@ -466,7 +527,7 @@ export class HaStatisticPicker extends LitElement {
     item,
     index
   ) => {
-    const showEntityId = this.hass.userData?.showEntityIdPicker;
+    const showEntityId = this._config?.userData?.showEntityIdPicker;
     return html`
       <ha-combo-box-item .borderTop=${index !== 0}>
         ${
@@ -507,7 +568,7 @@ export class HaStatisticPicker extends LitElement {
   protected render() {
     const placeholder =
       this.placeholder ??
-      this.hass.localize("ui.components.statistic-picker.placeholder");
+      this._i18n.localize("ui.components.statistic-picker.placeholder");
 
     return html`
       <ha-generic-picker
@@ -522,7 +583,7 @@ export class HaStatisticPicker extends LitElement {
         .placeholder=${placeholder}
         .value=${this.value}
         .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
+        .emptyLabel=${this._i18n.localize(
           "ui.components.statistic-picker.no_statistics"
         )}
         .rowRenderer=${this._rowRenderer}
@@ -533,7 +594,7 @@ export class HaStatisticPicker extends LitElement {
         .valueRenderer=${this._valueRenderer}
         .helper=${this.helper}
         .searchKeys=${SEARCH_KEYS}
-        .unknownItemText=${this.hass.localize(
+        .unknownItemText=${this._i18n.localize(
           "ui.components.statistic-picker.unknown"
         )}
         @value-changed=${this._valueChanged}
@@ -566,7 +627,7 @@ export class HaStatisticPicker extends LitElement {
 
     if (value === MISSING_ID) {
       window.open(
-        documentationUrl(this.hass, this.helpMissingEntityUrl),
+        documentationUrl(this._config, this.helpMissingEntityUrl),
         "_blank"
       );
       return;
@@ -582,7 +643,7 @@ export class HaStatisticPicker extends LitElement {
   }
 
   private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.statistic-picker.no_match", {
+    this._i18n.localize("ui.components.statistic-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
 }

src/components/entity/ha-statistics-picker.ts

@@ -2,14 +2,12 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
-import type { ValueChangedEvent, HomeAssistant } from "../../types";
+import type { ValueChangedEvent } from "../../types";
 import "./ha-statistic-picker";
 import type { StatisticElementChangedEvent } from "./ha-statistic-picker";
 
 @customElement("ha-statistics-picker")
 class HaStatisticsPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ type: Array }) public value?: string[];
 
   @property({ attribute: false }) public statisticIds?: string[];
@@ -63,10 +61,6 @@ class HaStatisticsPicker extends LitElement {
   @property({ attribute: "can-edit", type: Boolean }) public canEdit?;
 
   protected render() {
-    if (!this.hass) {
-      return nothing;
-    }
-
     const ignoreRestriction =
       this.ignoreRestrictionsOnFirstStatistic &&
       this._currentStatistics.length <= 1;
@@ -93,7 +87,6 @@ class HaStatisticsPicker extends LitElement {
           <div>
             <ha-statistic-picker
               .curValue=${statisticId}
-              .hass=${this.hass}
               .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
               .includeUnitClass=${includeUnitClassCurrent}
               .includeDeviceClass=${includeDeviceClassCurrent}
@@ -111,7 +104,6 @@ class HaStatisticsPicker extends LitElement {
       )}
       <div>
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeStatisticsUnitOfMeasurement=${
             this.includeStatisticsUnitOfMeasurement
           }

src/components/ha-area-controls-picker.ts

@@ -192,7 +192,14 @@ export class HaAreaControlsPicker extends LitElement {
             }
 
             const { primary, secondary } = computeEntityPickerDisplay(
-              this.hass!,
+              {
+                entities: this.hass!.entities,
+                devices: this.hass!.devices,
+                areas: this.hass!.areas,
+                floors: this.hass!.floors,
+                language: this.hass!.language,
+                translationMetadata: this.hass!.translationMetadata,
+              },
               stateObj
             );
 

src/components/ha-selector/ha-selector-statistic.ts

@@ -1,13 +1,10 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { StatisticSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../entity/ha-statistics-picker";
 
 @customElement("ha-selector-statistic")
 export class HaStatisticSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: StatisticSelector;
 
   @property() public value?: any;
@@ -23,7 +20,6 @@ export class HaStatisticSelector extends LitElement {
   protected render() {
     if (!this.selector.statistic.multiple) {
       return html`<ha-statistic-picker
-        .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}
@@ -36,7 +32,6 @@ export class HaStatisticSelector extends LitElement {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : ""}
       <ha-statistics-picker
-        .hass=${this.hass}
         .value=${this.value}
         .helper=${this.helper}
         .disabled=${this.disabled}

src/components/target-picker/ha-target-picker-item-row.ts

@@ -798,7 +798,17 @@ export class HaTargetPickerItemRow extends LitElement {
     if (type === "entity") {
       const stateObject: HassEntity | undefined = this.hass.states[item];
       const { primary, secondary } = stateObject
-        ? computeEntityPickerDisplay(this.hass, stateObject)
+        ? computeEntityPickerDisplay(
+            {
+              entities: this.hass.entities,
+              devices: this.hass.devices,
+              areas: this.hass.areas,
+              floors: this.hass.floors,
+              language: this.hass.language,
+              translationMetadata: this.hass.translationMetadata,
+            },
+            stateObject
+          )
         : { primary: item, secondary: undefined };
       return {
         name: primary,

src/data/entity/entity_picker.ts

@@ -125,6 +125,14 @@ export const getEntities = (
   // These values are the same for every entity, so compute them once instead
   // of inside the map over (potentially thousands of) entities.
   const domainNames = new Map<string, string>();
+  const displayOptions = {
+    entities: hass.entities,
+    devices: hass.devices,
+    areas: hass.areas,
+    floors: hass.floors,
+    language: hass.language,
+    translationMetadata: hass.translationMetadata,
+  };
 
   items = entityIds.map<EntityComboBoxItem>((entityId) => {
     const stateObj = hass.states[entityId];
@@ -136,7 +144,10 @@ export const getEntities = (
       domainNames.set(domain, domainName);
     }
 
-    const { primary, secondary } = computeEntityPickerDisplay(hass, stateObj);
+    const { primary, secondary } = computeEntityPickerDisplay(
+      displayOptions,
+      stateObj
+    );
 
     return {
       id: `${idPrefix}${entityId}`,

src/panels/config/automation/add-automation-element/target-labels.ts

@@ -138,7 +138,10 @@ export const getTargetSubtitle = (
     }
     return computeEntityPickerDisplay(
       {
-        ...registries,
+        entities: registries.entities,
+        devices: registries.devices,
+        areas: registries.areas,
+        floors: registries.floors,
         language: i18n.language,
         translationMetadata: i18n.translationMetadata,
       },

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -158,7 +158,6 @@ export class DialogEnergyBatterySettings
         ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_from}
@@ -178,7 +177,6 @@ export class DialogEnergyBatterySettings
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_to}
@@ -240,7 +238,6 @@ export class DialogEnergyBatterySettings
         ></ha-energy-power-config>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .value=${this._source.stat_soc}
           .includeStatisticsUnitOfMeasurement=${socStatisticsUnits}

src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts

@@ -136,7 +136,6 @@ export class DialogEnergyDeviceSettingsWater
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${volumeUnitClasses}
           .value=${this._device?.stat_consumption}
@@ -153,7 +152,6 @@ export class DialogEnergyDeviceSettingsWater
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeUnitClass=${flowRateUnitClasses}
           .value=${this._device?.stat_rate}
           .label=${this.hass.localize(

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -133,7 +133,6 @@ export class DialogEnergyDeviceSettings
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._device?.stat_consumption}
@@ -150,7 +149,6 @@ export class DialogEnergyDeviceSettings
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeUnitClass=${powerUnitClasses}
           .value=${this._device?.stat_rate}
           .label=${this.hass.localize(

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -186,7 +186,6 @@ export class DialogEnergyGasSettings
         </div>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${
             this._params.allowedGasUnitClass || gasUnitClasses
@@ -206,7 +205,6 @@ export class DialogEnergyGasSettings
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeUnitClass=${flowRateUnitClasses}
           .value=${this._source.stat_rate}
           .label=${this.hass.localize(
@@ -270,7 +268,6 @@ export class DialogEnergyGasSettings
           this._costs === "statistic"
             ? html`<ha-statistic-picker
                 class="price-options"
-                .hass=${this.hass}
                 statistic-types="sum"
                 .value=${this._source.stat_cost}
                 .label=${`${this.hass.localize(

src/panels/config/energy/dialogs/dialog-energy-grid-settings.ts

@@ -213,7 +213,6 @@ export class DialogEnergyGridSettings
         ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_from}
@@ -233,7 +232,6 @@ export class DialogEnergyGridSettings
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_to}
@@ -324,7 +322,6 @@ export class DialogEnergyGridSettings
           this._importCostType === "stat"
             ? html`
                 <ha-statistic-picker
-                  .hass=${this.hass}
                   .value=${this._source.stat_cost}
                   .label=${this.hass.localize(
                     "ui.panel.config.energy.grid.dialog.cost_stat_label"
@@ -422,7 +419,6 @@ export class DialogEnergyGridSettings
                   this._exportCostType === "stat"
                     ? html`
                         <ha-statistic-picker
-                          .hass=${this.hass}
                           .value=${this._source.stat_compensation}
                           .label=${this.hass.localize(
                             "ui.panel.config.energy.grid.dialog.compensation_stat_label"

src/panels/config/energy/dialogs/dialog-energy-home-settings.ts

@@ -85,7 +85,6 @@ export class DialogEnergyHomeSettings extends DirtyStateProviderMixin<HomeSource
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
         <ha-statistic-picker
-          .hass=${this.params.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_to}
@@ -113,7 +112,6 @@ export class DialogEnergyHomeSettings extends DirtyStateProviderMixin<HomeSource
         </ha-input>
 
         <ha-statistic-picker
-          .hass=${this.params.hass}
           .includeUnitClass=${powerUnitClasses}
           .value=${this._source.stat_rate}
           .label=${this._i18n.localize(

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -132,7 +132,6 @@ export class DialogEnergySolarSettings
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           .includeUnitClass=${energyUnitClasses}
           .value=${this._source.stat_energy_from}
@@ -170,7 +169,6 @@ export class DialogEnergySolarSettings
         </ha-input>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeUnitClass=${powerUnitClasses}
           .value=${this._source.stat_rate}
           .label=${this.hass.localize(

src/panels/config/energy/dialogs/dialog-energy-water-settings.ts

@@ -146,7 +146,6 @@ export class DialogEnergyWaterSettings
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
           include-unit-class="volume"
           include-device-class="water"
@@ -164,7 +163,6 @@ export class DialogEnergyWaterSettings
         ></ha-statistic-picker>
 
         <ha-statistic-picker
-          .hass=${this.hass}
           .includeUnitClass=${flowRateUnitClasses}
           .value=${this._source.stat_rate}
           .label=${this.hass.localize(
@@ -230,7 +228,6 @@ export class DialogEnergyWaterSettings
           this._costs === "statistic"
             ? html`<ha-statistic-picker
                 class="price-options"
-                .hass=${this.hass}
                 statistic-types="sum"
                 .value=${this._source.stat_cost}
                 .label=${`${this.hass.localize(

src/panels/config/energy/dialogs/ha-energy-power-config.ts

@@ -112,7 +112,6 @@ export class HaEnergyPowerConfig extends LitElement {
         this.powerType === "standard"
           ? html`
               <ha-statistic-picker
-                .hass=${this.hass}
                 .includeUnitClass=${powerUnitClasses}
                 .value=${this.powerConfig.stat_rate}
                 .label=${this.hass.localize(
@@ -135,7 +134,6 @@ export class HaEnergyPowerConfig extends LitElement {
         this.powerType === "inverted"
           ? html`
               <ha-statistic-picker
-                .hass=${this.hass}
                 .includeUnitClass=${powerUnitClasses}
                 .value=${this.powerConfig.stat_rate_inverted}
                 .label=${this.hass.localize(
@@ -159,7 +157,6 @@ export class HaEnergyPowerConfig extends LitElement {
         this.powerType === "two_sensors"
           ? html`
               <ha-statistic-picker
-                .hass=${this.hass}
                 .includeUnitClass=${powerUnitClasses}
                 .value=${this.powerConfig.stat_rate_from}
                 .label=${this.hass.localize(
@@ -174,7 +171,6 @@ export class HaEnergyPowerConfig extends LitElement {
                 .errorMessage=${this._requiredError}
               ></ha-statistic-picker>
               <ha-statistic-picker
-                .hass=${this.hass}
                 .includeUnitClass=${powerUnitClasses}
                 .value=${this.powerConfig.stat_rate_to}
                 .label=${this.hass.localize(

src/panels/config/scene/ha-scene-editor.ts

@@ -449,7 +449,15 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                           }
                           const { primary, secondary } =
                             computeEntityPickerDisplay(
-                              this.hass,
+                              {
+                                entities: this.hass.entities,
+                                devices: this.hass.devices,
+                                areas: this.hass.areas,
+                                floors: this.hass.floors,
+                                language: this.hass.language,
+                                translationMetadata:
+                                  this.hass.translationMetadata,
+                              },
                               entityStateObj
                             );
                           const platform =
@@ -557,7 +565,15 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                               }
                               const { primary, secondary } =
                                 computeEntityPickerDisplay(
-                                  this.hass,
+                                  {
+                                    entities: this.hass.entities,
+                                    devices: this.hass.devices,
+                                    areas: this.hass.areas,
+                                    floors: this.hass.floors,
+                                    language: this.hass.language,
+                                    translationMetadata:
+                                      this.hass.translationMetadata,
+                                  },
                                   entityStateObj
                                 );
                               const domainName = domainToName(

src/panels/config/voice-assistants/dialog-expose-entity.ts

@@ -220,7 +220,10 @@ class DialogExposeEntity extends DirtyStateProviderMixin<string[]>()(
   private _renderItem = (entityState: HassEntity) => {
     const { primary, secondary: context } = computeEntityPickerDisplay(
       {
-        ...this._registries,
+        entities: this._registries.entities,
+        devices: this._registries.devices,
+        areas: this._registries.areas,
+        floors: this._registries.floors,
         language: this._i18n.language,
         translationMetadata: this._i18n.translationMetadata,
       },

src/panels/lovelace/components/hui-entity-editor.ts

@@ -43,7 +43,17 @@ export class HuiEntityEditor extends LitElement {
     const stateObj = this.hass.states[item.entity];
 
     const { primary, secondary } = stateObj
-      ? computeEntityPickerDisplay(this.hass, stateObj)
+      ? computeEntityPickerDisplay(
+          {
+            entities: this.hass.entities,
+            devices: this.hass.devices,
+            areas: this.hass.areas,
+            floors: this.hass.floors,
+            language: this.hass.language,
+            translationMetadata: this.hass.translationMetadata,
+          },
+          stateObj
+        )
       : { primary: item.entity, secondary: undefined };
 
     return html`

src/panels/lovelace/editor/badge-editor/hui-badge-suggestion-picker.ts

@@ -175,7 +175,17 @@ export class HuiBadgeSuggestionPicker extends LitElement {
   private _renderSelectedEntity(): TemplateResult {
     const stateObj = this.hass.states[this._entityId!];
     const { primary, secondary } = stateObj
-      ? computeEntityPickerDisplay(this.hass, stateObj)
+      ? computeEntityPickerDisplay(
+          {
+            entities: this.hass.entities,
+            devices: this.hass.devices,
+            areas: this.hass.areas,
+            floors: this.hass.floors,
+            language: this.hass.language,
+            translationMetadata: this.hass.translationMetadata,
+          },
+          stateObj
+        )
       : { primary: this._entityId!, secondary: undefined };
     return html`
       <ha-section-title>

src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts

@@ -150,7 +150,14 @@ export class HuiEntityPickerTable extends LitElement {
         direction: "asc",
         template: (entity: any) => {
           const { primary, secondary } = computeEntityPickerDisplay(
-            this.hass!,
+            {
+              entities: this.hass!.entities,
+              devices: this.hass!.devices,
+              areas: this.hass!.areas,
+              floors: this.hass!.floors,
+              language: this.hass!.language,
+              translationMetadata: this.hass!.translationMetadata,
+            },
             entity.stateObj
           );
           return html`

src/panels/lovelace/editor/card-editor/hui-suggestion-entity-tree.ts

@@ -617,7 +617,17 @@ export class HuiSuggestionEntityTree extends LitElement {
     const stateObj = this.hass.states[entityId];
     const selected = this.selectedEntityId === entityId;
     const name = stateObj
-      ? computeEntityPickerDisplay(this.hass, stateObj).primary
+      ? computeEntityPickerDisplay(
+          {
+            entities: this.hass.entities,
+            devices: this.hass.devices,
+            areas: this.hass.areas,
+            floors: this.hass.floors,
+            language: this.hass.language,
+            translationMetadata: this.hass.translationMetadata,
+          },
+          stateObj
+        ).primary
       : entityId;
     return html`
       <ha-list-item-button

src/panels/lovelace/editor/card-editor/hui-suggestion-picker.ts

@@ -173,7 +173,17 @@ export class HuiSuggestionPicker extends LitElement {
   private _renderSelectedEntity(): TemplateResult {
     const stateObj = this.hass.states[this._entityId!];
     const { primary, secondary } = stateObj
-      ? computeEntityPickerDisplay(this.hass, stateObj)
+      ? computeEntityPickerDisplay(
+          {
+            entities: this.hass.entities,
+            devices: this.hass.devices,
+            areas: this.hass.areas,
+            floors: this.hass.floors,
+            language: this.hass.language,
+            translationMetadata: this.hass.translationMetadata,
+          },
+          stateObj
+        )
       : { primary: this._entityId!, secondary: undefined };
     return html`
       <ha-section-title>

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -172,7 +172,14 @@ export class HuiHeadingBadgesEditor extends LitElement {
     }
 
     const { primary, secondary } = computeEntityPickerDisplay(
-      this.hass,
+      {
+        entities: this.hass.entities,
+        devices: this.hass.devices,
+        areas: this.hass.areas,
+        floors: this.hass.floors,
+        language: this.hass.language,
+        translationMetadata: this.hass.translationMetadata,
+      },
       stateObj
     );
 

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -429,7 +429,6 @@ export class HuiStatisticsGraphCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-statistics-picker
-        .hass=${this.hass}
         .placeholder=${this.hass!.localize(
           "ui.panel.lovelace.editor.card.statistics-graph.pick_statistic"
         )}

src/panels/media-browser/ha-bar-media-player.ts

@@ -377,7 +377,18 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                   : stateObj
                     ? (() => {
                         const { primary, secondary } =
-                          computeEntityPickerDisplay(this.hass, stateObj);
+                          computeEntityPickerDisplay(
+                            {
+                              entities: this.hass.entities,
+                              devices: this.hass.devices,
+                              areas: this.hass.areas,
+                              floors: this.hass.floors,
+                              language: this.hass.language,
+                              translationMetadata:
+                                this.hass.translationMetadata,
+                            },
+                            stateObj
+                          );
                         return html`<div class="player-label">
                           <div>${primary}</div>
                           ${