[v0/v1] [Ranking revamp] Add plumbing for new ranking page by juliawu · Pull Request #6101 · datacommonsorg/website

juliawu · 2026-03-18T20:55:46Z

Adds the plumbing for a new ranking page that will eventually replace the current ranking pages.

Changes made:

Rename the current ranking page files to have the "old_" prefix
Toggle between the new and old page via feature flag in flask and ranking.html
Adds the css and js for rendering a subject page category with a single ranking tile
Update the webdriver tests to point to the old ranking pages

This PR is intended just to get the new page setup. Actually implementing and prettifying the new ranking pages will come in subsequent PRs.

Screenshot:

With flag off:

With flag on (default on local):
(Again, fixing the styling will come in subsequent PRs)

gemini-code-assist · 2026-03-18T20:56:06Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request lays the groundwork for a significant revamp of the ranking page functionality. It introduces a new architecture for rendering ranking information, leveraging a feature flag to manage the transition from the legacy implementation. The changes primarily focus on setting up the necessary components and logic to support the new page, with the actual visual and functional enhancements planned for subsequent iterations.

Highlights

New Ranking Page Plumbing: Added the foundational code for a new ranking page, designed to eventually replace the existing one, with initial setup for rendering a single ranking tile within a subject page category.
Feature Flag Implementation: Introduced a feature flag (NEW_RANKING_PAGE) in ranking.ts to enable toggling between the old and new ranking page implementations, allowing for controlled rollout and testing.
Refactoring of Old Ranking Components: Renamed existing ranking page files (e.g., ranking_page.tsx, ranking_histogram.tsx, ranking_table.tsx, ranking_types.ts) to include an old_ prefix, preserving the previous functionality while making way for new implementations.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request successfully sets up the foundational plumbing for a new ranking page, allowing for a phased rollout via a feature flag. The existing ranking page files have been appropriately renamed with an 'old_' prefix, and the new ranking_page.tsx integrates the Category component for rendering. While the overall structure for the revamp is in place, there are a few areas in the new ranking_page.tsx that need attention to ensure feature parity and best practices, specifically regarding dynamic content and the highest/lowest ranking toggle.

juliawu · 2026-03-18T20:58:25Z

@@ -0,0 +1,431 @@
+/**


This file is the result of renaming the old ranking_page.tsx that holds the current ranking page logic to old_ranking_page.tsx. No lines were changed.

juliawu · 2026-03-18T22:10:47Z

@@ -0,0 +1,62 @@
+/**


This file is a result of renaming the old ranking.ts to old_ranking.ts. No lines of code were changed.

juliawu · 2026-03-18T22:14:03Z

-    # Click explore timeline
-    find_elem(self.driver, value='explore-timeline-text').click()
-
-    # Assert rankings page loaded
-    expected_ranking_page_title = 'Ranking by Median Age - Counties in California - Place Rankings - ' + self.dc_title_string
-    WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
-        EC.title_contains(expected_ranking_page_title))
-    self.assertEqual(expected_ranking_page_title, self.driver.title)
-


This reference to the ranking pages is in the test for the old old vis tools that is slated for removal. Because this test does not cover anything actively in production, I've chosen to just remove this reference to the ranking pages instead of editing the test.

…to new-ranking-page-1

juliawu · 2026-03-18T22:21:55Z

@@ -0,0 +1,55 @@
+/**


This file is a result of renaming the old ranking.css to old_ranking.scss. No code was changed.

nick-nlb

Once the tests are fixed, LGTM.

I had a look at the failing tests and they look like they should be simple (the order of parameters, and applying python linting).

nick-nlb · 2026-03-18T23:05:26Z

 export const ENABLE_STAT_VAR_AUTOCOMPLETE = "enable_stat_var_autocomplete";
 export const ENABLE_RANKING_TILE_SCROLL = "enable_ranking_tile_scroll";
 export const ENABLE_CHART_HYPERLINK = "enable_chart_hyperlink";
+export const NEW_RANKING_PAGE = "new_ranking_page";


Does this get used? (with the switchboard happening in the jinja template). If not, we could remove this.

Good call out. Removed!

This PR is a followup to #6101, it implements the bulk of the new ranking page UI. ## Changes made This PR implements a major architectural refactoring of the Ranking Page to decouple logical pieces into more maintainable components, and significantly enhances internationalization (i18n) and localization across the page. ### 1. Architectural Refactoring & Component Extraction * **Extracted `RankingPageHeader`:** Moved the header logic into its own component (`ranking_header.tsx`). This encapsulates the fetching of ancestor places and the generation of the page title/localized links so that the main `RankingPage` component remains lean. * **Extracted Config Builder:** Migrated the category configuration generation logic out of the main page and into a dedicated `ranking_config_builder.ts` file. * **Extracted Styles:** Migrated the ranking page styles into an Emotion-based stylesheet (`ranking_page_styles.ts`), replacing SCSS for the page wrapper and making the CSS more maintainable. Removed the old `tile title` element in favor of relying on the new consolidated header logic. ### 2. Internationalization (i18n) & Localization * **Localized Ancestor Places:** The header now fetches and displays localized names for all ancestor places in the breadcrumb trail. * **Localized Page Title:** Introduced `FormattedMessage` via `i18n_ranking_messages.ts` to fully localize the page title string. It intelligently injects localized place and stat-var names while properly pluralizing the child place types (e.g., "counties"). * **Locale Plumb-through:** Piped the active `locale` parameter from the page metadata down into the `RankingPage` and `RankingPageHeader` components to drive these translations. ### 3. Clearer Prop Naming & Consistency * Refactored the `RankingPagePropType` interface to use clearer, much more explicit variable names throughout the component hierarchy (e.g., `placeName` → `parentPlaceNameLocalized`, `withinPlace` → `parentPlaceDcid`, `placeType` → `childPlaceType`, `statVar` → `statVarDcid`). ### 4. Ranking Tile Enhancements * **Default Entry Count:** Appended `rankingCount: 100` to the `rankingTileSpec` in `ranking_config_builder.ts` so that the table renders 100 entries immediately. * Correctly populated the stat var display name inside the protocol buffer/config using `getStatsVarTitle`. * Improved layout aesthetics by left-aligning the content block and wrapping it with 24px padding. ## What's NOT included Adding a "show more" button to the bottom to expand beyond 100 entries is coming in a subsequent PR. The new page title is wired for i18n support, but we won't see proper translations until we send off i18n strings to a translation service and get translations back. There is currently no set timeline for when these translations will happen. ## Testing You can see the new pages by: 1. Checkout the code changes in this PR to your local repo 2. Start localhost via `./run_server.sh -p 8080` 3. Go to `http://localhost:8080/ranking/Count_Person/County/geoId/06 ## Screenshots ### Desktop <img width="3744" alt="localhost_8080_ranking_Count_Person_County_country_USA" src="https://github.com/user-attachments/assets/eb4be637-ca08-46b7-a9b2-7b89213bf39e" /> ### Mobile <img width="500" alt="localhost_8080_ranking_Count_Person_County_country_USA(Pixel 7)" src="https://github.com/user-attachments/assets/07c07ec3-67d8-414d-a3f4-e300f8946819" /> ### Localized (Korean) <img width="3744" alt="localhost_8080_ranking_Count_Person_County_country_USA_hl=ko" src="https://github.com/user-attachments/assets/5dc74c74-a390-4e16-8c87-da8fdc2a31bd" /> --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

juliawu added 3 commits March 18, 2026 13:19

Rename ranking page to old_ranking_page

d32c8b0

Rename other old files

1e0572e

Add new ranking page

9c5a9d3

gemini-code-assist Bot reviewed Mar 18, 2026

View reviewed changes

juliawu commented Mar 18, 2026

View reviewed changes

juliawu requested a review from nick-nlb March 18, 2026 21:05

juliawu marked this pull request as ready for review March 18, 2026 21:05

juliawu marked this pull request as draft March 18, 2026 21:10

juliawu added 3 commits March 18, 2026 14:11

Update flask tests to only check old ranking page

7aa4080

Fully decouple old and new styles

1fc11c4

Remove ranking page reference in map test

c0f5b34

juliawu changed the title ~~[v0/v1] [Ranking revamp]~~ [v0/v1] [Ranking revamp] Add plumbing for new ranking page Mar 18, 2026

juliawu commented Mar 18, 2026

View reviewed changes

juliawu added 2 commits March 18, 2026 15:20

add disable flag to webdriver tests

624936b

Merge branch 'master' of https://github.com/datacommonsorg/website in…

83134bf

…to new-ranking-page-1

juliawu commented Mar 18, 2026

View reviewed changes

juliawu marked this pull request as ready for review March 18, 2026 22:23

nick-nlb reviewed Mar 18, 2026

View reviewed changes

juliawu mentioned this pull request Mar 19, 2026

Revamp ranking pages to use tiles #6079

Closed

juliawu added 3 commits March 18, 2026 19:06

Remove client-side feature flag entry until it actually gets used

27dd449

change order of url params in webdriver test

68334d3

lint

040af6f

juliawu requested a review from nick-nlb March 19, 2026 02:40

nick-nlb approved these changes Mar 19, 2026

View reviewed changes

Merge branch 'master' into new-ranking-page-1

4fd5563

juliawu enabled auto-merge (squash) March 19, 2026 16:07

juliawu merged commit d478732 into datacommonsorg:master Mar 19, 2026
11 checks passed

juliawu mentioned this pull request Mar 25, 2026

[v0/v1 migration] [Ranking pages] Implement new ranking page UI #6120

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v0/v1] [Ranking revamp] Add plumbing for new ranking page#6101

[v0/v1] [Ranking revamp] Add plumbing for new ranking page#6101
juliawu merged 12 commits intodatacommonsorg:masterfrom
juliawu:new-ranking-page-1

juliawu commented Mar 18, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot commented Mar 18, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

juliawu Mar 18, 2026

Uh oh!

juliawu Mar 18, 2026

Uh oh!

juliawu Mar 18, 2026

Uh oh!

juliawu Mar 18, 2026

Uh oh!

nick-nlb left a comment

Uh oh!

nick-nlb Mar 18, 2026

Uh oh!

juliawu Mar 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

juliawu commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist Bot commented Mar 18, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

juliawu Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

juliawu Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

juliawu Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

juliawu Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

nick-nlb left a comment

Choose a reason for hiding this comment

Uh oh!

nick-nlb Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

juliawu Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

juliawu commented Mar 18, 2026 •

edited

Loading