feat(tracemetrics): Sync chart cursors (#101958)

Synchronizes the chart cursors on hover

Author: narsaynorath

static/app/views/explore/metrics/metricGraph/index.tsx

@@ -19,6 +19,8 @@ import {
   useMetricVisualize,
   useSetMetricVisualize,
 } from 'sentry/views/explore/metrics/metricsQueryParams';
+import {METRICS_CHART_GROUP} from 'sentry/views/explore/metrics/metricsTab';
+import {useMultiMetricsQueryParams} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
 import {
   useQueryParamsQuery,
   useQueryParamsTopEventsLimit,
@@ -29,7 +31,10 @@ import {
   combineConfidenceForSeries,
   prettifyAggregation,
 } from 'sentry/views/explore/utils';
-import {ChartType} from 'sentry/views/insights/common/components/chart';
+import {
+  ChartType,
+  useSynchronizeCharts,
+} from 'sentry/views/insights/common/components/chart';
 import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
 import {GenericWidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList';
 
@@ -55,9 +60,16 @@ export function MetricsGraph({
   infoContentHidden,
   isMetricOptionsEmpty,
 }: MetricsGraphProps) {
+  const metricQueries = useMultiMetricsQueryParams();
   const visualize = useMetricVisualize();
   const setVisualize = useSetMetricVisualize();
 
+  useSynchronizeCharts(
+    metricQueries.length,
+    !timeseriesResult.isPending,
+    METRICS_CHART_GROUP
+  );
+
   function handleChartTypeChange(newChartType: ChartType) {
     setVisualize(visualize.replace({chartType: newChartType}));
   }

static/app/views/explore/metrics/metricsTab.tsx

@@ -6,6 +6,7 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {t} from 'sentry/locale';
+import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
 import {
   ExploreBodyContent,
   ExploreBodySearch,
@@ -31,6 +32,7 @@ import {
 import type {PickableDays} from 'sentry/views/explore/utils';
 
 const MAX_METRICS_ALLOWED = 4;
+export const METRICS_CHART_GROUP = 'metrics-charts-group';
 
 type MetricsTabProps = PickableDays;
 
@@ -118,20 +120,22 @@ function MetricsTabBodySection() {
       <ExploreControlSection expanded={false} />
       <ExploreContentSection expanded={false}>
         <Flex direction="column" gap="lg">
-          {metricQueries.map((metricQuery, index) => {
-            return (
-              <MetricsQueryParamsProvider
-                key={`queryPanel-${index}`}
-                queryParams={metricQuery.queryParams}
-                setQueryParams={metricQuery.setQueryParams}
-                traceMetric={metricQuery.metric}
-                setTraceMetric={metricQuery.setTraceMetric}
-                removeMetric={metricQuery.removeMetric}
-              >
-                <MetricPanel traceMetric={metricQuery.metric} queryIndex={index} />
-              </MetricsQueryParamsProvider>
-            );
-          })}
+          <WidgetSyncContextProvider groupName={METRICS_CHART_GROUP}>
+            {metricQueries.map((metricQuery, index) => {
+              return (
+                <MetricsQueryParamsProvider
+                  key={`queryPanel-${index}`}
+                  queryParams={metricQuery.queryParams}
+                  setQueryParams={metricQuery.setQueryParams}
+                  traceMetric={metricQuery.metric}
+                  setTraceMetric={metricQuery.setTraceMetric}
+                  removeMetric={metricQuery.removeMetric}
+                >
+                  <MetricPanel traceMetric={metricQuery.metric} queryIndex={index} />
+                </MetricsQueryParamsProvider>
+              );
+            })}
+          </WidgetSyncContextProvider>
         </Flex>
       </ExploreContentSection>
     </ExploreBodyContent>