perf(gui): only change global filter string if user stops typing for 1s (#959)

* perf(gui): only change global filter string if user stops typing for 1s

* style: apply automatic fixes of linters

* fix(gui): keep local string updated if global filter string is change via other means

* feat(gui): run filter validation on local filter string

It's slightly slower but provides instant feedback.

* perf(gui): run filter validation only once

* style: apply automatic fixes of linters

* refactor(gui): remove useless call

Co-authored-by: lars-reimann <[email protected]>

Author: lars-reimann

api-editor/gui/src/features/filter/FilterControls.tsx

@@ -1,15 +1,31 @@
 import { FilterInput } from './FilterInput';
 import { FilterHelpButton } from './FilterHelpButton';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { HStack } from '@chakra-ui/react';
 import { MatchCount } from './FilterMatchCount';
 import { FilterPersistence } from './FilterPersistence';
+import { useAppSelector } from '../../app/hooks';
+import { selectFilterString } from '../ui/uiSlice';
+import { isValidFilterToken } from './model/filterFactory';
 
 export const FilterControls = function () {
+    const filterString = useAppSelector(selectFilterString);
+    const [localFilterString, setLocalFilterString] = React.useState(filterString);
+    const invalidTokens = localFilterString.split(' ').filter((token) => token !== '' && !isValidFilterToken(token));
+
+    // The filter can be changed via other means as well and the local filter needs to reflect this
+    useEffect(() => {
+        setLocalFilterString(filterString);
+    }, [filterString]);
+
     return (
         <HStack>
-            <FilterPersistence />
-            <FilterInput />
+            <FilterPersistence localFilterString={localFilterString} invalidTokens={invalidTokens} />
+            <FilterInput
+                localFilterString={localFilterString}
+                setLocalFilterString={setLocalFilterString}
+                invalidTokens={invalidTokens}
+            />
             <FilterHelpButton />
             <MatchCount />
         </HStack>

api-editor/gui/src/features/filter/FilterInput.tsx

@@ -16,15 +16,37 @@ import { closest, distance } from 'fastest-levenshtein';
 import React from 'react';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import { selectFilterString, setFilterString } from '../ui/uiSlice';
-import { getFixedFilterNames, isValidFilterToken } from './model/filterFactory';
+import { getFixedFilterNames } from './model/filterFactory';
 
-export const FilterInput: React.FC = function () {
-    const dispatch = useAppDispatch();
+interface FilterInputProps {
+    localFilterString: string;
+    setLocalFilterString: (newLocalFilterString: string) => void;
+    invalidTokens: string[];
+}
 
-    const filterString = useAppSelector(selectFilterString);
-    const invalidTokens = filterString.split(' ').filter((token) => token !== '' && !isValidFilterToken(token));
+export const FilterInput: React.FC<FilterInputProps> = function ({
+    localFilterString,
+    setLocalFilterString,
+    invalidTokens,
+}) {
+    const dispatch = useAppDispatch();
+    const [timeoutId, setTimeoutId] = React.useState<NodeJS.Timeout>();
     const filterIsValid = invalidTokens.length === 0;
 
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setLocalFilterString(event.target.value);
+
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+
+        const newTimeoutId = setTimeout(() => {
+            dispatch(setFilterString(event.target.value));
+        }, 1000);
+
+        setTimeoutId(newTimeoutId);
+    };
+
     return (
         <Box zIndex={50}>
             <Popover
@@ -39,8 +61,8 @@ export const FilterInput: React.FC = function () {
                         <Input
                             type="text"
                             placeholder="Filter..."
-                            value={useAppSelector(selectFilterString)}
-                            onChange={(event) => dispatch(setFilterString(event.target.value))}
+                            value={localFilterString}
+                            onChange={onChange}
                             spellCheck={false}
                             minWidth="400px"
                         />

api-editor/gui/src/features/filter/FilterPersistence.tsx

@@ -2,32 +2,29 @@ import React from 'react';
 import { Box, Button, Icon, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@chakra-ui/react';
 import { FaChevronUp } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import {
-    removeFilter,
-    selectFilterList,
-    selectFilterString,
-    setFilterString,
-    toggleAddFilterDialog,
-} from '../ui/uiSlice';
-import { isValidFilterToken } from './model/filterFactory';
+import { removeFilter, selectFilterList, setFilterString, toggleAddFilterDialog } from '../ui/uiSlice';
 import { isEmptyList } from '../../common/util/listOperations';
 
-export const FilterPersistence = function () {
+interface FilterPersistenceProps {
+    localFilterString: string;
+    invalidTokens: string[];
+}
+
+export const FilterPersistence: React.FC<FilterPersistenceProps> = function ({ localFilterString, invalidTokens }) {
     const dispatch = useAppDispatch();
 
-    const currentFilterString = useAppSelector(selectFilterString);
-    const savedFilters = useAppSelector(selectFilterList);
+    const filterIsValid = invalidTokens.length === 0;
 
-    const filterIsValid = currentFilterString.split(' ').every((token) => token === '' || isValidFilterToken(token));
+    const savedFilters = useAppSelector(selectFilterList);
     const alreadyIncluded = savedFilters.some((it) => {
-        return it.filter === currentFilterString;
+        return it.filter === localFilterString;
     });
 
     return (
         <>
             {alreadyIncluded ? (
                 <Button
-                    onClick={() => dispatch(removeFilter(currentFilterString))}
+                    onClick={() => dispatch(removeFilter(localFilterString))}
                     isDisabled={!filterIsValid || !alreadyIncluded}
                 >
                     Remove Filter