Skip to content

feat: sticky table of contents with scrollspy for canvas dashboards#9693

Open
rohithreddykota wants to merge 2 commits into
mainfrom
rohithreddykota/canvas-toc-scrollspy
Open

feat: sticky table of contents with scrollspy for canvas dashboards#9693
rohithreddykota wants to merge 2 commits into
mainfrom
rohithreddykota/canvas-toc-scrollspy

Conversation

@rohithreddykota

@rohithreddykota rohithreddykota commented Jul 16, 2026

Copy link
Copy Markdown
Member

Adds a persistent, minimap-style table of contents to canvas dashboards (view surfaces only; not the iframe embed).

  • Derives entries from the headings (h1h3) rendered inside markdown components of the active tab — no new section primitive; stays in sync as content/tabs change via a debounced MutationObserver.
  • Scrollspy via a single IntersectionObserver (no scroll-event math); exactly one active section, with the highlight pinned during click-to-scroll so it doesn't flicker through intermediate sections.
  • Collapsed rail of tick bars by default (dots on narrow viewports so they don't overlap content); hover/focus reveals the full list as an overlay flyout that never reflows the dashboard.
  • Click smooth-scrolls (respecting prefers-reduced-motion) and updates the URL hash; deep-linking on mount is supported. Accessible: <nav aria-label>, real links, aria-current="location", focus rings, full heading as the accessible name.

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code
image image image

@AdityaHegde

Copy link
Copy Markdown
Collaborator

A couple of UXQA items,

  1. When there are 2 markdown components side-by-side,
    1. Clicking on the right one in sidebar will not highlight it, only the left one gets highlighted.
    2. Scrolling just down will quickly highlight the right one.
      Not sure if there is a legitimate use case for this, so perhaps we can keep the existing behaviour.
  2. When the last markdown component is towards the bottom it never gets highlighted. But clicking it does take the user to the bottom so probably not a bad experience?

What do you think @nishantmonu51 ?

@rohithreddykota
rohithreddykota force-pushed the rohithreddykota/canvas-toc-scrollspy branch from 0ac3794 to 52255cd Compare July 17, 2026 18:41
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.

2 participants