Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2024-12-17 Custom DC stable release #4800

Merged
merged 31 commits into from
Dec 17, 2024

Conversation

gmechali
Copy link
Contributor

Highlights

  • Visual and performance improvements to place pages
  • Improved webdriver tests

Submodule Diffs

dwnoble and others added 30 commits December 2, 2024 14:31
…ance (datacommonsorg#4738)

* Added logic to filter chart config by category (Overview, Health, etc)
* Added logic for fetching child place
* Added existence check for child places (will be used for displaying
map data)
* Batched calls to `fetch_places` to improve performance
* Updated test cases

In a future PR: Use flask asyncio support to parallelize some of the
calls to fetch child, similar, and nearby places

(@beets : I ran some more tests locally to compare performance of
fetching the cached place page payload with these improvements of
fetching the data dynamically from flask, and with some of these changes
it may be feasible to just fetch the place page data from flask after
all)
…sorg#4767)

Otherwise the length is determined based on what's required for
uniqueness based on the commits fetched, which can be different when
only a single branch is fetched.
This is currently available for copy/paste from release documentation
but does not take into account that remote names vary.
Right now, failures in different environments are lumped into the same
thread in the Google Groups UI. b/253630058 explains that this is
because anything in square brackets at the start of the subject line is
ignored.
* This is a cron testing job, but it will never run automatically.
Instead it can be manually run as part of the release process.
* Also, add a comment on the dev schedule string.
Stops triggering autocomplete for "the", and uses the location icon when
spaces at the start and end are the only difference between the current
query and matched query.
Updates dev place page to include:

* Topic tabs (Overview, Economics, etc)
* Place Overview panel that includes place overview text, map, and key
demographics
* Child places link section
* Charts for selected categories

## Screenshots
![Screenshot 2024-11-19 at 4 42
27 PM](https://github.com/user-attachments/assets/1ad752a5-3faa-485d-bba5-85eb6e672dc0)

![Screenshot 2024-11-19 at 4 42
36 PM](https://github.com/user-attachments/assets/868647cf-64e4-4014-a704-b62c60feb5a4)

## Still TODO:
* A better 404 page
* Only render the place overview panel if we have data to display in the
panel
* The "Places in <place>" link section can get really large. Limit it to
a maximum of "n" items
* Update chart section styles to match mockups
* Re-generate place summary text
* Merge /dev-place/ endpoint with /place/ endpoint
* Add experiment setup to only show the new place page for certain
places but not others
* Add user engagement tracking
* Add i18n

Includes changes from
datacommonsorg#4738 . I'll rebase this
PR once it's merged.
…ithin the US (datacommonsorg#4771)

The Geometry coordinates for detailed Google maps boundaries is only
available for places contained in the USA (not even the USA country), so
we only want to show that component for the places contained within the
USA.
Tested with 100 runs by pytest-flakefinder
Added experiment setup for dev place page

* Moved the dev place landing page from `/dev-place/<dcid>` to
`/place/<dcid>`
* Enable the experiment for a select list of 5 US states and 24
countries.
* Added optional URL parameter to force rendering the dev place page for
any place page. Enable by setting `?force_dev_places=true` (e.g.,
http://localhost:8080/place/geoId/06?force_dev_places=true)
* Added optional URL param to force rendering of the classic page page
(for places in the experiment group). Enable by setting
`?disable_dev_places=true`
* TODO: Add a sample of world cities to experiment group


To generate the experiment groups, I ran:

```
# >>> import random
# >>> DEV_PLACE_ALL_COUNTRY_DCIDS = ["country/ABW","country/AFG","country/AGO","country/ALB","country/AND","country/ANT","country/ARE","country/ARG","country/ARM","country/ASM","country/ATF","country/ATG","country/AUS","country/AUT","country/AZE","country/BDI","country/BEL","country/BEN","country/BES","country/BFA","country/BGD","country/BGR","country/BHR","country/BHS","country/BIH","country/BLM","country/BLR","country/BLZ","country/BMU","country/BOL","country/BRA","country/BRB","country/BRN","country/BTN","country/BWA","country/CAF","country/CAN","country/CCK","country/CHE","country/CHL","country/CHN","country/CIV","country/CMR","country/COD","country/COG","country/COK","country/COL","country/COM","country/CPV","country/CRI","country/CUB","country/CUW","country/CXR","country/CYM","country/CYP","country/CZE","country/DEU","country/DJI","country/DMA","country/DNK","country/DOM","country/DZA","country/ECU","country/EGY","country/ERI","country/ESH","country/ESP","country/EST","country/ETH","country/FIN","country/FJI","country/FLK","country/FRA","country/FRO","country/FSM","country/FXX","country/GAB","country/GBR","country/GEO","country/GGY","country/GHA","country/GIB","country/GIN","country/GLP","country/GMB","country/GNB","country/GNQ","country/GRC","country/GRD","country/GRL","country/GTM","country/GUF","country/GUM","country/GUY","country/HKG","country/HMD","country/HND","country/HRV","country/HTI","country/HUN","country/IDN","country/IMN","country/IND","country/IRL","country/IRN","country/IRQ","country/ISL","country/ISR","country/ITA","country/JAM","country/JEY","country/JOR","country/JPN","country/KAZ","country/KEN","country/KGZ","country/KHM","country/KIR","country/KNA","country/KOR","country/KWT","country/LAO","country/LBN","country/LBR","country/LBY","country/LCA","country/LIE","country/LKA","country/LSO","country/LTU","country/LUX","country/LVA","country/MAC","country/MAF","country/MAR","country/MCO","country/MDA","country/MDG","country/MDV","country/MEX","country/MHL","country/MKD","country/MLI","country/MLT","country/MMR","country/MNE","country/MNG","country/MNP","country/MOZ","country/MRT","country/MSR","country/MTQ","country/MUS","country/MWI","country/MYS","country/MYT","country/NAM","country/NCL","country/NER","country/NFK","country/NGA","country/NIC","country/NIU","country/NLD","country/NOR","country/NPL","country/NRU","country/NZL","country/OMN","country/PAK","country/PAN","country/PCN","country/PER","country/PHL","country/PLW","country/PNG","country/POL","country/PRI","country/PRK","country/PRT","country/PRY","country/PSE","country/PYF","country/QAT","country/REU","country/ROU","country/RUS","country/RWA","country/SAU","country/SDN","country/SEN","country/SGP","country/SHN","country/SLB","country/SLE","country/SLV","country/SMR","country/SOM","country/SPM","country/SRB","country/SSD","country/STP","country/SUR","country/SVK","country/SVN","country/SWE","country/SWZ","country/SXM","country/SYC","country/SYR","country/TCA","country/TCD","country/TGO","country/THA","country/TJK","country/TKL","country/TKM","country/TLS","country/TON","country/TTO","country/TUN","country/TUR","country/TUV","country/TWN","country/TZA","country/UGA","country/UKR","country/UMI","country/URY","country/USA","country/UZB","country/VAT","country/VCT","country/VEN","country/VGB","country/VIR","country/VNM","country/VUT","country/WLF","country/WSM","country/XKS","country/YEM","country/YUG","country/ZAF","country/ZMB","country/ZWE"]
# >>> DEV_PLACE_ALL_US_STATE_DCIDS = ["geoId/01","geoId/02","geoId/04","geoId/05","geoId/06","geoId/08","geoId/09","geoId/10","geoId/11","geoId/12","geoId/13","geoId/15","geoId/16","geoId/17","geoId/18","geoId/19","geoId/20","geoId/21","geoId/22","geoId/23","geoId/24","geoId/25","geoId/26","geoId/27","geoId/28","geoId/29","geoId/30","geoId/31","geoId/32","geoId/33","geoId/34","geoId/35","geoId/36","geoId/37","geoId/38","geoId/39","geoId/40","geoId/41","geoId/42","geoId/44","geoId/45","geoId/46","geoId/47","geoId/48","geoId/49","geoId/50","geoId/51","geoId/53","geoId/54","geoId/55","geoId/56","geoId/72"]
# >>> DEV_PLACE_EXPERIMENT_COUNTRY_DCIDS = random.sample(DEV_PLACE_ALL_COUNTRY_DCIDS, int(len(DEV_PLACE_ALL_COUNTRY_DCIDS) * 0.1))
# >>> DEV_PLACE_EXPERIMENT_US_STATE_DCIDS = random.sample(DEV_PLACE_ALL_US_STATE_DCIDS, int(len(DEV_PLACE_ALL_US_STATE_DCIDS) * 0.1))
```
- Add an item about when data is (not) suitable for DC
- Updated several other outdated items, especially to use new Issue
Tracker
- Reorganized some items for a more logical order

---------

Co-authored-by: Hannah Pho <[email protected]>
### Description

The purpose of this PR is to have the search bar in the header on all
pages.

Previously, pages by default did not have the search in the header, and
had to be flagged in order to provide the search bar. Now, this flag is
reversed and pages will contain the header search by default.

The search bar has been removed from the explore page, and the more
complicated search functionality provided in that page (such as the
ability to programmatically change the current query and provide a debug
modal) is now available to the universal search bar in the header.

Related layout updates have been made to ensure that the explore page
displays correctly with the internal search now gone, and the debug
"bug" button is now aligned nicely (with the global search at the top).
The debug modal has also been revamped.

### Notes

When the search bar was inline in the explore page, that page could
interact and share state with its inline search. This allowed the
explore page to provide and programmatically update the query string as
well as to provide debugging information, among other things.

We now have to communicate that information from the explore page all
the way to the header. Normally, we might consider options like React
context, or lifting of state.

However, in this case, the header and the explore page are in totally
separate React apps with separate mount points, and that limits our
ability to use more traditional methods to communicate this data.

The solution implemented was to create a global "Query Store", that can
be updated by a component in one app, and then have those changes
provided to a component in another app. The query store provides a hook
to facilitate this communication. This allows these otherwise completely
independent applications to communicate with each other in a reactive
way.

---------

Co-authored-by: Pablo Noel <[email protected]>
## 1) Fix long list of child places on continent place pages

On continent place pages, the list of child places will contain places
that are more than one level down in containment (e.g, showing
municipalities, not just countries). This PR adds a child place type
entry for continents to the child place fetch logic.

### Before:

![Screenshot 2024-12-05 at 6 18
26 PM](https://github.com/user-attachments/assets/40ff5f18-107b-451e-9657-b2d9c970c534)

### After:

![Screenshot 2024-12-05 at 6 18
33 PM](https://github.com/user-attachments/assets/c18eacb7-d2a3-4108-b844-713a81533466)



## 2) Add a "show more" toggle when the list of child places is long

Sometimes the list of child places is very long, which overwhelms the
page. This PR also adds a "show more" toggle when the number of child
places is greater than 15.

### Long lists are truncated initially
![Screenshot 2024-12-09 at 9 57
08 AM](https://github.com/user-attachments/assets/8cd0747d-5322-4d05-b1dc-69cb3fb7a376)



### Show full list after clicking "show more"
![Screenshot 2024-12-05 at 6 12
25 PM](https://github.com/user-attachments/assets/764e48ee-5cda-4dad-9cf6-4e674dd05ca4)


### Short lists don't show a toggle
![Screenshot 2024-12-05 at 6 11
53 PM](https://github.com/user-attachments/assets/127796db-0bb9-4d25-ba88-237025afc810)

## 3) Replace place search with link to knowledge graph on current place
pages

In preparation for the changes made in PR datacommonsorg#4740, this PR also removes
the place search bar to avoid showing users double search bars, and
instead shows the DCID and a link to the knowledge graph entry, fixing a
longstanding feature regression.

Before:
![Screenshot 2024-12-09 at 11 53
21 AM](https://github.com/user-attachments/assets/6c1be20b-aaa4-47cc-8b41-8c592d538082)


After:
![Screenshot 2024-12-09 at 11 47
12 AM](https://github.com/user-attachments/assets/04305558-9c62-4bb1-a2a8-66e5f713dab5)
* Fixed dev place page to have `padding-top: 48px;`
* Removed extra tag with id="main" which was adding to the padding

## Before
![Screenshot 2024-12-09 at 3 22
20 PM](https://github.com/user-attachments/assets/2f7abf55-c134-4bd3-b364-91c6cfadebd5)


## After
![Screenshot 2024-12-09 at 3 20
07 PM](https://github.com/user-attachments/assets/719aeb1c-fda9-46ab-a9e3-6dc8f710c5be)
…atacommonsorg#4779)

Modifies the fetch_places helper to also get the DissolutionDate and
filter out these dissolved places from the responses

No more Yugoslavia: https://screenshot.googleplex.com/B5axwNbChiP5Y3N

---------

Co-authored-by: Dan Noble <[email protected]>
Skipping autocomplete on the key words essentially did not work if you
added the space after, it would trigger at that point. This resolves it.
…org#4784)

Per bug bash session, we are removing India and Russia from the new
place page experiment group.
Adds the "explore in [timeline/map] tool" to chart footers in the dev
place pages.

Also sorts fields alphabetically for codacy code quality.

Example:
![Screenshot 2024-12-11 at 10 00
48 AM](https://github.com/user-attachments/assets/260d9429-989b-4a0d-a8e5-f93a132c3a55)
## Description

This PR contains three related updates:

### Homepage redesign

The homepage redesign is implemented based on the Homepage Improvements
Figma ([link to
figma](https://www.figma.com/design/G3D7geGkxHC23lom91oFkE/DC-Homescreen?node-id=701-2802&node-type=frame&t=8C10qesTLIeOxDYI-0)).

### Emotion

The core homepage, about page and build page components have been
reworked into emotion, with localized styles defined within the
component itself. A corresponding emotion theme (which will continue to
be expanded on) is provided.

### Component rework

In doing the emotion conversion, the components themselves have been
significantly refactored and reworked into:
* elements: these are small components such as chips, boxes, that can be
used either independently or as part of a set within a larger component
* content: these are content components that typically represent a block
on the page. These include things like hero components, chip sets, brick
walls, and other re-usable pieces of content. Note that these components
are generic and do not contain page specific content. Page specific
content is provided to the components when they are used.
* layout: there are two layout components: Section and Separator.
Section will wrap a page block and provide the padding and background
color of that section (these are adjustable within the block). Separator
allows extra padding to be added to the page in fixed amounts, with an
optional border.

The page content itself will always be located within that page’s `app`
directory. So all about page content is located in
`static/js/apps/about/components`. These app-specific components make
use of the generic content components and providing them with the actual
content.

### Merging Note

Once the changes are approved we will apply updates to the relevant
webdriver tests.

---------

Co-authored-by: Pablo Noel <[email protected]>
Following steps for staging release: Update mixer and import submodules
## Description

The primary update of this PR is to convert the home page hero into
columns (making use of the hero_columns component.

In doing so, we also refactored the hero column to make it more
flexible.

This also includes separate minor updates to reflect updates requested
in the meeting:
* Section wrapper component padding fine-tuned for certain screen-sizes
* Responsive typography size update on the build page's hero.
* Minor padding updates in Knowledge-graph from the meeting.

### Screenshots

#### Before
<img width="1797" alt="desktop_before"
src="https://github.com/user-attachments/assets/6f0fdbb4-43e9-46e2-bb86-ff6e7fa5c9a2"
/>

#### After
<img width="1796" alt="desktop_after"
src="https://github.com/user-attachments/assets/8c41cbd0-d6db-48c3-85c4-ba8a798ce949"
/>

---------

Co-authored-by: Pablo Noel <[email protected]>
## Description

This PR appends question marks to the end of topics that are worded as
questions. These appear on the topics pages, such as
[http://localhost:8080/explore/economics](http://localhost:8080/explore/economics)
.

There are also minor copy fixes to some of the questions.

### Screenshot
<img width="1407" alt="questions"
src="https://github.com/user-attachments/assets/fd126f6a-bac7-4db9-8c78-38686c242917"
/>
python tests were failing in cloudbuild and was throwing a file already
exists error when trying to make a new directory which was probably a
race condition. Fixed by using exist_ok when making the directory.
Sorts the parent places according to the parent place type in both old
and new place page.
Before: https://screenshot.googleplex.com/73zetb4iETK6D7p
After: https://screenshot.googleplex.com/4KQ4baSMN64ZNS6

Adds source tile to the bottom of the key demographics in the overview:
https://screenshot.googleplex.com/57gfbASDD62Jx5y

Replaces the source tile from "Source" to "Sources" when there are
multiple.
Before: https://screenshot.googleplex.com/8i94e76fpnWRStE
After: https://screenshot.googleplex.com/HfKwv3zrbDsHxK9
…org#4794)

The sanity tests started failing after [migrating the homepage to use
emotion](datacommonsorg#4756)

* Added validation to run_website_sanity.sh to error gracefully if no
$domain arg is passed in
* Allow setting the protocol along with $domain arg to allow testing
from localhost
* Added `data-testid` attribute to LinkChip, LinkBox, and QueryLink
element to allow test cases to select dom elements without a fixed class
name
* Updated sanity.py test to use `data-testid` attribute to select
elements
The revampled place page experiment should not be tested against CDC
autopush. Extracting that test back out to the Based DC tests only.
Once the revampled place page is fully enabled, we should update all the
place page tests to be for the new page.
…page (datacommonsorg#4796)

Demo

[Keep the users query in the NL search bar when landing on the place
page
4796.webm](https://github.com/user-attachments/assets/6ce9b764-7958-4c70-96f0-6ab51800994d)

Co-authored-by: Gabriel Mechali <[email protected]>
@gmechali gmechali requested a review from keyurva December 17, 2024 17:38
@gmechali gmechali marked this pull request as ready for review December 17, 2024 17:38
@gmechali gmechali added this pull request to the merge queue Dec 17, 2024
Merged via the queue into datacommonsorg:customdc_stable with commit 4dc0bb1 Dec 17, 2024
5 of 6 checks passed
@gmechali gmechali deleted the cdcStableUpdate branch December 17, 2024 17:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants