fix(schema): prevent application from hanging when selecting ranges too fast on the "Schema" tab COMPASS-8048 (#5980)

fix(schema): debounce onChange calls to avoid application main thread locking

Author: gribnoysup

packages/compass-query-bar/src/index.tsx

@@ -59,7 +59,7 @@ const QueryBarPlugin = registerHadronPlugin(
   }
 );
 
-export type ChangeQueryBar = typeof useChangeQueryBarQuery;
+export type ChangeQueryFn = ReturnType<typeof useChangeQueryBarQuery>;
 
 // Rendering query bar only makes sense if query bar store is in the rendering
 // tree. If it's not, `useQueryBarComponent` will return a `null` component

packages/compass-schema/src/components/coordinates-minichart/coordinates-minichart.jsx

@@ -17,7 +17,6 @@ import GeoscatterMapItem from './marker';
 import { LIGHTMODE_TILE_URL, DARKMODE_TILE_URL } from './constants';
 import { getHereAttributionMessage } from './utils';
 import { debounce } from 'lodash';
-import { useChangeQueryBarQuery } from '@mongodb-js/compass-query-bar';
 
 // TODO: Disable boxZoom handler for circle lasso.
 //
@@ -308,14 +307,13 @@ class UnthemedCoordinatesMinichart extends PureComponent {
   }
 }
 
-const CoordinatesMinichart = ({ ...props }) => {
+const CoordinatesMinichart = ({ onQueryChanged, ...props }) => {
   const darkMode = useDarkMode();
-  const changeQuery = useChangeQueryBarQuery();
   const onChange = useCallback(
     (geoQuery) => {
-      changeQuery('mergeGeoQuery', geoQuery);
+      onQueryChanged('mergeGeoQuery', geoQuery);
     },
-    [changeQuery]
+    [onQueryChanged]
   );
   return (
     <UnthemedCoordinatesMinichart
@@ -326,5 +324,9 @@ const CoordinatesMinichart = ({ ...props }) => {
   );
 };
 
+CoordinatesMinichart.propTypes = {
+  onQueryChanged: PropTypes.func,
+};
+
 export default CoordinatesMinichart;
 export { CoordinatesMinichart };

packages/compass-schema/src/components/field.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Subtitle,
   Icon,
@@ -10,7 +10,7 @@ import {
   SignalPopover,
   PerformanceSignals,
 } from '@mongodb-js/compass-components';
-import { find } from 'lodash';
+import { debounce, find } from 'lodash';
 import { withPreferences } from 'compass-preferences-model/provider';
 import type {
   ArraySchemaType,
@@ -208,6 +208,22 @@ function Field({ actions, name, path, types, enableMaps }: FieldProps) {
       : undefined;
   });
 
+  // In some cases charts can call the change callback too often (for examlpe
+  // when selecting from a very tightly rendered list of timeline items, like
+  // ObjectIds), to avoid application hanging trying to process them all
+  // syncronously and sequentially causing non-stop re-renders, we're debouncing
+  // change call a bit and only applying the last selected change to the actual
+  // query bar
+  const debouncedChangeQuery = useMemo(() => {
+    return debounce(changeQuery, 100);
+  }, [changeQuery]);
+
+  useEffect(() => {
+    return () => {
+      debouncedChangeQuery.cancel();
+    };
+  }, [debouncedChangeQuery]);
+
   const activeShownTypes = useMemo(() => sortTypes(types), [types]);
   const nestedDocType = useMemo(() => getNestedDocType(types), [types]);
 
@@ -293,7 +309,7 @@ function Field({ actions, name, path, types, enableMaps }: FieldProps) {
               type={activeType}
               nestedDocType={nestedDocType}
               actions={actions}
-              onQueryChanged={changeQuery}
+              onQueryChanged={debouncedChangeQuery}
             />
           </div>
         </div>

packages/compass-schema/src/components/minichart/minichart.jsx

@@ -88,6 +88,7 @@ class MiniChart extends PureComponent {
           queryValue={fieldValue}
           type={this.props.type}
           width={width}
+          onQueryChanged={this.props.onQueryChanged}
         />
       );
     }
@@ -97,6 +98,7 @@ class MiniChart extends PureComponent {
           actions={this.props.actions}
           fieldName={fieldName}
           type={this.props.type}
+          onQueryChanged={this.props.onQueryChanged}
         />
       );
     }

packages/compass-schema/src/components/unique-minichart/unique-minichart.jsx

@@ -12,6 +12,7 @@ class UniqueMiniChart extends Component {
     queryValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     type: PropTypes.object.isRequired,
     width: PropTypes.number,
+    onQueryChanged: PropTypes.func,
   };
 
   constructor(props) {
@@ -46,6 +47,7 @@ class UniqueMiniChart extends Component {
           value={value}
           queryValue={this.props.queryValue}
           fieldName={this.props.fieldName}
+          onQueryChanged={this.props.onQueryChanged}
         />
       );
     });

packages/compass-schema/src/components/value-bubble.tsx

@@ -9,7 +9,7 @@ import {
   palette,
   useDarkMode,
 } from '@mongodb-js/compass-components';
-import { useChangeQueryBarQuery } from '@mongodb-js/compass-query-bar';
+import type { ChangeQueryFn } from '@mongodb-js/compass-query-bar';
 
 import constants from '../constants/schema';
 
@@ -63,21 +63,26 @@ type ValueBubbleProps = {
   fieldName: string;
   queryValue: any;
   value: any;
+  onQueryChanged: ChangeQueryFn;
 };
 
-function ValueBubble({ fieldName, queryValue, value }: ValueBubbleProps) {
+function ValueBubble({
+  fieldName,
+  queryValue,
+  value,
+  onQueryChanged,
+}: ValueBubbleProps) {
   const darkMode = useDarkMode();
-  const changeQuery = useChangeQueryBarQuery();
 
   const onBubbleClicked = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
-      changeQuery(e.shiftKey ? 'toggleDistinctValue' : 'setValue', {
+      onQueryChanged(e.shiftKey ? 'toggleDistinctValue' : 'setValue', {
         field: fieldName,
         value,
         unsetIfSet: true,
       });
     },
-    [changeQuery, fieldName, value]
+    [onQueryChanged, fieldName, value]
   );
 
   const extractedStringValue = useMemo(

packages/compass-schema/src/stores/store.ts

@@ -105,7 +105,7 @@ export type SchemaStore = StoreWithStateMixin<SchemaState> & {
     onDeleted: (geoQuery: ReturnType<typeof generateGeoQuery>) => void
   ): void;
   stopAnalysis(): void;
-  _trackSchemaAnalyzed(analysisTimeMS: number): void;
+  _trackSchemaAnalyzed(analysisTimeMS: number, query: any): void;
   startAnalysis(): void;
 };
 
@@ -317,7 +317,7 @@ export function activateSchemaPlugin(
           resultId: resultId(),
         });
 
-        this._trackSchemaAnalyzed(analysisTime);
+        this._trackSchemaAnalyzed(analysisTime, query);
 
         this.onSchemaSampled();
       } catch (err: any) {