Skip to content

Commit 55097ba

Browse files
hannesrudolphhannesrudolph
committed
debug: add temporary console.log statements for virtualization tracking
- Add [VIRTUALIZATION] prefixed logs to track viewport changes - Log scroll events, visible ranges, and performance metrics - Track auto-scroll decisions and user scroll detection - Monitor state cache hits/misses and evictions - Include timestamps and relevant data for debugging These logs help verify the virtualization behavior during testing.
1 parent 227cd9c commit 55097ba

File tree

4 files changed

+196
-19
lines changed

4 files changed

+196
-19
lines changed

‎webview-ui/src/components/chat/ChatView.tsx‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -545,10 +545,18 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
545545
isStreaming,
546546
isHidden,
547547
onPerformanceIssue: (metric, value) => {
548-
console.warn(`ChatView performance issue: ${metric} = ${value}`)
548+
console.warn(`[VIRTUALIZATION] ChatView performance issue: ${metric} = ${value}`)
549549
},
550550
})
551551

552+
console.log("[VIRTUALIZATION] Virtualization hook initialized:", {
553+
messagesCount: modifiedMessages.length,
554+
isStreaming,
555+
isHidden,
556+
viewportConfig,
557+
timestamp: new Date().toISOString(),
558+
})
559+
552560
// Sync expanded rows with state manager
553561
useEffect(() => {
554562
if (stateManager) {
@@ -559,6 +567,12 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
559567
}
560568
})
561569
setExpandedRows(newExpandedRows)
570+
571+
console.log("[VIRTUALIZATION] Synced expanded rows with state manager:", {
572+
expandedCount: Object.keys(newExpandedRows).length,
573+
visibleRange,
574+
timestamp: new Date().toISOString(),
575+
})
562576
}
563577
}, [modifiedMessages, stateManager, visibleRange])
564578

@@ -1404,9 +1418,16 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
14041418
// scrolling - use the optimized versions
14051419
const scrollToBottomSmooth = useMemo(
14061420
() =>
1407-
debounce(() => optimizedScrollToBottom("smooth"), 10, {
1408-
immediate: true,
1409-
}),
1421+
debounce(
1422+
() => {
1423+
console.log("[VIRTUALIZATION] Smooth scroll to bottom triggered")
1424+
optimizedScrollToBottom("smooth")
1425+
},
1426+
10,
1427+
{
1428+
immediate: true,
1429+
},
1430+
),
14101431
[optimizedScrollToBottom],
14111432
)
14121433

@@ -1419,6 +1440,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
14191440
}, [scrollToBottomSmooth])
14201441

14211442
const scrollToBottomAuto = useCallback(() => {
1443+
console.log("[VIRTUALIZATION] Auto scroll to bottom triggered")
14221444
optimizedScrollToBottom("auto")
14231445
}, [optimizedScrollToBottom])
14241446

@@ -1580,6 +1602,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
15801602

15811603
const itemContent = useCallback(
15821604
(index: number, messageOrGroup: ClineMessage | ClineMessage[]) => {
1605+
console.log("[VIRTUALIZATION] Rendering item at index:", {
1606+
index,
1607+
isGroup: Array.isArray(messageOrGroup),
1608+
messageTs: Array.isArray(messageOrGroup) ? messageOrGroup[0]?.ts : messageOrGroup.ts,
1609+
timestamp: new Date().toISOString(),
1610+
})
1611+
15831612
// browser session group
15841613
if (Array.isArray(messageOrGroup)) {
15851614
return (
@@ -1959,12 +1988,21 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
19591988
itemContent={itemContent}
19601989
onScroll={(e) => {
19611990
const target = e.currentTarget as HTMLElement
1962-
handleVirtuosoScroll(target.scrollTop)
1963-
handleScrollStateChange({
1991+
const scrollState = {
19641992
scrollTop: target.scrollTop,
19651993
scrollHeight: target.scrollHeight,
19661994
viewportHeight: target.clientHeight,
1995+
}
1996+
1997+
console.log("[VIRTUALIZATION] Virtuoso scroll event:", {
1998+
...scrollState,
1999+
distanceFromBottom:
2000+
scrollState.scrollHeight - scrollState.scrollTop - scrollState.viewportHeight,
2001+
timestamp: new Date().toISOString(),
19672002
})
2003+
2004+
handleVirtuosoScroll(target.scrollTop)
2005+
handleScrollStateChange(scrollState)
19682006
}}
19692007
rangeChanged={handleRangeChange}
19702008
atBottomStateChange={(atBottom) => {

‎webview-ui/src/components/chat/hooks/useOptimizedVirtualization.ts‎

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,29 @@ export function useOptimizedVirtualization({
104104
const devicePerf = detectDevicePerformance()
105105
const hasExpanded = stateManager.hasExpandedMessages()
106106

107+
console.log("[VIRTUALIZATION] Viewport config calculation:", {
108+
devicePerf,
109+
hasExpanded,
110+
isStreaming,
111+
timestamp: new Date().toISOString(),
112+
})
113+
107114
// Streaming takes priority
108115
if (isStreaming) {
116+
console.log("[VIRTUALIZATION] Using streaming viewport config:", config.viewport.streaming)
109117
return config.viewport.streaming
110118
}
111119

112120
// Expanded messages need more buffer
113121
if (hasExpanded) {
122+
console.log("[VIRTUALIZATION] Using expanded viewport config:", config.viewport.expanded)
114123
return config.viewport.expanded
115124
}
116125

117126
// Use device-specific config
118-
return getViewportConfigForDevice(devicePerf)
127+
const deviceConfig = getViewportConfigForDevice(devicePerf)
128+
console.log("[VIRTUALIZATION] Using device-specific viewport config:", deviceConfig)
129+
return deviceConfig
119130
}, [isStreaming, stateManager, config])
120131

121132
// Create optimized message groups
@@ -132,6 +143,14 @@ export function useOptimizedVirtualization({
132143
// Use stored scroll state
133144
const { scrollHeight, viewportHeight } = scrollState
134145

146+
console.log("[VIRTUALIZATION] Scroll event:", {
147+
scrollTop,
148+
scrollHeight,
149+
viewportHeight,
150+
distanceFromBottom: scrollHeight - scrollTop - viewportHeight,
151+
timestamp: new Date().toISOString(),
152+
})
153+
135154
scrollManager.handleScroll(scrollTop, scrollHeight, viewportHeight)
136155

137156
// Update performance metrics
@@ -141,36 +160,60 @@ export function useOptimizedVirtualization({
141160
const atBottom = scrollManager.isAtBottom(scrollTop, scrollHeight, viewportHeight)
142161
setIsAtBottom(atBottom)
143162
setShowScrollToBottom(!atBottom && scrollManager.getState().isUserScrolling)
163+
164+
console.log("[VIRTUALIZATION] Scroll state updated:", {
165+
isAtBottom: atBottom,
166+
showScrollToBottom: !atBottom && scrollManager.getState().isUserScrolling,
167+
userScrolling: scrollManager.getState().isUserScrolling,
168+
})
144169
},
145170
[scrollState, scrollManager, performanceMonitor],
146171
)
147172

148173
// Handle visible range changes
149174
const handleRangeChange = useCallback(
150175
(range: { startIndex: number; endIndex: number }) => {
176+
console.log("[VIRTUALIZATION] Visible range changed:", {
177+
startIndex: range.startIndex,
178+
endIndex: range.endIndex,
179+
totalGroups: messageGroups.length,
180+
timestamp: new Date().toISOString(),
181+
})
182+
151183
setVisibleRange(range)
152184

153185
// Update performance metrics
154186
const messageIndices = getVisibleMessageIndices(messageGroups, range)
155-
performanceMonitor.updateMessageCounts(
156-
messages.length,
157-
messageIndices.endIndex - messageIndices.startIndex + 1,
158-
)
187+
const visibleMessageCount = messageIndices.endIndex - messageIndices.startIndex + 1
188+
performanceMonitor.updateMessageCounts(messages.length, visibleMessageCount)
189+
190+
console.log("[VIRTUALIZATION] Performance metrics updated:", {
191+
totalMessages: messages.length,
192+
visibleMessages: visibleMessageCount,
193+
messageIndices,
194+
})
159195

160196
// Pin important messages in visible range
161197
const visibleGroups = messageGroups.slice(range.startIndex, range.endIndex + 1)
198+
let pinnedCount = 0
162199
visibleGroups.forEach((group) => {
163200
group.messages.forEach((msg) => {
164201
// Pin error messages and active tools
165202
if (msg.ask === "api_req_failed" || msg.say === "error" || (msg.ask === "tool" && !msg.partial)) {
166203
stateManager.pinMessage(msg.ts)
204+
pinnedCount++
167205
}
168206
})
169207
})
170208

209+
if (pinnedCount > 0) {
210+
console.log("[VIRTUALIZATION] Pinned messages in visible range:", pinnedCount)
211+
}
212+
171213
// Cleanup old states periodically
172214
if (Math.random() < 0.1) {
173215
// 10% chance on each range change
216+
console.log("[VIRTUALIZATION] Running state cleanup")
174217
stateManager.cleanup()
175218
}
176219
},
@@ -218,11 +261,15 @@ export function useOptimizedVirtualization({
218261
performanceMonitor.updateDOMNodeCount()
219262

220263
// Log metrics in development
221-
if (process.env.NODE_ENV === "development") {
222-
const report = performanceMonitor.getReport()
223-
if (report.issues.length > 0) {
224-
console.warn("Performance issues detected:", report.issues)
225-
}
264+
const report = performanceMonitor.getReport()
265+
console.log("[VIRTUALIZATION] Performance report:", {
266+
metrics: report.metrics,
267+
issues: report.issues,
268+
timestamp: new Date().toISOString(),
269+
})
270+
271+
if (report.issues.length > 0) {
272+
console.warn("[VIRTUALIZATION] Performance issues detected:", report.issues)
226273
}
227274
}, 5000)
228275

‎webview-ui/src/components/chat/utils/AutoScrollManager.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,34 @@ export class AutoScrollManager {
3636
const isScrollingUp = deltaScroll < -5 // Small threshold to avoid noise
3737
const significantScroll = Math.abs(deltaScroll) > 10
3838

39+
console.log("[VIRTUALIZATION] AutoScrollManager.handleScroll:", {
40+
scrollTop,
41+
scrollHeight,
42+
clientHeight,
43+
deltaScroll,
44+
deltaTime,
45+
distanceFromBottom,
46+
scrollVelocity: this.scrollVelocity,
47+
isScrollingUp,
48+
significantScroll,
49+
timestamp: new Date().toISOString(),
50+
})
51+
3952
if (isScrollingUp && distanceFromBottom > this.atBottomThreshold) {
53+
console.log("[VIRTUALIZATION] User scrolling detected: scrolling up")
4054
this.isUserScrolling = true
4155
this.isScrolling = true
4256
} else if (significantScroll && !this.isNearBottom(scrollTop, scrollHeight, clientHeight)) {
57+
console.log("[VIRTUALIZATION] User scrolling detected: significant scroll")
4358
this.isUserScrolling = true
4459
this.isScrolling = true
4560
}
4661

4762
// Reset user scrolling flag if they scroll to bottom
4863
if (distanceFromBottom <= this.atBottomThreshold) {
64+
if (this.isUserScrolling) {
65+
console.log("[VIRTUALIZATION] User scrolling reset: reached bottom")
66+
}
4967
this.isUserScrolling = false
5068
}
5169

@@ -61,6 +79,7 @@ export class AutoScrollManager {
6179

6280
// Set timeout to detect end of scrolling
6381
this.scrollTimeout = setTimeout(() => {
82+
console.log("[VIRTUALIZATION] Scrolling ended")
6483
this.isScrolling = false
6584
this.scrollVelocity = 0
6685
this.scrollTimeout = null
@@ -75,7 +94,17 @@ export class AutoScrollManager {
7594
// 1. User is manually scrolling
7695
// 2. There are expanded messages (user might be reading)
7796
// 3. Currently in a scroll animation
78-
return !this.isUserScrolling && !hasExpandedMessages && !this.isScrolling
97+
const shouldScroll = !this.isUserScrolling && !hasExpandedMessages && !this.isScrolling
98+
99+
console.log("[VIRTUALIZATION] AutoScrollManager.shouldAutoScroll:", {
100+
shouldScroll,
101+
isUserScrolling: this.isUserScrolling,
102+
hasExpandedMessages,
103+
isScrolling: this.isScrolling,
104+
timestamp: new Date().toISOString(),
105+
})
106+
107+
return shouldScroll
79108
}
80109

81110
/**
@@ -98,13 +127,15 @@ export class AutoScrollManager {
98127
* Reset user scrolling flag
99128
*/
100129
resetUserScrolling(): void {
130+
console.log("[VIRTUALIZATION] User scrolling reset manually")
101131
this.isUserScrolling = false
102132
}
103133

104134
/**
105135
* Force user scrolling state (e.g., when user expands a message)
106136
*/
107137
forceUserScrolling(): void {
138+
console.log("[VIRTUALIZATION] User scrolling forced")
108139
this.isUserScrolling = true
109140
}
110141

@@ -127,6 +158,16 @@ export class AutoScrollManager {
127158
*/
128159
getScrollBehavior(currentTop: number, targetTop: number, maxSmoothDistance: number = 5000): ScrollBehavior {
129160
const distance = Math.abs(targetTop - currentTop)
161+
const behavior = distance > maxSmoothDistance ? "auto" : "smooth"
162+
163+
console.log("[VIRTUALIZATION] Scroll behavior calculated:", {
164+
currentTop,
165+
targetTop,
166+
distance,
167+
maxSmoothDistance,
168+
behavior,
169+
timestamp: new Date().toISOString(),
170+
})
130171

131172
// Use instant scroll for large jumps to avoid janky animation
132173
if (distance > maxSmoothDistance) {

0 commit comments

Comments
 (0)