You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by jl...@apache.org on 2025/08/20 18:04:22 UTC
(superset) 06/07: fix(sqllab): Invisible grid table due to the invalid height (#34683)
This is an automated email from the ASF dual-hosted git repository.
jli pushed a commit to branch 6.0
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 04738c716c75548240639e24f74ad9156983a931
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Tue Aug 19 10:09:39 2025 -0700
fix(sqllab): Invisible grid table due to the invalid height (#34683)
(cherry picked from commit 89eb7b207c99f07394fee6886b058cb2b1913db2)
---
.../SqlLab/components/ResultSet/ResultSet.test.tsx | 8 +++
.../src/SqlLab/components/ResultSet/index.tsx | 61 ++++++++++------------
.../src/SqlLab/components/SqlEditor/index.tsx | 14 +----
.../src/components/FilterableTable/index.tsx | 15 ++----
4 files changed, 40 insertions(+), 58 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
index d4050daf39..4147144b2c 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { type ReactChild } from 'react';
import {
render,
screen,
@@ -45,6 +46,13 @@ jest.mock('src/components/ErrorMessage', () => ({
ErrorMessageWithStackTrace: () => <div data-test="error-message">Error</div>,
}));
+jest.mock(
+ 'react-virtualized-auto-sizer',
+ () =>
+ ({ children }: { children: (params: { height: number }) => ReactChild }) =>
+ children({ height: 500 }),
+);
+
const mockedProps = {
cache: true,
queryId: queries[0].id,
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index 2134281acc..63aa41ef21 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -25,6 +25,7 @@ import {
MouseEvent,
} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { pick } from 'lodash';
@@ -116,6 +117,7 @@ const ResultContainer = styled.div`
display: flex;
flex-direction: column;
row-gap: ${({ theme }) => theme.sizeUnit * 2}px;
+ height: 100%;
`;
const ResultlessStyles = styled.div`
@@ -221,7 +223,6 @@ const ResultSet = ({
const [searchText, setSearchText] = useState('');
const [cachedData, setCachedData] = useState<Record<string, unknown>[]>([]);
const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
- const [alertIsOpen, setAlertIsOpen] = useState(false);
const history = useHistory();
const dispatch = useDispatch();
@@ -256,14 +257,6 @@ const ResultSet = ({
}
}, [query, cache]);
- const calculateAlertRefHeight = (alertElement: HTMLElement | null) => {
- if (alertElement) {
- setAlertIsOpen(true);
- } else {
- setAlertIsOpen(false);
- }
- };
-
const popSelectStar = (tempSchema: string | null, tempTable: string) => {
const qe = {
id: nanoid(11),
@@ -471,10 +464,10 @@ const ResultSet = ({
return (
<>
{!limitReached && shouldUseDefaultDropdownAlert && (
- <div ref={calculateAlertRefHeight}>
+ <div>
<Alert
+ closable
type="warning"
- onClose={() => setAlertIsOpen(false)}
message={t(
'The number of rows displayed is limited to %(rows)d by the dropdown.',
{ rows },
@@ -483,10 +476,10 @@ const ResultSet = ({
</div>
)}
{limitReached && (
- <div ref={calculateAlertRefHeight}>
+ <div>
<Alert
+ closable
type="warning"
- onClose={() => setAlertIsOpen(false)}
message={
isAdmin
? displayMaxRowsReachedMessage.withAdmin
@@ -532,7 +525,6 @@ const ResultSet = ({
);
};
- const limitReached = query?.results?.displayLimitReached;
let sql;
let exploreDBId = query.dbId;
if (database?.explore_database_id) {
@@ -646,17 +638,6 @@ const ResultSet = ({
if (query.state === QueryState.Success && query.results) {
const { results } = query;
- // Accounts for offset needed for height of ResultSetRowsReturned component if !limitReached
- const rowMessageHeight = !limitReached ? 32 : 0;
- // Accounts for offset needed for height of Alert if this.state.alertIsOpen
- const alertContainerHeight = 70;
- // We need to calculate the height of this.renderRowsReturned()
- // if we want results panel to be proper height because the
- // FilterTable component needs an explicit height to render
- // the Table component
- const rowsHeight = alertIsOpen
- ? height - alertContainerHeight
- : height - rowMessageHeight;
let data;
if (cache && query.cached) {
data = cachedData;
@@ -712,15 +693,27 @@ const ResultSet = ({
{sql}
</>
)}
- <ResultTable
- data={data}
- queryId={query.id}
- orderedColumnKeys={results.columns.map(col => col.column_name)}
- height={rowsHeight}
- filterText={searchText}
- expandedColumns={expandedColumns}
- allowHTML={allowHTML}
- />
+ <div
+ css={css`
+ flex: 1 1 auto;
+ `}
+ >
+ <AutoSizer disableWidth>
+ {({ height }) => (
+ <ResultTable
+ data={data}
+ queryId={query.id}
+ orderedColumnKeys={results.columns.map(
+ col => col.column_name,
+ )}
+ height={height}
+ filterText={searchText}
+ expandedColumns={expandedColumns}
+ allowHTML={allowHTML}
+ />
+ )}
+ </AutoSizer>
+ </div>
</ResultContainer>
);
}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index b2c77346f9..3dc291ce74 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -50,7 +50,7 @@ import type {
CursorPosition,
} from 'src/SqlLab/types';
import type { DatabaseObject } from 'src/features/databases/types';
-import { debounce, throttle, isEmpty } from 'lodash';
+import { debounce, isEmpty } from 'lodash';
import Mousetrap from 'mousetrap';
import {
Alert,
@@ -98,7 +98,6 @@ import {
INITIAL_NORTH_PERCENT,
INITIAL_SOUTH_PERCENT,
SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
- WINDOW_RESIZE_THROTTLE_MS,
} from 'src/SqlLab/constants';
import {
getItem,
@@ -300,7 +299,6 @@ const SqlEditor: FC<Props> = ({
const logAction = useLogAction({ queryEditorId: queryEditor.id });
const isActive = currentQueryEditorId === queryEditor.id;
- const [height, setHeight] = useState(0);
const [autorun, setAutorun] = useState(queryEditor.autorun);
const [ctas, setCtas] = useState('');
const [northPercent, setNorthPercent] = useState(
@@ -586,21 +584,12 @@ const SqlEditor: FC<Props> = ({
});
useEffect(() => {
- // We need to measure the height of the sql editor post render to figure the height of
- // the south pane so it gets rendered properly
- setHeight(getSqlEditorHeight());
- const handleWindowResizeWithThrottle = throttle(
- () => setHeight(getSqlEditorHeight()),
- WINDOW_RESIZE_THROTTLE_MS,
- );
if (isActive) {
loadQueryEditor();
- window.addEventListener('resize', handleWindowResizeWithThrottle);
window.addEventListener('beforeunload', onBeforeUnload);
}
return () => {
- window.removeEventListener('resize', handleWindowResizeWithThrottle);
window.removeEventListener('beforeunload', onBeforeUnload);
};
// TODO: Remove useEffectEvent deps once https://github.com/facebook/react/pull/25881 is released
@@ -982,6 +971,7 @@ const SqlEditor: FC<Props> = ({
);
const queryPane = () => {
+ const height = getSqlEditorHeight();
const { aceEditorHeight, southPaneHeight } =
getAceEditorAndSouthPaneHeights(height, northPercent, southPercent);
return (
diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index e414bc7d80..e1f98d94d0 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -17,7 +17,6 @@
* under the License.
*/
import { useMemo, useRef, useCallback } from 'react';
-import { styled } from '@superset-ui/core';
import { GridSize } from 'src/components/GridTable/constants';
import { GridTable } from 'src/components/GridTable';
import { type ColDef } from 'src/components/GridTable/types';
@@ -31,11 +30,6 @@ import type { FilterableTableProps, Datum, CellDataType } from './types';
// See https://stackoverflow.com/a/30987109 for more details
const ONLY_NUMBER_REGEX = /^(NaN|-?((\d*\.\d+|\d+)([Ee][+-]?\d+)?|Infinity))$/;
-const StyledFilterableTable = styled.div`
- height: 100%;
- overflow: hidden;
-`;
-
const parseNumberFromString = (value: string | number | null) => {
if (typeof value === 'string' && ONLY_NUMBER_REGEX.test(value)) {
return parseFloat(value);
@@ -126,14 +120,11 @@ export const FilterableTable = ({
}, []);
return (
- <StyledFilterableTable
- className="filterable-table-container"
- data-test="table-container"
- >
+ <div className="filterable-table-container" data-test="table-container">
<GridTable
size={GridSize.Small}
- height={height}
usePagination={false}
+ height={height}
columns={columns}
data={data}
externalFilter={keywordFilter}
@@ -142,7 +133,7 @@ export const FilterableTable = ({
enableActions
columnReorderable
/>
- </StyledFilterableTable>
+ </div>
);
};