feat: RN-1084: Map overlay PNG exports

[tcaiger]

Issue #: feat: RN-1084: Map overlay exports

Changes:

Add support for PNG image exports alongside the existing PDF functionality.

• Refactored the server-side utility for page downloads to support both PDF and PNG formats with a new downloadPageAsImage function.
• new 'Export' button with a dropdown menu in the map overlay selector

Review

• Run Review Hero
• Auto-fix review suggestions
• Auto-fix CI failures

[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 enhances the map overlay export capabilities by introducing the option to export map overlays as PNG images. The changes involve updating the backend service to handle different export formats and modifying the frontend user interface to present these new export choices. Additionally, new files have been added to configure and document interactions with Claude AI within the repository.

Highlights

• Map Overlay Image Export: Implemented functionality to export map overlays as PNG images, complementing the existing PDF export.
• Backend Export Logic Refactoring: Refactored the server-side map overlay export route to support both PDF and PNG formats dynamically based on the request.
• Frontend Export UI Update: Updated the map overlay selector in the UI to provide a dropdown menu, allowing users to choose between PDF and PNG export formats.
• Claude AI Configuration: Added configuration files and documentation to guide Claude AI when interacting with the repository.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• .claude/settings.local.json
  • Added a new file to define local settings for Claude AI, including allowed Bash commands for repository interaction.
• CLAUDE.md
  • Added a new documentation file providing comprehensive guidance for Claude Code, covering commands, architecture, key patterns, Git workflow, and ESLint configuration within the monorepo.
• packages/server-utils/src/downloadPageAsPdf.ts
  • Introduced a new downloadPageAsImage function that uses Puppeteer to capture a web page as a PNG image.
  • Refactored common parameter building logic into a shared buildParams function to be used by both PDF and image export functions.
• packages/server-utils/src/index.ts
  • Exported the newly created downloadPageAsImage function to make it accessible from other modules.
• packages/tupaia-web-server/src/routes/ExportMapOverlayRoute.ts
  • Modified the ExportMapOverlayRoute to accept an optional format parameter ('pdf' or 'png') in the request body.
  • Updated the route's logic to conditionally call either downloadPageAsPdf or downloadPageAsImage based on the requested format.
  • Extracted the URL construction logic into a new buildExportPageUrl helper function for better organization.
• packages/tupaia-web/src/api/mutations/index.ts
  • Exported the new useExportMapOverlayImage hook, making it available for use in frontend components.
• packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts
  • Added a new useExportMapOverlayImage hook specifically for handling PNG map overlay exports.
  • Refactored the common logic for building the export request body into a new buildExportBody function, shared by both PDF and PNG export hooks.
  • Imported the downloadjs library to facilitate client-side file downloads.
• packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx
  • Implemented a new 'Export' button with a dropdown menu, allowing users to select between 'PDF' and 'PNG' export options for map overlays.
  • Added new styled components (ExportButton, ExportMenu, ExportMenuItem) to style the new export UI elements.
  • Updated the export state management to handle both PDF and image export loading and errors.
  • Replaced the GetApp icon with ChevronDown for the export dropdown and removed LoadingSpinner in favor of Skeleton for loading states.
• packages/types/src/types/requests/tupaia-web-server/ExportMapOverlayRequest.ts
  • Added an optional format field to the ReqBody type, allowing clients to specify 'pdf' or 'png' for map overlay exports.

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 adds the functionality to export map overlays as PNG images, in addition to the existing PDF format. The changes are well-structured, introducing a new dropdown in the UI for selecting the export format and refactoring the backend to handle both PDF and PNG generation. I've left a couple of suggestions to improve code clarity and reduce duplication, but overall this is a solid implementation.

[tcaiger]

/gemini summary

[gemini-code-assist]

Summary of Changes

This pull request expands the map overlay export features by adding support for PNG image exports alongside the existing PDF functionality. The changes involve generalizing URL verification and parameter building in the backend, introducing a new image download utility, and modifying the export API route to handle different output formats. On the frontend, a new export menu provides users with a choice of format, enhancing the overall user experience for map overlay data extraction.

Highlights

• Image Export Functionality: Introduced the capability to export map overlays as PNG images, complementing the existing PDF export option.
• Backend Refactoring for Export: Refactored the server-side utility for page downloads to support both PDF and PNG formats through a generalized verifyPageUrl and buildParams function, and added a new downloadPageAsImage function.
• API Route Enhancement: Updated the ExportMapOverlayRoute to accept an optional format parameter, allowing dynamic selection between PDF and PNG exports.
• Frontend User Interface Update: Implemented a new 'Export' button with a dropdown menu in the map overlay selector, enabling users to choose between PDF and PNG export formats directly from the UI.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• packages/server-utils/src/downloadPageAsPdf.ts
  • Renamed verifyPDFPageUrl to verifyPageUrl and pdfPageUrl to pageUrl for broader applicability.
  • Introduced a new downloadPageAsImage function to capture web pages as PNGs.
• packages/server-utils/src/index.ts
  • Exported the newly created downloadPageAsImage function.
• packages/tupaia-web-server/src/routes/ExportMapOverlayRoute.ts
  • Modified the route to accept an optional format parameter ('pdf' or 'png') in the request body.
  • Updated logic to conditionally call downloadPageAsPdf or downloadPageAsImage based on the requested format.
  • Extracted URL construction logic into a new buildExportPageUrl helper function.
• packages/tupaia-web/src/api/mutations/index.ts
  • Exported the new useExportMapOverlayImage hook.
• packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts
  • Added a new useExportMapOverlayImage hook for PNG map overlay exports.
  • Refactored common logic for building the export request body into a shared buildExportBody function.
  • Imported the downloadjs library for client-side file downloads.
• packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx
  • Implemented a new 'Export' button with a dropdown menu for selecting PDF or PNG export options.
  • Added new styled components (ExportButton, ExportMenu, ExportMenuItem) for the export UI.
  • Updated export state management to handle loading and errors for both PDF and image exports.
  • Replaced GetApp icon with ChevronDown and LoadingSpinner with Skeleton for loading states.
• packages/types/src/types/requests/tupaia-web-server/ExportMapOverlayRequest.ts
  • Added an optional format field to the ReqBody type, allowing specification of 'pdf' or 'png' for exports.

Activity

• An initial summary of changes was provided by gemini-code-assist[bot].
• gemini-code-assist[bot] suggested renaming verifiedPDFPageUrl to verifiedPageUrl in downloadPageAsPdf.ts for better generality, a change that was implemented in the PR.
• The author tcaiger requested a summary from gemini-code-assist[bot].

[jaskfla]

One proposal to use media types instead of 'pdf' | 'png', and one about safer URL encoding. But otherwise happy to stamp 🙂

Neat work 🙏