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

This reverts commit 839bc08.
preset-io · May 17, 2023 · 9716438 · 9716438
1 parent 25a4e75
commit 9716438
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 64 deletions.
diff --git a/...re/components/ExploreChartPanel/index.jsx → .../explore/components/ExploreChartPanel.jsx b/...re/components/ExploreChartPanel/index.jsx → .../explore/components/ExploreChartPanel.jsx
@@ -30,6 +30,7 @@ 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';
@@ -41,12 +42,11 @@ import {
 import Alert from 'src/components/Alert';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
-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';
+import { DataTablesPane } from './DataTablesPane';
+import { buildV1ChartDataPayload } from '../exploreUtils';
+import { ChartPills } from './ChartPills';
+import { ExploreAlert } from './ExploreAlert';
+import { getChartRequiredFieldsMissingMessage } from '../../utils/getChartRequiredFieldsMissingMessage';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -142,11 +142,13 @@ 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,
-  } = useResizeDetectorByObserver();
+    ref: chartPanelRef,
+  } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 300,
+  });
   const [splitSizes, setSplitSizes] = useState(
     isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
       ? INITIAL_SIZES
@@ -307,7 +309,6 @@ const ExploreChartPanel = ({
           display: flex;
           flex-direction: column;
         `}
-        ref={resizeObserverRef}
       >
         {vizTypeNeedsDataset && (
           <Alert
@@ -374,7 +375,6 @@ const ExploreChartPanel = ({
       </div>
     ),
     [
-      resizeObserverRef,
       showAlertBanner,
       errorMessage,
       onQuery,

diff --git a/...loreChartPanel/ExploreChartPanel.test.jsx → ...ore/components/ExploreChartPanel.test.jsx b/...loreChartPanel/ExploreChartPanel.test.jsx → ...ore/components/ExploreChartPanel.test.jsx
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
@@ -78,13 +78,10 @@ const reduxState = {
 const KEY = 'aWrs7w29sd';
 const SEARCH = `?form_data_key=${KEY}&dataset_id=1`;
 
-jest.mock(
-  'src/explore/components/ExploreChartPanel/useResizeDetectorByObserver',
-  () => ({
-    __esModule: true,
-    default: () => ({ height: 100, width: 100 }),
-  }),
-);
+jest.mock('react-resize-detector', () => ({
+  __esModule: true,
+  useResizeDetector: () => ({ height: 100, width: 100 }),
+}));
 
 jest.mock('lodash/debounce', () => ({
   __esModule: true,