Skip to content
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

chore(ui): debounce server requests while typing in filter bar #3470

Merged
merged 5 commits into from
Jan 23, 2025
+54 −24
Merged

chore(ui): debounce server requests while typing in filter bar #3470

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f329fe
chore(ui): debounce server requests while typing in filter bar
gtarpenning Jan 22, 2025
462a910
300 -> 500
gtarpenning Jan 23, 2025
f486295
style comment
gtarpenning Jan 23, 2025
147d068
500 -> 700 ms
gtarpenning Jan 23, 2025
289db91
Merge branch 'master' into griffin/debounce-filter
gtarpenning Jan 23, 2025
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
78 changes: 54 additions & 24 deletions weave-js/src/components/PagePanelComponents/Home/Browse3/filters/FilterBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

import {Popover} from '@mui/material';
import {GridFilterItem, GridFilterModel} from '@mui/x-data-grid-pro';
import React, {useCallback, useRef} from 'react';
import _ from 'lodash';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';

import {Button} from '../../../../Button';
import {DraggableGrow, DraggableHandle} from '../../../../DraggablePopups';
Expand All @@ -28,6 +29,8 @@ import {FilterTagItem} from './FilterTagItem';
import {GroupedOption, SelectFieldOption} from './SelectField';
import {VariableChildrenDisplay} from './VariableChildrenDisplayer';

const DEBOUNCE_MS = 700;

type FilterBarProps = {
filterModel: GridFilterModel;
setFilterModel: (newModel: GridFilterModel) => void;
Expand Down Expand Up @@ -57,6 +60,14 @@ export const FilterBar = ({
const refBar = useRef<HTMLDivElement>(null);
const refLabel = useRef<HTMLDivElement>(null);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

// local filter model is used to avoid triggering a re-render of the trace
// table on every keystroke. debounced DEBOUNCE_MS ms
const [localFilterModel, setLocalFilterModel] = useState(filterModel);
useEffect(() => {
setLocalFilterModel(filterModel);
}, [filterModel]);

const onClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(anchorEl ? null : refBar.current);
};
Expand Down Expand Up @@ -143,29 +154,45 @@ export const FilterBar = ({
(field: string) => {
const defaultOperator = getOperatorOptions(field)[0].value;
const newModel = {
...filterModel,
...localFilterModel,
items: [
...filterModel.items,
...localFilterModel.items,
{
id: filterModel.items.length,
id: localFilterModel.items.length,
field,
operator: defaultOperator,
},
],
};
setFilterModel(newModel);
setLocalFilterModel(newModel);
},
[localFilterModel]
);

const debouncedSetFilterModel = useMemo(
() =>
_.debounce(
(newModel: GridFilterModel) => setFilterModel(newModel),
DEBOUNCE_MS
),
[setFilterModel]
);
const updateLocalAndDebouncedFilterModel = useCallback(
(newModel: GridFilterModel) => {
setLocalFilterModel(newModel);
debouncedSetFilterModel(newModel);
},
[filterModel, setFilterModel]
[debouncedSetFilterModel]
);

const onUpdateFilter = useCallback(
(item: GridFilterItem) => {
const oldItems = filterModel.items;
const oldItems = localFilterModel.items;
const index = oldItems.findIndex(f => f.id === item.id);

if (index === -1) {
const newModel2 = {...filterModel, items: [item]};
setFilterModel(newModel2);
const newModel = {...localFilterModel, items: [item]};
updateLocalAndDebouncedFilterModel(newModel);
return;
}

Expand All @@ -174,45 +201,46 @@ export const FilterBar = ({
item,
...oldItems.slice(index + 1),
];
const newModel = {...filterModel, items: newItems};
setFilterModel(newModel);
const newItemsModel = {...localFilterModel, items: newItems};
updateLocalAndDebouncedFilterModel(newItemsModel);
},
[filterModel, setFilterModel]
[localFilterModel, updateLocalAndDebouncedFilterModel]
);

const onRemoveFilter = useCallback(
(filterId: FilterId) => {
const items = filterModel.items.filter(f => f.id !== filterId);
const newModel = {...filterModel, items};
const items = localFilterModel.items.filter(f => f.id !== filterId);
const newModel = {...localFilterModel, items};
setLocalFilterModel(newModel);
setFilterModel(newModel);
},
[filterModel, setFilterModel]
[localFilterModel, setFilterModel]
);

const onSetSelected = useCallback(() => {
const newFilter =
selectedCalls.length === 1
? {
id: filterModel.items.length,
id: localFilterModel.items.length,
field: 'id',
operator: '(string): equals',
value: selectedCalls[0],
}
: {
id: filterModel.items.length,
id: localFilterModel.items.length,
field: 'id',
operator: '(string): in',
value: selectedCalls,
};
const newModel = upsertFilter(
filterModel,
localFilterModel,
newFilter,
f => f.field === 'id'
);
setFilterModel(newModel);
clearSelectedCalls();
setAnchorEl(null);
}, [filterModel, setFilterModel, selectedCalls, clearSelectedCalls]);
}, [localFilterModel, setFilterModel, selectedCalls, clearSelectedCalls]);

const outlineW = 2 * 2;
const paddingW = 8 * 2;
Expand All @@ -221,7 +249,9 @@ export const FilterBar = ({
const labelW = refLabel.current?.offsetWidth ?? 0;
const availableWidth = width - outlineW - paddingW - iconW - labelW - gapW;

const completeItems = filterModel.items.filter(f => !isFilterIncomplete(f));
const completeItems = localFilterModel.items.filter(
f => !isFilterIncomplete(f)
);

return (
<>
Expand Down Expand Up @@ -280,7 +310,7 @@ export const FilterBar = ({
</div>
</DraggableHandle>
<div className="grid grid-cols-[auto_auto_auto_30px] gap-4">
{filterModel.items.map(item => (
{localFilterModel.items.map(item => (
<FilterRow
key={item.id}
item={item}
Expand All @@ -291,7 +321,7 @@ export const FilterBar = ({
/>
))}
</div>
{filterModel.items.length === 0 && (
{localFilterModel.items.length === 0 && (
<FilterRow
item={{
id: undefined,
Expand All @@ -310,7 +340,7 @@ export const FilterBar = ({
size="small"
variant="ghost"
icon="add-new"
disabled={filterModel.items.length === 0}
disabled={localFilterModel.items.length === 0}
onClick={() => onAddFilter('')}>
Add filter
</Button>
Expand All @@ -319,7 +349,7 @@ export const FilterBar = ({
size="small"
variant="ghost"
icon="delete"
disabled={filterModel.items.length === 0}
disabled={localFilterModel.items.length === 0}
onClick={onRemoveAll}>
Remove all
</Button>
Expand Down
Loading