nuxt-devtools-observatory 0.1.32 → 0.1.34

package/client/src/views/TraceViewer.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
+import { useVirtualizationFlags } from '@observatory-client/composables/useVirtualizationFlags'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import Flamegraph from '@observatory-client/components/Flamegraph.vue'
 import WaterfallView from '@observatory-client/components/WaterfallView.vue'
@@ -10,11 +13,18 @@ import { exportJson, importJson } from '@observatory-client/composables/useExpor
 import {
     buildRenderSummaryForTrace,
     buildCrossTraceRenderSummary,
+    type CrossTraceRenderSummaryRow,
     type TraceRenderStatsRow,
 } from '@observatory-client/composables/trace-render-aggregation'
 import type { ObservatoryExportFile } from '@observatory-client/composables/useExportImport'
 import type { TraceEntry, TraceSpan } from '@observatory/types/snapshot'
 
+type TraceSpanRow = {
+    span: TraceSpan
+    displayName: string
+    uid: string | number | undefined
+}
+
 const { traces, connected } = useObservatoryData()
 
 const importedTraces = ref<TraceEntry[]>([])
@@ -33,6 +43,11 @@ const crossTraceOnlyComparable = ref(false)
 const crossTraceSearch = ref('')
 const highlightedUid = ref<string | number | undefined>(undefined)
 const highlightedComponentKey = ref<string | undefined>(undefined)
+const traceListScrollRef = ref<HTMLElement | null>(null)
+const crossTraceScrollRef = ref<HTMLElement | null>(null)
+
+const { effective: virtualizationFlags } = useVirtualizationFlags()
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 34, overscan: 6 })
 
 const {
     searchQuery,
@@ -54,6 +69,10 @@ const filteredTraces = computed(() => {
     return applyFilters(sortedTraces.value)
 })
 
+const filteredTraceById = computed(() => {
+    return new Map(filteredTraces.value.map((trace) => [trace.id, trace] as const))
+})
+
 const traceCountLabel = computed(() => {
     const suffix = isImportMode.value ? ' (imported)' : ''
 
@@ -69,7 +88,7 @@ const selectedTrace = computed(() => {
         return filteredTraces.value[0]
     }
 
-    return filteredTraces.value.find((t) => t.id === selectedTraceId.value)
+    return filteredTraceById.value.get(selectedTraceId.value)
 })
 
 const renderSummary = computed<TraceRenderStatsRow[]>(() => buildRenderSummaryForTrace(selectedTrace.value))
@@ -125,6 +144,100 @@ const crossTraceRows = computed(() => {
 
 const crossTraceRegressionsCount = computed(() => crossTraceRenderSummary.value.filter((row) => (row.deltaVsBaseline ?? 0) > 0).length)
 
+const virtualizedTraceRowsEnabled = computed(() => virtualizationFlags.value.traces)
+
+const traceListVirtualizerOptions = computed(() => ({
+    count: filteredTraces.value.length,
+    getScrollElement: () => traceListScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const traceListVirtualizer = useVirtualizer(traceListVirtualizerOptions)
+
+const traceListVirtualItems = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return []
+    }
+
+    return traceListVirtualizer.value.getVirtualItems()
+})
+
+const traceListTopPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || traceListVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return traceListVirtualItems.value[0].start
+})
+
+const traceListBottomPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || traceListVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = traceListVirtualizer.value.getTotalSize()
+    const last = traceListVirtualItems.value[traceListVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleTraceRows = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return filteredTraces.value
+    }
+
+    return traceListVirtualItems.value
+        .map((item) => filteredTraces.value[item.index])
+        .filter((trace): trace is TraceEntry => Boolean(trace))
+})
+
+const crossTraceVirtualizerOptions = computed(() => ({
+    count: crossTraceRows.value.length,
+    getScrollElement: () => crossTraceScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const crossTraceVirtualizer = useVirtualizer(crossTraceVirtualizerOptions)
+
+const crossTraceVirtualItems = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return []
+    }
+
+    return crossTraceVirtualizer.value.getVirtualItems()
+})
+
+const crossTraceTopPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || crossTraceVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return crossTraceVirtualItems.value[0].start
+})
+
+const crossTraceBottomPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || crossTraceVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = crossTraceVirtualizer.value.getTotalSize()
+    const last = crossTraceVirtualItems.value[crossTraceVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleCrossTraceRows = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return crossTraceRows.value
+    }
+
+    return crossTraceVirtualItems.value
+        .map((item) => crossTraceRows.value[item.index])
+        .filter((row): row is CrossTraceRenderSummaryRow => Boolean(row))
+})
+
 function elapsedFromSpans(trace: TraceEntry): number | undefined {
     if (!trace.spans.length) {
         return undefined
@@ -201,6 +314,26 @@ function getSpanDisplayName(span: TraceSpan): string {
     return span.name
 }
 
+function getSpanUid(span: TraceSpan): string | number | undefined {
+    const metadata = span.metadata as Record<string, unknown> | undefined
+
+    return metadata?.uid as string | number | undefined
+}
+
+const selectedTraceSpanRows = computed<TraceSpanRow[]>(() => {
+    const trace = selectedTrace.value
+
+    if (!trace) {
+        return []
+    }
+
+    return trace.spans.map((span) => ({
+        span,
+        displayName: getSpanDisplayName(span),
+        uid: getSpanUid(span),
+    }))
+})
+
 function selectTrace(trace: TraceEntry) {
     selectedTraceId.value = trace.id
     selectedSpan.value = undefined
@@ -322,13 +455,17 @@ function sortIndicator(key: 'avgRerendersPerTrace' | 'deltaVsBaseline' | 'totalM
     return crossTraceSortDir.value === 'desc' ? ' ↓' : ' ↑'
 }
 
+const crossTraceRowByKey = computed(() => {
+    return new Map(crossTraceRows.value.map((row) => [row.componentKey, row] as const))
+})
+
 function clearCrossTraceHighlight() {
     highlightedComponentKey.value = undefined
     highlightedUid.value = undefined
 }
 
 function handleCrossTraceRowClick(componentKey: string) {
-    const row = crossTraceRows.value.find((item) => item.componentKey === componentKey)
+    const row = crossTraceRowByKey.value.get(componentKey)
 
     if (!row || row.selectedUid === undefined) {
         highlightedUid.value = undefined
@@ -407,7 +544,7 @@ function handleCrossTraceRowClick(componentKey: string) {
                 <div class="trace-viewer__list-header">
                     <span class="trace-viewer__list-title">Traces</span>
                 </div>
-                <div class="trace-viewer__table-wrap tracker-table-wrap">
+                <div ref="traceListScrollRef" class="trace-viewer__table-wrap tracker-table-wrap">
                     <table class="data-table">
                         <thead>
                             <tr>
@@ -418,7 +555,14 @@ function handleCrossTraceRowClick(componentKey: string) {
                         </thead>
                         <tbody>
                             <tr
-                                v-for="trace in filteredTraces"
+                                v-if="virtualizedTraceRowsEnabled && traceListTopPadding > 0"
+                                class="trace-viewer__virtual-spacer-row"
+                                aria-hidden="true"
+                            >
+                                <td colspan="3" :style="{ height: `${traceListTopPadding}px` }"></td>
+                            </tr>
+                            <tr
+                                v-for="trace in visibleTraceRows"
                                 :key="trace.id"
                                 :class="{ 'trace-viewer__trace-row--selected': selectedTrace?.id === trace.id }"
                                 class="trace-viewer__trace-row"
@@ -428,6 +572,13 @@ function handleCrossTraceRowClick(componentKey: string) {
                                 <td class="mono">{{ formatDuration(trace.durationMs, trace) }}</td>
                                 <td class="mono">{{ trace.spans.length }}</td>
                             </tr>
+                            <tr
+                                v-if="virtualizedTraceRowsEnabled && traceListBottomPadding > 0"
+                                class="trace-viewer__virtual-spacer-row"
+                                aria-hidden="true"
+                            >
+                                <td colspan="3" :style="{ height: `${traceListBottomPadding}px` }"></td>
+                            </tr>
                             <tr v-if="!filteredTraces.length">
                                 <td colspan="3" class="tracker-empty-cell">
                                     {{
@@ -499,21 +650,20 @@ function handleCrossTraceRowClick(componentKey: string) {
 
                             <div class="trace-viewer__span-list">
                                 <div
-                                    v-for="span in selectedTrace.spans"
-                                    :key="span.id"
+                                    v-for="spanRow in selectedTraceSpanRows"
+                                    :key="spanRow.span.id"
                                     :class="{
-                                        'trace-viewer__span-item--selected': selectedSpan?.id === span.id,
+                                        'trace-viewer__span-item--selected': selectedSpan?.id === spanRow.span.id,
                                         'trace-viewer__span-item--highlighted':
-                                            highlightedUid !== undefined &&
-                                            (span.metadata as Record<string, unknown> | undefined)?.uid === highlightedUid,
+                                            highlightedUid !== undefined && spanRow.uid === highlightedUid,
                                     }"
                                     class="trace-viewer__span-item"
-                                    @click="selectedSpan = span"
+                                    @click="selectedSpan = spanRow.span"
                                 >
-                                    <div class="trace-viewer__span-name">{{ getSpanDisplayName(span) }}</div>
+                                    <div class="trace-viewer__span-name">{{ spanRow.displayName }}</div>
                                     <div class="trace-viewer__span-meta">
-                                        <span class="trace-viewer__span-type">{{ span.type }}</span>
-                                        <span class="trace-viewer__span-duration">{{ formatDuration(span.durationMs) }}</span>
+                                        <span class="trace-viewer__span-type">{{ spanRow.span.type }}</span>
+                                        <span class="trace-viewer__span-duration">{{ formatDuration(spanRow.span.durationMs) }}</span>
                                     </div>
                                 </div>
                             </div>
@@ -585,7 +735,7 @@ function handleCrossTraceRowClick(componentKey: string) {
                                         ✕ clear
                                     </span>
                                 </div>
-                                <div v-if="crossTraceSummaryOpen" class="trace-viewer__render-summary-table-wrap">
+                                <div v-if="crossTraceSummaryOpen" ref="crossTraceScrollRef" class="trace-viewer__render-summary-table-wrap">
                                     <div class="trace-viewer__comparison-toolbar">
                                         <button
                                             :class="{ 'trace-viewer__comparison-chip--active': crossTraceOnlyRegressions }"
@@ -647,7 +797,14 @@ function handleCrossTraceRowClick(componentKey: string) {
                                         </thead>
                                         <tbody>
                                             <tr
-                                                v-for="row in crossTraceRows"
+                                                v-if="virtualizedTraceRowsEnabled && crossTraceTopPadding > 0"
+                                                class="trace-viewer__virtual-spacer-row"
+                                                aria-hidden="true"
+                                            >
+                                                <td colspan="7" :style="{ height: `${crossTraceTopPadding}px` }"></td>
+                                            </tr>
+                                            <tr
+                                                v-for="row in visibleCrossTraceRows"
                                                 :key="row.componentKey"
                                                 :class="{
                                                     'trace-viewer__render-summary-row--active':
@@ -669,6 +826,13 @@ function handleCrossTraceRowClick(componentKey: string) {
                                                 <td class="mono trace-viewer__col-desktop">{{ formatDuration(row.avgMsPerRender) }}</td>
                                                 <td class="mono">{{ formatDuration(row.totalMs) }}</td>
                                             </tr>
+                                            <tr
+                                                v-if="virtualizedTraceRowsEnabled && crossTraceBottomPadding > 0"
+                                                class="trace-viewer__virtual-spacer-row"
+                                                aria-hidden="true"
+                                            >
+                                                <td colspan="7" :style="{ height: `${crossTraceBottomPadding}px` }"></td>
+                                            </tr>
                                             <tr v-if="!crossTraceRows.length">
                                                 <td colspan="7" class="tracker-empty-cell">No components match the comparison filters.</td>
                                             </tr>
@@ -764,16 +928,16 @@ function handleCrossTraceRowClick(componentKey: string) {
     font-family: var(--mono);
 }
 
-.trace-viewer__action-btn:hover:not(:disabled) {
-    background: var(--bg-secondary);
-    color: var(--text);
-}
-
 .trace-viewer__action-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
 
+.trace-viewer__action-btn:hover:not(:disabled) {
+    background: var(--bg-secondary);
+    color: var(--text);
+}
+
 .trace-viewer__import-mode-btn {
     padding: 3px 8px;
     background: var(--accent-bg);
@@ -838,6 +1002,12 @@ function handleCrossTraceRowClick(componentKey: string) {
     border-left: 2px solid var(--accent);
 }
 
+.trace-viewer__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
 .trace-viewer__detail {
     flex: 1;
     display: flex;

package/client/src/views/TransitionTimeline.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
+import { useVirtualizationFlags } from '@observatory-client/composables/useVirtualizationFlags'
 import { useResizablePane } from '@observatory-client/composables/useResizablePane'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import type { TransitionEntry } from '@observatory/types/snapshot'
@@ -10,10 +13,25 @@ const { paneWidth: detailWidth, onHandleMouseDown } = useResizablePane(260, 'obs
 type FilterMode = 'all' | 'cancelled' | 'active' | 'completed'
 const filter = ref<FilterMode>('all')
 const search = ref('')
-const selected = ref<TransitionEntry | null>(null)
+const selectedId = ref<string | null>(null)
+const tableScrollRef = ref<HTMLElement | null>(null)
+
+const { effective: virtualizationFlags } = useVirtualizationFlags()
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 42, overscan: 6 })
+
+const entriesSorted = computed(() => [...entries.value].sort((a, b) => a.startTime - b.startTime))
+const entriesById = computed(() => new Map(entries.value.map((entry) => [entry.id, entry] as const)))
+
+const selected = computed(() => {
+    if (!selectedId.value) {
+        return null
+    }
+
+    return entriesById.value.get(selectedId.value) ?? null
+})
 
 const filtered = computed(() => {
-    let list = [...entries.value]
+    let list = entriesSorted.value
 
     if (search.value) {
         const q = search.value.toLowerCase()
@@ -28,7 +46,7 @@ const filtered = computed(() => {
         list = list.filter((e) => e.phase === 'entered' || e.phase === 'left')
     }
 
-    return list.sort((a, b) => a.startTime - b.startTime)
+    return list
 })
 
 const stats = computed(() => ({
@@ -64,6 +82,60 @@ const timelineGeometry = computed(() => {
     }))
 })
 
+const virtualizedRowsEnabled = computed(() => virtualizationFlags.value.transitions)
+
+const tableVirtualizerOptions = computed(() => ({
+    count: filtered.value.length,
+    getScrollElement: () => tableScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const tableVirtualizer = useVirtualizer(tableVirtualizerOptions)
+
+const tableVirtualItems = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return []
+    }
+
+    return tableVirtualizer.value.getVirtualItems()
+})
+
+const topTablePadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || tableVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return tableVirtualItems.value[0].start
+})
+
+const bottomTablePadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || tableVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = tableVirtualizer.value.getTotalSize()
+    const last = tableVirtualItems.value[tableVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleRows = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return filtered.value.map((entry, index) => ({
+            entry,
+            geometry: timelineGeometry.value[index],
+        }))
+    }
+
+    return tableVirtualItems.value
+        .map((item) => ({
+            entry: filtered.value[item.index],
+            geometry: timelineGeometry.value[item.index],
+        }))
+        .filter((row): row is { entry: TransitionEntry; geometry: { left: number; width: number } } => Boolean(row.entry && row.geometry))
+})
+
 function phaseColor(phase: TransitionEntry['phase']): string {
     if (phase === 'entering' || phase === 'leaving') {
         return '#7f77dd'
@@ -166,7 +238,7 @@ function directionColor(e: TransitionEntry): string {
         <!-- Main content -->
         <div class="transition-timeline__content tracker-split">
             <!-- Timeline table -->
-            <div class="transition-timeline__table tracker-table-wrap">
+            <div ref="tableScrollRef" class="transition-timeline__table tracker-table-wrap">
                 <table class="data-table">
                     <thead>
                         <tr>
@@ -180,41 +252,56 @@ function directionColor(e: TransitionEntry): string {
                     </thead>
                     <tbody>
                         <tr
-                            v-for="(entry, i) in filtered"
-                            :key="entry.id"
-                            :class="{ selected: selected?.id === entry.id }"
-                            @click="selected = selected?.id === entry.id ? null : entry"
+                            v-if="virtualizedRowsEnabled && topTablePadding > 0"
+                            class="transition-timeline__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="6" :style="{ height: `${topTablePadding}px` }"></td>
+                        </tr>
+                        <tr
+                            v-for="row in visibleRows"
+                            :key="row.entry.id"
+                            :class="{ selected: selected?.id === row.entry.id }"
+                            @click="selectedId = selected?.id === row.entry.id ? null : row.entry.id"
                         >
                             <td>
-                                <span class="transition-timeline__name mono">{{ entry.transitionName }}</span>
+                                <span class="transition-timeline__name mono">{{ row.entry.transitionName }}</span>
                             </td>
                             <td>
-                                <span class="transition-timeline__direction mono" :style="{ color: directionColor(entry) }">
-                                    {{ directionLabel(entry) }}
+                                <span class="transition-timeline__direction mono" :style="{ color: directionColor(row.entry) }">
+                                    {{ directionLabel(row.entry) }}
                                 </span>
                             </td>
                             <td>
-                                <span class="badge" :class="phaseBadgeClass(entry.phase)">{{ entry.phase }}</span>
+                                <span class="badge" :class="phaseBadgeClass(row.entry.phase)">{{ row.entry.phase }}</span>
                             </td>
                             <td class="transition-timeline__duration mono">
-                                {{ entry.durationMs !== undefined ? entry.durationMs + 'ms' : '—' }}
+                                {{ row.entry.durationMs !== undefined ? row.entry.durationMs + 'ms' : '—' }}
                             </td>
-                            <td class="transition-timeline__component muted">{{ entry.parentComponent }}</td>
+                            <td class="transition-timeline__component muted">{{ row.entry.parentComponent }}</td>
                             <td class="transition-timeline__bar-cell">
                                 <div class="transition-timeline__bar-track">
                                     <div
                                         class="transition-timeline__bar-fill"
                                         :style="{
-                                            left: timelineGeometry[i]?.left + '%',
-                                            width: Math.max(timelineGeometry[i]?.width ?? 1, 1) + '%',
-                                            background: phaseColor(entry.phase),
-                                            opacity: entry.phase === 'entering' || entry.phase === 'leaving' ? '0.55' : '1',
+                                            left: row.geometry.left + '%',
+                                            width: Math.max(row.geometry.width, 1) + '%',
+                                            background: phaseColor(row.entry.phase),
+                                            opacity: row.entry.phase === 'entering' || row.entry.phase === 'leaving' ? '0.55' : '1',
                                         }"
                                     />
                                 </div>
                             </td>
                         </tr>
 
+                        <tr
+                            v-if="virtualizedRowsEnabled && bottomTablePadding > 0"
+                            class="transition-timeline__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="6" :style="{ height: `${bottomTablePadding}px` }"></td>
+                        </tr>
+
                         <tr v-if="!filtered.length">
                             <td colspan="6" class="tracker-empty-cell">
                                 {{
@@ -236,7 +323,7 @@ function directionColor(e: TransitionEntry): string {
                 <aside v-if="selected" class="transition-timeline__detail" :style="{ width: detailWidth + 'px' }">
                     <div class="transition-timeline__detail-header">
                         <span class="transition-timeline__detail-title">{{ selected.transitionName }}</span>
-                        <button class="transition-timeline__close-btn" @click="selected = null">✕</button>
+                        <button class="transition-timeline__close-btn" @click="selectedId = null">✕</button>
                     </div>
 
                     <div class="transition-timeline__detail-section">
@@ -392,6 +479,12 @@ function directionColor(e: TransitionEntry): string {
     border-radius: 0;
 }
 
+.transition-timeline__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
 /* ── Timeline bar ────────────────────────────────────────────────────────── */
 .transition-timeline__bar-cell {
     width: 200px;

package/dist/module.d.mts

@@ -19,6 +19,11 @@ interface ModuleOptions {
      * @default 10000
      */
     maxPayloadBytes?: number;
+    /**
+     * Number of fetch rows to load per infinite-scroll step in the Fetch Dashboard.
+     * @default 20
+     */
+    fetchPageSize?: number;
     /**
      * Maximum number of transition entries to keep in memory
      * @default 500
@@ -34,6 +39,11 @@ interface ModuleOptions {
      * @default 300
      */
     maxComposableEntries?: number;
+    /**
+     * Maximum number of Pinia timeline events to keep per store
+     * @default 100
+     */
+    maxPiniaTimeline?: number;
     /**
      * Maximum number of render timeline events per entry
      * @default 100
@@ -61,6 +71,11 @@ interface ModuleOptions {
      * @default true
      */
     composableTracker?: boolean;
+    /**
+     * Enable the Pinia state tracker tab
+     * @default true
+     */
+    piniaTracker?: boolean;
     /**
      * Enable the render heatmap tab
      * @default true

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.32",
+  "version": "0.1.34",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"