feat(replay): Fix MemoryChart to not re-render as often (#87190)

Split `<MemoryChart>` into 2 components:

* The outer component handles mouse events and setting hover/current
time
* The inner component renders the chart and is now memoized so that it
does not re-render as often

This fixes the issue where a playing replay re-renders the chart and
makes the tooltip flicker. Additionally, we define `triggerLineEvent:
true` on the series so that mousemove events work on the chart to update
hover time.

Closes #51465
Closes #68785

Author: billyvg

static/app/components/charts/areaChart.tsx

@@ -1,6 +1,7 @@
+import {forwardRef} from 'react';
 import type {LineSeriesOption} from 'echarts';
 
-import type {Series} from 'sentry/types/echarts';
+import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
 
 import AreaSeries from './series/areaSeries';
 import type {BaseChartProps} from './baseChart';
@@ -46,13 +47,16 @@ export function transformToAreaSeries({
   );
 }
 
-export function AreaChart({series, stacked, colors, ...props}: AreaChartProps) {
-  return (
-    <BaseChart
-      {...props}
-      data-test-id="area-chart"
-      colors={colors}
-      series={transformToAreaSeries({series, stacked, colors})}
-    />
-  );
-}
+export const AreaChart = forwardRef<ReactEchartsRef, AreaChartProps>(
+  ({series, stacked, colors, ...props}, ref) => {
+    return (
+      <BaseChart
+        {...props}
+        ref={ref}
+        data-test-id="area-chart"
+        colors={colors}
+        series={transformToAreaSeries({series, stacked, colors})}
+      />
+    );
+  }
+);