fix(dashboards): Only trigger echarts dispatch sync for visible widgets

static/app/views/dashboards/contexts/widgetSyncContext.tsx

@@ -1,11 +1,13 @@
 import type {ReactNode} from 'react';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {EChartsType} from 'echarts';
 import * as echarts from 'echarts';
 
 import {uniqueId} from 'sentry/utils/guid';
 import {createDefinedContext} from 'sentry/utils/performance/contexts/utils';
 
-type RegistrationFunction = (chart: EChartsType) => void;
+type UnregisterFunction = () => void;
+type RegistrationFunction = (chart: EChartsType) => UnregisterFunction;
 
 interface WidgetSyncContext {
   groupName: string;
@@ -25,18 +27,68 @@ interface WidgetSyncContextProviderProps {
 
 export function WidgetSyncContextProvider({
   children,
-  groupName = uniqueId(),
+  groupName,
 }: WidgetSyncContextProviderProps) {
-  const register: RegistrationFunction = chart => {
-    chart.group = groupName;
-    echarts?.connect(groupName);
-  };
+  // Stabilize the default groupName so it doesn't change on every render
+  const stableGroupName = useMemo(() => groupName ?? uniqueId(), [groupName]);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  const getOrCreateObserver = useCallback(() => {
+    if (!observerRef.current) {
+      observerRef.current = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          const chart = echarts.getInstanceByDom(entry.target as HTMLElement);
+          if (!chart) {
+            continue;
+          }
+
+          if (entry.isIntersecting) {
+            chart.group = stableGroupName;
+          } else {
+            chart.group = '';
+          }
+        }
+
+        echarts?.connect(stableGroupName);
+      });
+    }
+    return observerRef.current;
+  }, [stableGroupName]);
+
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+    };
+  }, [stableGroupName]);
+
+  const register = useCallback(
+    (chart: EChartsType): UnregisterFunction => {
+      const dom = chart.getDom();
+      if (!dom) {
+        return () => {};
+      }
+
+      getOrCreateObserver().observe(dom);
+
+      // Set the group immediately for charts that may already be visible
+      chart.group = stableGroupName;
+      echarts?.connect(stableGroupName);
+
+      // Return a function to unregister the chart
+      return () => {
+        observerRef.current?.unobserve(dom);
+        chart.group = '';
+      };
+    },
+    [stableGroupName, getOrCreateObserver]
+  );
 
   return (
     <_WidgetSyncProvider
       value={{
         register,
-        groupName,
+        groupName: stableGroupName,
       }}
     >
       {children}
@@ -50,7 +102,7 @@ export function useWidgetSyncContext(): WidgetSyncContext {
   if (!context) {
     // The provider was not registered, return a dummy function
     return {
-      register: (_p: any) => null,
+      register: (_p: any) => () => {},
       groupName: '',
     };
   }

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import {mergeRefs} from '@react-aria/utils';
 import * as Sentry from '@sentry/react';
@@ -136,8 +136,15 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   // the backend zerofills the data
 
   const chartRef = useRef<ReactEchartsRef | null>(null);
+  const unregisterRef = useRef<(() => void) | null>(null);
   const {register: registerWithWidgetSyncContext, groupName} = useWidgetSyncContext();
 
+  useEffect(() => {
+    return () => {
+      unregisterRef.current?.();
+    };
+  }, []);
+
   const pageFilters = usePageFilters();
   const {start, end, period, utc} =
     props.pageFilters?.datetime || pageFilters.selection.datetime;
@@ -445,7 +452,8 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   const handleChartReady = useCallback(
     (instance: echarts.ECharts) => {
       onChartReadyZoom(instance);
-      registerWithWidgetSyncContext(instance);
+      unregisterRef.current?.();
+      unregisterRef.current = registerWithWidgetSyncContext(instance);
     },
     [onChartReadyZoom, registerWithWidgetSyncContext]
   );