mirror of https://github.com/apache/superset.git
fix(chart): scrollbar keep flusing on and off (#23778)
This commit is contained in:
parent
11dbe131d6
commit
839bc088f9
|
@ -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,
|
|
@ -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,
|
||||
};
|
||||
}
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue