[v0/v1 migration] Move metadata modals in tools to V2

[nick-nlb]

Issue

b/491842059

Description

This is part two of the conversion of the website metadata handling from V1 to V2.

See 6078 for part 1, which describes the overall purpose.

This part converts metadata calls related to the three tools (timeline, scatter and map) to use the V2 metadata endpoint.

Solution

The primary change was to send entities up through into the metadata modal and the chart embed for each of the tools.

However, this update (and the general move to V2) highlighted some changes that needed to be made to all three of the tools in order to supply the precisely used numerator and demoninator facets in each of the charts. This is what makes up the majority of the changes in this PR.

Testing

For the most part, the metadata modal should show the same information as it does in production. However, there are certain areas where we can expect divergences. The production metadata modals do not recognize denominator values (and so will not display the chosen denomator. Additionally, the production metadata modals will sometimes show only a single facet when more facets were actually used (ultimately for the same reason).

The following chart demonstrates both of these issues:

Literacy in India

Upcoming

This is the second change in a series. Pending changes coming in later PRs are:

• The moving of facet selection dialog metadata to V2.
• Final cleanup and removal of the non V2 endpoints.

[gemini-code-assist]

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 represents the second phase of migrating the website's metadata infrastructure from V1 to V2, specifically targeting the map, scatter, and timeline tools. The core objective is to enhance the precision of metadata presented to users by ensuring that the exact numerator and denominator facets used in chart calculations are correctly identified and passed to the metadata modals. This update improves data transparency and accuracy within these visualization tools.

Highlights

• V2 Metadata Migration for Tools: This pull request continues the migration to V2 metadata handling by converting the timeline, scatter, and map tools to use the new V2 metadata endpoint.
• Precise Facet Handling: The changes ensure that the precisely used numerator and denominator facets are supplied for each chart, improving the accuracy of metadata displayed in the tools.
• Entity Information for Modals: The pull request introduces the passing of entity DCIDs to metadata modals and chart embeds, allowing for more context-aware metadata displays.

Changelog

• static/js/tools/map/chart.tsx
  • Imported useMemo hook.
  • Introduced a useMemo hook to compile a deduplicated list of entity DCIDs from map regions, map points, and breadcrumbs.
  • Passed the newly compiled entities list to the ToolChartFooter component.
• static/js/tools/map/chart_loader.tsx
  • Modified the logic for compiling facets to prioritize numerFacets from chartStore.mapValuesDates.data for the main statistical variable.
  • Added functionality to explicitly include denominator facets (denomFacets) when a statistical variable is displayed per capita and a denominator is present.
  • Updated the dependency array for the useMemo hook to include new facet-related dependencies.
  • Compiled a list of entities from various chart data sources (mapValues, mapPointValues, breadcrumbValues).
  • Passed the entities list to the ChartEmbed component.
• static/js/tools/map/chart_store.ts
  • Added denomFacets and numerFacets properties to the mapValuesDates interface to store sets of facet IDs.
• static/js/tools/map/compute/map_value_dates.ts
  • Initialized denomFacets and numerFacets as new Set objects.
  • Populated denomFacets and numerFacets based on the denomFacet in placeChartData and the facet in wantedFacetData.
  • Included denomFacets and numerFacets in the payload object returned for mapValuesDates.
• static/js/tools/map/util.ts
  • Added an optional denomFacet property to the PlaceChartData interface.
  • Initialized denomFacet to null within the getPlaceChartData function.
  • Assigned the popFacetId to denomFacet when population data is used for per capita calculations.
  • Returned the denomFacet as part of the PlaceChartData object.
• static/js/tools/scatter/chart.tsx
  • Imported useMemo hook.
  • Introduced a useMemo hook to compile a deduplicated list of entity DCIDs from the chart's data points.
  • Passed the compiled entities list to the ToolChartFooter component.
• static/js/tools/scatter/chart_loader.tsx
  • Added xDenomFacets, yDenomFacets, xNumerFacets, and yNumerFacets properties to the ChartData type.
  • Refactored the facet processing logic into a new processFacets helper function for reusability.
  • Utilized chartData.xNumerFacets, chartData.yNumerFacets, chartData.xDenomFacets, and chartData.yDenomFacets to populate the statVarToFacets and facets maps.
  • Updated the dependency array for the useMemo hook to include chartData and per capita/denominator-related properties.
  • Passed the keys of chartData.points as entities to the ChartEmbed component.
  • Included populationData.facets in the metadataMap during the data loading process.
  • Initialized xDenomFacets, yDenomFacets, xNumerFacets, and yNumerFacets as new Set objects.
  • Populated these new facet sets based on placeChartData and statistical data for X and Y axes.
  • Returned the new facet sets as part of the getChartData function's result.
• static/js/tools/shared/vis_tools/tool_chart_footer.tsx
  • Added an optional entities array property to the ToolChartFooterProps interface.
  • Passed the props.entities to the TileSources component.
• static/js/tools/timeline/chart.tsx
  • Modified the logic for embedStatVarToFacets to directly use this.state.statData.denomFacets instead of findFirstAvailableFacet.
  • Passed the keys of this.props.placeNameMap as entities to both the ToolChartFooter and ChartEmbed components.
• static/js/tools/timeline/data_fetcher.ts
  • Added an optional denomFacets property to the StatData interface.
  • Combined rawData.statAllData.facets and rawData.denomData.facets into a single facets object.
  • Initialized denomFacets as a new Set object.
  • Populated result.denomFacets with the denomFacet obtained from rawData.denomData.
• static/js/utils/scatter_data_utils.ts
  • Added an optional denomFacet property to the PlaceAxisChartData interface.
  • Initialized denomFacet to null within the getPlaceAxisChartData function.
  • Assigned denomSeries.facet to denomFacet when a denominator series is used.
  • Assigned popSeries.facet to denomFacet when population data is used for per capita calculations.
  • Returned the denomFacet as part of the PlaceAxisChartData object.
  • Added optional xDenomFacet and yDenomFacet properties to the PlaceScatterData interface.
  • Returned xDenomFacet and yDenomFacet as part of the getPlaceScatterData function's result.

Activity

• This pull request is part of a larger series of changes, following up on PR 6078, to migrate the website's metadata handling from V1 to V2.
• The author has provided a detailed description outlining the issue, solution, testing notes, and upcoming changes in subsequent PRs.

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.

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

1. 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 continues the migration of website metadata handling from V1 to V2, focusing on the timeline, scatter, and map tools. The changes primarily involve passing entity DCIDs and accurately tracking numerator and denominator facets for metadata display. The implementation is solid, but I've identified a few areas for improvement regarding code duplication and simplification, which would enhance maintainability and readability.

[juliawu]

Hooray! Thank you for also fixing denominator facet handling in the tools!