From 266234a28547e29012e75604eee3f06a121923ec Mon Sep 17 00:00:00 2001
From: Adrian de la Rosa <adrian.delarosa@datadoghq.com>
Date: Thu, 14 May 2026 14:03:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Gate=20view=5Fupdate=20events=20?=
 =?UTF-8?q?behind=20datadogMode=20in=20developer=20extension?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/panel/components/panel.tsx            |  1 +
 .../components/tabs/eventsTab/eventsTab.tsx   | 11 ++++++-
 .../tabs/eventsTab/eventsTabSide.tsx          | 16 ++++++----
 .../src/panel/hooks/useEvents/eventFilters.ts | 32 +++++++++++++++++--
 4 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/developer-extension/src/panel/components/panel.tsx b/developer-extension/src/panel/components/panel.tsx
index cca7d405d2..cb74a82b49 100644
--- a/developer-extension/src/panel/components/panel.tsx
+++ b/developer-extension/src/panel/components/panel.tsx
@@ -84,6 +84,7 @@ export function Panel() {
           columns={columns}
           onColumnsChange={setColumns}
           clear={clear}
+          datadogMode={settings.datadogMode}
         />
       </Tabs.Panel>
       <Tabs.Panel value={PanelTabs.Infos} className={classes.tab}>
diff --git a/developer-extension/src/panel/components/tabs/eventsTab/eventsTab.tsx b/developer-extension/src/panel/components/tabs/eventsTab/eventsTab.tsx
index dc07e86d6a..8771797f47 100644
--- a/developer-extension/src/panel/components/tabs/eventsTab/eventsTab.tsx
+++ b/developer-extension/src/panel/components/tabs/eventsTab/eventsTab.tsx
@@ -16,6 +16,7 @@ interface EventsTabProps {
   columns: EventListColumn[]
   onColumnsChange: (columns: EventListColumn[]) => void
   clear: () => void
+  datadogMode: boolean
 }
 
 export function EventsTab({
@@ -26,11 +27,19 @@ export function EventsTab({
   columns,
   onColumnsChange,
   clear,
+  datadogMode,
 }: EventsTabProps) {
   return (
     <TabBase
       top={<EventsTabTop filters={filters} onFiltersChange={onFiltersChange} clear={clear} />}
-      leftSide={<EventsTabSide filters={filters} onFiltersChange={onFiltersChange} facetRegistry={facetRegistry} />}
+      leftSide={
+        <EventsTabSide
+          filters={filters}
+          onFiltersChange={onFiltersChange}
+          facetRegistry={facetRegistry}
+          datadogMode={datadogMode}
+        />
+      }
     >
       {events.length === 0 || !facetRegistry ? (
         <Center>
diff --git a/developer-extension/src/panel/components/tabs/eventsTab/eventsTabSide.tsx b/developer-extension/src/panel/components/tabs/eventsTab/eventsTabSide.tsx
index 27a0325582..d2a15f01dd 100644
--- a/developer-extension/src/panel/components/tabs/eventsTab/eventsTabSide.tsx
+++ b/developer-extension/src/panel/components/tabs/eventsTab/eventsTabSide.tsx
@@ -7,19 +7,23 @@ export function EventsTabSide({
   facetRegistry,
   filters,
   onFiltersChange,
+  datadogMode,
 }: {
   facetRegistry?: FacetRegistry
   filters: EventFilters
   onFiltersChange: (filters: EventFilters) => void
+  datadogMode: boolean
 }) {
   return (
     <Box ml="md">
-      <Checkbox
-        label={'Show only the latest View\xa0event'}
-        checked={!filters.outdatedVersions}
-        onChange={(e) => onFiltersChange({ ...filters, outdatedVersions: !e.target.checked })}
-        mb="sm"
-      />
+      {datadogMode && (
+        <Checkbox
+          label={'Show only the latest View\xa0event'}
+          checked={!filters.outdatedVersions}
+          onChange={(e) => onFiltersChange({ ...filters, outdatedVersions: !e.target.checked })}
+          mb="sm"
+        />
+      )}
 
       {facetRegistry && (
         <FacetList
diff --git a/developer-extension/src/panel/hooks/useEvents/eventFilters.ts b/developer-extension/src/panel/hooks/useEvents/eventFilters.ts
index fa5f8c5794..e861bf9911 100644
--- a/developer-extension/src/panel/hooks/useEvents/eventFilters.ts
+++ b/developer-extension/src/panel/hooks/useEvents/eventFilters.ts
@@ -1,5 +1,5 @@
 import type { SdkEvent } from '../../sdkEvent'
-import type { RumViewEvent } from '../../../../../packages/rum-core/src/rumEvent.types'
+import type { RumViewEvent, RumViewUpdateEvent } from '../../../../../packages/rum-core/src/rumEvent.types'
 import { isRumViewEvent } from '../../sdkEvent'
 import type { FacetRegistry } from './facetRegistry'
 
@@ -41,6 +41,8 @@ export function applyEventFilters(filters: EventFilters, events: SdkEvent[], fac
 
   if (!filters.outdatedVersions) {
     filteredEvents = filterOutdatedVersions(filteredEvents)
+  } else {
+    filteredEvents = deduplicateViewAndViewUpdate(filteredEvents)
   }
 
   return filteredEvents
@@ -64,6 +66,10 @@ export function filterFacets(
   )
 }
 
+function isRumViewUpdateEvent(event: SdkEvent): event is RumViewUpdateEvent {
+  return 'type' in event && event.type === 'view_update'
+}
+
 function filterOutdatedVersions(events: SdkEvent[]): SdkEvent[] {
   const upToDateEvents = new Map<string, RumViewEvent>()
   const outdatedEvents = new Set<SdkEvent>()
@@ -82,7 +88,29 @@ function filterOutdatedVersions(events: SdkEvent[]): SdkEvent[] {
     }
   }
 
-  return events.filter((event) => !outdatedEvents.has(event))
+  return events.filter((event) => !outdatedEvents.has(event) && !isRumViewUpdateEvent(event))
+}
+
+// When showing all versions, prefer view_update diffs over full views for the same document_version.
+// The initial view (no corresponding view_update) and the final view are always kept.
+function deduplicateViewAndViewUpdate(events: SdkEvent[]): SdkEvent[] {
+  const viewUpdateVersions = new Set<string>()
+  for (const event of events) {
+    if (isRumViewUpdateEvent(event) && event.view?.id && event._dd?.document_version) {
+      viewUpdateVersions.add(`${event.view.id}:${event._dd.document_version}`)
+    }
+  }
+
+  if (viewUpdateVersions.size === 0) {
+    return events
+  }
+
+  return events.filter((event) => {
+    if (isRumViewEvent(event) && viewUpdateVersions.has(`${event.view.id}:${event._dd.document_version}`)) {
+      return false
+    }
+    return true
+  })
 }
 
 export function parseQuery(query: string) {