[SIEM] Attach VisibilitySensor to the TimelineBody instead of window (#55620) (#55738)

x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx

@@ -31,6 +31,7 @@ interface Props {
   browserFields: BrowserFields;
   columnHeaders: ColumnHeader[];
   columnRenderers: ColumnRenderer[];
+  containerElementRef: HTMLDivElement;
   data: TimelineItem[];
   eventIdToNoteIds: Readonly<Record<string, string[]>>;
   getNotesByIds: (noteIds: string[]) => Note[];
@@ -53,61 +54,62 @@ interface Props {
 // Passing the styles directly to the component because the width is
 // being calculated and is recommended by Styled Components for performance
 // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-export const Events = React.memo<Props>(
-  ({
-    actionsColumnWidth,
-    addNoteToEvent,
-    browserFields,
-    columnHeaders,
-    columnRenderers,
-    data,
-    eventIdToNoteIds,
-    getNotesByIds,
-    id,
-    isEventViewer = false,
-    loadingEventIds,
-    onColumnResized,
-    onPinEvent,
-    onRowSelected,
-    onUpdateColumns,
-    onUnPinEvent,
-    pinnedEventIds,
-    rowRenderers,
-    selectedEventIds,
-    showCheckboxes,
-    toggleColumn,
-    updateNote,
-  }) => (
-    <EventsTbody data-test-subj="events">
-      {data.map((event, i) => (
-        <StatefulEvent
-          actionsColumnWidth={actionsColumnWidth}
-          addNoteToEvent={addNoteToEvent}
-          browserFields={browserFields}
-          columnHeaders={columnHeaders}
-          columnRenderers={columnRenderers}
-          event={event}
-          eventIdToNoteIds={eventIdToNoteIds}
-          getNotesByIds={getNotesByIds}
-          isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
-          isEventViewer={isEventViewer}
-          key={event._id}
-          loadingEventIds={loadingEventIds}
-          maxDelay={maxDelay(i)}
-          onColumnResized={onColumnResized}
-          onPinEvent={onPinEvent}
-          onRowSelected={onRowSelected}
-          onUnPinEvent={onUnPinEvent}
-          onUpdateColumns={onUpdateColumns}
-          rowRenderers={rowRenderers}
-          selectedEventIds={selectedEventIds}
-          showCheckboxes={showCheckboxes}
-          timelineId={id}
-          toggleColumn={toggleColumn}
-          updateNote={updateNote}
-        />
-      ))}
-    </EventsTbody>
-  )
+const EventsComponent: React.FC<Props> = ({
+  actionsColumnWidth,
+  addNoteToEvent,
+  browserFields,
+  columnHeaders,
+  columnRenderers,
+  containerElementRef,
+  data,
+  eventIdToNoteIds,
+  getNotesByIds,
+  id,
+  isEventViewer = false,
+  loadingEventIds,
+  onColumnResized,
+  onPinEvent,
+  onRowSelected,
+  onUpdateColumns,
+  onUnPinEvent,
+  pinnedEventIds,
+  rowRenderers,
+  selectedEventIds,
+  showCheckboxes,
+  toggleColumn,
+  updateNote,
+}) => (
+  <EventsTbody data-test-subj="events">
+    {data.map((event, i) => (
+      <StatefulEvent
+        containerElementRef={containerElementRef}
+        actionsColumnWidth={actionsColumnWidth}
+        addNoteToEvent={addNoteToEvent}
+        browserFields={browserFields}
+        columnHeaders={columnHeaders}
+        columnRenderers={columnRenderers}
+        event={event}
+        eventIdToNoteIds={eventIdToNoteIds}
+        getNotesByIds={getNotesByIds}
+        isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
+        isEventViewer={isEventViewer}
+        key={event._id}
+        loadingEventIds={loadingEventIds}
+        maxDelay={maxDelay(i)}
+        onColumnResized={onColumnResized}
+        onPinEvent={onPinEvent}
+        onRowSelected={onRowSelected}
+        onUnPinEvent={onUnPinEvent}
+        onUpdateColumns={onUpdateColumns}
+        rowRenderers={rowRenderers}
+        selectedEventIds={selectedEventIds}
+        showCheckboxes={showCheckboxes}
+        timelineId={id}
+        toggleColumn={toggleColumn}
+        updateNote={updateNote}
+      />
+    ))}
+  </EventsTbody>
 );
-Events.displayName = 'Events';
+
+export const Events = React.memo(EventsComponent);

x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx

@@ -35,6 +35,7 @@ import { StatefulEventChild } from './stateful_event_child';
 
 interface Props {
   actionsColumnWidth: number;
+  containerElementRef: HTMLDivElement;
   addNoteToEvent: AddNoteToEvent;
   browserFields: BrowserFields;
   columnHeaders: ColumnHeader[];
@@ -115,6 +116,7 @@ const StatefulEventComponent: React.FC<Props> = ({
   actionsColumnWidth,
   addNoteToEvent,
   browserFields,
+  containerElementRef,
   columnHeaders,
   columnRenderers,
   event,
@@ -201,6 +203,7 @@ const StatefulEventComponent: React.FC<Props> = ({
     <VisibilitySensor
       partialVisibility={true}
       scrollCheck={true}
+      containment={containerElementRef}
       offset={{ top: TOP_OFFSET, bottom: BOTTOM_OFFSET }}
     >
       {({ isVisible }) => {
@@ -279,7 +282,7 @@ const StatefulEventComponent: React.FC<Props> = ({
         } else {
           // Height place holder for visibility detection as well as re-rendering sections.
           const height =
-            divElement.current != null
+            divElement.current != null && divElement.current.clientHeight
               ? `${divElement.current.clientHeight}px`
               : DEFAULT_ROW_HEIGHT;
 

x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import { BrowserFields } from '../../../containers/source';
 import { TimelineItem, TimelineNonEcsData } from '../../../graphql/types';
@@ -95,6 +95,7 @@ export const Body = React.memo<BodyProps>(
     toggleColumn,
     updateNote,
   }) => {
+    const containerElementRef = useRef<HTMLDivElement>(null);
     const timelineTypeContext = useTimelineTypeContext();
     const additionalActionWidth =
       timelineTypeContext.timelineActions?.reduce((acc, v) => acc + v.width, 0) ?? 0;
@@ -112,7 +113,7 @@ export const Body = React.memo<BodyProps>(
 
     return (
       <>
-        <TimelineBody data-test-subj="timeline-body" bodyHeight={height}>
+        <TimelineBody data-test-subj="timeline-body" bodyHeight={height} ref={containerElementRef}>
           <EventsTable
             data-test-subj="events-table"
             // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
@@ -138,6 +139,7 @@ export const Body = React.memo<BodyProps>(
             />
 
             <Events
+              containerElementRef={containerElementRef.current!}
               actionsColumnWidth={actionsColumnWidth}
               addNoteToEvent={addNoteToEvent}
               browserFields={browserFields}