nuxt-devtools-observatory 0.1.32 → 0.1.33

package/client/src/views/FetchDashboard.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
 import { useResizablePane } from '@observatory-client/composables/useResizablePane'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import type { FetchEntry } from '@observatory/types/snapshot'
 
 type FetchViewEntry = FetchEntry & { startOffset: number }
 
-const { fetch, connected } = useObservatoryData()
+const { fetch, connected, features } = useObservatoryData()
 const { paneWidth: detailWidth, onHandleMouseDown } = useResizablePane(280, 'observatory:fetch:detailWidth')
 
 const filter = ref<string>('all')
 const search = ref('')
 const selectedId = ref<string | null>(null)
 const waterfallOpen = ref(true)
+const tableScrollRef = ref<HTMLElement | null>(null)
+const currentPage = ref(1)
+
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 38, overscan: 6 })
 
 const entries = computed<FetchViewEntry[]>(() => {
     const sorted = [...fetch.value].sort((a, b) => a.startTime - b.startTime)
@@ -24,7 +30,15 @@ const entries = computed<FetchViewEntry[]>(() => {
     }))
 })
 
-const selected = computed(() => entries.value.find((entry) => entry.id === selectedId.value) ?? null)
+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 counts = computed(() => ({
     ok: entries.value.filter((entry) => entry.status === 'ok' || entry.status === 'cached').length,
@@ -48,6 +62,94 @@ const filtered = computed(() => {
     })
 })
 
+const fetchPageSize = computed(() => {
+    const raw = features.value?.fetchPageSize
+
+    if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+        return 20
+    }
+
+    return Math.max(1, Math.floor(raw))
+})
+
+const pagedFiltered = computed(() => filtered.value.slice(0, currentPage.value * fetchPageSize.value))
+const hasMoreRows = computed(() => pagedFiltered.value.length < filtered.value.length)
+
+const virtualizedRowsEnabled = computed(() => true)
+
+const rowVirtualizerOptions = computed(() => ({
+    count: pagedFiltered.value.length,
+    getScrollElement: () => tableScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
+
+const virtualItems = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return []
+    }
+
+    return rowVirtualizer.value.getVirtualItems()
+})
+
+const topVirtualPadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || virtualItems.value.length === 0) {
+        return 0
+    }
+
+    return virtualItems.value[0].start
+})
+
+const bottomVirtualPadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || virtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = rowVirtualizer.value.getTotalSize()
+    const last = virtualItems.value[virtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleRows = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return pagedFiltered.value
+    }
+
+    return virtualItems.value.map((item) => pagedFiltered.value[item.index]).filter((entry): entry is FetchViewEntry => Boolean(entry))
+})
+
+watch([filter, search], () => {
+    currentPage.value = 1
+    if (tableScrollRef.value) {
+        tableScrollRef.value.scrollTop = 0
+    }
+})
+
+watch(filtered, (nextRows) => {
+    const maxPage = Math.max(1, Math.ceil(nextRows.length / fetchPageSize.value))
+
+    if (currentPage.value > maxPage) {
+        currentPage.value = maxPage
+    }
+})
+
+function onTableScroll() {
+    const element = tableScrollRef.value
+
+    if (!element || !hasMoreRows.value) {
+        return
+    }
+
+    const nearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 32
+
+    if (nearBottom) {
+        currentPage.value += 1
+    }
+}
+
 const metaRows = computed(() => {
     if (!selected.value) {
         return []
@@ -91,11 +193,22 @@ function barColor(status: string) {
     return { ok: 'var(--teal)', error: 'var(--red)', pending: 'var(--amber)', cached: 'var(--border)' }[status] ?? 'var(--border)'
 }
 
+const maxCompletedMs = computed(() => {
+    let maxMs = 1
+
+    for (const entry of entries.value) {
+        if (entry.ms != null && entry.ms > maxMs) {
+            maxMs = entry.ms
+        }
+    }
+
+    return maxMs
+})
+
 function barWidth(entry: FetchViewEntry) {
     // Only consider completed entries for the max, so pending entries don't
     // collapse all bars to a dot while waiting.
-    const completedMs = entries.value.filter((e) => e.ms != null).map((e) => e.ms!)
-    const maxMs = completedMs.length > 0 ? Math.max(...completedMs, 1) : 1
+    const maxMs = maxCompletedMs.value
 
     return entry.ms != null ? Math.max(4, Math.round((entry.ms / maxMs) * 100)) : 4
 }
@@ -103,15 +216,26 @@ function barWidth(entry: FetchViewEntry) {
 // Waterfall uses absolute time offsets from the earliest startTime.
 // maxEnd is computed only from completed entries so that a long-running
 // pending request doesn't squash all completed bars to invisible.
-function waterfallScale() {
-    const completed = entries.value.filter((e) => e.ms != null)
-    const maxEnd = completed.length > 0 ? Math.max(...completed.map((e) => e.startOffset + e.ms!), 1) : 1
+const waterfallScale = computed(() => {
+    let maxEnd = 1
+
+    for (const entry of entries.value) {
+        if (entry.ms == null) {
+            continue
+        }
+
+        const end = entry.startOffset + entry.ms
+
+        if (end > maxEnd) {
+            maxEnd = end
+        }
+    }
 
     return maxEnd
-}
+})
 
 function wfLeft(entry: FetchViewEntry) {
-    const scale = waterfallScale()
+    const scale = waterfallScale.value
     return Math.min(98, Math.round((entry.startOffset / scale) * 100))
 }
 
@@ -122,7 +246,7 @@ function wfWidth(entry: FetchViewEntry) {
         return 2
     }
 
-    const scale = waterfallScale()
+    const scale = waterfallScale.value
     const left = wfLeft(entry)
 
     // Clamp so bar + left never exceeds 100%
@@ -173,7 +297,7 @@ function formatSize(bytes: number) {
         </div>
 
         <div class="fetch-dashboard__split tracker-split">
-            <div class="fetch-dashboard__table tracker-table-wrap">
+            <div ref="tableScrollRef" class="fetch-dashboard__table tracker-table-wrap" @scroll="onTableScroll">
                 <table class="data-table">
                     <thead>
                         <tr>
@@ -188,7 +312,14 @@ function formatSize(bytes: number) {
                     </thead>
                     <tbody>
                         <tr
-                            v-for="entry in filtered"
+                            v-if="virtualizedRowsEnabled && topVirtualPadding > 0"
+                            class="fetch-dashboard__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="7" :style="{ height: `${topVirtualPadding}px` }"></td>
+                        </tr>
+                        <tr
+                            v-for="entry in visibleRows"
                             :key="entry.id"
                             :class="{ selected: selected?.id === entry.id }"
                             @click="selectedId = entry.id"
@@ -221,16 +352,29 @@ function formatSize(bytes: number) {
                                 </div>
                             </td>
                         </tr>
+                        <tr
+                            v-if="virtualizedRowsEnabled && bottomVirtualPadding > 0"
+                            class="fetch-dashboard__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="7" :style="{ height: `${bottomVirtualPadding}px` }"></td>
+                        </tr>
                         <tr v-if="!filtered.length">
                             <td colspan="7" class="tracker-empty-cell">
                                 {{ connected ? 'No fetches recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
                             </td>
                         </tr>
+                        <tr v-else class="fetch-dashboard__pagination-row" aria-live="polite">
+                            <td colspan="7" class="fetch-dashboard__pagination-cell">
+                                <span class="mono muted text-sm">showing {{ pagedFiltered.length }} of {{ filtered.length }}</span>
+                                <span v-if="hasMoreRows" class="mono muted text-sm">scroll to load more</span>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
 
-            <div v-if="selected" class="tracker-resize-handle" @mousedown="onHandleMouseDown" />
+            <div class="tracker-resize-handle" @mousedown="onHandleMouseDown" />
 
             <div v-if="selected" class="fetch-dashboard__detail tracker-detail-panel" :style="{ width: detailWidth + 'px' }">
                 <div class="fetch-dashboard__detail-header">
@@ -253,7 +397,7 @@ function formatSize(bytes: number) {
                 <div class="tracker-section-label fetch-dashboard__section-label fetch-dashboard__section-label--source">source</div>
                 <div class="mono text-sm muted">{{ selected.file }}:{{ selected.line }}</div>
             </div>
-            <div v-else class="tracker-detail-empty">select a call to inspect</div>
+            <div v-else class="tracker-detail-empty" :style="{ width: detailWidth + 'px' }">select a call to inspect</div>
         </div>
 
         <div class="fetch-dashboard__waterfall">
@@ -297,6 +441,25 @@ function formatSize(bytes: number) {
     min-width: 80px;
 }
 
+.fetch-dashboard__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
+.fetch-dashboard__pagination-row td {
+    background: transparent;
+}
+
+.fetch-dashboard__pagination-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tracker-space-2);
+    padding-top: var(--tracker-space-2);
+    border-bottom: 0;
+}
+
 .fetch-dashboard__url {
     max-width: 200px;
 }
@@ -340,7 +503,7 @@ function formatSize(bytes: number) {
     padding: var(--tracker-space-2) 10px;
     overflow: auto;
     white-space: pre;
-    max-height: 160px;
+    min-height: fit-content;
 }
 
 .fetch-dashboard__waterfall {
@@ -349,6 +512,8 @@ function formatSize(bytes: number) {
     border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius-lg);
     padding: 10px var(--tracker-space-3);
+    max-height: 35%;
+    overflow-x: auto;
 }
 
 .fetch-dashboard__waterfall-header {

package/client/src/views/ProvideInjectGraph.vue

@@ -97,27 +97,46 @@ function matchesSearch(node: TreeNodeData, query: string): boolean {
 }
 
 /**
- * Count leaf nodes in a subtree iteratively to avoid stack overflow on
- * pathologically deep provide/inject trees (e.g. every component re-providing
- * the same key creates a chain as long as the component tree itself).
- * @param {TreeNodeData} root - The root node of the subtree to count leaves for.
- * @returns {number} The number of leaf nodes in the subtree.
+ * Build a leaf-count lookup for each node in visible trees.
+ * Uses iterative post-order traversal to keep deep trees stack-safe.
+ * @param {TreeNodeData[]} roots - Visible tree roots.
+ * @returns {Map<string, number>} Map of node id to subtree leaf count.
  */
-function countLeaves(root: TreeNodeData): number {
-    let count = 0
-    const stack: TreeNodeData[] = [root]
+function buildLeafCountMap(roots: TreeNodeData[]): Map<string, number> {
+    const counts = new Map<string, number>()
 
-    while (stack.length) {
-        const node = stack.pop()!
+    for (const root of roots) {
+        const stack: Array<{ node: TreeNodeData; visited: boolean }> = [{ node: root, visited: false }]
 
-        if (node.children.length === 0) {
-            count++
-        } else {
-            stack.push(...node.children)
+        while (stack.length) {
+            const current = stack.pop()!
+
+            if (!current.visited) {
+                stack.push({ node: current.node, visited: true })
+
+                for (let i = current.node.children.length - 1; i >= 0; i--) {
+                    stack.push({ node: current.node.children[i], visited: false })
+                }
+
+                continue
+            }
+
+            if (current.node.children.length === 0) {
+                counts.set(current.node.id, 1)
+                continue
+            }
+
+            let total = 0
+
+            for (const child of current.node.children) {
+                total += counts.get(child.id) ?? 1
+            }
+
+            counts.set(current.node.id, total)
         }
     }
 
-    return count
+    return counts
 }
 
 function stringifyValue(value: unknown) {
@@ -359,6 +378,8 @@ const visibleNodes = computed<TreeNodeData[]>(() => {
     return nodes.value.map(pruneIterative).filter(Boolean) as TreeNodeData[]
 })
 
+const visibleLeafCountById = computed(() => buildLeafCountMap(visibleNodes.value))
+
 watch([visibleNodes, selectedNode], ([currentNodes, currentSelected]) => {
     if (!currentSelected) {
         return
@@ -381,6 +402,8 @@ watch([visibleNodes, selectedNode], ([currentNodes, currentSelected]) => {
 const layout = computed<LayoutNode[]>(() => {
     const flat: LayoutNode[] = []
     const pad = H_GAP
+    const leafCountById = visibleLeafCountById.value
+    const getLeafCount = (node: TreeNodeData) => leafCountById.get(node.id) ?? 1
 
     // Iterative replacement for the recursive place() — avoids stack overflow
     // on deep component trees. Uses an explicit stack of pending work items.
@@ -398,7 +421,7 @@ const layout = computed<LayoutNode[]>(() => {
 
         while (stack.length) {
             const { node, depth, slotLeft, parentId } = stack.pop()!
-            const leaves = countLeaves(node)
+            const leaves = getLeafCount(node)
             const slotWidth = leaves * (NODE_W + H_GAP) - H_GAP
 
             flat.push({
@@ -413,7 +436,7 @@ const layout = computed<LayoutNode[]>(() => {
             const childWork: WorkItem[] = []
 
             for (const child of node.children) {
-                const childLeaves = countLeaves(child)
+                const childLeaves = getLeafCount(child)
                 childWork.push({ node: child, depth: depth + 1, slotLeft: childLeft, parentId: node.id })
                 childLeft += childLeaves * (NODE_W + H_GAP)
             }
@@ -423,7 +446,7 @@ const layout = computed<LayoutNode[]>(() => {
             }
         }
 
-        const rootLeaves = countLeaves(root)
+        const rootLeaves = getLeafCount(root)
         left += rootLeaves * (NODE_W + H_GAP) + H_GAP * 2
     }