Regenerate statistics chart data when the formatters change

statistics-chart resolves its series names once and caches them in
_chartData, and it rebuilt only when the fetched statistics changed. A
rename therefore left the legend showing the old name.

The formatters are replaced as a set whenever the registries change, so
comparing formatEntityName identity is enough to catch it. This covers
the statistics graph card and the more-info history dialog; the energy
dashboard cards cache their series the same way and are handled
separately.

Co-Authored-By: Claude Opus 5 <[email protected]>

src/components/chart/statistics-chart.ts

@@ -125,7 +125,23 @@ export class StatisticsChart extends LitElement {
   private _yAxisFractionDigits = 1;
 
   protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
-    return changedProps.size > 1 || !changedProps.has("hass");
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this._entityNamesChanged(changedProps)
+    );
+  }
+
+  // Series names are resolved once and cached in _chartData, so a hass update
+  // that only replaces the formatters has to regenerate them. The formatters are
+  // swapped as a set whenever the registries change, which is what renames a
+  // series.
+  private _entityNamesChanged(changedProps: PropertyValues): boolean {
+    if (!changedProps.has("hass")) {
+      return false;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    return !!oldHass && oldHass.formatEntityName !== this.hass.formatEntityName;
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -135,7 +151,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("chartType") ||
       changedProps.has("hideLegend") ||
       changedProps.has("_hiddenStats") ||
-      changedProps.has("names")
+      changedProps.has("names") ||
+      this._entityNamesChanged(changedProps)
     ) {
       this._generateData();
     }

src/html/authorize.html.template

@@ -26,10 +26,7 @@
         width: 100%;
         max-width: 400px;
         margin: 0 auto;
-        padding: var(--safe-area-inset-top, 0px)
-          calc(16px + var(--safe-area-inset-right, 0px))
-          var(--safe-area-inset-bottom, 0px)
-          calc(16px + var(--safe-area-inset-left, 0px));
+        padding: 0 16px;
         box-sizing: content-box;
       }
 
@@ -38,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/panels/config/automation/styles.ts

@@ -109,11 +109,11 @@ export const rowStyles = css`
     text-box-edge: cap alphabetic;
     overflow: hidden;
     transition:
-      opacity var(--ha-animation-duration-fast) ease-out,
-      transform var(--ha-animation-duration-fast) ease-out,
-      width var(--ha-animation-duration-fast) ease-out,
-      margin-inline-end var(--ha-animation-duration-fast) ease-out,
-      border-width var(--ha-animation-duration-fast) ease-out;
+      opacity 180ms ease-out,
+      transform 180ms ease-out,
+      width 180ms ease-out,
+      margin-inline-end 180ms ease-out,
+      border-width 180ms ease-out;
   }
 
   .trigger-index-badge.hidden {

src/panels/config/automation/trigger/ha-automation-trigger-references.ts

@@ -1,11 +1,10 @@
 import { consume } from "@lit/context";
 import { mdiLinkVariantOff } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/ha-tooltip";
 import "../../../../components/ha-trigger-icon";
 import type { TriggerCondition } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
@@ -33,7 +32,6 @@ export class HaAutomationTriggerReferences extends LitElement {
 
   protected render() {
     const options = this._triggers?.options ?? [];
-    const showIndices = this._triggers?.showIndices ?? false;
     const selectedIds = ensureArray(this.condition.id).filter(Boolean);
     const selectedTriggers = options.filter((option) =>
       selectedIds.includes(option.id)
@@ -54,28 +52,7 @@ export class HaAutomationTriggerReferences extends LitElement {
       selectedTriggers.map(
         (option) => html`
           <span class="trigger-reference">
-            <span
-              id="trigger-index-badge-${option.index}"
-              tabindex=${showIndices ? "0" : "-1"}
-              class="trigger-index-badge ${showIndices ? "" : "hidden"}"
-              aria-label=${this.hass.localize(
-                "ui.panel.config.automation.editor.triggers.trigger_index_aria_label",
-                { number: option.index + 1 }
-              )}
-              aria-hidden=${showIndices ? "false" : "true"}
-              >${option.index + 1}</span
-            >
-            ${
-              showIndices
-                ? html`<ha-tooltip for="trigger-index-badge-${option.index}"
-                    ><p>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.triggers.trigger_index_tooltip"
-                      )}
-                    </p></ha-tooltip
-                  >`
-                : nothing
-            }
+            <span class="trigger-index-badge">${option.index + 1}</span>
             <ha-trigger-icon
               .trigger=${"trigger" in option.trigger ? option.trigger.trigger : ""}
             ></ha-trigger-icon>
@@ -155,22 +132,6 @@ export class HaAutomationTriggerReferences extends LitElement {
       line-height: 1;
       text-box-trim: both;
       text-box-edge: cap alphabetic;
-      overflow: hidden;
-      transition:
-        opacity var(--ha-animation-duration-fast) ease-out,
-        transform var(--ha-animation-duration-fast) ease-out,
-        width var(--ha-animation-duration-fast) ease-out,
-        margin-inline-end var(--ha-animation-duration-fast) ease-out,
-        border-width var(--ha-animation-duration-fast) ease-out;
-    }
-
-    .trigger-index-badge.hidden {
-      opacity: 0;
-      transform: translateX(calc(-8px * var(--scale-direction)));
-      width: 0;
-      margin-inline-end: calc(var(--ha-space-2) * -1);
-      border-width: 0;
-      pointer-events: none;
     }
   `;
 }

src/panels/my/ha-panel-my.ts

@@ -189,10 +189,6 @@ export const getMyRedirects = (): Redirects => ({
     component: "radio_frequency",
     redirect: "/config/radio-frequency",
   },
-  config_serial: {
-    component: "usb",
-    redirect: "/config/serial",
-  },
   config_ssdp: {
     component: "ssdp",
     redirect: "/config/ssdp",