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