From 10f8fda644a8bcb6b9f0924ed92b37ccf708f736 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Tue, 24 Nov 2020 20:15:14 +0100
Subject: [PATCH 1/2] [APM] Rename `ChartsSyncContext` to `PointerEventContext`

---
 .../app/TransactionDetails/index.tsx           |  6 +++---
 .../components/app/service_metrics/index.tsx   |  6 +++---
 .../app/service_node_metrics/index.tsx         | 10 +++++-----
 .../components/app/service_overview/index.tsx  |  6 +++---
 .../shared/charts/timeseries_chart.tsx         | 14 ++++++--------
 .../transaction_breakdown_chart_contents.tsx   | 18 ++++++++++--------
 .../shared/charts/transaction_charts/index.tsx |  6 +++---
 ...c_context.tsx => pointer_event_context.tsx} | 16 +++++++++-------
 ...e_charts_sync.tsx => use_pointer_event.tsx} |  8 ++++----
 9 files changed, 46 insertions(+), 44 deletions(-)
 rename x-pack/plugins/apm/public/context/{charts_sync_context.tsx => pointer_event_context.tsx} (53%)
 rename x-pack/plugins/apm/public/hooks/{use_charts_sync.tsx => use_pointer_event.tsx} (59%)

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
index 8a99773a97ba..3dd6f55de450 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/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>
+            <PointerEventContextProvider>
               <TransactionCharts
                 fetchStatus={transactionChartsStatus}
                 charts={transactionChartsData}
                 urlParams={urlParams}
               />
-            </ChartsSyncContextProvider>
+            </PointerEventContextProvider>
 
             <EuiHorizontalRule size="full" margin="l" />
 
diff --git a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
index 5dc1645a1760..865b64dd84f1 100644
--- a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/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>
+            <PointerEventContextProvider>
               <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>
+            </PointerEventContextProvider>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
index 59e919199be7..4f45f986a6c7 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/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>
+        <PointerEventContextProvider>
           <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>
+        </PointerEventContextProvider>
       )}
       <SearchBar />
       <EuiPage>
         {agentName && (
-          <ChartsSyncContextProvider>
+          <PointerEventContextProvider>
             <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>
+          </PointerEventContextProvider>
         )}
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
index 33027f3946d1..6f50fa4ddd1f 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/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>
+    <PointerEventContextProvider>
       <SearchBar />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
@@ -170,6 +170,6 @@ export function ServiceOverview({
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
-    </ChartsSyncContextProvider>
+    </PointerEventContextProvider>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
index fe3d9a1edc1f..259b9835fe94 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
+++ b/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 { usePointerEvent } from '../../../hooks/use_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 } = usePointerEvent();
   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 },
           }}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
index 8070868f831b..3f34baf9c8db 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
+++ b/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 { usePointerEvent } from '../../../../hooks/use_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 } = usePointerEvent();
   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 },
           }}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
index 3af081c11c9b..8babf75b47d9 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../../context/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>
+      <PointerEventContextProvider>
         <EuiFlexGrid columns={2} gutterSize="s">
           <EuiFlexItem data-cy={`transaction-duration-charts`}>
             <EuiPanel>
@@ -109,7 +109,7 @@ export function TransactionCharts({
             <TransactionBreakdownChart />
           </EuiFlexItem>
         </EuiFlexGrid>
-      </ChartsSyncContextProvider>
+      </PointerEventContextProvider>
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/context/charts_sync_context.tsx b/x-pack/plugins/apm/public/context/pointer_event_context.tsx
similarity index 53%
rename from x-pack/plugins/apm/public/context/charts_sync_context.tsx
rename to x-pack/plugins/apm/public/context/pointer_event_context.tsx
index d983a857a26e..0f256940ecb0 100644
--- a/x-pack/plugins/apm/public/context/charts_sync_context.tsx
+++ b/x-pack/plugins/apm/public/context/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 PointerEventContext = createContext<{
+  pointerEvent: PointerEvent | null;
+  setPointerEvent: Dispatch<SetStateAction<PointerEvent | null>>;
 } | null>(null);
 
-export function ChartsSyncContextProvider({
+export function PointerEventContextProvider({
   children,
 }: {
   children: ReactNode;
 }) {
-  const [event, setEvent] = useState({});
+  const [pointerEvent, setPointerEvent] = useState<PointerEvent | null>(null);
 
   return (
-    <ChartsSyncContext.Provider
-      value={{ event, setEvent }}
+    <PointerEventContext.Provider
+      value={{ pointerEvent, setPointerEvent }}
       children={children}
     />
   );
diff --git a/x-pack/plugins/apm/public/hooks/use_charts_sync.tsx b/x-pack/plugins/apm/public/hooks/use_pointer_event.tsx
similarity index 59%
rename from x-pack/plugins/apm/public/hooks/use_charts_sync.tsx
rename to x-pack/plugins/apm/public/hooks/use_pointer_event.tsx
index cde5c84a6097..897ab790211b 100644
--- a/x-pack/plugins/apm/public/hooks/use_charts_sync.tsx
+++ b/x-pack/plugins/apm/public/hooks/use_pointer_event.tsx
@@ -5,13 +5,13 @@
  */
 
 import { useContext } from 'react';
-import { ChartsSyncContext } from '../context/charts_sync_context';
+import { PointerEventContext } from '../context/pointer_event_context';
 
-export function useChartsSync() {
-  const context = useContext(ChartsSyncContext);
+export function usePointerEvent() {
+  const context = useContext(PointerEventContext);
 
   if (!context) {
-    throw new Error('Missing ChartsSync context provider');
+    throw new Error('Missing PointerEventContext provider');
   }
 
   return context;

From 836bd61e2ac42f95a937e8546f8ad4c04721b797 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Wed, 25 Nov 2020 09:52:13 +0100
Subject: [PATCH 2/2] Rename `PointerEventContext` to
 `ChartPointerEventContext`

---
 .../public/components/app/TransactionDetails/index.tsx |  6 +++---
 .../public/components/app/service_metrics/index.tsx    |  6 +++---
 .../components/app/service_node_metrics/index.tsx      | 10 +++++-----
 .../public/components/app/service_overview/index.tsx   |  6 +++---
 .../components/shared/charts/timeseries_chart.tsx      |  4 ++--
 .../transaction_breakdown_chart_contents.tsx           |  4 ++--
 .../shared/charts/transaction_charts/index.tsx         |  6 +++---
 ...ent_context.tsx => chart_pointer_event_context.tsx} |  6 +++---
 ...e_pointer_event.tsx => use_chart_pointer_event.tsx} |  8 ++++----
 9 files changed, 28 insertions(+), 28 deletions(-)
 rename x-pack/plugins/apm/public/context/{pointer_event_context.tsx => chart_pointer_event_context.tsx} (83%)
 rename x-pack/plugins/apm/public/hooks/{use_pointer_event.tsx => use_chart_pointer_event.tsx} (56%)

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
index 3dd6f55de450..8f335ddc71c7 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/pointer_event_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}>
-            <PointerEventContextProvider>
+            <ChartPointerEventContextProvider>
               <TransactionCharts
                 fetchStatus={transactionChartsStatus}
                 charts={transactionChartsData}
                 urlParams={urlParams}
               />
-            </PointerEventContextProvider>
+            </ChartPointerEventContextProvider>
 
             <EuiHorizontalRule size="full" margin="l" />
 
diff --git a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
index 865b64dd84f1..d0f8fc1e6133 100644
--- a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/pointer_event_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}>
-            <PointerEventContextProvider>
+            <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" />
-            </PointerEventContextProvider>
+            </ChartPointerEventContextProvider>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
index 4f45f986a6c7..a74ff574bc0c 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/pointer_event_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 && (
-        <PointerEventContextProvider>
+        <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" />
-        </PointerEventContextProvider>
+        </ChartPointerEventContextProvider>
       )}
       <SearchBar />
       <EuiPage>
         {agentName && (
-          <PointerEventContextProvider>
+          <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" />
-          </PointerEventContextProvider>
+          </ChartPointerEventContextProvider>
         )}
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
index 6f50fa4ddd1f..ddf3107a8ab1 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../context/pointer_event_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 (
-    <PointerEventContextProvider>
+    <ChartPointerEventContextProvider>
       <SearchBar />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
@@ -170,6 +170,6 @@ export function ServiceOverview({
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
-    </PointerEventContextProvider>
+    </ChartPointerEventContextProvider>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
index 259b9835fe94..c4f5abe104aa 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
+++ b/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 { usePointerEvent } from '../../../hooks/use_pointer_event';
+import { useChartPointerEvent } from '../../../hooks/use_chart_pointer_event';
 import { unit } from '../../../style/variables';
 import { Annotations } from './annotations';
 import { ChartContainer } from './chart_container';
@@ -60,7 +60,7 @@ export function TimeseriesChart({
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
   const chartTheme = useChartTheme();
-  const { pointerEvent, setPointerEvent } = usePointerEvent();
+  const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
   const { start, end } = urlParams;
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
index 3f34baf9c8db..04c07c01442a 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
+++ b/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 { usePointerEvent } from '../../../../hooks/use_pointer_event';
+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,7 +45,7 @@ export function TransactionBreakdownChartContents({
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
   const chartTheme = useChartTheme();
-  const { pointerEvent, setPointerEvent } = usePointerEvent();
+  const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
   const { start, end } = urlParams;
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
index 8babf75b47d9..221f17bb9e1d 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
+++ b/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 { PointerEventContextProvider } from '../../../../context/pointer_event_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 (
     <>
-      <PointerEventContextProvider>
+      <ChartPointerEventContextProvider>
         <EuiFlexGrid columns={2} gutterSize="s">
           <EuiFlexItem data-cy={`transaction-duration-charts`}>
             <EuiPanel>
@@ -109,7 +109,7 @@ export function TransactionCharts({
             <TransactionBreakdownChart />
           </EuiFlexItem>
         </EuiFlexGrid>
-      </PointerEventContextProvider>
+      </ChartPointerEventContextProvider>
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/context/pointer_event_context.tsx b/x-pack/plugins/apm/public/context/chart_pointer_event_context.tsx
similarity index 83%
rename from x-pack/plugins/apm/public/context/pointer_event_context.tsx
rename to x-pack/plugins/apm/public/context/chart_pointer_event_context.tsx
index 0f256940ecb0..ea6020646325 100644
--- a/x-pack/plugins/apm/public/context/pointer_event_context.tsx
+++ b/x-pack/plugins/apm/public/context/chart_pointer_event_context.tsx
@@ -14,12 +14,12 @@ import React, {
 
 import { PointerEvent } from '@elastic/charts';
 
-export const PointerEventContext = createContext<{
+export const ChartPointerEventContext = createContext<{
   pointerEvent: PointerEvent | null;
   setPointerEvent: Dispatch<SetStateAction<PointerEvent | null>>;
 } | null>(null);
 
-export function PointerEventContextProvider({
+export function ChartPointerEventContextProvider({
   children,
 }: {
   children: ReactNode;
@@ -27,7 +27,7 @@ export function PointerEventContextProvider({
   const [pointerEvent, setPointerEvent] = useState<PointerEvent | null>(null);
 
   return (
-    <PointerEventContext.Provider
+    <ChartPointerEventContext.Provider
       value={{ pointerEvent, setPointerEvent }}
       children={children}
     />
diff --git a/x-pack/plugins/apm/public/hooks/use_pointer_event.tsx b/x-pack/plugins/apm/public/hooks/use_chart_pointer_event.tsx
similarity index 56%
rename from x-pack/plugins/apm/public/hooks/use_pointer_event.tsx
rename to x-pack/plugins/apm/public/hooks/use_chart_pointer_event.tsx
index 897ab790211b..058ec594e2d2 100644
--- a/x-pack/plugins/apm/public/hooks/use_pointer_event.tsx
+++ b/x-pack/plugins/apm/public/hooks/use_chart_pointer_event.tsx
@@ -5,13 +5,13 @@
  */
 
 import { useContext } from 'react';
-import { PointerEventContext } from '../context/pointer_event_context';
+import { ChartPointerEventContext } from '../context/chart_pointer_event_context';
 
-export function usePointerEvent() {
-  const context = useContext(PointerEventContext);
+export function useChartPointerEvent() {
+  const context = useContext(ChartPointerEventContext);
 
   if (!context) {
-    throw new Error('Missing PointerEventContext provider');
+    throw new Error('Missing ChartPointerEventContext provider');
   }
 
   return context;