Skip to content

Fix mobile chart scrolling and navigation state - #35

Merged
LukasWallrich merged 2 commits into
mainfrom
fix/mobile-navigation
Oct 21, 2026
Merged

LukasWallrich merged 2 commits into
mainfrom
fix/mobile-navigation

Conversation

@LukasWallrich

@LukasWallrich LukasWallrich commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

From the second usability review of 21 October 2026. This was an agent-led review using simulated perspectives, not recruited participants. GPT 6.1 Sol implemented the changes; Claude reviewed them. This PR fixes C06 (phones) and C15 (navigation and URL state).

Changes

  • Plotly charts no longer capture swipes. The shared FloraCharts.plot helper sets dragmode:false, fixedrange on every axis, and scrollZoom/doubleClick off. Hover tooltips stay. This covers every Plotly chart, including the timelines.
  • Wide tables scroll sideways. .table-wrap now uses overflow-x:auto, so the citation originals table (Timeline button) and the Publication Type study tables are reachable at 390 and 768 px.
  • Citation timeline dialog: a sticky toolbar with a 44 px close button. The dialog content scrolls inside the card.
  • Tab strip: when the tabs don't fit (measured, not a fixed breakpoint), the existing select replaces them. At 1024 px, Publication Type is no longer hidden.
  • History:
    • Back and forward restore the tab and controls from the URL; a missing tab parameter means Overview.
    • Back closes an open timeline dialog.
    • Tab changes push a history entry; filter edits replace the current one.
  • Shared links contain only non-default state for the active tab. Citation search uses ci-q, and old search-input links still work. Browse restores its page, page size and mobile page.

Tests

Five new browser scenarios:

  • the 1024 px tab select and its recovery when wide;
  • back/forward and dialog dismissal;
  • old citation links and Browse paging;
  • real touch swipes over every Plotly view, with axis ranges unchanged;
  • table columns reachable at 390 and 768 px.

Full suite passes locally (21/21).

For review

The fixed header and footer height in landscape (a11y note 9) is unchanged.

🤖 Generated with Claude Code


Summary by cubic

Fixes mobile chart scrolling so swipes and drags scroll the page instead of zooming charts, and reworks URL/history state so back/forward restores tabs, controls, and dialogs correctly.

Chart and layout fixes

  • Plotly charts no longer capture touches or drags; hover tooltips still work.
  • Wide tables scroll sideways instead of stretching the whole page.
  • Citation timeline dialog gets a sticky toolbar with a 44 px close button.
  • The tab strip collapses to the existing select when tabs don't fit, measured rather than at a fixed breakpoint.

Navigation state

  • Back/forward restores the tab and filters from the URL; a missing tab means Overview and back always closes an open timeline.
  • Tab changes and user-opened timelines push a history entry; filter edits and deep-linked timelines replace the current one.
  • DOI-only links stay on Citation Impact while data loads, and a pending deep link cancels if the user navigates away.
  • History-driven closes focus the restored pane instead of the opener.
  • Shared links contain only the active tab's non-default state; legacy search-input citation links and Browse page, page size, and mobile page still restore.

Written for commit abeeaa0. Summary will update on new commits.

View guided diff Turn on auto-fix

@coderabbitai

coderabbitai Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 42 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: f3608298-c3fa-4ebe-9f09-8757f81d6280
📥 Commits

Reviewing files that changed from the base of the PR and between a600e04 and abeeaa0.

📒 Files selected for processing: 7
  • assets/app.js
  • assets/chart-accessibility.js
  • assets/citation-impact.js
  • assets/styles.css
  • assets/view-controls.js
  • index.html
  • tests/browser.test.cjs
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@cubic-dev-ai cubic-dev-ai 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.

All reported issues were addressed across 7 files

Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic

Comment thread assets/citation-impact.js
Comment thread assets/citation-impact.js
Comment thread assets/view-controls.js
LukasWallrich and others added 2 commits October 21, 2026 20:29
Disable Plotly zoom and pan in the shared renderer, allow study tables to
scroll, and keep the citation dialog close action visible. Measure tab
navigation overflow and switch to the existing select when needed.

Consolidate URL writes so missing tab state restores Overview, history
closes timelines, and shared links contain only active non-default
controls. Keep legacy citation searches working and restore Browse pages.
Add browser coverage for touch gestures, responsive tables and history.

Co-Authored-By: GPT 6.1 Sol <noreply@openai.com>
Keep DOI-only routes on Citation Impact during initial restoration so URL cleanup preserves pending deep links. Add a history entry for user-opened timelines while replacing initial deep links, and focus the restored pane instead of the opener on history-driven closes. Cover navigation, focus, delayed loading, and cancellation with browser regressions.

Validation: TEST_PORT=9205 BROWSER_CHANNEL=chromium npm test (24 passed).

Co-Authored-By: GPT 6.1 Sol <noreply@openai.com>
@LukasWallrich
LukasWallrich merged commit 799b354 into main Oct 21, 2026
3 checks passed
@LukasWallrich
LukasWallrich deleted the fix/mobile-navigation branch October 21, 2026 19:35
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