[Platform]: Category icons and compact Summary redesign - #1007
Open
carcruz wants to merge 9 commits into
Open
Conversation
Adds a category field (Target, Disease, Drug, Target-Disease, Target-Variant, Disease-Variant, Literature) to every widget's definition object across all 71 sections, reusing the same taxonomy already used for dataset tagging on the Downloads page. Groundwork for category-driven icons and filtering across profile pages.
Replaces the initials avatar ("DG"-style, from createShortName) used in
three places - Summary cards, Section item headers, and the sticky nav -
with a single CategoryAvatar showing each widget's category icon instead.
Summary cards go from a card grid to compact pill chips in a CSS grid,
grouped/filterable by category via a chip row (styled to match the AOTF
control chips) rather than static per-category headers.
Also fixes CredibleSet and Study profile pages: both rendered widget
Summary components directly instead of through SummaryRenderer, which
broke the grid layout (overlapping chips, since SummaryItem no longer
self-wraps in a grid item) and meant those two profiles never got
category filters at all.
…ion badges - Summary filter chips: fixed hover reverting to grey, active color now matches app blue, no borders (AOTF style), smaller font, kept widget display order instead of regrouping by category - Summary/Section item icons: transparent background with colored icon (CategoryAvatar filled=false) instead of a filled square, consistent border-radius between Summary chips and Section item cards - Section item header: tighter padding, smaller icon - GenomicLocation: rebuilt on shared chip styling, grey-300 fill/border matching the Summary chips - Added a "Core essential gene" chip to TargetPage's ProfileHeader, styled like an active filter chip, shown side-by-side with GenomicLocation
- New SummaryCategoryContext, URL-synced via useStateParams (?category=), shared across Summary chips, section bodies, and the sticky nav - SectionsRenderer hides full-body sections outside the active category - StickyProfileHeader nav/active-section tracking filtered to match - Wired into all 7 profile pages; Study/CredibleSet pages also gate their manually-rendered sections (shared trait studies, QTL/GWAS credible sets, variants) against the same filter
navigate({ hash }) without an explicit search wipes existing query
params, so clicking a Summary chip or sticky-nav item was resetting
the ?category= filter back to All. Pass through location.search.
…o-top useActiveSection kept its last activeId even after the caller's ids list changed (e.g. switching the category filter), so it could keep pointing at a now-hidden widget until the next scroll-triggered intersection event. Reset/validate activeId whenever ids changes. Also clear the URL hash once the user scrolls back above the sticky trigger, so a refresh at the top of the page doesn't re-jump into whichever section was last active. Guarded to only kick in after the sticky bar has been visible at least once, so it doesn't strip a deep-linked hash before the page has had a chance to scroll to it.
Extracted the "All" + per-category chip row from SummaryRenderer into a shared CategoryFilterChips component (both read/write the same SummaryCategoryContext), and reused it in StickyProfileHeader's widget dropdown alongside the existing text filter, so category filtering is available and visually consistent in both places.
Swap the full category filter chip row (too busy in a dropdown that already has its own text filter) for a single chip showing the active category with a delete/clear action, only rendered when a category filter is actually applied.
MUI's default filled-Chip delete-icon hover color darkens (tuned for light chips), which nearly vanished against our primary.dark background. Override to a lighter grey on hover instead.
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
1 participant
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
Adds an entity-relationship category taxonomy (Target, Disease, Drug, Target-Disease, Target-Variant, Disease-Variant, Literature — same vocabulary already used for dataset tags on the Downloads page) to all 71 widget definitions, and uses it to redesign the Summary section and replace the "DG"-style initials avatar across the profile UI.
definitionobject gets acategoryfield (single or dual-tagged), plus a sharedCategory/CATEGORY_ICONSmap (packages/ui) driving one FontAwesome icon per category.packages/ui/src/components/CategoryAvatar.tsx): single shared component replacing thecreateShortName-based initials avatar in three places — Summary cards, Section item headers, and the sticky nav (active-widget chip + dropdown rows).Summarycomponents directly instead of throughSummaryRenderer— broke the grid layout (overlapping chips, sinceSummaryItemno longer self-wraps in a grid item after the redesign) and meant those two profiles never got category filters at all. Both now route throughSummaryRenderer, reusing widget arrays already defined for their sticky nav.Issue: —
Deploy preview: —
Type of change
How Has This Been Tested?
yarn vite build --mode developmentinapps/platformafter each change, no new errorsChecklist: