Skip to content

Commit

Permalink
fix(chart): scrollbar keep flusing on and off (#23778)
Browse files Browse the repository at this point in the history
  • Loading branch information
justinpark authored May 1, 2023
1 parent 11dbe13 commit 839bc08
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -309,6 +307,7 @@ const ExploreChartPanel = ({
display: flex;
flex-direction: column;
`}
ref={resizeObserverRef}
>
{vizTypeNeedsDataset && (
<Alert
Expand Down Expand Up @@ -375,6 +374,7 @@ const ExploreChartPanel = ({
</div>
),
[
resizeObserverRef,
showAlertBanner,
errorMessage,
onQuery,
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 839bc08

Please sign in to comment.