From 0afb7e1a0fd0f20fa3494e192a72cacb46a5eeda Mon Sep 17 00:00:00 2001
From: nikkikapadia <nikki.kapadia@sentry.io>
Date: Fri, 27 Sep 2024 13:37:44 -0400
Subject: [PATCH] fix modal legend issues

---
 .../components/modals/widgetViewerModal.tsx   | 29 +++++--------------
 .../app/views/dashboards/widgetCard/chart.tsx |  3 +-
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/static/app/components/modals/widgetViewerModal.tsx b/static/app/components/modals/widgetViewerModal.tsx
index 4c2dcb3b6a400a..a88a9f1018fb6e 100644
--- a/static/app/components/modals/widgetViewerModal.tsx
+++ b/static/app/components/modals/widgetViewerModal.tsx
@@ -130,7 +130,13 @@ const shouldWidgetCardChartMemo = (prevProps, props) => {
   );
   const isNotTopNWidget =
     props.widget.displayType !== DisplayType.TOP_N && !defined(props.widget.limit);
-  return selectionMatches && chartZoomOptionsMatches && (sortMatches || isNotTopNWidget);
+  const legendMatches = isEqual(props.legendOptions, prevProps.legendOptions);
+  return (
+    selectionMatches &&
+    chartZoomOptionsMatches &&
+    (sortMatches || isNotTopNWidget) &&
+    legendMatches
+  );
 };
 
 // WidgetCardChartContainer and WidgetCardChart rerenders if selection was changed.
@@ -221,27 +227,6 @@ function WidgetViewerModal(props: Props) {
     useState<PageFilters>(locationPageFilter);
   const modalChartSelection = useRef(modalTableSelection);
 
-  useEffect(() => {
-    // have the query legend values update
-    const legendData = seriesData?.reduce((prevSeries, series) => {
-      prevSeries[series.seriesName] = series.seriesName === 'Releases' ? false : true;
-      return prevSeries;
-    }, {});
-
-    const definedLegendData = legendData ? legendData : {};
-
-    router.replace({
-      pathname: location.pathname,
-      query: {
-        ...location.query,
-        [WidgetViewerQueryField.LEGEND]: Object.keys(definedLegendData).filter(
-          key => definedLegendData[key]
-        ),
-      },
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   // Detect when a user clicks back and set the PageFilter state to match the location
   // We need to use useEffect to prevent infinite looping rerenders due to the setModalTableSelection call
   useEffect(() => {
diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index cc3674ac9e3489..b9e984d6b78da4 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -535,8 +535,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
               memoized
             >
               {({releaseSeries}) => {
-                location.query.unselectedSeries = 'Releases';
-                legend.selected = getSeriesSelection(location);
+                legend.selected = {Releases: false, ...legend.selected};
 
                 return (
                   <TransitionChart loading={loading} reloading={loading}>