fix(compass-aggregations): Don't lead debounce on aggregation run on input change, force run stage on pipeline changes COMPASS-5764 (#3076)

Author: Anemy

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-workspace.jsx

@@ -68,7 +68,7 @@ class PipelineWorkspace extends PureComponent {
   onStageMoved = ({ oldIndex, newIndex }) => {
     if (oldIndex !== newIndex) {
       this.props.stageMoved(oldIndex, newIndex);
-      this.props.runStage(0);
+      this.props.runStage(0, true /* force execute */);
     }
   }
 

packages/compass-aggregations/src/components/pipeline/modals/confirm-import-pipeline.jsx

@@ -31,7 +31,7 @@ class ConfirmImportPipeline extends PureComponent {
   onConfirm = () => {
     this.props.confirmNew();
     if (this.props.isAutoPreviewing) {
-      this.props.runStage(0);
+      this.props.runStage(0, true /* force execute */);
     }
   }
 

packages/compass-aggregations/src/components/settings/settings.jsx

@@ -61,7 +61,7 @@ class Settings extends PureComponent {
     this.props.applySettings();
 
     // Updated settings used to run all stages in the current pipeline.
-    this.props.runStage(0);
+    this.props.runStage(0, true /* force execute */);
 
     // Hide the settings panel.
     this.props.toggleSettingsIsExpanded();

packages/compass-aggregations/src/components/stage-editor-toolbar/delete-stage.jsx

@@ -23,7 +23,7 @@ class DeleteStage extends PureComponent {
   onStageDeleted = () => {
     this.props.stageDeleted(this.props.index);
     this.props.setIsModified(true);
-    this.props.runStage(this.props.index);
+    this.props.runStage(this.props.index, true /* force execute */);
   };
 
   /**

packages/compass-aggregations/src/components/stage-editor-toolbar/toggle-stage.jsx

@@ -25,7 +25,7 @@ class ToggleStage extends PureComponent {
   onStageToggled = () => {
     this.props.stageToggled(this.props.index);
     this.props.setIsModified(true);
-    this.props.runStage(this.props.index);
+    this.props.runStage(this.props.index, true /* force execute */);
   };
 
   /**

packages/compass-aggregations/src/modules/auto-preview.ts

@@ -25,15 +25,16 @@ export const toggleAutoPreview = (
   newVal: boolean
 ): ThunkAction<void, RootState, void, AutoPreviewToggledAction> => {
   return (dispatch) => {
+    dispatch({
+      type: ActionTypes.AutoPreviewToggled,
+      value: newVal
+    });
+
     if (
       newVal &&
       global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true'
     ) {
-      dispatch(runStage(0));
+      dispatch(runStage(0, true /* force execute */));
     }
-    dispatch({
-      type: ActionTypes.AutoPreviewToggled,
-      value: newVal
-    });
   };
 };

packages/compass-aggregations/src/modules/index.ts

@@ -713,7 +713,7 @@ export const getPipelineFromIndexedDB = (pipelineId: string): ThunkAction<void,
       dispatch(clearPipeline());
       dispatch(restoreSavedPipeline(pipe));
       dispatch(globalAppRegistryEmit('compass:aggregations:pipeline-opened'));
-      dispatch(runStage(0) as any);
+      dispatch(runStage(0, true /* force execute */));
     } catch (e: unknown) {
       console.log(e);
     }
@@ -775,7 +775,7 @@ export const modifyView = (
 ): ThunkAction<void, RootState, void, AnyAction> => {
   return (dispatch) => {
     dispatch(modifySource(viewName, viewPipeline, readonly, source));
-    dispatch(runStage(0));
+    dispatch(runStage(0, true /* force execute */));
   };
 };
 

packages/compass-aggregations/src/modules/pipeline.ts

@@ -779,9 +779,12 @@ const getCancelableExecuteAggDispatch = <
 
 const ExecuteAggInflightMap = new Map<string, () => void>();
 
+type CancellableDebounceExecuteAggregation = typeof _executeAggregation & {
+  cancel(): void
+};
 const ExecuteAggDebounceMap = new Map<
   string,
-  typeof _executeAggregation & { cancel(): void }
+  CancellableDebounceExecuteAggregation
 >();
 
 const _executeAggregation = (
@@ -806,13 +809,16 @@ const _executeAggregation = (
   }
 };
 
-const getDebouncedExecuteAgg = (id: string): typeof _executeAggregation => {
+const getDebouncedExecuteAgg = (id: string): CancellableDebounceExecuteAggregation => {
   if (ExecuteAggDebounceMap.has(id)) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return ExecuteAggDebounceMap.get(id)!;
   } else {
     const fn = debounce(_executeAggregation, 750, {
-      leading: true,
+      // We don't want the documents to re-render while the user is typing
+      // so we want to only have the documents return when the user
+      // finishing typing at the end (trailing) of the debounce.
+      leading: false,
       trailing: true
     });
     ExecuteAggDebounceMap.set(id, fn);
@@ -838,11 +844,21 @@ const executeAggregation = (
   ns: string,
   _dispatch: Dispatch,
   getState: () => RootState,
-  index: number
+  index: number,
+  forceExecute = false
 ) => {
   const id = `${getState().aggregationWorkspaceId}::${index}`;
   const dispatch = getCancelableExecuteAggDispatch(id, _dispatch);
+
   const debouncedExecuteAgg = getDebouncedExecuteAgg(id);
+
+  if (forceExecute) {
+    // Cancel previously in-flight requests.
+    debouncedExecuteAgg.cancel();
+
+    _executeAggregation(dataService, ns, dispatch, getState, index);
+    return;
+  }
   debouncedExecuteAgg(dataService, ns, dispatch, getState, index);
 };
 
@@ -1033,7 +1049,8 @@ export const runOutStage = (index: number): ThunkAction<void, RootState, void, A
 };
 
 export const runStage = (
-  index: number
+  index: number,
+  forceExecute = false
 ): ThunkAction<void, RootState, void, AnyAction> => {
   return (dispatch, getState) => {
     const state = getState();
@@ -1051,7 +1068,7 @@ export const runStage = (
     if (dataService) {
       const ns = state.namespace;
       for (let i = index; i < state.pipeline.length; i++) {
-        executeAggregation(dataService, ns, dispatch, getState, i);
+        executeAggregation(dataService, ns, dispatch, getState, i, forceExecute);
       }
     }
   };