fixup: move throttling props to generic hook in Compass components

Author: Anemy

packages/compass-components/src/hooks/use-throttled-props.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+
+const DEFAULT_REFRESH_RATE_MS = 250;
+
+export const useThrottledProps = <T extends Record<string, unknown>>(
+  props: T,
+  refreshRate: number = DEFAULT_REFRESH_RATE_MS
+): T => {
+  // Throttling mechanism for Component content updates.
+  const lastUpdateMS = useRef(0);
+  const pendingUpdate = useRef<NodeJS.Timeout | null>(null);
+  const [throttledProps, setThrottledProps] = useState<T>(props);
+
+  // Throttle props updating. This ensures we don't run
+  // into broken state bugs with ReactFlow like COMPASS-9738.
+  useEffect(() => {
+    const now = Date.now();
+    const timeSinceLastUpdate = now - lastUpdateMS.current;
+
+    const updateProps = () => {
+      lastUpdateMS.current = Date.now();
+      setThrottledProps(props);
+    };
+
+    if (timeSinceLastUpdate >= refreshRate) {
+      updateProps();
+    } else {
+      if (pendingUpdate.current) {
+        clearTimeout(pendingUpdate.current);
+      }
+
+      // Schedule update for the remaining time.
+      const remainingTime = refreshRate - timeSinceLastUpdate;
+      pendingUpdate.current = setTimeout(updateProps, remainingTime);
+    }
+
+    return () => {
+      if (pendingUpdate.current) {
+        clearTimeout(pendingUpdate.current);
+        pendingUpdate.current = null;
+      }
+    };
+  }, [props, refreshRate]);
+
+  return throttledProps;
+};

packages/compass-components/src/index.ts

@@ -152,6 +152,7 @@ export {
   Theme,
   ThemeProvider,
 } from './hooks/use-theme';
+export { useThrottledProps } from './hooks/use-throttled-props';
 export {
   ContentWithFallback,
   FadeInPlaceholder,

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -29,6 +29,7 @@ import {
   useDarkMode,
   useDrawerActions,
   useDrawerState,
+  useThrottledProps,
   rafraf,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
@@ -121,8 +122,6 @@ const ZOOM_OPTIONS = {
   minZoom: 0.25,
 };
 
-const REFRESH_DIAGRAM_RATE_MS = 250;
-
 type SelectedItems = NonNullable<DiagramState>['selectedItems'];
 
 const DiagramContent: React.FunctionComponent<{
@@ -321,95 +320,34 @@ const DiagramContent: React.FunctionComponent<{
     [handleNodesConnect]
   );
 
-  // Throttling mechanism for diagram content updates
-  const lastDiagramUpdateMS = useRef(0);
-  const pendingUpdate = useRef<NodeJS.Timeout | null>(null);
-  const [throttledDiagramProps, setThrottledDiagramProps] = useState({
-    isDarkMode,
-    diagramLabel,
-    edges,
-    nodes,
-    onNodeClick,
-    onPaneClick,
-    onEdgeClick,
-    onFieldClick,
-    onNodeDragStop,
-    onConnect,
-  });
-
-  // Throttle diagram props updating. This ensures we don't run
-  // into broken state bugs with ReactFlow like COMPASS-9738.
-  useEffect(() => {
-    const now = Date.now();
-    const timeSinceLastUpdate = now - lastDiagramUpdateMS.current;
-
-    const updateProps = () => {
-      lastDiagramUpdateMS.current = Date.now();
-      setThrottledDiagramProps({
-        isDarkMode,
-        diagramLabel,
-        edges,
-        nodes,
-        onNodeClick,
-        onPaneClick,
-        onEdgeClick,
-        onFieldClick,
-        onNodeDragStop,
-        onConnect,
-      });
-    };
-
-    if (timeSinceLastUpdate >= REFRESH_DIAGRAM_RATE_MS) {
-      updateProps();
-    } else {
-      if (pendingUpdate.current) {
-        clearTimeout(pendingUpdate.current);
-      }
-
-      // Schedule update for the remaining time.
-      const remainingTime = REFRESH_DIAGRAM_RATE_MS - timeSinceLastUpdate;
-      pendingUpdate.current = setTimeout(updateProps, remainingTime);
-    }
-
-    return () => {
-      if (pendingUpdate.current) {
-        clearTimeout(pendingUpdate.current);
-        pendingUpdate.current = null;
-      }
-    };
-  }, [
-    isDarkMode,
-    diagramLabel,
-    edges,
-    nodes,
-    onNodeClick,
-    onPaneClick,
-    onEdgeClick,
-    onFieldClick,
-    onNodeDragStop,
-    onConnect,
-  ]);
+  const diagramProps = useMemo(
+    () => ({
+      isDarkMode,
+      title: diagramLabel,
+      edges,
+      nodes,
+      onNodeClick,
+      onPaneClick,
+      onEdgeClick,
+      onFieldClick,
+      onNodeDragStop,
+      onConnect,
+    }),
+    [
+      isDarkMode,
+      diagramLabel,
+      edges,
+      nodes,
+      onNodeClick,
+      onPaneClick,
+      onEdgeClick,
+      onFieldClick,
+      onNodeDragStop,
+      onConnect,
+    ]
+  );
 
-  const diagramContent = useMemo(() => {
-    return (
-      <Diagram
-        isDarkMode={throttledDiagramProps.isDarkMode}
-        title={throttledDiagramProps.diagramLabel}
-        edges={throttledDiagramProps.edges}
-        nodes={throttledDiagramProps.nodes}
-        // With threshold too low clicking sometimes gets confused with
-        // dragging
-        nodeDragThreshold={5}
-        onNodeClick={throttledDiagramProps.onNodeClick}
-        onPaneClick={throttledDiagramProps.onPaneClick}
-        onEdgeClick={throttledDiagramProps.onEdgeClick}
-        onFieldClick={throttledDiagramProps.onFieldClick}
-        fitViewOptions={ZOOM_OPTIONS}
-        onNodeDragStop={throttledDiagramProps.onNodeDragStop}
-        onConnect={throttledDiagramProps.onConnect}
-      />
-    );
-  }, [throttledDiagramProps]);
+  const throttledDiagramProps = useThrottledProps(diagramProps);
 
   return (
     <div
@@ -432,7 +370,13 @@ const DiagramContent: React.FunctionComponent<{
             impact your data
           </Banner>
         )}
-        {diagramContent}
+        <Diagram
+          {...throttledDiagramProps}
+          // With threshold too low clicking sometimes gets confused with
+          // dragging.
+          nodeDragThreshold={5}
+          fitViewOptions={ZOOM_OPTIONS}
+        />
       </div>
     </div>
   );