🎨 Gate view_update events behind datadogMode in developer extension

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}>

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>

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

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) {