QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-23 18:14:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sqllab): flaky json explore modal due to over-rendering (#26791)

Browse Source
This commit is contained in:
JUST.in DO IT
2024-02-14 13:04:59 -08:00
committed by GitHub
parent 152cd70b5f
commit 7b59c94827
14 changed files with 719 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
View File

@@ -244,29 +244,33 @@ const SqlEditor: React.FC<Props> = ({
const theme = useTheme();
const dispatch = useDispatch();
const { database, latestQuery, hideLeftBar } = useSelector<
SqlLabRootState,
{
database?: DatabaseObject;
latestQuery?: QueryResponse;
hideLeftBar?: boolean;
}
>(({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
let { dbId, latestQueryId, hideLeftBar } = queryEditor;
if (unsavedQueryEditor?.id === queryEditor.id) {
dbId = unsavedQueryEditor.dbId || dbId;
latestQueryId = unsavedQueryEditor.latestQueryId || latestQueryId;
hideLeftBar = isBoolean(unsavedQueryEditor.hideLeftBar)
? unsavedQueryEditor.hideLeftBar
: hideLeftBar;
}
return {
database: databases[dbId || ''],
latestQuery: queries[latestQueryId || ''],
hideLeftBar,
};
}, shallowEqual);
const { database, latestQuery, hideLeftBar, currentQueryEditorId } =
useSelector<
SqlLabRootState,
{
database?: DatabaseObject;
latestQuery?: QueryResponse;
hideLeftBar?: boolean;
currentQueryEditorId: QueryEditor['id'];
}
>(({ sqlLab: { unsavedQueryEditor, databases, queries, tabHistory } }) => {
let { dbId, latestQueryId, hideLeftBar } = queryEditor;
if (unsavedQueryEditor?.id === queryEditor.id) {
dbId = unsavedQueryEditor.dbId || dbId;
latestQueryId = unsavedQueryEditor.latestQueryId || latestQueryId;
hideLeftBar = isBoolean(unsavedQueryEditor.hideLeftBar)
? unsavedQueryEditor.hideLeftBar
: hideLeftBar;
}
return {
database: databases[dbId || ''],
latestQuery: queries[latestQueryId || ''],
hideLeftBar,
currentQueryEditorId: tabHistory.slice(-1)[0],
};
}, shallowEqual);
const isActive = currentQueryEditorId === queryEditor.id;
const [height, setHeight] = useState(0);
const [autorun, setAutorun] = useState(queryEditor.autorun);
const [ctas, setCtas] = useState('');
@@ -498,16 +502,17 @@ const SqlEditor: React.FC<Props> = ({
() => setHeight(getSqlEditorHeight()),
WINDOW_RESIZE_THROTTLE_MS,
);
window.addEventListener('resize', handleWindowResizeWithThrottle);
window.addEventListener('beforeunload', onBeforeUnload);
if (isActive) {
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
}, [onBeforeUnload]);
}, [onBeforeUnload, isActive]);
useEffect(() => {
if (!database || isEmpty(database)) {
@@ -518,15 +523,14 @@ const SqlEditor: React.FC<Props> = ({
useEffect(() => {
// setup hotkeys
const hotkeys = getHotkeyConfig();
hotkeys.forEach(keyConfig => {
Mousetrap.bind([keyConfig.key], keyConfig.func);
});
return () => {
if (isActive) {
// MouseTrap always override the same key
// Unbind (reset) will be called when App component unmount
hotkeys.forEach(keyConfig => {
Mousetrap.unbind(keyConfig.key);
Mousetrap.bind([keyConfig.key], keyConfig.func);
});
};
}, [getHotkeyConfig, latestQuery]);
}
}, [getHotkeyConfig, latestQuery, isActive]);
const onResizeStart = () => {
// Set the heights on the ace editor and the ace content area after drag starts