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.75",
+  "version": "0.1.76",
   "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

@@ -2,15 +2,9 @@ import React, { useCallback } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-quartz.css';
-import {SizeColumnsToFitGridStrategy} from "ag-grid-community/dist/lib/interfaces/autoSizeStrategy";
+import { SizeColumnsToFitGridStrategy } from 'ag-grid-community/dist/lib/interfaces/autoSizeStrategy';
 
-export function CSVViewer({
-  headers,
-  values,
-}: {
-  headers: string[];
-  values: string[][];
-}) {
+export function CSVViewer({ headers, values }: { headers: string[]; values: string[][] }) {
   // Convert the data into the format expected by AgGridReact
   const rowData = values.map((rowValues) => {
     const rowDataObj: Record<string, string> = {};
@@ -41,7 +35,7 @@ export function CSVViewer({
 
   const autoSizeStrategy: SizeColumnsToFitGridStrategy = {
     type: 'fitGridWidth',
-    defaultMinWidth: 100,
+    defaultMinWidth: 100
   };
 
   return (
@@ -53,11 +47,12 @@ export function CSVViewer({
         fontFamily: 'Inter!important'
       }}
     >
-      <AgGridReact rowData={rowData}
-                   columnDefs={columnDefs}
-                   autoSizeStrategy={autoSizeStrategy}
-                   tooltipShowDelay={400}>
-      </AgGridReact>
+      <AgGridReact
+        rowData={rowData}
+        columnDefs={columnDefs}
+        autoSizeStrategy={autoSizeStrategy}
+        tooltipShowDelay={400}
+      ></AgGridReact>
     </div>
   );
 }

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';
 
@@ -129,14 +128,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 +167,39 @@ 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>(
     checkIfConditionIsDisplayableInSimpleMode(queryInput.query)
   );
+  const [isCompoundModeForced, setIsCompoundModeForced] = useState<boolean>(false);
+  const [isSimpleMode, setIsSimpleMode] = useState<boolean>(
+    () => isDisplayableInSimpleMode && !isCompoundModeForced
+  );
 
   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);
+    setIsCompoundModeForced(!isCompoundModeForced);
   }
 
   useEffect(() => {
-    setMetadataFieldsList(metadataFields);
-  }, [metadataFields]);
+    console.log('set is simple mode', isDisplayableInSimpleMode && !isCompoundModeForced);
+    console.log('is compound mode forced', isCompoundModeForced);
+    console.log('is displayable in simple mode', isDisplayableInSimpleMode);
+    setIsSimpleMode(isDisplayableInSimpleMode && !isCompoundModeForced);
+  }, [isCompoundModeForced, 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) => {
@@ -227,14 +215,24 @@ export const QueryBuilderProvider = ({
     return condition;
   };
 
+  const debouncedOnChange = useCallback(
+    _.debounce(() => {
+      onChange({
+        ...queryInput,
+        query:
+          removeRootAndBlockIfWasAddedAndNotNeeded(
+            convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {}))
+          ) ?? undefined
+      });
+    }, 200),
+    [onChange, queryInput, rootCondition]
+  );
+
   useEffect(() => {
-    onChange({
-      ...queryInput,
-      query:
-        removeRootAndBlockIfWasAddedAndNotNeeded(
-          convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {}))
-        ) ?? undefined
-    });
+    debouncedOnChange();
+    return () => {
+      debouncedOnChange.cancel();
+    };
   }, [rootCondition]);
 
   function generateUniqueId(): string {
@@ -422,7 +420,7 @@ export const QueryBuilderProvider = ({
         setIsSimpleMode,
         rootCondition,
         setRootCondition,
-        metadataFieldsList,
+        metadataFieldsList: metadataFields,
         generateUniqueId,
         addUniqueIds,
         getOperatorsByMetadataType,

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={{