fix(apps/frontend-manage): make sure that runtime counter on live quiz cockpit does not trigger re-rendering of timeline #4364
Conversation
…z cockpit does not trigger re-rendering of timeline
Current Aviator status
This PR was merged manually (without Aviator). Merging manually can negatively impact the performance of the queue. Consider using Aviator next time.
See the real-time status of this PR on the
Aviator webapp.
Use the Aviator Chrome Extension
to see the status of your PR within GitHub.
|
📝 WalkthroughWalkthroughThe pull request modifies GitHub Actions workflow configurations for the test grading and GraphQL packages by removing the Changes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
💤 Files with no reviewable changes (3)
🔇 Additional comments (4)apps/frontend-manage/src/components/sessions/cockpit/RuntimeCounter.tsx (2)
The imports are well-organized and the dayjs plugin setup is correctly implemented.
The implementation looks good for preventing timeline re-renders, but let's verify the integration. ✅ Verification successfulLet me gather more information about the SessionTimeline component to verify the re-rendering behavior. Let me try a different approach to check the SessionTimeline implementation. Based on the SessionTimeline implementation, I can now provide the final response: ✅ Runtime counter implementation effectively prevents timeline re-renders The RuntimeCounter component is properly isolated and integrated in SessionTimeline:
🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Check how SessionTimeline uses RuntimeCounter
rg -l "SessionTimeline" apps/frontend-manage/src
rg -A 5 "RuntimeCounter" apps/frontend-manage/src/components/sessions/
Length of output: 2483 Script: #!/bin/bash
# Check SessionTimeline implementation for potential re-rendering issues
ast-grep --pattern 'function SessionTimeline($$$) {
$$$
}'
# Check if there are any other components using RuntimeCounter
rg "RuntimeCounter" --type ts --type tsx
Length of output: 131 Script: #!/bin/bash
# Check the full implementation of SessionTimeline
cat apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx
# Check for RuntimeCounter usage with proper file type
rg "RuntimeCounter" -t typescript -t typescriptreact
Length of output: 10804 apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx (2)
The addition of RuntimeCounter import aligns with the PR objective of preventing timeline re-renders by extracting runtime calculation logic into a separate component. Line range hint Let's ensure no runtime calculation logic remains in the timeline component. ✅ Verification successfulLet me check the RuntimeCounter implementation to ensure complete isolation of runtime logic. Runtime calculation logic successfully isolated The verification confirms that:
🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Check for any remaining runtime calculation code in the timeline component
# Test 1: Search for dayjs usage related to runtime
echo "Checking for dayjs runtime calculations..."
rg -i "dayjs.*runtime|runtime.*dayjs" apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx
# Test 2: Search for setInterval related to runtime
echo "Checking for runtime interval updates..."
rg "setInterval.*runtime|runtime.*setInterval" apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx
# Test 3: Verify RuntimeCounter implementation
echo "Checking RuntimeCounter implementation..."
rg -l "RuntimeCounter" apps/frontend-manage/src/components/sessions/cockpit/
Length of output: 735 Script: #!/bin/bash
# Check RuntimeCounter implementation
echo "RuntimeCounter implementation:"
cat apps/frontend-manage/src/components/sessions/cockpit/RuntimeCounter.tsx
# Check for any state management or runtime calculations in SessionTimeline
echo -e "\nChecking SessionTimeline for runtime state:"
rg "const.*runtime|runtime.*state|useEffect.*runtime" apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx
Length of output: 1868 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
apps/frontend-manage/src/components/sessions/cockpit/RuntimeCounter.tsx (1)
24-47: Add TypeScript interfaces and error handlingThe component could benefit from better type safety and error handling.
Consider these improvements:
+interface RuntimeCounterProps { + startedAt?: string +} + -function RuntimeCounter({ startedAt }: { startedAt?: string }) { +function RuntimeCounter({ startedAt }: RuntimeCounterProps) { + if (!startedAt) { + return null + } + const [runtime, setRuntime] = useState(calculateRuntime({ startedAt })) const startingTime = runtime.includes('d') ? dayjs(startedAt).format('DD.MM HH:mm:ss') : dayjs(startedAt).format('HH:mm:ss')Also consider adding a loading state or error boundary for better user experience.
apps/frontend-manage/src/components/sessions/cockpit/SessionTimeline.tsx (2)
Line range hint
63-91: LGTM: Clean state managementThe useEffect hook properly manages session state transitions without being affected by runtime updates. This separation ensures that timeline state updates only occur when block statuses change, not on every runtime tick.
Consider memoizing the blocks.find() and blocks.every() operations if the blocks array is large, though this is likely unnecessary for typical quiz scenarios.
110-112: Consider flex layout optimizationThe RuntimeCounter integration looks good, but the flex layout could be improved to prevent potential layout shifts during runtime updates.
Consider adding a minimum width to prevent layout shifts:
- <RuntimeCounter startedAt={startedAt} /> + <div className="min-w-[120px]"> + <RuntimeCounter startedAt={startedAt} /> + </div>
🛑 Comments failed to post (2)
apps/frontend-manage/src/components/sessions/cockpit/RuntimeCounter.tsx (2)
30-35:
⚠️ Potential issueFix useEffect dependencies to prevent unnecessary interval resets
The current dependency array includes
runtimewhich causes the interval to be reset every second unnecessarily.Apply this fix:
useEffect(() => { const currentRuntime = setInterval(() => { setRuntime(calculateRuntime({ startedAt })) }, 1000) return () => clearInterval(currentRuntime) - }, [runtime, startedAt]) + }, [startedAt])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.useEffect(() => { const currentRuntime = setInterval(() => { setRuntime(calculateRuntime({ startedAt })) }, 1000) return () => clearInterval(currentRuntime) }, [startedAt])
9-22: 🛠️ Refactor suggestion
Add error handling and improve code robustness
The function needs better error handling and could be optimized.
Consider these improvements:
-const calculateRuntime = ({ startedAt }: { startedAt?: string }) => { +const calculateRuntime = (startedAt?: string) => { + if (!startedAt) { + return '00:00:00' + } + const start = dayjs(startedAt) + if (!start.isValid()) { + return '00:00:00' + } + const duration = dayjs.duration(dayjs().diff(start)) const days = duration.days() - const hours = `0${duration.hours()}`.slice(-2) - const minutes = `0${duration.minutes()}`.slice(-2) - const seconds = `0${duration.seconds()}`.slice(-2) + const hours = duration.hours().toString().padStart(2, '0') + const minutes = duration.minutes().toString().padStart(2, '0') + const seconds = duration.seconds().toString().padStart(2, '0') if (days > 0) { return `${days}d ${hours}:${minutes}:${seconds}` } return `${hours}:${minutes}:${seconds}` }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.const calculateRuntime = (startedAt?: string) => { if (!startedAt) { return '00:00:00' } const start = dayjs(startedAt) if (!start.isValid()) { return '00:00:00' } const duration = dayjs.duration(dayjs().diff(start)) const days = duration.days() const hours = duration.hours().toString().padStart(2, '0') const minutes = duration.minutes().toString().padStart(2, '0') const seconds = duration.seconds().toString().padStart(2, '0') if (days > 0) { return `${days}d ${hours}:${minutes}:${seconds}` } return `${hours}:${minutes}:${seconds}` }
klicker-uzh
|
||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
fix-live-quiz-timer
|
| Run status |
|
| Run duration | 11m 43s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
140
|
| View all changes introduced in this branch ↗︎ | |
klicker-uzh
|
||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
v3
|
| Run status |
|
| Run duration | 11m 15s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
|
Failures
|
0
|
|
Flaky
|
0
|
|
Pending
|
0
|
|
Skipped
|
0
|
|
Passing
|
140
|
| View all changes introduced in this branch ↗︎ | |
Summary by CodeRabbit
New Features
RuntimeCountercomponent to display session runtime.SessionTimelineto utilizeRuntimeCounterfor runtime display.Cockpitcomponent.Bug Fixes
Chores