chore(room): remove Performance Stats panel
Unused debug overlay that was tracking virtualized row counts.
This commit is contained in:
ZhenYi
parent
f2a2ae5d7f
commit
70381006cf
@ -22,7 +22,6 @@ import { RoomMessageEditHistoryDialog } from './RoomMessageEditHistoryDialog';
|
||||
import { RoomMessageList } from './RoomMessageList';
|
||||
import { RoomParticipantsPanel } from './RoomParticipantsPanel';
|
||||
import { RoomSettingsPanel } from './RoomSettingsPanel';
|
||||
import { RoomPerformanceMonitor } from './RoomPerformanceMonitor';
|
||||
import { RoomMessageSearch } from './RoomMessageSearch';
|
||||
import { RoomMentionPanel } from './RoomMentionPanel';
|
||||
import { RoomThreadPanel } from './RoomThreadPanel';
|
||||
@ -262,7 +261,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane
|
||||
const [showMentions, setShowMentions] = useState(false);
|
||||
const [isUpdatingRoom, setIsUpdatingRoom] = useState(false);
|
||||
const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null);
|
||||
const [renderedMessageCount, setRenderedMessageCount] = useState<number | undefined>(undefined);
|
||||
|
||||
// Draft management
|
||||
const { draft, setDraft, clearDraft } = useRoomDraft(room.id);
|
||||
@ -604,7 +602,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane
|
||||
roomId={room.id}
|
||||
/>
|
||||
|
||||
<RoomPerformanceMonitor messageCount={messages.length} renderedCount={renderedMessageCount} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -27,8 +27,6 @@ interface RoomMessageListProps {
|
||||
isLoadingMore?: boolean;
|
||||
onOpenThread?: (message: MessageWithMeta) => void;
|
||||
onCreateThread?: (message: MessageWithMeta) => void;
|
||||
/** Called with the count of currently rendered (visible) rows whenever it changes. */
|
||||
onRenderedCountChange?: (count: number) => void;
|
||||
}
|
||||
|
||||
interface MessageRow {
|
||||
@ -103,7 +101,6 @@ export const RoomMessageList = memo(function RoomMessageList({
|
||||
isLoadingMore = false,
|
||||
onOpenThread,
|
||||
onCreateThread,
|
||||
onRenderedCountChange,
|
||||
}: RoomMessageListProps) {
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const topSentinelRef = useRef<HTMLDivElement>(null);
|
||||
@ -290,11 +287,6 @@ export const RoomMessageList = memo(function RoomMessageList({
|
||||
isRestoringScrollRef.current = false;
|
||||
}, [deferredMessages.length]);
|
||||
|
||||
// Report rendered count to parent (for performance monitor)
|
||||
useEffect(() => {
|
||||
onRenderedCountChange?.(virtualItems.length);
|
||||
}, [virtualItems.length, onRenderedCountChange]);
|
||||
|
||||
// Empty state
|
||||
if (messages.length === 0) {
|
||||
return (
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface PerformanceStats {
|
||||
totalMessages: number;
|
||||
renderedMessages: number;
|
||||
virtualizationEnabled: boolean;
|
||||
}
|
||||
|
||||
interface RoomPerformanceMonitorProps {
|
||||
messageCount: number;
|
||||
renderedCount?: number;
|
||||
}
|
||||
|
||||
const AUTO_CLOSE_DELAY = 5000; // auto-close after 5 seconds when stats are shown
|
||||
|
||||
export function RoomPerformanceMonitor({ messageCount, renderedCount }: RoomPerformanceMonitorProps) {
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
const autoCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Auto-close after AUTO_CLOSE_DELAY when stats are visible
|
||||
useEffect(() => {
|
||||
if (!showStats) return;
|
||||
autoCloseTimerRef.current = setTimeout(() => {
|
||||
setShowStats(false);
|
||||
}, AUTO_CLOSE_DELAY);
|
||||
return () => {
|
||||
if (autoCloseTimerRef.current) clearTimeout(autoCloseTimerRef.current);
|
||||
};
|
||||
}, [showStats]);
|
||||
|
||||
const stats = useMemo<PerformanceStats>(() => ({
|
||||
totalMessages: messageCount,
|
||||
renderedMessages: renderedCount ?? messageCount,
|
||||
virtualizationEnabled: renderedCount !== undefined && renderedCount < messageCount,
|
||||
}), [messageCount, renderedCount]);
|
||||
|
||||
// --- Drag state ---
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const draggingRef = useRef(false);
|
||||
const dragStartRef = useRef({ x: 0, y: 0 });
|
||||
|
||||
const handleDragStart = useCallback((e: React.MouseEvent) => {
|
||||
// Don't start drag if clicking the close button
|
||||
if ((e.target as HTMLElement).closest('button')) return;
|
||||
draggingRef.current = true;
|
||||
dragStartRef.current = { x: e.clientX, y: e.clientY };
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
if (!draggingRef.current) return;
|
||||
const panel = panelRef.current;
|
||||
if (!panel) return;
|
||||
const dx = e.clientX - dragStartRef.current.x;
|
||||
const dy = e.clientY - dragStartRef.current.y;
|
||||
const rect = panel.getBoundingClientRect();
|
||||
panel.style.left = `${rect.left + dx}px`;
|
||||
panel.style.top = `${rect.top + dy}px`;
|
||||
panel.style.right = 'auto';
|
||||
panel.style.bottom = 'auto';
|
||||
dragStartRef.current = { x: e.clientX, y: e.clientY };
|
||||
};
|
||||
const onMouseUp = () => {
|
||||
draggingRef.current = false;
|
||||
};
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!showStats && import.meta.env.PROD) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="fixed bottom-4 left-4 z-50 h-7 w-7 rounded-full p-0 opacity-50 hover:opacity-100"
|
||||
onClick={() => setShowStats(true)}
|
||||
title="Show performance stats"
|
||||
>
|
||||
📊
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="fixed z-50 rounded-lg border bg-background/95 p-3 shadow-lg backdrop-blur-sm select-none"
|
||||
style={{ bottom: '1rem', left: '1rem' }}
|
||||
>
|
||||
{/* Draggable header */}
|
||||
<div
|
||||
className="mb-2 flex items-center justify-between cursor-grab active:cursor-grabbing select-none"
|
||||
onMouseDown={handleDragStart}
|
||||
>
|
||||
<h4 className="text-xs font-semibold text-foreground">Performance Stats</h4>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0"
|
||||
onClick={() => setShowStats(false)}
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">Total messages:</span>
|
||||
<Badge variant="secondary" className="font-mono">{stats.totalMessages}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">Rendered:</span>
|
||||
<Badge variant="secondary" className="font-mono">{stats.renderedMessages}</Badge>
|
||||
</div>
|
||||
|
||||
{stats.virtualizationEnabled && (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">Skipped:</span>
|
||||
<Badge variant="outline" className="font-mono text-green-600">
|
||||
{stats.totalMessages - stats.renderedMessages}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">Virtualization:</span>
|
||||
<Badge
|
||||
variant={stats.virtualizationEnabled ? 'default' : 'destructive'}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{stats.virtualizationEnabled ? '✓ Enabled' : '✗ Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{stats.virtualizationEnabled && (
|
||||
<div className="pt-1 border-t border-border">
|
||||
<span className="text-[10px] text-green-600">
|
||||
⚡ Rendering {((stats.renderedMessages / stats.totalMessages) * 100).toFixed(0)}% of messages
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user