[Platform]: Add sticky profile header with widget navigator - #1006
Open
carcruz wants to merge 2 commits into
Open
[Platform]: Add sticky profile header with widget navigator#1006carcruz wants to merge 2 commits into
carcruz wants to merge 2 commits into
Conversation
…sion's tab body The Fragment wrapping BaselineExpression's Summary/GTEx tabs got a fresh crypto.randomUUID() key on every render, discarding all local state (selected tab, chart view) on any re-render, not just scroll-driven ones.
… tracking, and URL deep-linking GitHub PR-style sticky bar for target/disease/drug/variant/study/credible-set profile pages: shows the entity title + icon + external references, and a dropdown (with filter) listing every widget on the page so long profiles (target has 18 widgets) get a quick jump menu instead of just scrolling. - StickyProfileHeader (packages/ui): fixed-position bar, reveals once the Profile/Associated tabs row scrolls out of view (not always-on), full viewport width. Reuses definitions' hasData()/shortName the same way the existing Summary cards do, so disabled/empty widgets are greyed out consistently. - useActiveSection: IntersectionObserver-based scrollspy that reports which widget is centered in the upper-middle of the viewport. Section bodies are React.lazy/Suspense-loaded, so a MutationObserver rescans for their DOM nodes as they mount. - URL sync: the active widget's id syncs to the URL hash while scrolling (raw history.replaceState - fires often, doesn't need a real navigation), and explicit jumps (dropdown pick, Summary card click) use react-router's navigate() with replace+preventScrollReset, since those are one-off, user-initiated actions where going through the router is correct per its docs. useScrollToHashOnMount replays a deep-linked hash on load once the lazy-loaded section exists. - Icon/externalLinks are lifted out of each entity's Header.tsx into an exported buildHeaderMeta() so the sticky bar and the full-size header render from one source of truth instead of duplicating the xref-building logic. Verified with yarn turbo run build --filter=platform after each step; no new type errors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
GitHub PR-style sticky bar for target/disease/drug/variant/study/credible-set profile pages: shows the entity title/icon/external references plus a dropdown (with filter) listing every widget on the page, so long profiles (target has 18 widgets) get a quick jump menu instead of just scrolling.
packages/ui): fixed-position bar, reveals once the Profile/Associated tabs row scrolls out of view (not always-on), full viewport width, no shadow. Reuses each widget'shasData()/shortNamethe same way the existing Summary cards do, so disabled/empty widgets are greyed out consistently. Active widget label crossfades in on change.useActiveSection: IntersectionObserver-based scrollspy reporting which widget sits in the upper-middle of the viewport. Section bodies areReact.lazy/Suspense-loaded, so aMutationObserverrescans for their DOM nodes as they mount.history.replaceState— fires often, doesn't need a real navigation), while explicit jumps (dropdown pick, Summary card click) usenavigate()withreplace+preventScrollReset, since those are one-off user actions where going through the router is correct.useScrollToHashOnMountreplays a deep-linked hash on load once the lazy-loaded section exists.Header.tsxinto an exportedbuildHeaderMeta(), so the sticky bar and the full-size header render from one source of truth instead of duplicating the xref-building logic.BaselineExpression's tab body had akey={crypto.randomUUID()}that force-remounted (losing tab/chart state) on every render — unrelated pre-existing bug, surfaced while testing the scroll-driven URL sync.Issue: —
Deploy preview: —
Type of change
How Has This Been Tested?
yarn turbo run build --filter=platformafter each change, no new type errorsChecklist: