fix: Filter value resets when switching column types [WEB-1949] (#8731)

* fix: use Observable.batch to avoid race condition updating exp filter form * lintfix
determined-ai · Jan 29, 2024 · 78929c0 · 78929c0
1 parent 7ddf965
commit 78929c0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/webui/react/src/components/FilterForm/components/FilterField.tsx b/webui/react/src/components/FilterForm/components/FilterField.tsx
@@ -6,7 +6,7 @@ import Input from 'hew/Input';
 import InputNumber from 'hew/InputNumber';
 import Select, { SelectProps, SelectValue } from 'hew/Select';
 import { Loadable } from 'hew/utils/loadable';
-import { useObservable } from 'micro-observables';
+import { Observable, useObservable } from 'micro-observables';
 import { useCallback, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { debounce } from 'throttle-debounce';
@@ -67,30 +67,34 @@ const FilterField = ({
 
   // use this function to update field value
   const updateFieldValue = (fieldId: string, value: FormFieldValue, debounceUpdate = false) => {
-    if (debounceUpdate) {
-      debounceFunc(() => formStore.setFieldValue(fieldId, value));
-    } else {
-      formStore.setFieldValue(fieldId, value);
-    }
-    setFieldValue(value);
+    Observable.batch(() => {
+      if (debounceUpdate) {
+        debounceFunc(() => formStore.setFieldValue(fieldId, value));
+      } else {
+        formStore.setFieldValue(fieldId, value);
+      }
+      setFieldValue(value);
+    });
   };
 
   const onChangeColumnName = (value: SelectValue) => {
     const prevType = currentColumn?.type;
     const newColName = value?.toString() ?? '';
     const newCol = columns.find((c) => c.column === newColName);
     if (newCol) {
-      formStore.setFieldColumnName(field.id, newCol);
+      Observable.batch(() => {
+        formStore.setFieldColumnName(field.id, newCol);
 
-      if ((SpecialColumnNames as ReadonlyArray<string>).includes(newColName)) {
-        formStore.setFieldOperator(field.id, Operator.Eq);
-        updateFieldValue(field.id, null);
-      } else if (prevType !== newCol?.type) {
-        const defaultOperator: Operator =
-          AvailableOperators[newCol?.type ?? V1ColumnType.UNSPECIFIED][0];
-        formStore.setFieldOperator(field.id, defaultOperator);
-        updateFieldValue(field.id, null);
-      }
+        if ((SpecialColumnNames as ReadonlyArray<string>).includes(newColName)) {
+          formStore.setFieldOperator(field.id, Operator.Eq);
+          updateFieldValue(field.id, null);
+        } else if (prevType !== newCol?.type) {
+          const defaultOperator: Operator =
+            AvailableOperators[newCol?.type ?? V1ColumnType.UNSPECIFIED][0];
+          formStore.setFieldOperator(field.id, defaultOperator);
+          updateFieldValue(field.id, null);
+        }
+      });
     }
   };
 
@@ -207,11 +211,13 @@ const FilterField = ({
           value={field.operator}
           width={'100%'}
           onChange={(value) => {
-            const op = (value?.toString() ?? '=') as Operator;
-            formStore.setFieldOperator(field.id, op);
-            if (op === Operator.IsEmpty || op === Operator.NotEmpty) {
-              updateFieldValue(field.id, null);
-            }
+            Observable.batch(() => {
+              const op = (value?.toString() ?? '=') as Operator;
+              formStore.setFieldOperator(field.id, op);
+              if (op === Operator.IsEmpty || op === Operator.NotEmpty) {
+                updateFieldValue(field.id, null);
+              }
+            });
           }}
         />
         {isSpecialColumn ? (

diff --git a/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx b/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx
@@ -402,15 +402,17 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
     };
   }, [canceler, stopPolling]);
 
-  useEffect(() => {
-    return formStore.asJsonString.subscribe(() => {
-      resetPagination();
-      const loadableFormset = formStore.formset.get();
-      Loadable.forEach(loadableFormset, (formSet) =>
-        updateSettings({ filterset: JSON.stringify(formSet) }),
-      );
-    });
-  }, [resetPagination, updateSettings]);
+  useEffect(
+    () =>
+      formStore.asJsonString.subscribe(() => {
+        resetPagination();
+        const loadableFormset = formStore.formset.get();
+        Loadable.forEach(loadableFormset, (formSet) =>
+          updateSettings({ filterset: JSON.stringify(formSet) }),
+        );
+      }),
+    [resetPagination, updateSettings],
+  );
 
   const handleActionComplete = useCallback(async () => {
     /**