[UX] Fix map color variance and apply proper filter for extended stats (#81106)

Fixes: #81208 correctly coloring the UX map

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx

@@ -20,7 +20,7 @@ import {
   ViewMode,
   isErrorEmbeddable,
 } from '../../../../../../../../src/plugins/embeddable/public';
-import { getLayerList } from './LayerList';
+import { useLayerList } from './useLayerList';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { RenderTooltipContentParams } from '../../../../../../maps/public';
 import { MapToolTip } from './MapToolTip';
@@ -55,6 +55,8 @@ export function EmbeddedMapComponent() {
 
   const mapFilters = useMapFilters();
 
+  const layerList = useLayerList();
+
   const [embeddable, setEmbeddable] = useState<
     MapEmbeddable | ErrorEmbeddable | undefined
   >();
@@ -148,7 +150,7 @@ export function EmbeddedMapComponent() {
 
       if (embeddableObject && !isErrorEmbeddable(embeddableObject)) {
         embeddableObject.setRenderTooltipContent(renderTooltipContent);
-        await embeddableObject.setLayerList(getLayerList());
+        await embeddableObject.setLayerList(layerList);
       }
 
       setEmbeddable(embeddableObject);

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx

@@ -18,7 +18,7 @@ import {
   REGION_NAME,
   TRANSACTION_DURATION_COUNTRY,
   TRANSACTION_DURATION_REGION,
-} from './LayerList';
+} from './useLayerList';
 import { RenderTooltipContentParams } from '../../../../../../maps/public';
 import { I18LABELS } from '../translations';
 

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx

@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { EuiThemeProvider } from '../../../../../../../observability/public';
 import { MapToolTip } from '../MapToolTip';
-import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../LayerList';
+import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../useLayerList';
 
 storiesOf('app/RumDashboard/VisitorsRegionMap', module)
   .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts

@@ -25,6 +25,11 @@ export const mockLayerList = [
           id: '3657625d-17b0-41ef-99ba-3a2b2938655c',
           indexPatternTitle: 'apm-*',
           term: 'client.geo.country_iso_code',
+          whereQuery: {
+            language: 'kuery',
+            query:
+              'transaction.type : "page-load" and service.name : "undefined"',
+          },
           metrics: [
             {
               type: 'avg',
@@ -95,6 +100,11 @@ export const mockLayerList = [
           id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41',
           indexPatternTitle: 'apm-*',
           term: 'client.geo.region_iso_code',
+          whereQuery: {
+            language: 'kuery',
+            query:
+              'transaction.type : "page-load" and service.name : "undefined"',
+          },
           metrics: [{ type: 'avg', field: 'transaction.duration.us' }],
           indexPatternId: 'apm_static_index_pattern_id',
         },

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/useLayerList.test.ts

@@ -4,14 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { renderHook } from '@testing-library/react-hooks';
 import { mockLayerList } from './__mocks__/regions_layer.mock';
-import { getLayerList } from '../LayerList';
+import { useLayerList } from '../useLayerList';
 
-describe('LayerList', () => {
+describe('useLayerList', () => {
-  describe('getLayerList', () => {
+  test('it returns the region layer', () => {
-    test('it returns the region layer', () => {
+    const { result } = renderHook(() => useLayerList());
-      const layerList = getLayerList();
+    expect(result.current).toStrictEqual(mockLayerList);
-      expect(layerList).toStrictEqual(mockLayerList);
-    });
   });
 });

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/useLayerList.ts

@@ -22,8 +22,14 @@ import {
 } from '../../../../../../maps/common/constants';
 
 import { APM_STATIC_INDEX_PATTERN_ID } from '../../../../../../../../src/plugins/apm_oss/public';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import {
+  SERVICE_NAME,
+  TRANSACTION_TYPE,
+} from '../../../../../common/elasticsearch_fieldnames';
+import { TRANSACTION_PAGE_LOAD } from '../../../../../common/transaction_types';
 
-const ES_TERM_SOURCE: ESTermSourceDescriptor = {
+const ES_TERM_SOURCE_COUNTRY: ESTermSourceDescriptor = {
   type: 'ES_TERM_SOURCE',
   id: '3657625d-17b0-41ef-99ba-3a2b2938655c',
   indexPatternTitle: 'apm-*',
@@ -39,6 +45,26 @@ const ES_TERM_SOURCE: ESTermSourceDescriptor = {
   applyGlobalQuery: true,
 };
 
+const ES_TERM_SOURCE_REGION: ESTermSourceDescriptor = {
+  type: 'ES_TERM_SOURCE',
+  id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41',
+  indexPatternTitle: 'apm-*',
+  term: 'client.geo.region_iso_code',
+  metrics: [{ type: AGG_TYPE.AVG, field: 'transaction.duration.us' }],
+  whereQuery: {
+    query: 'transaction.type : "page-load"',
+    language: 'kuery',
+  },
+  indexPatternId: APM_STATIC_INDEX_PATTERN_ID,
+};
+
+const getWhereQuery = (serviceName: string) => {
+  return {
+    query: `${TRANSACTION_TYPE} : "${TRANSACTION_PAGE_LOAD}" and ${SERVICE_NAME} : "${serviceName}"`,
+    language: 'kuery',
+  };
+};
+
 export const REGION_NAME = 'region_name';
 export const COUNTRY_NAME = 'name';
 
@@ -56,7 +82,11 @@ interface VectorLayerDescriptor extends BaseVectorLayerDescriptor {
   sourceDescriptor: EMSFileSourceDescriptor;
 }
 
-export function getLayerList() {
+export function useLayerList() {
+  const { urlParams } = useUrlParams();
+
+  const { serviceName } = urlParams;
+
   const baseLayer: LayerDescriptor = {
     sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
     id: 'b7af286d-2580-4f47-be93-9653d594ce7e',
@@ -69,6 +99,8 @@ export function getLayerList() {
     type: 'VECTOR_TILE',
   };
 
+  ES_TERM_SOURCE_COUNTRY.whereQuery = getWhereQuery(serviceName!);
+
   const getLayerStyle = (fieldName: string): VectorStyleDescriptor => {
     return {
       type: 'VECTOR',
@@ -119,7 +151,7 @@ export function getLayerList() {
     joins: [
       {
         leftField: 'iso2',
-        right: ES_TERM_SOURCE,
+        right: ES_TERM_SOURCE_COUNTRY,
       },
     ],
     sourceDescriptor: {
@@ -138,18 +170,13 @@ export function getLayerList() {
     type: 'VECTOR',
   };
 
+  ES_TERM_SOURCE_REGION.whereQuery = getWhereQuery(serviceName!);
+
   const pageLoadDurationByAdminRegionLayer: VectorLayerDescriptor = {
     joins: [
       {
         leftField: 'region_iso_code',
-        right: {
+        right: ES_TERM_SOURCE_REGION,
-          type: 'ES_TERM_SOURCE',
-          id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41',
-          indexPatternTitle: 'apm-*',
-          term: 'client.geo.region_iso_code',
-          metrics: [{ type: AGG_TYPE.AVG, field: 'transaction.duration.us' }],
-          indexPatternId: APM_STATIC_INDEX_PATTERN_ID,
-        },
       },
     ],
     sourceDescriptor: {
@@ -166,6 +193,7 @@ export function getLayerList() {
     visible: true,
     type: 'VECTOR',
   };
+
   return [
     baseLayer,
     pageLoadDurationByCountryLayer,