Fix legend sizing on area charts (#58083)

Author: nickofthyme

src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx

@@ -53,6 +53,7 @@ export interface VisLegendState {
   open: boolean;
   labels: any[];
   tableAggs: any[];
+  filterableLabels: Set<string>;
   selectedLabel: string | null;
 }
 
@@ -68,6 +69,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
       open,
       labels: [],
       tableAggs: [],
+      filterableLabels: new Set(),
       selectedLabel: null,
     };
   }
@@ -133,40 +135,43 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
     }));
   };
 
-  // Most of these functions were moved directly from the old Legend class. Not a fan of this.
-  setLabels = (data: any, type: string): Promise<void> =>
+  setFilterableLabels = (items: LegendItem[]): Promise<void> =>
     new Promise(async resolve => {
-      let labels = [];
-      if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
-        const legendLabels = this.props.vislibVis.getLegendLabels();
-        if (legendLabels) {
-          labels = map(legendLabels, label => {
-            return { label };
-          });
+      const filterableLabels = new Set<string>();
+      items.forEach(async item => {
+        const canFilter = await this.canFilter(item);
+        if (canFilter) {
+          filterableLabels.add(item.label);
         }
-      } else {
-        if (!data) return [];
-        data = data.columns || data.rows || [data];
+      });
+
+      this.setState({ filterableLabels }, resolve);
+    });
 
-        labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
+  setLabels = (data: any, type: string) => {
+    let labels = [];
+    if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
+      const legendLabels = this.props.vislibVis.getLegendLabels();
+      if (legendLabels) {
+        labels = map(legendLabels, label => {
+          return { label };
+        });
       }
+    } else {
+      if (!data) return [];
+      data = data.columns || data.rows || [data];
 
-      const labelsConfig = await Promise.all(
-        labels.map(async label => ({
-          ...label,
-          canFilter: await this.canFilter(label),
-        }))
-      );
-
-      this.setState(
-        {
-          labels: labelsConfig,
-        },
-        resolve
-      );
+      labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
+    }
+
+    this.setFilterableLabels(labels);
+
+    this.setState({
+      labels,
     });
+  };
 
-  refresh = async () => {
+  refresh = () => {
     const vislibVis = this.props.vislibVis;
     if (!vislibVis || !vislibVis.visConfig) {
       this.setState({
@@ -193,7 +198,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
     }
 
     this.setState({ tableAggs: getTableAggs(this.props.vis) });
-    await this.setLabels(this.props.visData, vislibVis.visConfigArgs.type);
+    this.setLabels(this.props.visData, vislibVis.visConfigArgs.type);
   };
 
   highlight = (event: BaseSyntheticEvent) => {
@@ -241,7 +246,7 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
           key={item.label}
           anchorPosition={anchorPosition}
           selected={this.state.selectedLabel === item.label}
-          canFilter={item.canFilter}
+          canFilter={this.state.filterableLabels.has(item.label)}
           onFilter={this.filter}
           onSelect={this.toggleDetails}
           legendId={this.legendId}