Custom dc homepage #5852
Custom dc homepage #5852
Conversation
…ocation in homepage, because it is now used in multiple areas).
…(in particular, implementing functionality that allows us to display a version used by the coming custom home page).
… that is no longer used, and fulfilling a TODO).
…der.json. If we are in a custom DC, we will look in a particular directory (config/custom_dc) and, if we find a `header.json` in the enclosed custom directory, we will use that. With this, we will be able to use the standard Data Commons header, while along custom DCs to customize the actual header content.
…conBox component that allows us to display descriptions as used on the new custom home page view.
… app, which will display the search bar and the tool list.
…t of items than the primary site's list).
…ws it to be displayed anywhere on the site as a regular content component item.
…and display both the main site's header (with the custom content) as well as the new custom home page content (styling still coming).
… than HEADER_MENU_V2 (which has now been removed). We also explicitly add the tool list because we have now added a stat var explorer tool to the list which isn't to display on the home page (by default we display all the tool types if none are given).
Clean up HTML and Classes from the main wrappers and components, keeping the same logic and functionality
# Conflicts: # static/js/apps/homepage/components/tools.tsx
…on the home page.
…ools has a grey intro paragraph.
# Conflicts: # static/js/apps/homepage/components/tools.tsx
…ons-website into custom-dc-homepage
…ng out the icons into its own map).
• Show Load more now its handled in the beginning • The results can be infinite the wrapper nows scrolls past the visible threshold
Summary of ChangesHello @pablonoel, I'm Gemini Code Assist1! 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 introduces a new custom homepage for Data Commons, designed to meet specific UX requirements. It involves a substantial refactoring of core UI components, particularly the search autocomplete and tools sections, leveraging Emotion for modern and flexible styling. The backend Flask server has also been enhanced to support custom header and footer configurations, providing greater flexibility for custom Data Commons deployments. These changes aim to deliver a more polished and customizable user interface. Highlights
Using Gemini Code AssistThe 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
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 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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new custom homepage for Data Commons and refactors several key components to be more modular and maintainable. The backend changes in Flask to support custom header and footer configurations are well-implemented. On the frontend, the extensive refactoring of the search bar and its suggestions to use Emotion and a centralized theme is a significant improvement for styling consistency. The generalization of the Tools component also enhances reusability. Overall, the changes are well-structured and align with the PR's goals. I have a couple of minor suggestions to clean up some unused code.
static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx
Outdated
Show resolved
Hide resolved
static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx
Outdated
Show resolved
Hide resolved
…rts into a single line.
With some of the class names having changed, the tests are now updated to compensate. Additionally, the test that counts the number of search results now only counts the actual search results (which number 4 because, in order to properly space the elements in the search results, we lowered the number to display from 5 to 4 to fit the show more equally). This means that we are checking for 4 search results, instead of the previous 6.
miss-o-soup
left a comment
miss-o-soup
left a comment
There was a problem hiding this comment.
Hi Pablo,
Thank you for doing all these changes and updates. I really love the care taken to clean up our search tool, going beyond the task at hand to build the custom DC page.
All looks good from my end so I defer to Dan for the code notes and tools refactoring. The only small nit that would like to call out is that we put in medium weight (aka a bit bolder) the location in the completion sentences that appear on the search tool. This is because they help visually to easily differentiate at glance what choice to make.
I'm attaching an image to point to what I mean.
…size for places, brings back the cursor:text
Noted! added back the weight increase 
|
4 participants
Description
This PR implements the new custom home page, as described in item #5 of the (https://docs.google.com/spreadsheets/d/1VtmR1H3VOBbEL_D0OxP9z0ZSFmD3H6k_ZldraM11CjA/edit?gid=592668190#gid=592668190)[UX Document] and on page 75 of the (https://docs.google.com/presentation/d/1ztyZwu8b3YzU1MMAFPI3iC-Hm00CE63rPb7eP6vGZlw/edit?slide=id.g39e49b38713_0_0#slide=id.g39e49b38713_0_0)[Rolling UX Deck]
Notes
In the process of building this new view of the home page, we reworked some aspects of customization to better facilitate the requirements.
Flask
The new Your Data Commons page uses the standard Data Commons header. Until now, there was only a single menu content definition available, "Header V2", and this was used in the primary Data Commons site.
We updated the server initialization logic (init.py) to allow for the custom DC to specify its own menu definition.
At the same time, we removed the old, now deprecated "header.json", and replaced it with what we were calling "header_v2.json", fulfilling a TODO. Now:
The autocomplete (primary search)
This component is refactored to use Emotion. This allows the component to be used much more flexibly, as it no longer relies on the surrounding CSS context for its styles. In this PR, we are using it in a new Search content block.
We also standardized and refactored the display of the search to use Emotion. To allow the component to be used anywhere within the app without the need of specific styling.
Tools
The tools used to be fixed (effectively, a static component for the non-custom page). Tools is now rolled out to be a more generic component, where you can specify the intro content and which tools will be displayed.
Fonts
We plan to change the font of the custom page from Google Sans to Open Sans. However, that change is fairly complex (in terms of how the different fonts are used and interact with each other) and so for now we will roll that out into a subsequent PR.
Screenshots
Old Search
New Search
Old Search suggestions
New Search Suggestions
Load More styles
New custom DC
