⚡ Bolt: Optimize date parsing in virtualized event list#133
⚡ Bolt: Optimize date parsing in virtualized event list#133seonghobae wants to merge 11 commits into
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
- 매 렌더링 시마다 `new Date(timestamp).getTime()`가 실행되는 것을 방지하기 위해, `buildFlatRows` 단계(메모이징됨)에서 한 번만 밀리초로 변환하도록 수정 - `FlatRow` 타입과 연관된 컴포넌트(`Row`, `RowView`)들이 변환된 `timestampMs`를 사용하도록 수정 - `sessionStartedAt` 또한 EventList 컴포넌트 레벨에서 한 번만 변환하여 하위 컴포넌트로 전달
|
👋 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. |
|
Closing as superseded during org-wide PR triage. Keeping #211 as the canonical PR for the same overlapping topic: event list/session timeline date parsing optimization. This PR is stale/conflicted or has review blockers, so retaining one current PR reduces duplicated review and merge conflict work. |
Understood. Acknowledging that this work is superseded by #211 and stopping work on this task. |
1 participant
💡 What:
EventList내부에서 가상화(Virtualized)된 각 행이 렌더링될 때마다 타임스탬프 문자열을 파싱하는 불필요한 반복 연산을 제거했습니다.buildFlatRows과정에서 한 번만new Date().getTime()을 수행하고 숫자(밀리초) 값을 각 행(FlatRow) 데이터에 포함시켰습니다.🎯 Why:
기존에는
react-window를 통해 리스트의 스크롤이 발생할 때마다 렌더링되는 모든Row컴포넌트에서new Date(timestamp).getTime()가 반복 실행되었습니다. 가상화된 리스트 특성상 스크롤 시 빈번한 리렌더링이 발생하는데, 내부의 객체 생성 및 문자열 파싱 오버헤드는 프레임 드랍이나 성능 저하의 원인이 될 수 있습니다.📊 Impact:
EventList컴포넌트 내에서의 중간 객체(Date) 할당 및 날짜 파싱 오버헤드를 크게 줄였습니다. 가상화 리스트의 스크롤 시 프레임 유지율(frame rate)이 향상되고 브라우저의 메모리 GC 부하를 줄이는 효과가 있습니다. (특히 항목이 매우 많은 세션일수록 효과적)🔬 Measurement:
PR created automatically by Jules for task 3629484613393480307 started by @seonghobae