Skip to content

refactor: add frontend debounce constants #13250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ktmud merged 1 commit into from
Feb 20, 2021
Merged

refactor: add frontend debounce constants #13250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { debounce } from 'lodash';

import ModalTrigger from 'src/components/ModalTrigger';
import { ConfigEditor } from 'src/components/AsyncAceEditor';
import { FAST_DEBOUNCE } from 'src/constants';

const propTypes = {
onChange: PropTypes.func,
Expand Down Expand Up @@ -80,7 +81,7 @@ function TemplateParamsEditor({ code, language, onChange }) {
mode={language}
minLines={25}
maxLines={50}
onChange={debounce(onChange, 200)}
onChange={debounce(onChange, FAST_DEBOUNCE)}
width="100%"
editorProps={{ $blockScrolling: true }}
enableLiveAutocompletion
Expand Down
10 changes: 10 additions & 0 deletions superset-frontend/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,13 @@ export const URL_PARAMS = {
standalone: 'standalone',
preselectFilters: 'preselect_filters',
};

/**
* Faster debounce delay for inputs without expensive operation.
*/
export const FAST_DEBOUNCE = 250;

/**
* Slower debounce delay for inputs with expensive API calls.
*/
export const SLOW_DEBOUNCE = 500;
8 changes: 6 additions & 2 deletions superset-frontend/src/explore/components/DataTableControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ import { FormControl } from 'react-bootstrap';
import { Column } from 'react-table';
import debounce from 'lodash/debounce';

import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
SLOW_DEBOUNCE,
} from 'src/constants';
import Button from 'src/components/Button';
import {
applyFormattingToTabularData,
Expand Down Expand Up @@ -67,7 +71,7 @@ export const FilterInput = ({
}: {
onChangeHandler(filterText: string): void;
}) => {
const debouncedChangeHandler = debounce(onChangeHandler, 500);
const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
return (
<FormControl
placeholder={t('Search')}
Expand Down
7 changes: 4 additions & 3 deletions superset-frontend/src/explore/components/DatasourcePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ import {
} from '@superset-ui/chart-controls';
import { debounce } from 'lodash';
import { matchSorter, rankings } from 'match-sorter';
import { ExploreActions } from '../actions/exploreActions';
import Control from './Control';
import { FAST_DEBOUNCE } from 'src/constants';
import { ExploreActions } from 'src/explore/actions/exploreActions';
import Control from 'src/explore/components/Control';

interface DatasourceControl extends ControlConfig {
datasource?: DatasourceMeta;
Expand Down Expand Up @@ -162,7 +163,7 @@ export default function DataSourcePanel({
String(a.rankedValue).localeCompare(b.rankedValue),
}),
});
}, 200);
}, FAST_DEBOUNCE);

useEffect(() => {
setList({
Expand Down
5 changes: 3 additions & 2 deletions superset-frontend/src/explore/components/controls/TextAreaControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ import { FormGroup, FormControl } from 'react-bootstrap';
import { debounce } from 'lodash';
import { t } from '@superset-ui/core';

import { FAST_DEBOUNCE } from 'src/constants';
import Button from 'src/components/Button';
import { TextAreaEditor } from 'src/components/AsyncAceEditor';
import ModalTrigger from 'src/components/ModalTrigger';

import ControlHeader from '../ControlHeader';
import ControlHeader from 'src/explore/components/ControlHeader';

const propTypes = {
name: PropTypes.string,
Expand Down Expand Up @@ -63,7 +64,7 @@ export default class TextAreaControl extends React.Component {
super();
this.onAceChangeDebounce = debounce(value => {
this.onAceChange(value);
}, 300);
}, FAST_DEBOUNCE);
}

onControlChange(event) {
Expand Down
10 changes: 6 additions & 4 deletions superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
import Button from 'src/components/Button';
import { t, SupersetClient } from '@superset-ui/core';

import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
SLOW_DEBOUNCE,
} from 'src/constants';
import FormLabel from 'src/components/FormLabel';
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
import ControlRow from 'src/explore/components/ControlRow';
Expand Down Expand Up @@ -184,7 +188,7 @@ class FilterBox extends React.PureComponent {
if (!(key in this.debouncerCache)) {
this.debouncerCache[key] = debounce((input, callback) => {
this.loadOptions(key, input).then(callback);
}, 500);
}, SLOW_DEBOUNCE);
}
return this.debouncerCache[key];
}
Expand Down Expand Up @@ -298,7 +302,6 @@ class FilterBox extends React.PureComponent {
datasourceFilters.push(
<ControlRow
key="sqla-filters"
className="control-row"
Copy link
Member Author

@ktmud ktmud Feb 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bycatch: this prop is not used in ControlRow.

controls={sqlaFilters.map(control => (
<Control {...this.getControlData(control)} />
))}
Expand All @@ -309,7 +312,6 @@ class FilterBox extends React.PureComponent {
datasourceFilters.push(
<ControlRow
key="druid-filters"
className="control-row"
controls={druidFilters.map(control => (
<Control {...this.getControlData(control)} />
))}
Expand Down