nuxt-devtools-observatory 0.1.32 → 0.1.33

package/client/src/views/RenderHeatmap.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed, defineComponent, h, ref, watch, type VNode } 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, openInEditor as openInEditorFromStore } from '@observatory-client/stores/observatory'
 import { exportJson, importJson } from '@observatory-client/composables/useExportImport'
@@ -26,6 +29,37 @@ interface ComponentNode {
     route: string
 }
 
+interface VisibleTreeRow {
+    node: ComponentNode
+    primaryBadge: string | null
+    metricValue: string
+    metricLabel: string
+    hot: boolean
+}
+
+function nodeBadges(node: ComponentNode): string[] {
+    const badges: string[] = []
+    const normalizedElement = node.element?.toLowerCase()
+
+    if (node.element && node.element !== node.label && !['div', 'span', 'p'].includes(normalizedElement ?? '')) {
+        badges.push(node.element)
+    }
+
+    if (node.file !== 'unknown') {
+        const fileBadge =
+            node.file
+                .split('/')
+                .pop()
+                ?.replace(/\.vue$/i, '') ?? node.file
+
+        if (fileBadge !== node.label && !badges.includes(fileBadge)) {
+            badges.push(fileBadge)
+        }
+    }
+
+    return badges
+}
+
 const TreeNode = defineComponent({
     name: 'TreeNode',
     props: {
@@ -58,24 +92,7 @@ const TreeNode = defineComponent({
             const canExpand = node.children.length > 0
             const metric = props.mode === 'count' ? `${node.rerenders + node.mountCount}` : `${node.avgMs.toFixed(1)}ms`
             const metricLabel = props.mode === 'count' ? 'renders' : 'avg'
-            const badges = []
-            const normalizedElement = node.element?.toLowerCase()
-
-            if (node.element && node.element !== node.label && !['div', 'span', 'p'].includes(normalizedElement ?? '')) {
-                badges.push(node.element)
-            }
-
-            if (node.file !== 'unknown') {
-                const fileBadge =
-                    node.file
-                        .split('/')
-                        .pop()
-                        ?.replace(/\.vue$/i, '') ?? node.file
-
-                if (fileBadge !== node.label && !badges.includes(fileBadge)) {
-                    badges.push(fileBadge)
-                }
-            }
+            const badges = nodeBadges(node)
 
             return h('div', { class: 'tree-node' }, [
                 h(
@@ -206,6 +223,10 @@ const activeRootId = ref<string | null>(null)
 const expandedIds = ref<Set<string>>(new Set())
 const frozenSnapshot = ref<RenderEntry[]>([])
 const expansionReady = ref(false)
+const treeFrameRef = ref<HTMLElement | null>(null)
+
+const { effective: virtualizationFlags } = useVirtualizationFlags()
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 34, overscan: 6 })
 
 function displayLabel(entry: RenderEntry) {
     if (entry.name && entry.name !== 'unknown' && !/^Component#\d+$/.test(entry.name)) {
@@ -303,33 +324,55 @@ function flatten(nodes: ComponentNode[]) {
     return flat
 }
 
-function countSubtree(node: ComponentNode): number {
-    return 1 + node.children.reduce((sum, child) => sum + countSubtree(child), 0)
-}
+function buildSubtreeSizeMap(roots: ComponentNode[]) {
+    const sizes = new Map<string, number>()
 
-function collectIds(node: ComponentNode, target = new Set<string>()) {
-    target.add(node.id)
-    node.children.forEach((child) => collectIds(child, target))
+    for (const root of roots) {
+        const stack: Array<{ node: ComponentNode; visited: boolean }> = [{ node: root, visited: false }]
 
-    return target
-}
+        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
+            }
 
-function pathToNode(node: ComponentNode, targetId: string, trail: string[] = []): string[] | null {
-    const nextTrail = [...trail, node.id]
+            let size = 1
 
-    if (node.id === targetId) {
-        return nextTrail
+            for (const child of current.node.children) {
+                size += sizes.get(child.id) ?? 1
+            }
+
+            sizes.set(current.node.id, size)
+        }
     }
 
-    for (const child of node.children) {
-        const childTrail = pathToNode(child, targetId, nextTrail)
+    return sizes
+}
+
+function buildRootLookup(roots: ComponentNode[]) {
+    const lookup = new Map<string, string>()
+
+    for (const root of roots) {
+        const stack: ComponentNode[] = [root]
+
+        while (stack.length) {
+            const node = stack.pop()!
+            lookup.set(node.id, root.id)
 
-        if (childTrail) {
-            return childTrail
+            for (let i = node.children.length - 1; i >= 0; i--) {
+                stack.push(node.children[i])
+            }
         }
     }
 
-    return null
+    return lookup
 }
 
 function findFirstHotNode(node: ComponentNode): ComponentNode | null {
@@ -476,6 +519,37 @@ const displayEntries = computed(() => (frozen.value ? frozenSnapshot.value : ren
 const rootNodes = computed(() => buildNodes(displayEntries.value))
 const rootMap = computed(() => new Map(rootNodes.value.map((node) => [node.id, node])))
 const allComponents = computed(() => flatten(rootNodes.value))
+const allComponentsById = computed(() => new Map(allComponents.value.map((node) => [node.id, node])))
+const allComponentIds = computed(() => new Set(allComponents.value.map((node) => node.id)))
+const subtreeSizeById = computed(() => buildSubtreeSizeMap(rootNodes.value))
+const rootIdByNodeId = computed(() => buildRootLookup(rootNodes.value))
+
+function pathToNodeWithinRoot(targetId: string, rootId?: string | null): string[] {
+    const path: string[] = []
+    let current = allComponentsById.value.get(targetId)
+
+    while (current) {
+        path.push(current.id)
+
+        if (rootId && current.id === rootId) {
+            break
+        }
+
+        if (!current.parentId) {
+            break
+        }
+
+        current = allComponentsById.value.get(current.parentId)
+    }
+
+    path.reverse()
+
+    if (rootId && path[0] !== rootId) {
+        return []
+    }
+
+    return path
+}
 
 const filteredRoots = computed(() => {
     const term = search.value.trim()
@@ -483,9 +557,11 @@ const filteredRoots = computed(() => {
     return rootNodes.value.filter((root) => isVisibleRoot(root, term))
 })
 
+const filteredRootById = computed(() => new Map(filteredRoots.value.map((node) => [node.id, node])))
+
 const activeRoot = computed(() => {
     if (activeRootId.value) {
-        return filteredRoots.value.find((node) => node.id === activeRootId.value) ?? rootMap.value.get(activeRootId.value) ?? null
+        return filteredRootById.value.get(activeRootId.value) ?? rootMap.value.get(activeRootId.value) ?? null
     }
 
     return filteredRoots.value[0] ?? rootNodes.value[0] ?? null
@@ -505,11 +581,99 @@ const visibleTreeRoots = computed(() => {
     return [visibleActiveRoot.value]
 })
 
+const virtualizedTreeEnabled = computed(() => virtualizationFlags.value.heatmap)
+
+function flattenVisibleTree(root: ComponentNode | null, expanded: Set<string>) {
+    if (!root) {
+        return [] as ComponentNode[]
+    }
+
+    const rows: ComponentNode[] = []
+
+    function walk(node: ComponentNode) {
+        rows.push(node)
+
+        if (!expanded.has(node.id)) {
+            return
+        }
+
+        node.children.forEach(walk)
+    }
+
+    walk(root)
+
+    return rows
+}
+
+const expandedVisibleNodes = computed(() => flattenVisibleTree(visibleActiveRoot.value, expandedIds.value))
+
+const treeVirtualizerOptions = computed(() => ({
+    count: expandedVisibleNodes.value.length,
+    getScrollElement: () => treeFrameRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const treeVirtualizer = useVirtualizer(treeVirtualizerOptions)
+
+const treeVirtualItems = computed(() => {
+    if (!virtualizedTreeEnabled.value) {
+        return []
+    }
+
+    return treeVirtualizer.value.getVirtualItems()
+})
+
+const topTreePadding = computed(() => {
+    if (!virtualizedTreeEnabled.value || treeVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return treeVirtualItems.value[0].start
+})
+
+const bottomTreePadding = computed(() => {
+    if (!virtualizedTreeEnabled.value || treeVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = treeVirtualizer.value.getTotalSize()
+    const last = treeVirtualItems.value[treeVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleTreeRows = computed(() => {
+    if (!virtualizedTreeEnabled.value) {
+        return expandedVisibleNodes.value
+    }
+
+    return treeVirtualItems.value
+        .map((item) => expandedVisibleNodes.value[item.index])
+        .filter((node): node is ComponentNode => Boolean(node))
+})
+
+const visibleTreeRowItems = computed<VisibleTreeRow[]>(() => {
+    const metricLabel = activeMode.value === 'count' ? 'renders' : 'avg'
+
+    return visibleTreeRows.value.map((node) => {
+        const badges = nodeBadges(node)
+
+        return {
+            node,
+            primaryBadge: badges[0] ?? null,
+            metricValue: activeMode.value === 'count' ? `${node.rerenders + node.mountCount}` : `${node.avgMs.toFixed(1)}ms`,
+            metricLabel,
+            hot: isHot(node),
+        }
+    })
+})
+
 const appEntries = computed(() =>
     filteredRoots.value.map((root, index) => ({
         id: root.id,
         label: `App ${index + 1}`,
-        meta: `${countSubtree(root)} nodes`,
+        meta: `${subtreeSizeById.value.get(root.id) ?? 1} nodes`,
         root,
     }))
 )
@@ -529,7 +693,31 @@ const knownRoutes = computed(() => {
     return [...routes].sort()
 })
 
-const activeSelected = computed(() => allComponents.value.find((node) => node.id === activeSelectedId.value) ?? null)
+const activeSelected = computed(() => {
+    if (!activeSelectedId.value) {
+        return null
+    }
+
+    return allComponentsById.value.get(activeSelectedId.value) ?? null
+})
+
+const activeSelectedTimelineRecent = computed(() => {
+    const timeline = activeSelected.value?.timeline ?? []
+
+    if (!timeline.length) {
+        return [] as Array<{ key: string; event: RenderEvent }>
+    }
+
+    const recent: Array<{ key: string; event: RenderEvent }> = []
+    const end = Math.max(timeline.length - 30, 0)
+
+    for (let i = timeline.length - 1; i >= end; i--) {
+        const event = timeline[i]
+        recent.push({ key: `${event.kind}-${event.t}-${i}`, event })
+    }
+
+    return recent
+})
 const totalRenders = computed(() => allComponents.value.reduce((sum, node) => sum + node.rerenders + node.mountCount, 0))
 const hotCount = computed(() => allComponents.value.filter((node) => isHot(node)).length)
 const avgTime = computed(() => {
@@ -560,12 +748,11 @@ watch(
             activeRootId.value = roots[0].id
         }
 
-        if (activeSelectedId.value && !allComponents.value.some((node) => node.id === activeSelectedId.value)) {
+        if (activeSelectedId.value && !allComponentIds.value.has(activeSelectedId.value)) {
             activeSelectedId.value = null
         }
 
-        const validIds = new Set(allComponents.value.map((node) => node.id))
-        const preserved = new Set([...expandedIds.value].filter((id) => validIds.has(id)))
+        const preserved = new Set([...expandedIds.value].filter((id) => allComponentIds.value.has(id)))
 
         if (!expansionReady.value) {
             expandedIds.value = defaultExpandedIds(activeRoot.value)
@@ -575,7 +762,7 @@ watch(
         }
 
         if (!search.value.trim() && activeSelectedId.value && activeRoot.value) {
-            const selectedPath = pathToNode(activeRoot.value, activeSelectedId.value) ?? []
+            const selectedPath = pathToNodeWithinRoot(activeSelectedId.value, activeRoot.value.id)
             selectedPath.forEach((id) => preserved.add(id))
         }
 
@@ -598,8 +785,8 @@ watch(search, (term) => {
     }
 
     if (activeSelectedId.value) {
-        const selectedPath = pathToNode(activeRoot.value, activeSelectedId.value)
-        expandedIds.value = selectedPath ? new Set(selectedPath) : defaultExpandedIds(activeRoot.value)
+        const selectedPath = pathToNodeWithinRoot(activeSelectedId.value, activeRoot.value.id)
+        expandedIds.value = selectedPath.length ? new Set(selectedPath) : defaultExpandedIds(activeRoot.value)
 
         return
     }
@@ -634,17 +821,18 @@ watch([activeHotOnly, activeThreshold, activeMode, filteredRoots], () => {
         activeSelectedId.value = firstHot.id
     }
 
-    expandedIds.value = new Set(pathToNode(topLevelRoot, firstHot.id) ?? [topLevelRoot.id])
+    expandedIds.value = new Set(pathToNodeWithinRoot(firstHot.id, topLevelRoot.id))
 })
 
 function selectNode(node: ComponentNode) {
     activeSelectedId.value = node.id
 
-    const topLevelRoot = rootNodes.value.find((root) => collectIds(root).has(node.id))
+    const rootId = rootIdByNodeId.value.get(node.id)
+    const topLevelRoot = rootId ? rootMap.value.get(rootId) : null
 
     if (topLevelRoot) {
         activeRootId.value = topLevelRoot.id
-        expandedIds.value = new Set(pathToNode(topLevelRoot, node.id) ?? [topLevelRoot.id])
+        expandedIds.value = new Set(pathToNodeWithinRoot(node.id, topLevelRoot.id))
     }
 }
 
@@ -829,21 +1017,89 @@ function formatTimestamp(t: number): string {
                     />
                 </div>
 
-                <div class="render-heatmap__tree-frame">
+                <div ref="treeFrameRef" class="render-heatmap__tree-frame">
                     <div class="render-heatmap__tree-canvas tree-canvas">
-                        <TreeNode
-                            v-for="root in visibleTreeRoots"
-                            :key="root.id"
-                            :node="root"
-                            :mode="activeMode"
-                            :threshold="activeThreshold"
-                            :selected="activeSelected?.id"
-                            :expanded-ids="expandedIds"
-                            @select="selectNode"
-                            @toggle="toggleNode"
-                        />
+                        <template v-if="virtualizedTreeEnabled">
+                            <div
+                                v-if="topTreePadding > 0"
+                                class="render-heatmap__tree-spacer"
+                                :style="{ height: `${topTreePadding}px` }"
+                                aria-hidden="true"
+                            />
+                            <div
+                                v-for="row in visibleTreeRowItems"
+                                :key="row.node.id"
+                                class="tree-row"
+                                :class="{ selected: activeSelected?.id === row.node.id, hot: row.hot }"
+                                :style="{ '--tree-depth': String(row.node.depth) }"
+                                @click="selectNode(row.node)"
+                            >
+                                <span class="tree-rail" aria-hidden="true" />
+                                <button
+                                    class="tree-toggle"
+                                    :class="{ empty: !row.node.children.length }"
+                                    :disabled="!row.node.children.length"
+                                    @click.stop="row.node.children.length ? toggleNode(row.node.id) : undefined"
+                                >
+                                    {{ row.node.children.length ? (expandedIds.has(row.node.id) ? '⌄' : '›') : '' }}
+                                </button>
+                                <div class="tree-copy">
+                                    <span class="tree-name mono" :title="row.node.label">{{ row.node.label }}</span>
+                                    <div v-if="row.primaryBadge" class="tree-badges">
+                                        <span class="tree-badge mono" :title="row.primaryBadge">{{ row.primaryBadge }}</span>
+                                    </div>
+                                </div>
+                                <div class="tree-metrics mono">
+                                    <span
+                                        v-if="row.node.isPersistent"
+                                        class="tree-persistent-pill"
+                                        title="Layout / persistent component — survives navigation"
+                                    >
+                                        persistent
+                                    </span>
+                                    <span
+                                        v-if="row.node.isHydrationMount"
+                                        class="tree-hydration-pill"
+                                        title="First mount was SSR hydration — not a user-triggered render"
+                                    >
+                                        hydrated
+                                    </span>
+                                    <span class="tree-metric-pill">
+                                        {{ row.metricValue }}
+                                        {{ row.metricLabel }}
+                                    </span>
+                                    <button
+                                        v-if="row.node.file && row.node.file !== 'unknown'"
+                                        class="tree-jump-btn"
+                                        :title="`Open ${row.node.file} in editor`"
+                                        @click.stop="openInEditor(row.node.file)"
+                                    >
+                                        ↗
+                                    </button>
+                                </div>
+                            </div>
+                            <div
+                                v-if="bottomTreePadding > 0"
+                                class="render-heatmap__tree-spacer"
+                                :style="{ height: `${bottomTreePadding}px` }"
+                                aria-hidden="true"
+                            />
+                        </template>
+                        <template v-else>
+                            <TreeNode
+                                v-for="root in visibleTreeRoots"
+                                :key="root.id"
+                                :node="root"
+                                :mode="activeMode"
+                                :threshold="activeThreshold"
+                                :selected="activeSelected?.id"
+                                :expanded-ids="expandedIds"
+                                @select="selectNode"
+                                @toggle="toggleNode"
+                            />
+                        </template>
                     </div>
-                    <div v-if="!visibleTreeRoots.length" class="render-heatmap__detail-empty">
+                    <div v-if="!expandedVisibleNodes.length" class="render-heatmap__detail-empty">
                         {{ connected ? 'No render activity recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
                     </div>
                 </div>
@@ -951,16 +1207,14 @@ function formatTimestamp(t: number): string {
                     </div>
                     <div v-if="!activeSelected.timeline.length" class="muted text-sm">no timeline events yet</div>
                     <div v-else class="render-heatmap__timeline-list">
-                        <div
-                            v-for="(event, idx) in [...activeSelected.timeline].reverse().slice(0, 30)"
-                            :key="idx"
-                            class="render-heatmap__timeline-row"
-                        >
-                            <span class="render-heatmap__timeline-kind mono" :class="event.kind">{{ event.kind }}</span>
-                            <span class="render-heatmap__timeline-time mono muted">{{ formatTimestamp(event.t) }}</span>
-                            <span class="render-heatmap__timeline-dur mono">{{ formatMs(event.durationMs) }}</span>
-                            <span v-if="event.triggerKey" class="render-heatmap__timeline-trigger mono muted">{{ event.triggerKey }}</span>
-                            <span class="render-heatmap__timeline-route mono muted">{{ event.route }}</span>
+                        <div v-for="row in activeSelectedTimelineRecent" :key="row.key" class="render-heatmap__timeline-row">
+                            <span class="render-heatmap__timeline-kind mono" :class="row.event.kind">{{ row.event.kind }}</span>
+                            <span class="render-heatmap__timeline-time mono muted">{{ formatTimestamp(row.event.t) }}</span>
+                            <span class="render-heatmap__timeline-dur mono">{{ formatMs(row.event.durationMs) }}</span>
+                            <span v-if="row.event.triggerKey" class="render-heatmap__timeline-trigger mono muted">
+                                {{ row.event.triggerKey }}
+                            </span>
+                            <span class="render-heatmap__timeline-route mono muted">{{ row.event.route }}</span>
                         </div>
                         <div v-if="activeSelected.timeline.length > 30" class="render-heatmap__compact-muted muted text-sm">
                             … {{ activeSelected.timeline.length - 30 }} earlier events
@@ -1027,11 +1281,6 @@ function formatTimestamp(t: number): string {
     min-height: 0;
 }
 
-.render-heatmap__roots-panel,
-.render-heatmap__detail-panel {
-    flex-shrink: 0;
-}
-
 .render-heatmap__roots-panel {
     width: 240px;
     margin-right: 12px;
@@ -1048,6 +1297,7 @@ function formatTimestamp(t: number): string {
 
 .render-heatmap__roots-panel,
 .render-heatmap__detail-panel {
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -1134,6 +1384,10 @@ function formatTimestamp(t: number): string {
     width: max-content;
 }
 
+.render-heatmap__tree-spacer {
+    width: 100%;
+}
+
 :deep(.tree-node) {
     margin-bottom: 4px;
 }