fix(chart): scrollbar keep flusing on and off (#23778)

superset-frontend/src/explore/components/ExploreChartPanel.jsx → superset-frontend/src/explore/components/ExploreChartPanel/index.jsx

@@ -30,7 +30,6 @@ import {
   t,
   useTheme,
 } from '@superset-ui/core';
-import { useResizeDetector } from 'react-resize-detector';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import ChartContainer from 'src/components/Chart/ChartContainer';
 import { isFeatureEnabled } from 'src/featureFlags';
@@ -42,11 +41,12 @@ import {
 import Alert from 'src/components/Alert';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
-import { DataTablesPane } from './DataTablesPane';
-import { buildV1ChartDataPayload } from '../exploreUtils';
-import { ChartPills } from './ChartPills';
-import { ExploreAlert } from './ExploreAlert';
-import { getChartRequiredFieldsMissingMessage } from '../../utils/getChartRequiredFieldsMissingMessage';
+import { buildV1ChartDataPayload } from 'src/explore/exploreUtils';
+import { getChartRequiredFieldsMissingMessage } from 'src/utils/getChartRequiredFieldsMissingMessage';
+import { DataTablesPane } from '../DataTablesPane';
+import { ChartPills } from '../ChartPills';
+import { ExploreAlert } from '../ExploreAlert';
+import useResizeDetectorByObserver from './useResizeDetectorByObserver';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -142,13 +142,11 @@ const ExploreChartPanel = ({
   const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
   const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
   const {
+    ref: chartPanelRef,
+    observerRef: resizeObserverRef,
     width: chartPanelWidth,
     height: chartPanelHeight,
-    ref: chartPanelRef,
-  } = useResizeDetector({
-    refreshMode: 'debounce',
-    refreshRate: 300,
-  });
+  } = useResizeDetectorByObserver();
   const [splitSizes, setSplitSizes] = useState(
     isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
       ? INITIAL_SIZES
@@ -309,6 +307,7 @@ const ExploreChartPanel = ({
           display: flex;
           flex-direction: column;
         `}
+        ref={resizeObserverRef}
       >
         {vizTypeNeedsDataset && (
           <Alert
@@ -375,6 +374,7 @@ const ExploreChartPanel = ({
       </div>
     ),
     [
+      resizeObserverRef,
       showAlertBanner,
       errorMessage,
       onQuery,

superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts

@@ -0,0 +1,46 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useState, useCallback, useRef } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+export default function useResizeDetectorByObserver() {
+  const ref = useRef<HTMLDivElement>();
+  const [{ width, height }, setChartPanelSize] = useState<{
+    width?: number;
+    height?: number;
+  }>({});
+  const onResize = useCallback(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect?.() || {};
+      setChartPanelSize({ width, height });
+    }
+  }, []);
+  const { ref: observerRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 300,
+    onResize,
+  });
+
+  return {
+    ref,
+    observerRef,
+    width,
+    height,
+  };
+}

superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx

@@ -78,10 +78,13 @@ const reduxState = {
 const KEY = 'aWrs7w29sd';
 const SEARCH = `?form_data_key=${KEY}&dataset_id=1`;
 
-jest.mock('react-resize-detector', () => ({
-  __esModule: true,
-  useResizeDetector: () => ({ height: 100, width: 100 }),
-}));
+jest.mock(
+  'src/explore/components/ExploreChartPanel/useResizeDetectorByObserver',
+  () => ({
+    __esModule: true,
+    default: () => ({ height: 100, width: 100 }),
+  }),
+);
 
 jest.mock('lodash/debounce', () => ({
   __esModule: true,