⚡ Bolt: SessionTimelineChart O(N+M) 최적화#288
Conversation
- Replaced O(N*M) nested `.filter()` loop with a single-pass O(N+M) two-pointer iteration. - Guaranteed chronological sorting before mapping. - Improves rendering performance on dashboards with dense usage timelines.
|
👋 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. |
- Updated `body-parser` from `2.2.2` to `^2.3.0` - Updated `brace-expansion` from `1.1.15` and `5.0.6` to `^1.1.16` and `^5.0.7` via pnpm overrides - Updated `js-yaml` from `4.2.0` to `^4.3.0` This resolves GitHub Actions CI scanner failures related to `GHSA-v422-hmwv-36x6`, `GHSA-3jxr-9vmj-r5cp`, and `GHSA-52cp-r559-cp3m`.
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
SessionTimelineChart에서 usageTimeline과 toolCalls를 매핑해 Recharts 데이터(chartData)를 생성하는 로직을 투 포인터 방식으로 개선해, 중첩 순회로 인한 렌더링 병목을 줄이려는 PR입니다.
Changes:
toolSummary생성 로직을filter()기반O(N*M)에서 투 포인터 기반 매핑으로 변경toolCalls를 timestamp 기준 정렬해 시간순 매핑을 전제- 루트
package.json의 devDependencies/overrides 버전 및 항목을 변경
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| packages/web/src/components/dashboard/session-timeline-chart.tsx | 투 포인터로 chartData 생성 시 전체 toolCalls 반복을 제거하고 정렬/요약 함수를 도입 |
| package.json | ESLint 관련 devDependency 버전 조정 및 overrides 항목 추가/변경 |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const sortedUsageTimeline = [...usageTimeline].sort( | ||
| (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime() | ||
| ) |
| const relevantTools: ToolCallPoint[] = [] | ||
| while (toolIndex < toolCalls.length && toolCalls[toolIndex]!.parsedTimestamp <= currentTimestamp) { | ||
| relevantTools.push(toolCalls[toolIndex]!) | ||
| toolIndex++ | ||
| } |
| output: u.outputTokens, | ||
| cost: u.estimatedCostUsd, | ||
| model: u.model, | ||
| toolSummary: formatToolSummary(relevantTools), |
| }, | ||
| "devDependencies": { | ||
| "@eslint/eslintrc": "^3", | ||
| "@eslint/eslintrc": "^3.3.5", |
| "js-yaml": "4.3.0", | ||
| "body-parser": "2.3.0", | ||
| "brace-expansion": "1.1.16" |
💡 What (무엇을 변경했나요?)
SessionTimelineChart에서 Recharts에 주입할 데이터를 생성할 때 사용하는 로직의 성능을 개선했습니다.기존에는 시간대별(
usageTimeline) 데이터 배열을 순회하면서 매번 전체toolCalls배열을.filter()로 순회하는O(N*M)알고리즘을 사용했습니다. 이를 개선하여 두 배열이 시간순으로 정렬되어 있음을 보장한 뒤, 두 포인터(투 포인터)를 사용하여 한 번의 순회로 매핑을 완료하는O(N+M)방식의 알고리즘으로 교체했습니다.🎯 Why (왜 변경했나요?)
대규모 데이터나 긴 세션이 포함될 경우 수많은 툴 호출 이벤트를 렌더링하기 위해 차트 컴포넌트의 리렌더링 시간이 기하급수적으로 늘어나는 병목 현상이 있었습니다. (중첩 배열 순회에 의한 오버헤드). 투 포인터 접근 방식을 통해 불필요한 배열 순회와 메모리 할당을 줄여 앱의 반응성을 극대화하기 위함입니다.
📊 Impact (어떤 영향을 미치나요?)
chartData를useMemo로 계산하는 속도가 비약적으로 개선됩니다.🔬 Measurement (어떻게 확인할 수 있나요?)
/dashboard/[orgSlug]/sessions/[sessionId]) 진입 시 차트 로드 타임 프로파일링을 통해 렌더링 소요 시간이 감소한 것을 확인할 수 있습니다.pnpm --filter @argos/web run test src/components/dashboard/session-timeline-chart.test.tsx)를 실행하여 기능의 결과값이 원본과 100% 동일한지 점검했습니다.PR created automatically by Jules for task 6318640061661044052 started by @seonghobae