From 9716438674e5c2793b1c12088b2691f3bd86d031 Mon Sep 17 00:00:00 2001 From: Joe Li Date: Wed, 17 May 2023 14:32:29 -0700 Subject: [PATCH] Revert "fix(chart): scrollbar keep flusing on and off (#23778)" This reverts commit 839bc088f9b51de600ea6046edcf06ae62881d30. --- .../index.jsx => ExploreChartPanel.jsx} | 22 ++++----- .../ExploreChartPanel.test.jsx | 0 .../useResizeDetectorByObserver.ts | 46 ------------------- .../ExploreViewContainer.test.tsx | 11 ++--- 4 files changed, 15 insertions(+), 64 deletions(-) rename superset-frontend/src/explore/components/{ExploreChartPanel/index.jsx => ExploreChartPanel.jsx} (96%) rename superset-frontend/src/explore/components/{ExploreChartPanel => }/ExploreChartPanel.test.jsx (100%) delete mode 100644 superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx similarity index 96% rename from superset-frontend/src/explore/components/ExploreChartPanel/index.jsx rename to superset-frontend/src/explore/components/ExploreChartPanel.jsx index 893a10275a25d..1e57e0750e42a 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx +++ b/superset-frontend/src/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 && ( ), [ - resizeObserverRef, showAlertBanner, errorMessage, onQuery, diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx similarity index 100% rename from superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx rename to superset-frontend/src/explore/components/ExploreChartPanel.test.jsx diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts deleted file mode 100644 index afbeeeb1e0354..0000000000000 --- a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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(); - 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, - }; -} diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx index fbfb0c3b1de77..4f3b4d8dd05ee 100644 --- 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,