feat(dnd-worldmap-removal) Cleanup frontend. (#53642)

We got rid of world map displays from DnD for issue:
https://github.com/getsentry/sentry/issues/51315

- There are no more Discover saved queries with world map displays. They
are now switched to total period displays.
- There are no more world map widgets in Dashboards. They are now table
widgets with country_code and region columns.
- This PR gets rid of components and tests used by the removed world map
functionality.

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/chartcuterie/config.tsx

@@ -9,8 +9,6 @@
  */
 
 // eslint-disable-next-line import/no-named-default
-import {default as worldMap} from 'sentry/data/world.json';
-
 import {discoverCharts} from './discover';
 import {metricAlertCharts} from './metricAlert';
 import {ChartcuterieConfig, ChartType, RenderConfig, RenderDescriptor} from './types';
@@ -25,9 +23,6 @@ const renderConfig: RenderConfig<ChartType> = new Map();
  */
 const config: ChartcuterieConfig = {
   version: process.env.COMMIT_SHA!,
-  init: echarts => {
-    echarts.registerMap('sentryWorld', worldMap);
-  },
   renderConfig,
 };
 

static/app/chartcuterie/discover.tsx

@@ -1,24 +1,16 @@
 import type {SeriesOption} from 'echarts';
 import isArray from 'lodash/isArray';
-import max from 'lodash/max';
 
 import XAxis from 'sentry/components/charts/components/xAxis';
 import AreaSeries from 'sentry/components/charts/series/areaSeries';
 import BarSeries from 'sentry/components/charts/series/barSeries';
 import LineSeries from 'sentry/components/charts/series/lineSeries';
-import MapSeries from 'sentry/components/charts/series/mapSeries';
 import {lightenHexToRgb} from 'sentry/components/charts/utils';
-import * as countryCodesMap from 'sentry/data/countryCodesMap';
 import {t} from 'sentry/locale';
-import {EventsGeoData, EventsStats} from 'sentry/types';
+import {EventsStats} from 'sentry/types';
 import {lightTheme as theme} from 'sentry/utils/theme';
 
-import {
-  DEFAULT_FONT_FAMILY,
-  slackChartDefaults,
-  slackChartSize,
-  slackGeoChartSize,
-} from './slack';
+import {DEFAULT_FONT_FAMILY, slackChartDefaults, slackChartSize} from './slack';
 import {ChartType, RenderDescriptor} from './types';
 
 const discoverxAxis = XAxis({
@@ -412,53 +404,3 @@ discoverCharts.push({
   },
   ...slackChartSize,
 });
-
-discoverCharts.push({
-  key: ChartType.SLACK_DISCOVER_WORLDMAP,
-  getOption: (data: {seriesName: string; stats: {data: EventsGeoData}}) => {
-    const mapSeries = MapSeries({
-      map: 'sentryWorld',
-      name: data.seriesName,
-      data: data.stats.data.map(country => ({
-        name: country['geo.country_code'],
-        value: country.count,
-      })),
-      nameMap: countryCodesMap.default,
-      aspectScale: 0.85,
-      zoom: 1.1,
-      center: [10.97, 9.71],
-      itemStyle: {
-        areaColor: theme.gray200,
-        borderColor: theme.backgroundSecondary,
-      },
-    });
-
-    // For absolute values, we want min/max to based on min/max of series
-    // Otherwise it should be 0-100
-    const maxValue = max(data.stats.data.map(value => value.count)) || 1;
-
-    return {
-      backgroundColor: theme.background,
-      visualMap: [
-        {
-          left: 'right',
-          min: 0,
-          max: maxValue,
-          inRange: {
-            color: [theme.purple200, theme.purple300],
-          },
-          text: ['High', 'Low'],
-          textStyle: {
-            color: theme.textColor,
-          },
-
-          // Whether show handles, which can be dragged to adjust "selected range".
-          // False because the handles are pretty ugly
-          calculable: false,
-        },
-      ],
-      series: [mapSeries],
-    };
-  },
-  ...slackGeoChartSize,
-});

static/app/chartcuterie/types.tsx

@@ -14,7 +14,6 @@ export enum ChartType {
   SLACK_DISCOVER_TOP5_PERIOD_LINE = 'slack:discover.top5PeriodLine',
   SLACK_DISCOVER_TOP5_DAILY = 'slack:discover.top5Daily',
   SLACK_DISCOVER_PREVIOUS_PERIOD = 'slack:discover.previousPeriod',
-  SLACK_DISCOVER_WORLDMAP = 'slack:discover.worldmap',
   SLACK_METRIC_ALERT_EVENTS = 'slack:metricAlert.events',
   SLACK_METRIC_ALERT_SESSIONS = 'slack:metricAlert.sessions',
 }

static/app/components/charts/eventsChart.tsx

@@ -20,12 +20,7 @@ import {LineChart, LineChartProps} from 'sentry/components/charts/lineChart';
 import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
-import {
-  getInterval,
-  processTableResults,
-  RELEASE_LINES_THRESHOLD,
-} from 'sentry/components/charts/utils';
-import {WorldMapChart, WorldMapChartProps} from 'sentry/components/charts/worldMapChart';
+import {getInterval, RELEASE_LINES_THRESHOLD} from 'sentry/components/charts/utils';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {DateString, OrganizationSummary} from 'sentry/types';
@@ -52,8 +47,7 @@ import EventsRequest from './eventsRequest';
 type ChartComponent =
   | React.ComponentType<BarChartProps>
   | React.ComponentType<AreaChartProps>
-  | React.ComponentType<LineChartProps>
-  | React.ComponentType<WorldMapChartProps>;
+  | React.ComponentType<LineChartProps>;
 
 type ChartProps = {
   currentSeriesNames: string[];
@@ -201,31 +195,13 @@ class Chart extends Component<ChartProps, State> {
       height,
       timeframe,
       topEvents,
-      tableData,
-      fromDiscover,
       timeseriesResultsTypes,
       additionalSeries,
       ...props
     } = this.props;
     const {seriesSelection} = this.state;
 
-    let ChartComponent = this.getChartComponent();
-
-    if (ChartComponent === WorldMapChart) {
-      const {data, title} = processTableResults(tableData);
-      const tableSeries = [
-        {
-          seriesName: title,
-          data,
-        },
-      ];
-      return <WorldMapChart series={tableSeries} fromDiscover={fromDiscover} />;
-    }
-
-    ChartComponent = ChartComponent as Exclude<
-      ChartComponent,
-      React.ComponentType<WorldMapChartProps>
-    >;
+    const ChartComponent = this.getChartComponent();
 
     const data = [
       ...(currentSeriesNames.length > 0 ? currentSeriesNames : [t('Current')]),

static/app/components/charts/eventsGeoRequest.spec.tsx

@@ -1,125 +0,0 @@
-import {Fragment} from 'react';
-
-import {render, waitFor} from 'sentry-test/reactTestingLibrary';
-
-import EventsGeoRequest, {
-  EventsGeoRequestProps,
-} from 'sentry/components/charts/eventsGeoRequest';
-import * as genericDiscoverQuery from 'sentry/utils/discover/genericDiscoverQuery';
-
-describe('EventsGeoRequest', function () {
-  const project = TestStubs.Project();
-  const organization = TestStubs.Organization();
-  const makeProps = (
-    partial: Partial<EventsGeoRequestProps> = {}
-  ): EventsGeoRequestProps => {
-    return {
-      api: new MockApiClient(),
-      organization,
-      yAxis: ['count()'],
-      query: 'event.type:transaction',
-      projects: [parseInt(project.id, 10)],
-      period: '24h',
-      start: new Date(),
-      end: new Date(),
-      environments: [],
-      children: jest.fn(() => <Fragment />),
-      ...partial,
-    };
-  };
-
-  describe('with props changes', () => {
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it('renders with loading state', async () => {
-      jest
-        .spyOn(genericDiscoverQuery, 'doDiscoverQuery')
-        .mockResolvedValue([{data: 'test'}, undefined, undefined]);
-
-      const mock = jest.fn(() => <Fragment />);
-
-      render(<EventsGeoRequest {...makeProps()}>{mock}</EventsGeoRequest>);
-
-      await waitFor(() => {
-        expect(mock).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            errored: false,
-            loading: true,
-            reloading: false,
-            tableData: undefined,
-          })
-        );
-      });
-    });
-
-    it('makes requests', async () => {
-      jest
-        .spyOn(genericDiscoverQuery, 'doDiscoverQuery')
-        .mockResolvedValue([{data: 'test'}, undefined, undefined]);
-
-      const mock = jest.fn(() => <Fragment />);
-      render(<EventsGeoRequest {...makeProps()}>{mock}</EventsGeoRequest>);
-
-      await waitFor(() => {
-        expect(mock).toHaveBeenLastCalledWith(
-          expect.objectContaining({
-            errored: false,
-            loading: false,
-            reloading: false,
-            tableData: [{data: 'test'}],
-          })
-        );
-      });
-    });
-
-    it('renders with error if request errors', async () => {
-      jest.spyOn(genericDiscoverQuery, 'doDiscoverQuery').mockRejectedValue({});
-
-      const mock = jest.fn(() => <Fragment />);
-      render(<EventsGeoRequest {...makeProps()}>{mock}</EventsGeoRequest>);
-
-      await waitFor(() => {
-        expect(mock).toHaveBeenLastCalledWith(
-          expect.objectContaining({
-            errored: true,
-            loading: false,
-            reloading: false,
-            tableData: undefined,
-          })
-        );
-      });
-    });
-
-    it.each([{query: 'event.type:error'}, {yAxis: 'failure_count()'}, {period: '12h'}])(
-      'rerenders if %j prop changes',
-      async (rerenderProps: Partial<EventsGeoRequestProps>) => {
-        jest
-          .spyOn(genericDiscoverQuery, 'doDiscoverQuery')
-          .mockResolvedValue([{data: 'test'}, undefined, undefined]);
-
-        const mock = jest.fn(() => <Fragment />);
-        const {rerender} = render(
-          <EventsGeoRequest {...makeProps()}>{mock}</EventsGeoRequest>
-        );
-
-        rerender(
-          <EventsGeoRequest {...makeProps(rerenderProps)}>{mock}</EventsGeoRequest>
-        );
-
-        await waitFor(() => {
-          expect(genericDiscoverQuery.doDiscoverQuery).toHaveBeenNthCalledWith(
-            2,
-            expect.anything(),
-            expect.anything(),
-            expect.objectContaining(
-              rerenderProps.period ? {statsPeriod: rerenderProps.period} : rerenderProps
-            )
-          );
-        });
-      }
-    );
-  });
-});

static/app/components/charts/eventsGeoRequest.tsx

@@ -1,131 +0,0 @@
-import {useEffect, useMemo, useState} from 'react';
-
-import {Client} from 'sentry/api';
-import {DateString, OrganizationSummary} from 'sentry/types';
-import {getUtcDateString} from 'sentry/utils/dates';
-import {TableData, TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
-import EventView from 'sentry/utils/discover/eventView';
-import {doDiscoverQuery} from 'sentry/utils/discover/genericDiscoverQuery';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import toArray from 'sentry/utils/toArray';
-import usePrevious from 'sentry/utils/usePrevious';
-
-interface ChildrenRenderProps {
-  errored: boolean;
-  loading: boolean;
-  reloading: boolean;
-  tableData?: TableDataWithTitle[];
-}
-
-export interface EventsGeoRequestProps {
-  api: Client;
-  children: (props: ChildrenRenderProps) => React.ReactElement;
-  end: DateString;
-  environments: string[];
-  organization: OrganizationSummary;
-  projects: number[];
-  query: string;
-  start: DateString;
-  yAxis: string | string[];
-  dataset?: DiscoverDatasets;
-  orderby?: string;
-  period?: string | null;
-  referrer?: string;
-}
-
-const EventsGeoRequest = ({
-  api,
-  organization,
-  yAxis,
-  query,
-  orderby,
-  projects,
-  period,
-  start,
-  end,
-  environments,
-  referrer,
-  children,
-  dataset,
-}: EventsGeoRequestProps) => {
-  const eventView = useMemo(
-    () =>
-      EventView.fromSavedQuery({
-        id: undefined,
-        name: '',
-        version: 2,
-        fields: toArray(yAxis),
-        query,
-        orderby: orderby ?? '',
-        projects,
-        range: period ?? '',
-        start: start ? getUtcDateString(start) : undefined,
-        end: end ? getUtcDateString(end) : undefined,
-        environment: environments,
-        dataset,
-      }),
-    [yAxis, query, orderby, projects, period, start, end, environments, dataset]
-  );
-  const [results, setResults] = useState(undefined as ChildrenRenderProps['tableData']);
-  const [reloading, setReloading] = useState(false);
-  const [errored, setErrored] = useState(false);
-
-  const prevApi = usePrevious(api);
-  const prevEventView = usePrevious(eventView);
-  const prevOrgSlug = usePrevious(organization.slug);
-  const prevReferrer = usePrevious(referrer);
-
-  useEffect(() => {
-    let mounted = true;
-    setErrored(false);
-
-    if (
-      prevApi !== api ||
-      prevEventView !== eventView ||
-      prevOrgSlug !== organization.slug ||
-      prevReferrer !== referrer
-    ) {
-      setReloading(true);
-    }
-
-    doDiscoverQuery<TableData>(api, `/organizations/${organization.slug}/events-geo/`, {
-      ...eventView.generateQueryStringObject(),
-      referrer,
-    })
-      .then(discoverQueryResults => {
-        if (mounted) {
-          setResults([discoverQueryResults[0]] as TableDataWithTitle[]);
-          setReloading(false);
-        }
-      })
-      .catch(() => {
-        if (mounted) {
-          setErrored(true);
-          setReloading(false);
-        }
-      });
-
-    return () => {
-      // Prevent setState leaking on unmounted component
-      mounted = false;
-    };
-  }, [
-    api,
-    eventView,
-    organization.slug,
-    referrer,
-    prevApi,
-    prevEventView,
-    prevOrgSlug,
-    prevReferrer,
-  ]);
-
-  return children({
-    errored,
-    loading: !results && !errored,
-    reloading,
-    tableData: results,
-  });
-};
-
-export default EventsGeoRequest;

static/app/components/charts/worldMapChart.tsx

@@ -1,198 +0,0 @@
-import {useEffect, useState} from 'react';
-import {useTheme} from '@emotion/react';
-import type {MapSeriesOption, TooltipComponentOption} from 'echarts';
-import * as echarts from 'echarts/core';
-import max from 'lodash/max';
-
-import {Series, SeriesDataUnit} from 'sentry/types/echarts';
-
-import VisualMap from './components/visualMap';
-import MapSeries from './series/mapSeries';
-import BaseChart, {BaseChartProps} from './baseChart';
-
-interface MapChartSeriesDataUnit extends Omit<SeriesDataUnit, 'name' | 'itemStyle'> {
-  // Docs for map itemStyle differ from Series data unit. See https://echarts.apache.org/en/option.html#series-map.data.itemStyle
-  itemStyle?: MapSeriesOption['itemStyle'];
-  name?: string;
-}
-
-type MapChartSeries = Omit<Series, 'data'> & {
-  data: MapChartSeriesDataUnit[];
-};
-
-export interface WorldMapChartProps extends Omit<BaseChartProps, 'series'> {
-  series: MapChartSeries[];
-  fromDiscover?: boolean;
-  fromDiscoverQueryList?: boolean;
-  seriesOptions?: MapSeriesOption;
-}
-
-type JSONResult = Record<string, any>;
-
-type State = {
-  codeToCountryMap: JSONResult | null;
-  countryToCodeMap: JSONResult | null;
-  map: JSONResult | null;
-};
-
-const DEFAULT_ZOOM = 1.3;
-const DISCOVER_ZOOM = 1.1;
-const DISCOVER_QUERY_LIST_ZOOM = 0.9;
-const DEFAULT_CENTER_X = 10.97;
-const DISCOVER_QUERY_LIST_CENTER_Y = -12;
-const DEFAULT_CENTER_Y = 9.71;
-
-export function WorldMapChart({
-  series,
-  seriesOptions,
-  fromDiscover,
-  fromDiscoverQueryList,
-  ...props
-}: WorldMapChartProps) {
-  const theme = useTheme();
-  const [state, setState] = useState<State>(() => ({
-    countryToCodeMap: null,
-    map: null,
-    codeToCountryMap: null,
-  }));
-
-  useEffect(() => {
-    let unmounted = false;
-
-    if (!unmounted) {
-      loadWorldMap();
-    }
-
-    return () => {
-      unmounted = true;
-    };
-  }, []);
-
-  async function loadWorldMap() {
-    try {
-      const [countryCodesMap, world] = await Promise.all([
-        import('sentry/data/countryCodesMap'),
-        import('sentry/data/world.json'),
-      ]);
-
-      const countryToCodeMap = countryCodesMap.default;
-      const worldMap = world.default;
-
-      // Echarts not available in tests
-      echarts.registerMap?.('sentryWorld', worldMap as any);
-
-      const codeToCountryMap: Record<string, string> = {};
-
-      for (const country in worldMap) {
-        codeToCountryMap[countryToCodeMap[country]] = country;
-      }
-
-      setState({
-        countryToCodeMap,
-        map: worldMap,
-        codeToCountryMap,
-      });
-    } catch {
-      // do nothing
-    }
-  }
-
-  if (state.countryToCodeMap === null || state.map === null) {
-    return null;
-  }
-
-  const processedSeries = series.map(({seriesName, data, ...options}) =>
-    MapSeries({
-      ...seriesOptions,
-      ...options,
-      map: 'sentryWorld',
-      name: seriesName,
-      nameMap: state.countryToCodeMap ?? undefined,
-      aspectScale: 0.85,
-      zoom: fromDiscover
-        ? DISCOVER_ZOOM
-        : fromDiscoverQueryList
-        ? DISCOVER_QUERY_LIST_ZOOM
-        : DEFAULT_ZOOM,
-      center: [
-        DEFAULT_CENTER_X,
-        fromDiscoverQueryList ? DISCOVER_QUERY_LIST_CENTER_Y : DEFAULT_CENTER_Y,
-      ],
-      itemStyle: {
-        areaColor: theme.gray200,
-        borderColor: theme.backgroundSecondary,
-      },
-      emphasis: {
-        itemStyle: {
-          areaColor: theme.pink300,
-        },
-        label: {
-          show: false,
-        },
-      },
-      data,
-      silent: fromDiscoverQueryList,
-      roam: !fromDiscoverQueryList,
-    })
-  );
-
-  // TODO(billy):
-  // For absolute values, we want min/max to based on min/max of series
-  // Otherwise it should be 0-100
-  const maxValue = max(series.map(({data}) => max(data.map(({value}) => value)))) || 1;
-
-  const tooltipFormatter: TooltipComponentOption['formatter'] = (format: any) => {
-    const {marker, name, value} = Array.isArray(format) ? format[0] : format;
-    // If value is NaN, don't show anything because we won't have a country code either
-    if (isNaN(value as number)) {
-      return '';
-    }
-
-    // `value` should be a number
-    const formattedValue = typeof value === 'number' ? value.toLocaleString() : '';
-    const countryOrCode = state.codeToCountryMap?.[name as string] || name;
-
-    return [
-      `<div class="tooltip-series tooltip-series-solo">
-               <div><span class="tooltip-label">${marker} <strong>${countryOrCode}</strong></span> ${formattedValue}</div>
-            </div>`,
-      '<div class="tooltip-arrow"></div>',
-    ].join('');
-  };
-
-  return (
-    <BaseChart
-      options={{
-        backgroundColor: fromDiscoverQueryList ? undefined : theme.background,
-        visualMap: [
-          VisualMap({
-            show: !fromDiscoverQueryList,
-            left: fromDiscover ? undefined : 'right',
-            right: fromDiscover ? 5 : undefined,
-            min: 0,
-            max: maxValue,
-            inRange: {
-              color: [theme.purple200, theme.purple300],
-            },
-            text: ['High', 'Low'],
-            textStyle: {
-              color: theme.textColor,
-            },
-
-            // Whether show handles, which can be dragged to adjust "selected range".
-            // False because the handles are pretty ugly
-            calculable: false,
-          }),
-        ],
-      }}
-      {...props}
-      yAxis={null}
-      xAxis={null}
-      series={processedSeries}
-      tooltip={{
-        formatter: tooltipFormatter,
-      }}
-      height={fromDiscover ? 400 : undefined}
-    />
-  );
-}

static/app/components/modals/dashboardWidgetQuerySelectorModal.spec.tsx

@@ -67,10 +67,6 @@ describe('Modals -> AddDashboardWidgetModal', function () {
       url: '/organizations/org-slug/eventsv2/',
       body: {data: [{'event.type': 'error'}], meta: {'event.type': 'string'}},
     });
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events-geo/',
-      body: {data: [], meta: {}},
-    });
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/recent-searches/',
       body: [],

static/app/components/modals/widgetBuilder/addToDashboardModal.tsx

@@ -217,12 +217,7 @@ function AddToDashboardModal({
         <MetricsCardinalityProvider organization={organization} location={location}>
           <MetricsDataSwitcher
             organization={organization}
-            eventView={eventViewFromWidget(
-              widget.title,
-              widget.queries[0],
-              selection,
-              widget.displayType
-            )}
+            eventView={eventViewFromWidget(widget.title, widget.queries[0], selection)}
             location={location}
             hideLoadingIndicator
           >

static/app/components/modals/widgetViewerModal.spec.tsx

@@ -924,100 +924,6 @@ describe('Modals -> WidgetViewerModal', function () {
       });
     });
 
-    describe('World Map Chart Widget', function () {
-      let mockQuery, mockWidget;
-
-      const eventsMockData = [
-        {
-          'geo.country_code': 'ES',
-          p75_measurements_lcp: 2000,
-        },
-        {
-          'geo.country_code': 'SK',
-          p75_measurements_lcp: 3000,
-        },
-        {
-          'geo.country_code': 'CO',
-          p75_measurements_lcp: 4000,
-        },
-      ];
-
-      function mockEventsGeo() {
-        return MockApiClient.addMockResponse({
-          url: '/organizations/org-slug/events-geo/',
-          body: {
-            data: eventsMockData,
-            meta: {
-              'geo.country_code': 'string',
-              p75_measurements_lcp: 'duration',
-            },
-          },
-        });
-      }
-      function mockEvents() {
-        return MockApiClient.addMockResponse({
-          url: '/organizations/org-slug/events/',
-          body: {
-            data: eventsMockData,
-            meta: {
-              fields: {
-                'geo.country_code': 'string',
-                p75_measurements_lcp: 'duration',
-              },
-            },
-          },
-        });
-      }
-
-      beforeEach(function () {
-        mockQuery = {
-          conditions: 'title:/organizations/:orgId/performance/summary/',
-          fields: ['p75(measurements.lcp)'],
-          aggregates: ['p75(measurements.lcp)'],
-          columns: [],
-          id: '1',
-          name: 'Query Name',
-          orderby: '',
-        };
-        mockWidget = {
-          title: 'Test Widget',
-          displayType: DisplayType.WORLD_MAP,
-          interval: '5m',
-          queries: [mockQuery],
-          widgetType: WidgetType.DISCOVER,
-        };
-      });
-
-      it('renders Discover topn chart widget viewer', async function () {
-        mockEvents();
-        mockEventsGeo();
-        const {container} = await renderModal({initialData, widget: mockWidget});
-        expect(container).toSnapshot();
-      });
-
-      it('uses provided tableData and does not make an events requests', async function () {
-        const eventsGeoMock = mockEventsGeo();
-        mockEvents();
-        await renderModal({initialData, widget: mockWidget, tableData: []});
-        expect(eventsGeoMock).not.toHaveBeenCalled();
-      });
-
-      it('always queries geo.country_code in the table chart', async function () {
-        const eventsMock = mockEvents();
-        mockEventsGeo();
-        await renderModal({initialData: initialDataWithFlag, widget: mockWidget});
-        expect(eventsMock).toHaveBeenCalledWith(
-          '/organizations/org-slug/events/',
-          expect.objectContaining({
-            query: expect.objectContaining({
-              field: ['geo.country_code', 'p75(measurements.lcp)'],
-            }),
-          })
-        );
-        expect(await screen.findByText('geo.country_code')).toBeInTheDocument();
-      });
-    });
-
     describe('Table Widget', function () {
       const mockQuery = {
         conditions: 'title:/organizations/:orgId/performance/summary/',