feat: Implement POI selection and interactive tour by jricardo27 · Pull Request #33 · jricardo27/trip_explorer

jricardo27 · 2025-05-20T15:42:18Z

This commit introduces two main features:

Prominent POI Selection in Welcome Modal:
- Adds a new "Select POIs & Categories" tab to the Welcome Modal.
- You can select a region (e.g., Western Australia, New Zealand) and then choose from a list of available POI categories for that region (e.g., "Accommodation", "National Parks").
- Category lists are dynamically populated by fetching manifest.json files from public/markers/{region}/.
- The selected region and categories are stored in a new PoiSelectionContext.
- Map pages (e.g., for Western Australia) now consume this context via a new usePoiBasedGeoJsonMarkers hook. This hook dynamically constructs the list of GeoJSON files to load based on your selections, causing the map to display only the chosen POIs.
- All region-specific map pages have been refactored to use this new dynamic loading mechanism.
Interactive App Tour for POI Selection:
- The "Tutorial" tab in the Welcome Modal now includes an interactive tour powered by react-joyride.
- This tour guides you through using the new "Select POIs & Categories" tab, explaining how to choose a region and categories.

Includes comprehensive unit tests for the new context, hooks, and tour functionality, with appropriate mocks for external dependencies like fetch and react-joyride.

This commit introduces two main features: 1. **Prominent POI Selection in Welcome Modal:** * Adds a new "Select POIs & Categories" tab to the Welcome Modal. * You can select a region (e.g., Western Australia, New Zealand) and then choose from a list of available POI categories for that region (e.g., "Accommodation", "National Parks"). * Category lists are dynamically populated by fetching `manifest.json` files from `public/markers/{region}/`. * The selected region and categories are stored in a new `PoiSelectionContext`. * Map pages (e.g., for Western Australia) now consume this context via a new `usePoiBasedGeoJsonMarkers` hook. This hook dynamically constructs the list of GeoJSON files to load based on your selections, causing the map to display only the chosen POIs. * All region-specific map pages have been refactored to use this new dynamic loading mechanism. 2. **Interactive App Tour for POI Selection:** * The "Tutorial" tab in the Welcome Modal now includes an interactive tour powered by `react-joyride`. * This tour guides you through using the new "Select POIs & Categories" tab, explaining how to choose a region and categories. Includes comprehensive unit tests for the new context, hooks, and tour functionality, with appropriate mocks for external dependencies like `fetch` and `react-joyride`.

gemini-code-assist

Hello @jricardo27, 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!

Summary of Changes

This pull request introduces significant new functionality to the application, primarily focusing on enhancing the user's ability to customize the map view and providing an interactive guide for the new features. It implements a Point of Interest (POI) selection mechanism within the Welcome Modal, allowing users to choose a region and specific categories of data (like accommodation, toilets, etc.) to display on the map. This selection is managed via a new React context (PoiSelectionContext) and consumed by map pages through a new hook (usePoiBasedGeoJsonMarkers), enabling dynamic loading of GeoJSON data based on user preferences. Additionally, an interactive tour powered by react-joyride is added to the Welcome Modal's Tutorial tab, guiding users through the new POI selection process. The PR includes refactoring of existing map pages to integrate with the new dynamic loading hook and adds comprehensive unit tests for the new context, provider, hook, and tour components.

Highlights

POI Selection Feature: Adds a new tab ('Select POIs & Categories') to the Welcome Modal where users can select a region and specific categories of points of interest to be displayed on the map.
Dynamic Data Loading: Implements dynamic loading of GeoJSON data files based on the user's selected region and categories, fetching available categories from manifest.json files located in region-specific directories.
State Management & Hooks: Introduces a new PoiSelectionContext and PoiSelectionProvider to manage the selected region and categories globally, and a usePoiBasedGeoJsonMarkers hook to abstract the logic of fetching GeoJSON data based on the context.
Map Page Refactoring: Refactors all existing region-specific map pages (Australian states/territories and New Zealand) to consume the new PoiSelectionContext and use the usePoiBasedGeoJsonMarkers hook for displaying data.
Interactive App Tour: Integrates the react-joyride library to provide an interactive, step-by-step tour guiding users on how to use the new POI selection feature within the Welcome Modal.
Unit Tests: Includes unit tests for the new context provider, the POI-based data loading hook, and the interactive tour component, ensuring core functionality is covered.

Changelog

Click here to see the changelog

package-lock.json
- Added react-joyride and its dependencies (@gilbarbara/deep-equal, deep-diff, deepmerge, is-lite, popper.js, react-floater, react-innertext, scroll, scrollparent, tree-changes, type-fest) for the interactive tour.
- Removed yaml dependency.
package.json
- Added react-joyride dependency.
public/markers/australianCapitalTerritory/manifest.json
- Added new manifest file listing available GeoJSON files for Australian Capital Territory.
public/markers/newSouthWales/manifest.json
- Added new manifest file listing available GeoJSON files for New South Wales.
public/markers/newZealand/manifest.json
- Added new manifest file listing available GeoJSON files for New Zealand.
public/markers/northernTerritory/manifest.json
- Added new manifest file listing available GeoJSON files for Northern Territory.
public/markers/queensland/manifest.json
- Added new manifest file listing available GeoJSON files for Queensland.
public/markers/southAustralia/manifest.json
- Added new manifest file listing available GeoJSON files for South Australia.
public/markers/tasmania/manifest.json
- Added new manifest file listing available GeoJSON files for Tasmania.
public/markers/victoria/manifest.json
- Added new manifest file listing available GeoJSON files for Victoria.
public/markers/westernAustralia/manifest.json
- Added new manifest file listing available GeoJSON files for Western Australia.
src/App.tsx
- Imported PoiSelectionProvider.
- Wrapped the main application Routes and TopMenu with PoiSelectionProvider to make the context available throughout the app.
src/components/SelectedPoisDisplay.tsx
- Added a new component SelectedPoisDisplay to demonstrate the selected POIs from the context (likely temporary/for testing).
src/components/WelcomeModal/Tutorial.test.tsx
- Added unit tests for the Tutorial component, including mocking react-joyride and testing the start tour button.
src/components/WelcomeModal/Tutorial.tsx
- Imported Joyride and related types/constants from react-joyride.
- Added state (runTour) to control the tour.
- Defined tourSteps array with specific targets and content for the POI selection feature.
- Implemented handleJoyrideCallback to manage tour state (stop on finish/skip).
- Added startTour function to initiate the tour.
- Added a 'Start Interactive Tour' button.
- Integrated the Joyride component with defined steps, state, and callback.
- Added overflow styling to the main Box.
src/components/WelcomeModal/WelcomeModal.tsx
- Imported several Material UI components (Select, MenuItem, List, ListItem, FormControl, InputLabel, Checkbox, ListItemText) for the new UI.
- Imported usePoiSelection hook.
- Used usePoiSelection to access and update selectedRegion, selectedCategories, and availableCategories.
- Added a new tab 'Select POIs & Categories' with specific IDs for tour targeting.
- Implemented the UI for selecting a region using a Select dropdown.
- Implemented the UI for selecting categories using a List with Checkbox items, dynamically populated based on availableCategories.
- Updated tab indexing to include the new tab.
src/contexts/PoiSelectionContext.ts
- Defined CategoryInfo interface.
- Defined PoiSelectionContextType interface including selectedRegion, selectedCategories, availableCategories, and their respective setter functions.
- Created PoiSelectionContext.
- Created usePoiSelection hook to consume the context, including a check for provider presence.
src/contexts/PoiSelectionProvider.test.tsx
- Added unit tests for PoiSelectionProvider.
- Mocked the global fetch function.
- Tested initial state.
- Tested updating selectedRegion.
- Tested fetching manifest.json and updating availableCategories when selectedRegion changes.
- Tested resetting selectedCategories when selectedRegion changes.
- Tested handling fetch errors gracefully.
- Tested updating selectedCategories directly.
- Tested resetting state when selectedRegion is set to an empty string.
src/contexts/PoiSelectionProvider.tsx
- Imported necessary React hooks (useState, useEffect, ReactNode) and context types.
- Defined PoiSelectionProviderProps interface.
- Implemented PoiSelectionProvider component.
- Used useState to manage selectedRegion, selectedCategories, and availableCategories.
- Implemented a useEffect hook that triggers when selectedRegion changes.
- Inside useEffect, fetches the manifest.json for the selected region.
- Parses the fetched data to populate availableCategories with formatted display names and raw filenames.
- Resets selectedCategories whenever the region changes.
- Includes error handling for the fetch operation.
- Defined and provided the contextValue based on the state.
- Added formatCategoryName helper function.
src/hooks/usePoiBasedGeoJsonMarkers.test.ts
- Added unit tests for the usePoiBasedGeoJsonMarkers hook.
- Mocked usePoiSelection and useGeoJsonMarkers.
- Tested hook behavior when no region or categories are selected (calls useGeoJsonMarkers with empty array).
- Tested hook behavior when only region or only categories are selected (calls useGeoJsonMarkers with empty array).
- Tested constructing correct file paths based on selected region and categories.
- Tested passing through loading and error states from the underlying useGeoJsonMarkers hook.
src/hooks/usePoiBasedGeoJsonMarkers.ts
- Imported useMemo, usePoiSelection, and useGeoJsonMarkers.
- Defined UsePoiBasedGeoJsonMarkersReturn interface.
- Implemented usePoiBasedGeoJsonMarkers hook.
- Used usePoiSelection to get selectedRegion and selectedCategories.
- Used useMemo to compute the list of GeoJSON file paths based on the selected region and categories.
- Called the existing useGeoJsonMarkers hook with the dynamically generated file paths.
- Returned the results (geoJsonDataMap, loading, error) from useGeoJsonMarkers.
src/pages/Australia/AustralianCapitalTerritory.tsx
- Imported Box, CircularProgress, Typography for loading/error/message states.
- Imported usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved the hardcoded geoJsonOverlaySources mapping outside the component as allAustralianCapitalTerritoryOverlaySources.
- Used usePoiSelection and usePoiBasedGeoJsonMarkers to get selected state and loaded data.
- Used useMemo to filter allAustralianCapitalTerritoryOverlaySources based on the files successfully loaded by usePoiBasedGeoJsonMarkers.
- Added conditional rendering to display messages for incorrect region, loading state, error state, or no categories selected.
- Updated FeatureMap to receive geoJsonLayers (from geoJsonDataMap) and the filtered geoJsonOverlaySources.
src/pages/Australia/NewSouthWales.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allNewSouthWalesOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/NorthernTerritory.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allNorthernTerritoryOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/Queensland.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allQueenslandOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/SouthAustralia.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allSouthAustraliaOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/Tasmania.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allTasmaniaOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/Victoria.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allVictoriaOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Australia/WesternAustralia.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allWesternAustraliaOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.
src/pages/Destinations/Destinations.tsx
- Removed import and usage of the temporary SelectedPoisDisplay component.
src/pages/NewZealand/NewZealand.tsx
- Refactored similarly to AustralianCapitalTerritory.tsx to use usePoiSelection and usePoiBasedGeoJsonMarkers.
- Moved hardcoded mappings to allNewZealandOverlaySources.
- Added conditional rendering for different states.
- Updated FeatureMap props.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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 is currently in preview and 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 to provide feedback.

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.

A map appears, a world to see,
But too much data, oh dear me!
A modal pops, a choice is made,
Select your points, no longer swayed,
Then tour begins, a guided spree.

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. ↩

This commit addresses the following points from your feedback: 1. **Remove console.log from Tutorial.tsx:** - Deleted a `console.log` statement from the `handleJoyrideCallback` function in `src/components/WelcomeModal/Tutorial.tsx` that was used for debugging tour events. 2. **Make Regions List Dynamic in WelcomeModal.tsx:** - Created `public/markers/regions-manifest.json` to store the list of available regions (ID and display name). - Modified `PoiSelectionProvider.tsx` to fetch this manifest on mount and store the regions in the `PoiSelectionContext`. - The region selection dropdown in `WelcomeModal.tsx` now dynamically populates from this context-provided list, replacing the previous hardcoded list. 3. **Update Unit Tests:** - Updated unit tests for `PoiSelectionProvider.test.tsx` to mock the fetch call for `regions-manifest.json` and verify that the `regions` list in the context is populated correctly. - Ensured existing tests are compatible with the asynchronous nature of regions list loading. The issue regarding the deprecated transitive dependency `popper.js@1.16.1` (via `react-joyride` -> `react-floater`) was investigated. The project is already using the latest version of `react-joyride` (2.9.3). This transitive dependency issue needs to be addressed by the `react-joyride` maintainers.

jricardo27 · 2025-05-20T15:54:21Z

/gemini review

gemini-code-assist

Code Review

This is a well-executed pull request that introduces significant new functionality for POI selection and an interactive tour. The use of React Context (PoiSelectionProvider) and custom hooks (usePoiBasedGeoJsonMarkers) for managing state and data fetching is a great approach, leading to cleaner and more maintainable page components.

The dynamic loading of POI data based on user selection is a key improvement. The refactoring of all map pages to use this new system has been done consistently. The interactive tour using react-joyride is a nice addition for user onboarding.

Unit tests for the new context, provider, hooks, and tour component are comprehensive and well-written, covering various scenarios including error handling.

Overall, the code quality is high, and the changes are well-structured. I have one suggestion for a minor cleanup.

Summary of Findings

Unused Debug Component: The new component src/components/SelectedPoisDisplay.tsx seems to be a debugging utility that is no longer actively used in the application. Consider removing it to maintain a clean codebase.

Merge Readiness

The pull request is in good shape and introduces valuable features with a solid implementation. The new context and hooks for POI selection are well-designed, and the interactive tour is a thoughtful addition. The unit test coverage for the new logic is commendable.

There is one minor point regarding an unused debug component (SelectedPoisDisplay.tsx) that should ideally be cleaned up before merging. Addressing this will ensure the codebase remains tidy.

As an AI, I am not authorized to approve pull requests. Please ensure this PR is reviewed and approved by the appropriate maintainers before merging, especially after considering the suggested cleanup.

gemini-code-assist · 2025-05-20T15:56:34Z

+import React from "react"
+import { usePoiSelection } from "../contexts/PoiSelectionContext.ts"
+import { Box, Typography } from "@mui/material"
+
+const SelectedPoisDisplay = () => {
+  const { selectedRegion, selectedCategories } = usePoiSelection()
+
+  return (
+    <Box sx={{ p: 2, border: "1px dashed grey", mt: 2 }}>
+      <Typography variant="h6">Selected POIs (Test Display)</Typography>
+      <Typography>
+        <strong>Selected Region:</strong> {selectedRegion || "None"}
+      </Typography>
+      <Typography>
+        <strong>Selected Categories:</strong>
+      </Typography>
+      {selectedCategories.length > 0 ? (
+        <ul>
+          {selectedCategories.map((category) => (
+            <li key={category}>{category}</li>
+          ))}
+        </ul>
+      ) : (
+        <Typography component="span" sx={{ ml: 1 }}>None</Typography>
+      )}
+    </Box>
+  )
+}
+
+export default SelectedPoisDisplay


This new component SelectedPoisDisplay appears to be a debugging tool, as it was previously used in Destinations.tsx but has now been commented out there. If this component is not intended for future use or was solely for temporary debugging during development, would it be appropriate to remove it to keep the codebase clean of unused components?

gemini-code-assist Bot reviewed May 20, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

gemini-code-assist Bot suggested changes May 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement POI selection and interactive tour#33

feat: Implement POI selection and interactive tour#33
jricardo27 wants to merge 2 commits into
mainfrom
feat/poi-selection-and-tour

jricardo27 commented May 20, 2025

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

This comment was marked as outdated.

Uh oh!

jricardo27 commented May 20, 2025

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot May 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

jricardo27 commented May 20, 2025

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Changelog

Footnotes

Uh oh!

This comment was marked as outdated.

Uh oh!

jricardo27 commented May 20, 2025

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Summary of Findings

Merge Readiness

Uh oh!

gemini-code-assist Bot May 20, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant