⚡ Bolt: Optimize SessionTimelineChart 성능 개선#211
Conversation
…licate calculation `buildTimelineGroups` was calculated redundantly inside both `EventList` and `SessionActivityRibbon` inside `useMemo` hooks. This commit moves the `useMemo` computation into the parent `page.tsx` component and passes down `groups` as a prop to its children, preventing duplicate O(n) array iterations per `events` change.
Replace chained `.reduce()` and `Object.values()` with a single `for...of` loop over `Object.keys()` to avoid unnecessary intermediate array allocations and improve iteration performance during report aggregation.
overview-stats 컴포넌트의 설명 텍스트를 펼치거나 접는 버튼에 키보드 포커스 스타일이 누락되어 있어, 키보드 내비게이션 사용자에게 현재 포커스 위치를 명확히 보여주지 못하는 문제를 수정했습니다. Tailwind CSS의 `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm` 클래스를 추가하여 탭(Tab) 키 이동 시 포커스 링이 보이도록 접근성을 개선했습니다.
- `TokenUsageChart`와 `WeeklyFlowChart`의 데이터 변환 로직에 `useMemo`를 적용하여 불필요한 리렌더링 최적화.
…y-improvements-7782421783208925042
…data-8534904799192449677
…tats-focus-1138085163110647654
…-loops-in-reports-11490543380196529130
…line-groups-memo-10280015208843955185
- Date 파싱 로직을 렌더링 루프 내부에서 `useMemo` 블록 내 사전 파싱 단계로 분리 - 차트 데이터를 메모이제이션하여 불필요한 재계산 방지 - $O(N \times M)$ 문자열 파싱 병목 현상을 $O(N + M)$ 으로 개선
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What:
packages/web/src/components/dashboard/session-timeline-chart.tsx파일의SessionTimelineChart컴포넌트 내에서 차트 데이터를 생성할 때 발생하는 비효율적인 날짜 파싱 및 계산 로직을 개선했습니다.useMemo를 도입하여 전체 차트 데이터 생성을 메모이제이션했습니다..map과.filter루프 안에서 매번 호출되던new Date(timestamp).getTime()을 루프 외부에서 한 번만 수행하여 숫자형으로 파싱하도록 변경했습니다. (ParsedToolCallPoint,ParsedTimelineUsage인터페이스 추가)if (usageTimeline.length === 0))의 위치를useMemo호출 이후로 변경했습니다.🎯 Why:$O(N \times M)$ 복잡도로 값비싼
기존 코드는 렌더링마다, 그리고 차트 데이터의 각 항목마다
new Date파싱을 반복해서 수행했습니다. 특히 툴 호출이나 타임라인 이벤트가 많은 세션의 경우 메인 스레드를 크게 블로킹하여 화면 버벅임(UI 렉)을 유발하는 주요 성능 병목이었습니다.📊 Impact:
🔬 Measurement:
SessionTimelineChart렌더 시간 단축 여부 확인PR created automatically by Jules for task 6683501857205776692 started by @seonghobae