Skip to content

Add Reset button to restore inital timeline view#155

Open
Aravindpai152 wants to merge 3 commits into
daattali:masterfrom
Aravindpai152:feature/reset_button
Open

Add Reset button to restore inital timeline view#155
Aravindpai152 wants to merge 3 commits into
daattali:masterfrom
Aravindpai152:feature/reset_button

Conversation

@Aravindpai152

@Aravindpai152 Aravindpai152 commented Jun 11, 2026

Copy link
Copy Markdown

Problem

While using timevis in a project, we frequently needed to zoom in and out
of the timeline using the mouse wheel to inspect specific time periods.
However, getting back to the initial view was very difficult because:

  • Mouse wheel zooming has no "snap back" to the original position
  • The existing zoom in/out buttons are incremental and imprecise
  • There was no way to restore the exact initial window that was set
    when the timeline first loaded

This made the user experience frustrating, especially when working with
timelines that span long time periods.

Solution

Added a reset button to the zoom menu that restores the timeline to its
exact initial view (the window state when the timeline first rendered).

Changes made:

  • Added reset button (↺) to the zoom menu in timevis_html()
  • Store the original window on first render in renderValue()
  • Implement resetTimevis() in JS to restore the stored window

Why this is useful

Anyone using timevis with large datasets or long time ranges will benefit
from this — being able to freely explore the timeline by zooming and
panning without worrying about losing the original view makes the widget
much more user friendly.

Testing

Tested in a Shiny app by:

  1. Loading a timeline with a defined window
  2. Zooming in/out using both mouse wheel and zoom buttons
  3. Clicking reset — confirms it returns to the exact initial view

Summary by CodeRabbit

Release Notes

  • New Features

    • Added a “Reset to Initial View” control next to the existing zoom buttons to restore the timeline’s initial visible window.
  • Bug Fixes

    • Improved the accuracy of capturing and restoring the initial view bounds, including after programmatic updates.
  • Other

    • Added a new programmatic API to trigger the reset (with optional animation), including support for invoking it from Shiny.

@coderabbitai

coderabbitai Bot commented Jun 11, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8cd68a5d-d4a7-46d9-ba44-247f27a26678

📥 Commits

Reviewing files that changed from the base of the PR and between e809b3e and 811e296.

📒 Files selected for processing (2)
  • R/api.R
  • inst/htmlwidgets/timevis.js

📝 Walkthrough

Walkthrough

The PR adds a reset control to the timevis widget, wires a new resetTimevis() API through R and Shiny, and stores the initial timeline window so it can be restored on demand.

Changes

Reset to Initial View Functionality

Layer / File(s) Summary
Reset control and API wiring
R/timevis.R, R/api.R, inst/htmlwidgets/timevis.js
Adds the reset button to the widget controls, exposes the exported R wrapper, and allows the corresponding Shiny message handler.
Initial window capture
inst/htmlwidgets/timevis.js
Stores originalWindow and updates initialization-time API handling so the first visible bounds can be captured after window-changing setup calls.
Reset API method implementation
inst/htmlwidgets/timevis.js
Implements resetTimevis(animation) to restore the stored window bounds, with a default animation setting and a no-op when no initial window exists.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A bunny clicked the reset sign bright,
And timelines hopped back to their height.
With start and end kept safe in sight,
The view returned, just right, just right. 🐰

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change: adding a reset button to restore the timeline’s initial view.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a "Reset to Initial View" button to the timevis widget, allowing users to reset the timeline view to its initial state. The feedback suggests removing a typo in the button's class name (saction-button) and replacing the shiny::icon with a unicode character ("↺") to avoid runtime dependencies in non-Shiny environments. Additionally, it is recommended to update the originalWindow variable on every render instead of only when it is null, ensuring the reset functionality works correctly when the widget is updated with new data.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread R/timevis.R Outdated
Comment thread inst/htmlwidgets/timevis.js Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@inst/htmlwidgets/timevis.js`:
- Around line 253-264: Add a Shiny message handler that maps a new message name
(e.g. 'resetWindow') to the existing resetTimevis JavaScript method so the
timeline can be reset programmatically from R; update the handlers array in
inst/htmlwidgets/timevis.js where other handlers like 'zoomIn' and 'zoomOut' are
registered to call timeline.setWindow via resetTimevis, and add a small R
wrapper function in R/api.R (name it e.g. resetWindowTimevis or resetTimevis)
that sends the matching Shiny message to the widget (mirroring how
zoomIn/zoomOut wrappers are implemented).
- Around line 169-175: The originalWindow is being set immediately after calling
fit, which happens before queued timeline API calls (e.g., setWindow) are
executed, so move the block that assigns originalWindow = { start:
timeline.getWindow().start, end: timeline.getWindow().end } to after the loop
that executes queued API calls (the code that iterates and applies pending API
functions such as setWindow) so the captured window reflects the final
initialized state; locate references to originalWindow, timeline.getWindow(),
fit(), and the loop that processes queued API calls and place the capture
immediately after that loop completes.

In `@R/timevis.R`:
- Line 599: Remove the mistaken "saction-button" CSS class from the zoom-reset
button declaration in R/timevis.R (the element currently rendered with class =
"btn btn-default btn-lg zoom-reset saction-button"); this class is a typo and
unnecessary because the button is wired via onclick in timevis.js (see the
handler referenced around line 43), so update the class string to exclude
"saction-button" (or rename to "action-button" only if you intend to use Shiny
action binding) so the button matches the zoom-in/zoom-out siblings and behaves
correctly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: fd3b5160-5d11-4a88-ac66-69eb4b0100e1

📥 Commits

Reviewing files that changed from the base of the PR and between ff2bab7 and 40365d4.

📒 Files selected for processing (2)
  • R/timevis.R
  • inst/htmlwidgets/timevis.js

Comment thread inst/htmlwidgets/timevis.js Outdated
Comment thread inst/htmlwidgets/timevis.js
Comment thread R/timevis.R Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
R/timevis.R (1)

27-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Update showZoom doc to mention the reset button.

The reset button shares the same zoom-menu/data-show-zoom toggle as the zoom in/out buttons (see timevis.js lines 170-175), so showZoom now also controls its visibility, but the docs still only mention "Zoom In"/"Zoom Out".

📝 Proposed doc update
-#' `@param` showZoom If \code{TRUE} (default), then include "Zoom In"/"Zoom Out"
-#' buttons on the widget.
+#' `@param` showZoom If \code{TRUE} (default), then include "Zoom In"/"Zoom Out"/"Reset"
+#' buttons on the widget.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@R/timevis.R` around lines 27 - 28, Update the `showZoom` roxygen in
`timevis.R` so it explicitly says this flag controls the visibility of the Zoom
In, Zoom Out, and Reset buttons. Keep the change limited to the `showZoom`
parameter documentation and align the wording with the `timevis.js` zoom-menu
behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@inst/htmlwidgets/timevis.js`:
- Around line 180-226: The initial window capture in the timevis init flow is
happening too late, after fit() and queued API calls, so the rangechanged
listener can miss the real starting window; update the init logic around the
timeline fit and the rangechanged registration to capture originalWindow
synchronously or attach the listener before invoking the API queue. Also expand
the hasWindowCall detection in the API loop to treat centerItem, zoomIn, and
zoomOut as window-changing methods so the capture logic handles those cases
correctly.

In `@R/api.R`:
- Around line 638-673: The roxygen example block in resetTimevis is broken
because several example lines use plain # instead of #', which splits the
documentation block and can cause the Rd output to lose the description, params,
and examples. Restore the #' prefixes throughout the example in resetTimevis so
the entire comment stays in one roxygen block and the generated documentation
remains intact.

---

Outside diff comments:
In `@R/timevis.R`:
- Around line 27-28: Update the `showZoom` roxygen in `timevis.R` so it
explicitly says this flag controls the visibility of the Zoom In, Zoom Out, and
Reset buttons. Keep the change limited to the `showZoom` parameter documentation
and align the wording with the `timevis.js` zoom-menu behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ca3988cc-e908-4a41-b682-cd191566a893

📥 Commits

Reviewing files that changed from the base of the PR and between 40365d4 and e809b3e.

📒 Files selected for processing (3)
  • R/api.R
  • R/timevis.R
  • inst/htmlwidgets/timevis.js

Comment thread inst/htmlwidgets/timevis.js
Comment thread R/api.R
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant