[APM] Rename ChartsSyncContext to PointerEventContext

x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx

@@ -25,7 +25,7 @@ import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { TransactionDistribution } from './Distribution';
 import { WaterfallWithSummmary } from './WaterfallWithSummmary';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
-import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event_context';
 import { useTrackPageview } from '../../../../../observability/public';
 import { Projection } from '../../../../common/projections';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
@@ -125,13 +125,13 @@ export function TransactionDetails({
             <LocalUIFilters {...localUIFiltersConfig} />
           </EuiFlexItem>
           <EuiFlexItem grow={7}>
-            <ChartsSyncContextProvider>
+            <ChartPointerEventContextProvider>
               <TransactionCharts
                 fetchStatus={transactionChartsStatus}
                 charts={transactionChartsData}
                 urlParams={urlParams}
               />
-            </ChartsSyncContextProvider>
+            </ChartPointerEventContextProvider>
 
             <EuiHorizontalRule size="full" margin="l" />
 

x-pack/plugins/apm/public/components/app/service_metrics/index.tsx

@@ -16,7 +16,7 @@ import React, { useMemo } from 'react';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
 import { MetricsChart } from '../../shared/charts/metrics_chart';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event_context';
 import { Projection } from '../../../../common/projections';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { SearchBar } from '../../shared/search_bar';
@@ -57,7 +57,7 @@ export function ServiceMetrics({
             <LocalUIFilters {...localFiltersConfig} />
           </EuiFlexItem>
           <EuiFlexItem grow={7}>
-            <ChartsSyncContextProvider>
+            <ChartPointerEventContextProvider>
               <EuiFlexGrid columns={2} gutterSize="s">
                 {data.charts.map((chart) => (
                   <EuiFlexItem key={chart.key}>
@@ -73,7 +73,7 @@ export function ServiceMetrics({
                 ))}
               </EuiFlexGrid>
               <EuiSpacer size="xxl" />
-            </ChartsSyncContextProvider>
+            </ChartPointerEventContextProvider>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>

x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import styled from 'styled-components';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
-import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event_context';
 import { useAgentName } from '../../../hooks/useAgentName';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
@@ -178,7 +178,7 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
         </MetadataFlexGroup>
       )}
       {agentName && (
-        <ChartsSyncContextProvider>
+        <ChartPointerEventContextProvider>
           <EuiFlexGrid columns={2} gutterSize="s">
             {data.charts.map((chart) => (
               <EuiFlexItem key={chart.key}>
@@ -194,12 +194,12 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
             ))}
           </EuiFlexGrid>
           <EuiSpacer size="xxl" />
-        </ChartsSyncContextProvider>
+        </ChartPointerEventContextProvider>
       )}
       <SearchBar />
       <EuiPage>
         {agentName && (
-          <ChartsSyncContextProvider>
+          <ChartPointerEventContextProvider>
             <EuiFlexGrid columns={2} gutterSize="s">
               {data.charts.map((chart) => (
                 <EuiFlexItem key={chart.key}>
@@ -215,7 +215,7 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
               ))}
             </EuiFlexGrid>
             <EuiSpacer size="xxl" />
-          </ChartsSyncContextProvider>
+          </ChartPointerEventContextProvider>
         )}
       </EuiPage>
     </>

x-pack/plugins/apm/public/components/app/service_overview/index.tsx

@@ -15,7 +15,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { isRumAgentName } from '../../../../common/agent_name';
-import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event_context';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
@@ -43,7 +43,7 @@ export function ServiceOverview({
   useTrackPageview({ app: 'apm', path: 'service_overview', delay: 15000 });
 
   return (
-    <ChartsSyncContextProvider>
+    <ChartPointerEventContextProvider>
       <SearchBar />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
@@ -170,6 +170,6 @@ export function ServiceOverview({
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
-    </ChartsSyncContextProvider>
+    </ChartPointerEventContextProvider>
   );
 }

x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx

@@ -24,7 +24,7 @@ import { useChartTheme } from '../../../../../observability/public';
 import { TimeSeries } from '../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useChartsSync } from '../../../hooks/use_charts_sync';
+import { useChartPointerEvent } from '../../../hooks/use_chart_pointer_event';
 import { unit } from '../../../style/variables';
 import { Annotations } from './annotations';
 import { ChartContainer } from './chart_container';
@@ -60,15 +60,15 @@ export function TimeseriesChart({
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
   const chartTheme = useChartTheme();
-  const { event, setEvent } = useChartsSync();
+  const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
   const { start, end } = urlParams;
 
   useEffect(() => {
-    if (event.chartId !== id && chartRef.current) {
-      chartRef.current.dispatchExternalPointerEvent(event);
+    if (pointerEvent && pointerEvent?.chartId !== id && chartRef.current) {
+      chartRef.current.dispatchExternalPointerEvent(pointerEvent);
     }
-  }, [event, chartRef, id]);
+  }, [pointerEvent, chartRef, id]);
 
   const min = moment.utc(start).valueOf();
   const max = moment.utc(end).valueOf();
@@ -89,9 +89,7 @@ export function TimeseriesChart({
         <Settings
           onBrushEnd={({ x }) => onBrushEnd({ x, history })}
           theme={chartTheme}
-          onPointerUpdate={(currEvent: any) => {
-            setEvent(currEvent);
-          }}
+          onPointerUpdate={setPointerEvent}
           externalPointerEvents={{
             tooltip: { visible: true, placement: Placement.Bottom },
           }}

x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx

@@ -23,7 +23,7 @@ import { asPercent } from '../../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { useChartsSync as useChartsSync2 } from '../../../../hooks/use_charts_sync';
+import { useChartPointerEvent } from '../../../../hooks/use_chart_pointer_event';
 import { unit } from '../../../../style/variables';
 import { Annotations } from '../../charts/annotations';
 import { ChartContainer } from '../../charts/chart_container';
@@ -45,15 +45,19 @@ export function TransactionBreakdownChartContents({
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
   const chartTheme = useChartTheme();
-  const { event, setEvent } = useChartsSync2();
+  const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
   const { start, end } = urlParams;
 
   useEffect(() => {
-    if (event.chartId !== 'timeSpentBySpan' && chartRef.current) {
-      chartRef.current.dispatchExternalPointerEvent(event);
+    if (
+      pointerEvent &&
+      pointerEvent.chartId !== 'timeSpentBySpan' &&
+      chartRef.current
+    ) {
+      chartRef.current.dispatchExternalPointerEvent(pointerEvent);
     }
-  }, [chartRef, event]);
+  }, [chartRef, pointerEvent]);
 
   const min = moment.utc(start).valueOf();
   const max = moment.utc(end).valueOf();
@@ -71,9 +75,7 @@ export function TransactionBreakdownChartContents({
           theme={chartTheme}
           xDomain={{ min, max }}
           flatLegend
-          onPointerUpdate={(currEvent: any) => {
-            setEvent(currEvent);
-          }}
+          onPointerUpdate={setPointerEvent}
           externalPointerEvents={{
             tooltip: { visible: true, placement: Placement.Bottom },
           }}

x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx

@@ -20,7 +20,7 @@ import {
   TRANSACTION_ROUTE_CHANGE,
 } from '../../../../../common/transaction_types';
 import { asTransactionRate } from '../../../../../common/utils/formatters';
-import { ChartsSyncContextProvider } from '../../../../context/charts_sync_context';
+import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event_context';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
@@ -51,7 +51,7 @@ export function TransactionCharts({
 
   return (
     <>
-      <ChartsSyncContextProvider>
+      <ChartPointerEventContextProvider>
         <EuiFlexGrid columns={2} gutterSize="s">
           <EuiFlexItem data-cy={`transaction-duration-charts`}>
             <EuiPanel>
@@ -109,7 +109,7 @@ export function TransactionCharts({
             <TransactionBreakdownChart />
           </EuiFlexItem>
         </EuiFlexGrid>
-      </ChartsSyncContextProvider>
+      </ChartPointerEventContextProvider>
     </>
   );
 }

x-pack/plugins/apm/public/context/charts_sync_context.tsx → x-pack/plugins/apm/public/context/chart_pointer_event_context.tsx

@@ -12,21 +12,23 @@ import React, {
   useState,
 } from 'react';
 
-export const ChartsSyncContext = createContext<{
-  event: any;
-  setEvent: Dispatch<SetStateAction<{}>>;
+import { PointerEvent } from '@elastic/charts';
+
+export const ChartPointerEventContext = createContext<{
+  pointerEvent: PointerEvent | null;
+  setPointerEvent: Dispatch<SetStateAction<PointerEvent | null>>;
 } | null>(null);
 
-export function ChartsSyncContextProvider({
+export function ChartPointerEventContextProvider({
   children,
 }: {
   children: ReactNode;
 }) {
-  const [event, setEvent] = useState({});
+  const [pointerEvent, setPointerEvent] = useState<PointerEvent | null>(null);
 
   return (
-    <ChartsSyncContext.Provider
-      value={{ event, setEvent }}
+    <ChartPointerEventContext.Provider
+      value={{ pointerEvent, setPointerEvent }}
       children={children}
     />
   );

x-pack/plugins/apm/public/hooks/use_charts_sync.tsx → x-pack/plugins/apm/public/hooks/use_chart_pointer_event.tsx

@@ -5,13 +5,13 @@
  */
 
 import { useContext } from 'react';
-import { ChartsSyncContext } from '../context/charts_sync_context';
+import { ChartPointerEventContext } from '../context/chart_pointer_event_context';
 
-export function useChartsSync() {
-  const context = useContext(ChartsSyncContext);
+export function useChartPointerEvent() {
+  const context = useContext(ChartPointerEventContext);
 
   if (!context) {
-    throw new Error('Missing ChartsSync context provider');
+    throw new Error('Missing ChartPointerEventContext provider');
   }
 
   return context;