fix(dashboard): ensure charts re-render when visibility state changes

superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.jsx

@@ -613,8 +613,9 @@ export default memo(Chart, (prevProps, nextProps) => {
   }
   return (
     !nextProps.isComponentVisible ||
-    (prevProps.isInView === nextProps.isInView &&
-      prevProps.componentId === nextProps.componentId &&
+    (prevProps.componentId === nextProps.componentId &&
+      prevProps.isComponentVisible &&
+      prevProps.isInView === nextProps.isInView &&
       prevProps.id === nextProps.id &&
       prevProps.dashboardId === nextProps.dashboardId &&
       prevProps.extraControls === nextProps.extraControls &&

superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.test.jsx

@@ -267,3 +267,33 @@ test('should call exportChart with row_limit props.maxRows when exportFullXLSX i
 
   stubbedExportXLSX.mockRestore();
 });
+
+test('should re-render when chart becomes visible', () => {
+  const { rerender, getByTestId } = setup({ isComponentVisible: false });
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+
+  rerender(<Chart {...props} isComponentVisible />);
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+});
+
+test('should re-render when componentId changes', () => {
+  const { rerender, getByTestId } = setup({
+    isComponentVisible: true,
+    componentId: 'test-1',
+  });
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+
+  rerender(<Chart {...props} isComponentVisible componentId="test-2" />);
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+});
+
+test('should re-render when cacheBusterProp changes', () => {
+  const { rerender, getByTestId } = setup({
+    isComponentVisible: true,
+    cacheBusterProp: 'v1',
+  });
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+
+  rerender(<Chart {...props} isComponentVisible cacheBusterProp="v2" />);
+  expect(getByTestId('chart-container')).toBeInTheDocument();
+});