Fix hero mobile overflow, densify UMAP demo, redesign homepage highlights - #298
Draft
Zethson wants to merge 21 commits into
Draft
Fix hero mobile overflow, densify UMAP demo, redesign homepage highlights#298Zethson wants to merge 21 commits into
Zethson wants to merge 21 commits into
Conversation
…he homepage highlight sections The conference-announcement chip lacked min-width: 0 on its flex items, so it couldn't shrink below its unwrapped text width and overflowed the viewport on narrow screens. The interactive UMAP demo used too few, too-tightly-packed points and generic chart-library colors, so it read as a sparse placeholder rather than real data. It now uses more points and the same brand hues as the package tiles below it. The Ecosystem/Mission/Team/References sections were four identical stacked text blocks. They're now a single 2x2 card grid with an icon per topic, consistent with the card styling used elsewhere on the site.
✅ Deploy Preview for jade-cajeta-1bcca0 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…gn highlight card links The demo previously only showed a static point cloud. It now draws a curved, arrowed trajectory graph over the cluster centroids that forks into two fates near the end, evoking a CellRank/PAGA fate map instead of a bare scatter plot. The "more" links in the homepage highlight cards followed the paragraph text, so cards with shorter text had their link sitting higher than cards with longer text. They're now pinned to the bottom of each card.
…ten spacing under it The previous trajectory graph drew one curved edge per cluster transition, which looked like a PAGA abstraction rather than a real velocity field. It's now a bundle of parallel arrowed streamlines per transition, fanned out at the source cluster and converging at the target, matching the many-small-arrows look of scVelo/CellRank plots. #interactive-demo-section's margin-bottom was 15%, stacking on top of the next section's own top margin and leaving a large gap before "Next event". Reduced to a fixed 3rem.
…elo plot They were tinted per-cluster, which read as decorative rather than data. Real velocity/fate plots draw the flow field in black over the colored cell scatter, so the lines and arrowheads are now black, with more arrows per line for the same dense look.
…catters Real UMAP clusters are dense, overlapping, tapered blobs, not evenly spread circles. Roughly tripled the point count per cluster and replaced the isotropic Gaussian placement with an elongated axis per cluster (with a narrower cross-axis), so clusters read as solid shapes closer to the CellRank/scVelo reference instead of a loose scatter.
…ering them randomly Clusters were placed independently across the box, so most pairs ended up far apart relative to their own size, with long thin streamline bridges between distant islands. Centers are now placed along a winding, rightward-biased walk (with the last two branching off the end), so neighbouring clusters touch and the whole thing reads as one connected embedding, closer to a real CellRank plot. Bumped counts and blob size to match the larger spacing.
Clusters were touching but not overlapping, and still looked thin compared to real scRNA-seq embeddings where neighbouring clusters often blend into each other. Point counts per cluster are up significantly, and the spacing between chain steps is now smaller than the cluster blob radius, so neighbours visibly overlap instead of just meeting at an edge.
The biased random walk building the cluster chain tended to drift toward one side of the box, leaving the middle empty and the shape crammed into a corner. The chain's bounding box is now re-centered on the container after layout. Also doubled point counts again (now ~3,000 total) for a denser, more solid-looking scatter.
…the box Point counts per cluster are doubled again (~6,000 total). Also grew the cluster blob size and per-dot size, since the box still had a lot of empty space with clusters that stayed small even as they got denser.
The trajectory overlay was tacked onto sc.pl.umap(), but a UMAP call doesn't produce a velocity field. Added a third fake command line, scv.pl.velocity_embedding_stream(data, basis='umap'), matching the real scVelo function that plots this. sc.pl.umap() now only (re)plots the scatter; the streamlines are drawn by the new command, independently clickable, and still auto-play once on load and after resize so a visitor who never clicks anything still sees all three steps.
scv.pl.velocity_embedding_stream() calls out a specific ecosystem package that isn't part of scverse core, which reads oddly on the homepage hero. Renamed to the package-agnostic pl.trajectory(), keeping the same three-step demo structure without endorsing one tool.
…ards, and clean up the hero chrome The hero previously only had a one-line tagline with no explanation of what scverse actually is or who it's for. Added an nf-core-style explanatory paragraph plus three audience value props (researchers, developers, institutions) right under the title. Added Core packages and Events cards to the highlight grid, growing it from a 2x2 to an auto-fitting 3-column grid (2 rows of 3 on desktop). Removed the row of social platform buttons from the hero: they duplicate the same links already in the footer and were adding clutter with no unique content. Expanded the conference announcement chip with the event's location and reduced its margin, so it carries more information without floating in as much empty space.
… trajectory command name The homepage capped content at 1200px/80% while other pages already had a "wide" variant (1400px/92%); switched the hero, chip, and section widths to that wide variant so the page uses more of a large monitor instead of leaving big unused margins on either side. Removed the "Next event" article and the full core-packages tile grid from the homepage now that the highlight grid has its own Core packages and Events cards linking to the same destinations. Deleted the now-unused main/packages.html partial and its dead CSS. Pinned the highlight grid to a fixed 3-column layout instead of auto-fit, which was squeezing in a 4th column on wide viewports and breaking the intended 3+3 layout of the 6 cards. Renamed the third demo command from pl.trajectory(...) to sc.pl.trajectory(...): the bare pl. prefix didn't correspond to anything import scanpy as sc actually imports.
The lede paragraph was capped at 42rem and the value props at 18rem each, so both looked stranded in a narrow column on the left of the now-wide hero with a lot of unused space beside them, and the paragraph wrapped into more lines than it needed to. Widened both to 58rem, and gave each "For X" value prop an icon to match the visual weight of the rest of the page instead of being bare text.
…dd real hero CTAs Centered the whole hero block (title, tagline, lede, value props) instead of leaving it left-aligned while the rest of the page reads as centered. Replaced the thin conference-announcement pill with a full-width dark banner card: a real date block, title, one-line description, and a proper "Register now" button, instead of a single line of text with an arrow. Added "Get started" and "View on GitHub" buttons to the hero, giving visitors an actual next action instead of only prose.
They were still capped at 58rem while the conference banner and demo box above and below them spanned the full width, so the hero read as narrower than the rest of the page. Removed the cap so all three match.
…e props The conference banner was taller and wider than it needed to be, creating an abrupt jump against the narrower centered title right below it. Reduced its padding and inset it to 92% width. Shortened the hero lede paragraph to one tighter sentence. Removed the "Get started"/"View on GitHub" buttons, which felt arbitrary next to the rest of the hero. Made each "For X" value prop a link instead (researchers -> /learn, developers -> /join, institutions -> /about/mission), so they carry the same navigational purpose without extra buttons competing for attention.
GitHub, Discourse, Zulip, Bluesky, X, and YouTube as small icon-only links, reusing the existing bootstrap-icons and custom .i-* icon assets (no new SVGs needed) rather than duplicating the old hero button row we removed earlier. Hidden between 992px and ~1180px: Bootstrap's own collapse breakpoint is 992px, which isn't wide enough to also fit this row, and it was overflowing the nav and clipping the Join button in that range. The footer still lists all of these regardless of width.
They only revealed they were clickable on hover. Added the same "\232A" arrow glyph used by .more links elsewhere on the page, so the affordance is visible without hovering.
The arrow was too subtle to notice, and an arrow isn't this site's own convention for links anyway. Switched to the same underline style every other inline text link on the page already uses, which is both more visible and more consistent.
Contributor
|
Hey, In mobile, the UMAP showcase is buggy, while the UMAP vignette is on my screen it is slower, and sometimes it clips, parts are in white. |
Member
Author
|
Still iterating a lot so I should just mark this as a draft for now. But this is very useful feedback @josenimo ! Thank you! |
Zethson
marked this pull request as draft
September 3, 2026 15:28
…/slowness on narrow screens Events/Packages/About were plain links with a CSS :hover-revealed submenu and no dropdown-toggle wiring, so on touch devices (no hover) tapping them navigated straight to the section's landing page before the submenu could ever show. Added the missing data-bs-toggle="dropdown" so Bootstrap intercepts the tap and opens the submenu instead, on both touch and desktop click. The demo's layout constants (chain step size, cluster blob size) and per-cluster point counts were tuned for the desktop-sized box and used as fixed pixel values, so on a much narrower mobile box they clipped against the edges and left visible white gaps. Both now scale down with the box's actual width, and the point count is thinned more aggressively (squared falloff) since a small box also needs far fewer DOM nodes to render smoothly.
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
2 participants
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.
Summary
Hero
Conference banner
Interactive demo
import scanpy as sc,sc.pl.umap(...),sc.pl.trajectory(...).Layout
min-width: 0).Note: this does not add a homepage stats/credibility strip — that's covered separately by #259.