Add debounce to query update

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/dagshub/design-system.git"
   },
-  "version": "0.1.77",
+  "version": "0.1.78",
   "description": "A component library for consuming dagshub user interfaces.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx

@@ -35,7 +35,7 @@ export function CSVViewer({ headers, values }: { headers: string[]; values: stri
 
   const autoSizeStrategy: SizeColumnsToFitGridStrategy = {
     type: 'fitGridWidth',
-    defaultMinWidth: 100,
+    defaultMinWidth: 100
   };
 
   return (

src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx

@@ -4,6 +4,7 @@ import StyledTextField from '../metadataKeyValue/StyledTextField';
 import '../metadataKeyValue/style.scss';
 import { ThemeProvider, Typography } from '@mui/material';
 import theme from '../../../../theme';
+import {useDebounce} from "react-use";
 
 export function ConditionTextField({
   disabled,
@@ -67,6 +68,10 @@ export function ConditionTextField({
     }
   };
 
+  useDebounce(() => {
+    onChange(currentValue);
+  },200, [currentValue]);
+
   return (
     <ThemeProvider theme={theme}>
       <Box
@@ -137,7 +142,6 @@ export function ConditionTextField({
           }}
           onChange={(e: any) => {
             setCurrentValue(e.target.value);
-            onChange(e.target.value);
           }}
           onKeyDown={handleKeyDown}
           value={currentValue}

src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx

@@ -11,14 +11,12 @@ import { MetadataType } from '../metadataKeyValue/MetadataKeyValueList';
 export function QueryBuilder({
   queryInput,
   metadataFields,
-  forceCompoundMode = false,
   onChange,
   validateValueByType,
   showConditionSummary = false,
 }: {
   queryInput: QueryInput;
   metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias
-  forceCompoundMode?: boolean;
   onChange: (query: QueryInput) => void;
   validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean;
   showConditionSummary?: boolean;
@@ -27,7 +25,6 @@ export function QueryBuilder({
     <QueryBuilderProvider
       queryInput={queryInput}
       metadataFields={metadataFields}
-      forceCompoundMode={forceCompoundMode}
       validateValueByType={validateValueByType}
       onChange={onChange}
     >

src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx

@@ -7,7 +7,6 @@ import React, {
   useState,
 } from 'react';
 import _ from 'lodash';
-import { root } from 'postcss';
 
 type MetadataType = 'BOOLEAN' | 'INTEGER' | 'FLOAT' | 'STRING' | 'BLOB';
 
@@ -100,10 +99,9 @@ export interface QueryInput {
 
 interface QueryBuilderContextInterface {
   isSimpleMode: boolean;
-  setIsSimpleMode: (isSimpleMode: boolean) => void;
   rootCondition: AndOrMetadataInput;
   setRootCondition: (rootCondition: AndOrMetadataInput) => void;
-  metadataFieldsList: MetadataFieldProps[];
+  metadataFields: MetadataFieldProps[];
   generateUniqueId: () => string;
   addUniqueIds: (input: AndOrMetadataInput) => AndOrMetadataInput;
   getOperatorsByMetadataType: (type: MetadataType) => { label: string; id: Comparator }[];
@@ -129,14 +127,12 @@ export const QueryBuilderProvider = ({
   children,
   queryInput,
   metadataFields,
-  forceCompoundMode = false,
   validateValueByType,
   onChange,
 }: {
   children: ReactNode;
   queryInput: QueryInput;
   metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias
-  forceCompoundMode?: boolean;
   validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean;
   onChange: (query: QueryInput) => void;
 }) => {
@@ -170,48 +166,45 @@ export const QueryBuilderProvider = ({
     return true;
   };
 
-  const checkIfSimpleMode = useCallback(
-    (query: AndOrMetadataInput | undefined) => {
-      return !forceCompoundMode && checkIfConditionIsDisplayableInSimpleMode(query);
-    },
-    [forceCompoundMode]
-  );
-
-  const [rootCondition, setRootCondition] = useState<AndOrMetadataInput>(() => getInitialQuery());
-  const [isSimpleMode, setIsSimpleMode] = useState<boolean>(() =>
-    checkIfSimpleMode(queryInput.query)
-  );
-  const [metadataFieldsList, setMetadataFieldsList] =
-    useState<MetadataFieldProps[]>(metadataFields);
-  const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState<boolean>(
+  const [rootCondition, setRootCondition] = useState<AndOrMetadataInput>(getInitialQuery);
+  const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState<boolean>(() =>
     checkIfConditionIsDisplayableInSimpleMode(queryInput.query)
   );
+  const [isSimpleMode, setIsSimpleMode] = useState<boolean>(isDisplayableInSimpleMode);
 
   useEffect(() => {
     if (
       JSON.stringify(removeIdFields(getInitialQuery())) !==
       JSON.stringify(removeIdFields(rootCondition))
     ) {
       setRootCondition(getInitialQuery);
+      setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(queryInput.query));
     }
-    setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(queryInput.query));
   }, [queryInput.query]);
 
   useEffect(() => {
     setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(rootCondition));
   }, [rootCondition]);
 
-  useEffect(() => {
-    setIsSimpleMode(checkIfSimpleMode(queryInput.query));
-  }, [forceCompoundMode, queryInput.query]);
-
   function onToggleQueryMode() {
-    setIsSimpleMode(!isSimpleMode);
+    setIsSimpleMode((isSimpleMode) => {
+      if (isSimpleMode) {
+        return false;
+      } else {
+        return isDisplayableInSimpleMode;
+      }
+    });
   }
 
   useEffect(() => {
-    setMetadataFieldsList(metadataFields);
-  }, [metadataFields]);
+    setIsSimpleMode((isSimpleMode) => {
+      if (isSimpleMode) {
+        return isDisplayableInSimpleMode;
+      } else {
+        return false;
+      }
+    });
+  }, [isDisplayableInSimpleMode]);
 
   //This function is used to remove the root and wrapper, if it was added for ui purposes and not needed anymore
   const removeRootAndBlockIfWasAddedAndNotNeeded = (condition: AndOrMetadataInput | null) => {
@@ -419,10 +412,9 @@ export const QueryBuilderProvider = ({
     <QueryBuilderContext.Provider
       value={{
         isSimpleMode,
-        setIsSimpleMode,
         rootCondition,
         setRootCondition,
-        metadataFieldsList,
+        metadataFields,
         generateUniqueId,
         addUniqueIds,
         getOperatorsByMetadataType,

src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx

@@ -37,7 +37,7 @@ export function SimpleCondition({
   const {
     isSimpleMode,
     validateValueByType,
-    metadataFieldsList,
+    metadataFields,
     getOperatorsByMetadataType,
     checkIfOperatorRequiresValueField,
   } = useQueryBuilderContext();
@@ -68,7 +68,7 @@ export function SimpleCondition({
   const [isEmpty, setIsEmpty] = useState<boolean>(checkIfConditionIsUncompleted());
 
   function getSelectedMetadataKey() {
-    return metadataFieldsList?.find((field) => field.name === condition.filter?.key);
+    return metadataFields?.find((field) => field.name === condition.filter?.key);
   }
 
   const [selectedMetadataKey, setSelectedMetadataKey] = useState<MetadataFieldProps | undefined>(
@@ -89,7 +89,7 @@ export function SimpleCondition({
 
   useEffect(() => {
     setSelectedMetadataKey(getSelectedMetadataKey());
-  }, [metadataFieldsList, condition.filter?.key]);
+  }, [metadataFields, condition.filter?.key]);
 
   useEffect(() => {
     setSelectedOperator(getSelectedComparator());
@@ -208,12 +208,11 @@ export function SimpleCondition({
               filter: {
                 ...condition.filter,
                 key: value?.id,
-                valueType: metadataFieldsList.find((field) => field.name === value?.label)
-                  ?.valueType,
-              },
+                valueType: metadataFields.find((field) => field.name === value?.label)?.valueType,
+              }
             });
           }}
-          options={metadataFieldsList?.map((field) => ({ id: field.name, label: field.name }))}
+          options={metadataFields?.map((field) => ({ id: field.name, label: field.name }))}
         />
         <ConditionDropdown
           isReadOnly={true}

src/components/elements/dropdownV2/index.tsx

@@ -173,6 +173,9 @@ export function DropdownV2({
         </Typography>
         {/*This is a hidden div that is used to calculate the width of the input field*/}
         <Autocomplete
+          isOptionEqualToValue={(option: RadioButtonItemProps, value: RadioButtonItemProps) =>
+            option.id === value.id && option.label === value.label
+          }
           noOptionsText={
             <Typography
               sx={{