Rebuild review panel entries when the editor viewport changes (#19962)

GitOrigin-RevId: af144a278a3338bffb58e40a91ddbeb204959dee

services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx

@@ -29,6 +29,7 @@ import { positionItems } from '../utils/position-items'
 import { canAggregate } from '../utils/can-aggregate'
 import { isInViewport } from '../utils/is-in-viewport'
 import ReviewPanelEmptyState from './review-panel-empty-state'
+import useEventListener from '@/shared/hooks/use-event-listener'
 
 type Positions = Map<string, number>
 type Aggregates = Map<string, Change<DeleteOperation>>
@@ -97,7 +98,7 @@ const ReviewPanelCurrentFile: FC = () => {
     return () => {
       window.clearTimeout(timer)
     }
-  }, [state, updatePositions, view.viewport.from, view.viewport.to])
+  }, [state, updatePositions])
 
   useEffect(() => {
     const element = containerRef.current
@@ -111,7 +112,7 @@ const ReviewPanelCurrentFile: FC = () => {
     }
   }, [view, updatePositions])
 
-  useEffect(() => {
+  const buildEntries = useCallback(() => {
     if (ranges) {
       view.requestMeasure({
         key: 'review-panel-position',
@@ -175,7 +176,13 @@ const ReviewPanelCurrentFile: FC = () => {
         },
       })
     }
-  }, [view, threads, ranges, screenPosition, containerRef])
+  }, [screenPosition, threads, view, ranges])
+
+  useEffect(() => {
+    buildEntries()
+  }, [buildEntries])
+
+  useEventListener('editor:viewport-changed', buildEntries)
 
   if (!rangesWithPositions) {
     return null

services/web/frontend/js/features/source-editor/extensions/track-changes.ts

@@ -161,7 +161,23 @@ export const trackChanges = (
             },
           }
         })
-      : [],
+      : ViewPlugin.define(view => {
+          let timer: number
+
+          return {
+            update(update) {
+              if (update.viewportChanged) {
+                if (timer) {
+                  window.clearTimeout(timer)
+                }
+
+                timer = window.setTimeout(() => {
+                  dispatchEvent(new Event('editor:viewport-changed'))
+                }, 25)
+              }
+            },
+          }
+        }),
 
     // draw change decorations
     ViewPlugin.define<