fix(legend): avoid re-rendering

package.json

@@ -176,5 +176,6 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
+  },
+  "dependencies": {}
 }

packages/charts/src/chart_types/goal_chart/state/selectors/get_screen_reader_data.ts

@@ -7,11 +7,11 @@
  */
 
 import { getGoalChartDataSelector, getGoalChartLabelsSelector } from './get_goal_chart_data';
-import type { ChartSpecificScreenReaderData, ScreenReaderItem } from '../../../../state/chart_selectors';
 import type { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getA11ySettingsSelector } from '../../../../state/selectors/get_accessibility_config';
 import { getInternalChartStateSelector } from '../../../../state/selectors/get_internal_chart_state';
+import { EMPTY_SCREEN_READER_ITEMS, type ScreenReaderItem } from '../../../../state/selectors/get_screenreader_data';
 
 /** @internal */
 export const getScreenReaderDataSelector = createCustomCachedSelector(
@@ -22,7 +22,7 @@ export const getScreenReaderDataSelector = createCustomCachedSelector(
     getA11ySettingsSelector,
     (state: GlobalChartState) => state,
   ],
-  (goalChartData, goalChartLabels, internalChartState, a11ySettings, state): ChartSpecificScreenReaderData => {
+  (goalChartData, goalChartLabels, internalChartState, a11ySettings, state): ScreenReaderItem[] => {
     const screenReaderItems: ScreenReaderItem[] = [];
 
     // Add chart type description first
@@ -69,6 +69,6 @@ export const getScreenReaderDataSelector = createCustomCachedSelector(
       );
     }
 
-    return { screenReaderItems };
+    return screenReaderItems.length > 0 ? screenReaderItems : EMPTY_SCREEN_READER_ITEMS;
   },
 );

packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts

@@ -10,14 +10,10 @@ import { getGoalSpecSelector } from './get_goal_spec';
 import { getPickedShapes } from './picked_shapes';
 import { Colors } from '../../../../common/colors';
 import type { TooltipInfo } from '../../../../components/tooltip/types';
+import { EMPTY_TOOLTIP } from '../../../../state/chart_selectors';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import type { BandViewModel } from '../../layout/types/viewmodel_types';
 
-const EMPTY_TOOLTIP = Object.freeze({
-  header: null,
-  values: [],
-});
-
 const getBandColor = (value: number, bands: BandViewModel[]) =>
   bands.find(({ value: v }) => {
     return v >= value;

packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

@@ -11,14 +11,9 @@ import { getPickedShapes } from './picked_shapes';
 import { RGBATupleToString } from '../../../../common/color_library_wrappers';
 import { Colors } from '../../../../common/colors';
 import type { TooltipInfo } from '../../../../components/tooltip/types';
+import { EMPTY_TOOLTIP } from '../../../../state/chart_selectors';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 
-const EMPTY_TOOLTIP = Object.freeze({
-  header: null,
-  values: [],
-  disableActions: false,
-});
-
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(
   [getHeatmapSpecSelector, getPickedShapes],

packages/charts/src/chart_types/partition_chart/state/selectors/tooltip.ts

@@ -10,11 +10,10 @@ import { partitionMultiGeometries } from './geometries';
 import { getPartitionSpec } from './partition_spec';
 import { getPickedShapes } from './picked_shapes';
 import type { TooltipInfo } from '../../../../components/tooltip/types';
+import { EMPTY_TOOLTIP } from '../../../../state/chart_selectors';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { pickShapesTooltipValues } from '../../layout/viewmodel/picked_shapes';
 
-const EMPTY_TOOLTIP = Object.freeze({ header: null, values: [] });
-
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(
   [getPartitionSpec, getPickedShapes, partitionMultiGeometries],

packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts

@@ -9,16 +9,19 @@
 import { getComputedScalesSelector } from './get_computed_scales';
 import { getTooltipInfoAndGeomsSelector } from './get_tooltip_values_highlighted_geoms';
 import type { LegendItemExtraValues } from '../../../../common/legend';
-import { EMPTY_LEGEND_ITEM_EXTRA_VALUES } from '../../../../common/legend';
 import type { SeriesKey } from '../../../../common/series_id';
 import { ScaleType } from '../../../../scales/constants';
+import { EMPTY_LEGEND_ITEM_EXTRA_VALUES } from '../../../../state/chart_selectors';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getLegendValuesSelector } from '../../../../state/selectors/get_legend_config_selector';
 import { getLegendItemExtraValues } from '../../tooltip/tooltip';
 
 /** @internal */
 export const getLegendItemExtraValuesSelector = createCustomCachedSelector(
-  [getTooltipInfoAndGeomsSelector, getComputedScalesSelector],
-  ({ tooltip: { values } }, { xScale: { type } }): Map<SeriesKey, LegendItemExtraValues> =>
+  [getTooltipInfoAndGeomsSelector, getComputedScalesSelector, getLegendValuesSelector],
+  ({ tooltip: { values } }, { xScale: { type } }, legendValues): ReadonlyMap<SeriesKey, LegendItemExtraValues> =>
     // See https://github.com/elastic/elastic-charts/issues/2050
-    type === ScaleType.Ordinal ? EMPTY_LEGEND_ITEM_EXTRA_VALUES : getLegendItemExtraValues(values),
+    type === ScaleType.Ordinal || legendValues.length === 0
+      ? EMPTY_LEGEND_ITEM_EXTRA_VALUES
+      : getLegendItemExtraValues(values),
 );

packages/charts/src/common/legend.ts

@@ -10,7 +10,7 @@ import type { $Values } from 'utility-types';
 
 import type { CategoryKey, CategoryLabel } from './category';
 import type { Color } from './colors';
-import type { SeriesKey, SeriesIdentifier } from './series_id';
+import type { SeriesIdentifier } from './series_id';
 import type { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import type { LegendPositionConfig, SeriesType } from '../specs';
 import type { LegendPath } from '../state/actions/legend';
@@ -172,8 +172,3 @@ export const legendValueTitlesMap = {
   [LegendValue.Difference]: 'Diff',
   [LegendValue.DifferencePercent]: 'Diff %',
 };
-
-/** @internal */
-export const EMPTY_LEGEND_ITEM_EXTRA_VALUES = new Map<SeriesKey, LegendItemExtraValues>();
-/** @internal */
-export const EMPTY_LEGEND_LIST: LegendItem[] = [];

packages/charts/src/components/accessibility/screen_reader_items.tsx

@@ -8,16 +8,16 @@
 
 import React from 'react';
 
-import type { ScreenReaderItem } from '../../state/chart_selectors';
 import type { A11ySettings } from '../../state/selectors/get_accessibility_config';
+import type { ScreenReaderItem } from '../../state/selectors/get_screenreader_data';
 
 interface ScreenReaderItemsProps {
-  screenReaderItems?: ScreenReaderItem[];
+  screenReaderItems: ReadonlyArray<ScreenReaderItem>;
 }
 
 /** @internal */
 export function ScreenReaderItems({ screenReaderItems }: A11ySettings & ScreenReaderItemsProps) {
-  const hasScreenReaderItems = screenReaderItems && screenReaderItems.length > 0;
+  const hasScreenReaderItems = screenReaderItems.length > 0;
 
   if (!hasScreenReaderItems) {
     return null;

packages/charts/src/components/accessibility/screen_reader_summary.tsx

@@ -15,15 +15,15 @@ import type { GlobalChartState } from '../../state/chart_state';
 import type { ScreenReaderSummaryData } from '../../state/selectors/get_screen_reader_summary';
 import { getScreenReaderSummarySelector } from '../../state/selectors/get_screen_reader_summary';
 
-const ScreenReaderSummaryComponent = ({ a11ySettings, screenReaderData }: ScreenReaderSummaryData) => {
+const ScreenReaderSummaryComponent = ({ a11ySettings, screenReaderItems }: ScreenReaderSummaryData) => {
   return (
     <figcaption
       className="echScreenReaderOnly"
       id={`${a11ySettings.descriptionId}-summary`}
       data-testid="echScreenReaderSummary"
     >
       <ScreenReaderDescription {...a11ySettings} />
-      <ScreenReaderItems {...a11ySettings} screenReaderItems={screenReaderData?.screenReaderItems} />
+      <ScreenReaderItems {...a11ySettings} screenReaderItems={screenReaderItems} />
     </figcaption>
   );
 };

packages/charts/src/components/legend/legend.tsx

@@ -55,8 +55,8 @@ interface LegendStateProps {
   chartTheme: Theme;
   size: Size & { seriesWidth?: number };
   config: LegendSpec;
-  items: LegendItem[];
-  extraValues: Map<string, LegendItemExtraValues>;
+  items: ReadonlyArray<LegendItem>;
+  extraValues: ReadonlyMap<string, LegendItemExtraValues>;
   maxFormattedValueWidth?: number;
 }
 

packages/charts/src/components/legend/legend_table/legend_table.tsx

@@ -16,7 +16,7 @@ import type { SharedLegendItemProps } from '../types';
 
 /** @internal */
 export interface LegendTableProps extends SharedLegendItemProps {
-  items: LegendItem[];
+  items: ReadonlyArray<LegendItem>;
   seriesWidth?: number;
 }
 

packages/charts/src/components/legend/legend_table/legend_table_body.tsx

@@ -13,7 +13,10 @@ import type { LegendItem } from '../../../common/legend';
 import type { SharedLegendItemProps } from '../types';
 
 /** @internal */
-export const LegendTableBody: React.FC<SharedLegendItemProps & { items: LegendItem[] }> = ({ items, ...itemProps }) => {
+export const LegendTableBody: React.FC<SharedLegendItemProps & { items: ReadonlyArray<LegendItem> }> = ({
+  items,
+  ...itemProps
+}) => {
   return (
     <div role="rowgroup" className="echLegendTable__rowgroup">
       {items.map((item) => (

packages/charts/src/components/legend/types.ts

@@ -28,7 +28,7 @@ export interface SharedLegendItemProps {
   flatLegend: boolean;
   totalItems: number;
   positionConfig: LegendPositionConfig;
-  extraValues: Map<string, LegendItemExtraValues>;
+  extraValues: ReadonlyMap<string, LegendItemExtraValues>;
   legendValues: Array<LegendValue>;
   isMostlyRTL: boolean;
   labelOptions: LegendLabelOptions;

packages/charts/src/components/legend/utils.ts

@@ -14,7 +14,7 @@ const findCurrentValue = (values: LegendItemValue[]) =>
 
 /** @internal */
 export function getExtra(
-  extraValues: Map<string, LegendItemExtraValues>,
+  extraValues: ReadonlyMap<string, LegendItemExtraValues>,
   item: LegendItem,
   totalItems: number,
 ): LegendItemValue | undefined {
@@ -35,7 +35,7 @@ export const prepareLegendValues = (
   item: LegendItem,
   legendValues: LegendValue[],
   totalItems: number,
-  extraValues: Map<string, LegendItemExtraValues>,
+  extraValues: ReadonlyMap<string, LegendItemExtraValues>,
 ) => {
   return legendValues.map((legendValue) => {
     if (legendValue === LegendValue.Value || legendValue === LegendValue.CurrentAndLastValue) {