From 71e9cd4c41db8998194b86689e7602aca5300ac7 Mon Sep 17 00:00:00 2001 From: justin-park Date: Fri, 21 Apr 2023 15:12:23 -0700 Subject: [PATCH 1/4] fix(chart): scrollbar keep flusing on and off --- .../explore/components/ExploreChartPanel.jsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index 1e57e0750e42a..020f7aece2e4f 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { + useState, + useEffect, + useCallback, + useMemo, + useRef, +} from 'react'; import PropTypes from 'prop-types'; import Split from 'react-split'; import { @@ -141,13 +147,24 @@ const ExploreChartPanel = ({ const theme = useTheme(); const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR; const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR; - const { - width: chartPanelWidth, - height: chartPanelHeight, - ref: chartPanelRef, - } = useResizeDetector({ + const chartPanelRef = useRef(); + const [{ chartPanelWidth, chartPanelHeight }, setChartPanelSize] = useState( + {}, + ); + const onResize = useCallback(() => { + if (chartPanelRef.current) { + const { width, height } = + chartPanelRef.current.getBoundingClientRect?.() || {}; + setChartPanelSize({ + chartPanelWidth: width, + chartPanelHeight: height, + }); + } + }, []); + const { ref: resizeObserverRef } = useResizeDetector({ refreshMode: 'debounce', refreshRate: 300, + onResize, }); const [splitSizes, setSplitSizes] = useState( isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) @@ -309,6 +326,7 @@ const ExploreChartPanel = ({ display: flex; flex-direction: column; `} + ref={resizeObserverRef} > {vizTypeNeedsDataset && ( Date: Mon, 24 Apr 2023 09:48:05 -0700 Subject: [PATCH 2/4] refactor ExploreChartPanel testable --- .../ExploreChartPanel.test.jsx | 0 .../index.jsx} | 46 ++++++------------- .../useResizeDectorByObserver.ts | 46 +++++++++++++++++++ .../ExploreViewContainer.test.tsx | 11 +++-- 4 files changed, 67 insertions(+), 36 deletions(-) rename superset-frontend/src/explore/components/{ => ExploreChartPanel}/ExploreChartPanel.test.jsx (100%) rename superset-frontend/src/explore/components/{ExploreChartPanel.jsx => ExploreChartPanel/index.jsx} (92%) create mode 100644 superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx similarity index 100% rename from superset-frontend/src/explore/components/ExploreChartPanel.test.jsx rename to superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx similarity index 92% rename from superset-frontend/src/explore/components/ExploreChartPanel.jsx rename to superset-frontend/src/explore/components/ExploreChartPanel/index.jsx index 020f7aece2e4f..bea6f8653c2a8 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx @@ -16,13 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { - useState, - useEffect, - useCallback, - useMemo, - useRef, -} from 'react'; +import React, { useState, useEffect, useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import Split from 'react-split'; import { @@ -36,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'; @@ -48,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 useChartPanelResize from './useResizeDectorByObserver'; const propTypes = { actions: PropTypes.object.isRequired, @@ -147,25 +141,12 @@ const ExploreChartPanel = ({ const theme = useTheme(); const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR; const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR; - const chartPanelRef = useRef(); - const [{ chartPanelWidth, chartPanelHeight }, setChartPanelSize] = useState( - {}, - ); - const onResize = useCallback(() => { - if (chartPanelRef.current) { - const { width, height } = - chartPanelRef.current.getBoundingClientRect?.() || {}; - setChartPanelSize({ - chartPanelWidth: width, - chartPanelHeight: height, - }); - } - }, []); - const { ref: resizeObserverRef } = useResizeDetector({ - refreshMode: 'debounce', - refreshRate: 300, - onResize, - }); + const { + ref: chartPanelRef, + observerRef: resizeObserverRef, + width: chartPanelWidth, + height: chartPanelHeight, + } = useChartPanelResize(); const [splitSizes, setSplitSizes] = useState( isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) ? INITIAL_SIZES @@ -393,6 +374,7 @@ const ExploreChartPanel = ({ ), [ + resizeObserverRef, showAlertBanner, errorMessage, onQuery, diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts new file mode 100644 index 0000000000000..112823ecddb9c --- /dev/null +++ b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts @@ -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 useResizeDetectorByTarget() { + 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 4f3b4d8dd05ee..49ad0e3403710 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx @@ -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/useResizeDectorByObserver', + () => ({ + __esModule: true, + default: () => ({ height: 100, width: 100 }), + }), +); jest.mock('lodash/debounce', () => ({ __esModule: true, From 76e8d214ffb867496f91341fd8df0e548f5dee2e Mon Sep 17 00:00:00 2001 From: justin-park Date: Mon, 24 Apr 2023 13:01:17 -0700 Subject: [PATCH 3/4] misspell of hook name --- .../src/explore/components/ExploreChartPanel/index.jsx | 4 ++-- ...sizeDectorByObserver.ts => useResizeDetectorByObserver.ts} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename superset-frontend/src/explore/components/ExploreChartPanel/{useResizeDectorByObserver.ts => useResizeDetectorByObserver.ts} (96%) diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx index bea6f8653c2a8..893a10275a25d 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx @@ -46,7 +46,7 @@ import { getChartRequiredFieldsMissingMessage } from 'src/utils/getChartRequired import { DataTablesPane } from '../DataTablesPane'; import { ChartPills } from '../ChartPills'; import { ExploreAlert } from '../ExploreAlert'; -import useChartPanelResize from './useResizeDectorByObserver'; +import useResizeDetectorByObserver from './useResizeDetectorByObserver'; const propTypes = { actions: PropTypes.object.isRequired, @@ -146,7 +146,7 @@ const ExploreChartPanel = ({ observerRef: resizeObserverRef, width: chartPanelWidth, height: chartPanelHeight, - } = useChartPanelResize(); + } = useResizeDetectorByObserver(); const [splitSizes, setSplitSizes] = useState( isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) ? INITIAL_SIZES diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts similarity index 96% rename from superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts rename to superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts index 112823ecddb9c..afbeeeb1e0354 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts +++ b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts @@ -19,7 +19,7 @@ import { useState, useCallback, useRef } from 'react'; import { useResizeDetector } from 'react-resize-detector'; -export default function useResizeDetectorByTarget() { +export default function useResizeDetectorByObserver() { const ref = useRef(); const [{ width, height }, setChartPanelSize] = useState<{ width?: number; From d661445dfa695fcb8875d47213b1d3a93fb71efe Mon Sep 17 00:00:00 2001 From: "JUST.in DO IT" Date: Tue, 25 Apr 2023 10:38:00 -0700 Subject: [PATCH 4/4] misspell useResizeDetectorByObserver on jest.mock --- .../ExploreViewContainer/ExploreViewContainer.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx index 49ad0e3403710..fbfb0c3b1de77 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx @@ -79,7 +79,7 @@ const KEY = 'aWrs7w29sd'; const SEARCH = `?form_data_key=${KEY}&dataset_id=1`; jest.mock( - 'src/explore/components/ExploreChartPanel/useResizeDectorByObserver', + 'src/explore/components/ExploreChartPanel/useResizeDetectorByObserver', () => ({ __esModule: true, default: () => ({ height: 100, width: 100 }),