Refactor: nchan pause improvements

[Squidly271]

Summary by CodeRabbit

• New Features

  • Added a new interface option allowing users to set the timeout duration for pausing real-time updates.
  • Introduced a corresponding configuration setting for this timeout.

• Refactor

  • Enhanced live update handling by refining how the system responds to window focus and visibility changes.
  • Improved error management during focus events to provide a more reliable update experience.

[coderabbitai]

Walkthrough

This update removes an automatic reset on window blur in favor of an explicit pageFocusFunction call. It also adds an input field in the display settings for configuring a pause timeout for real-time updates, and introduces a corresponding configuration entry in the default settings. Additionally, the focus management logic in the default page layout has been refactored by adding a timer for blur events and improved error handling around the new function call.

Changes

File(s)	Change Summary
emhttp/plugins/dynamix/DashStats.page	Removed blur event handler and conditional block for live updates; added pageFocusFunction to reset the cpu, rxd, and txd arrays.
emhttp/plugins/dynamix/DisplaySettings.page	Added a new input field (with a label) for setting a timeout in seconds (named liveTime) before pausing real-time updates.
emhttp/plugins/dynamix/default.cfg	Introduced a new configuration entry liveTime="0" in the [display] section.
emhttp/plugins/dynamix/include/DefaultPageLayout.php	Refactored focus/blur event management: added a blurTimer, modified focus and blur event handlers to invoke nchanFocusStart() (with a try-catch around pageFocusFunction()) and nchanFocusStop(), and added a visibilitychange listener.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant B as Browser
    participant D as DefaultPageLayout
    participant PF as pageFocusFunction
    participant N as nchanFocusHandler

    %% Focus Event Sequence
    U->>B: Window gains focus
    B->>D: Trigger focus event
    D->>D: Clear any active blurTimer
    D->>D: Invoke nchanFocusStart()
    D->>PF: Execute pageFocusFunction (try-catch)
    PF-->>D: Return result
    D->>B: Resume live updates

    %% Blur Event Sequence
    U->>B: Window loses focus
    B->>D: Trigger blur event
    D->>D: Set blurTimer to delay update stop
    Note right of D: Wait for timeout delay
    D->>N: Invoke nchanFocusStop() after timer expires
    N->>B: Pause live updates

Loading

Possibly related PRs

• Refactor: Prevent nchan updates on browsers not in focus #2081: Adjusted window blur event handling to reset arrays, closely aligning with the introduction of pageFocusFunction and related refactoring in this PR.

Poem

I’m a rabbit hopping with glee,
No more blur events sneaking past me,
A function now takes on the call,
With live updates standing tall,
New settings, timers, all in line—
A hoppy change, oh so fine!
🥕🐇 Celebrate the code design!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c85e729 and 3e1c487.

📒 Files selected for processing (4)

• emhttp/plugins/dynamix/DashStats.page (1 hunks)
• emhttp/plugins/dynamix/DisplaySettings.page (1 hunks)
• emhttp/plugins/dynamix/default.cfg (1 hunks)
• emhttp/plugins/dynamix/include/DefaultPageLayout.php (1 hunks)

🔇 Additional comments (9)

emhttp/plugins/dynamix/default.cfg (1)

39-39: LGTM! New configuration added for live update timeout.

This adds a new configuration parameter liveTime="0" that will work with the corresponding UI input field in DisplaySettings.page to control the timeout before pausing realtime updates.

emhttp/plugins/dynamix/DisplaySettings.page (1)

332-334: LGTM! UI input added for controlling realtime update timeout.

This adds a new input field to allow users to configure the timeout duration (in seconds) before pausing realtime updates on inactive browsers. The field correctly connects to the liveTime configuration parameter added in default.cfg.

emhttp/plugins/dynamix/DashStats.page (1)

1819-1823: LGTM! New focus handling function added.

The new pageFocusFunction() moves the chart reset logic to an explicit function call instead of using the window blur event handler. This function resets the CPU and network tracking arrays and will be called from the focus management logic in DefaultPageLayout.php.

emhttp/plugins/dynamix/include/DefaultPageLayout.php (6)

1241-1241: Good addition of the blur timer variable.

Adding a dedicated variable to track the window blur timer state is a clean approach that will help manage the pause timeout for real-time updates.

---

1244-1245: Improved focus event handling.

The focus event handler now calls the nchanFocusStart() function, which provides a more modular approach to resuming live updates when the window regains focus.

---

1247-1254: Well-implemented blur event with configurable delay.

The blur event handler now sets a timer with a configurable delay (based on user settings) before pausing updates, which is more user-friendly than immediately stopping updates when the window loses focus.

---

1256-1268: Good addition of visibility change handling.

Adding a visibility change event listener provides a more robust way to handle updates when the browser tab is hidden or visible, complementing the focus/blur events which might not trigger in all scenarios.

---

1270-1275: Effective timer management in nchanFocusStart.

The function now properly clears any pending blur timer before starting updates, preventing potential race conditions where updates might be stopped shortly after being started.

---

1280-1283: Good error handling for pageFocusFunction.

The try-catch block around pageFocusFunction() is an excellent addition that will prevent errors from disrupting the flow if the function isn't defined or encounters issues.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.