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.

Sign up for GitHub

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

Jump to bottom

Implement Interactive Region Picking on Map #186

Closed
6 tasks
OhmSpectator opened this issue Dec 26, 2023 · 0 comments · Fixed by #197
Closed
6 tasks

Implement Interactive Region Picking on Map #186

OhmSpectator opened this issue Dec 26, 2023 · 0 comments · Fixed by #197
Assignees
@OhmSpectator
Labels
enhancement New feature or request front Issues related to Web UI

Comments

@OhmSpectator
Copy link
Member

Description:

Build upon the existing functionality of rendering several regions by implementing interactive region picking on the map. Users should be able to click on any displayed "currentLevel" region to select it. Upon selection, the application should update the global and local states to reflect the new active region, potentially triggering further UI updates or data fetching.

Requirements:

  • Interactive Layer Setup: Ensure that the map layer displaying "currentLevel" regions is set up for interaction. This might include setting proper IDs and metadata for each region feature.
  • Click Event Handling: Implement a click event listener on the map that can identify when a user selects a region. Utilize maplibre-gl's queryRenderedFeatures or similar functionality to determine the clicked region.
  • State Management: Upon a region selection, update the necessary global and local states with the selected region's information. This includes the region's ID, any related metadata, and potentially its hierarchical level.
  • UI Feedback: Provide immediate visual feedback when a region is selected. This could involve highlighting the selected region, displaying a tooltip, or other visual cues.
  • Error Handling: Implement robust error handling for the interactive picking process, ensuring that invalid selections or failures in updating state are gracefully managed.
  • Documentation and Testing: Update documentation to reflect the new feature and its usage. Write tests to cover the new interactive functionality and ensure it integrates well with existing features.

Additional Information:

Implement after #185
@OhmSpectator OhmSpectator added enhancement New feature or request front Issues related to Web UI labels Dec 26, 2023
@OhmSpectator OhmSpectator moved this from 🆕 New to 📋 Backlog in Track Your Regions Dec 26, 2023
@OhmSpectator OhmSpectator self-assigned this Jan 1, 2024
@OhmSpectator OhmSpectator moved this from 📋 Backlog to 🏗 In progress in Track Your Regions Jan 1, 2024
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Implement interactive region picking on the map.
a45d976 
Added functionality for users to interactively pick regions directly from the
map. Included enhancements involve setting up an event listener for region
clicks, updating the selected region's state, and providing immediate UI
feedback by changing cursor styles. The region click event identifies the
selected region and updates the global state to reflect the new active region.

Currently, placeholders for fetching additional region info and subregions are
marked with TODOs.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Prevent re-selection of same region in map component.
8a2bf15 
Introduced useRef to track the previously selected region and prevent
re-rendering and redundant fetch calls when the same region is clicked multiple
times in the RegionMap component. This optimization enhances user interaction
efficiency with the map.

Issue: #186

Signed-off-by: TYR Architect <[email protected]>

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Update Region object properties in map component.
90a8e22 
Refined the region object structure in MapComponent by updating 'hasSubregions'
property with actual data from the 'newRegion' and altering the TODO comments
to reflect the shift in scope for fetching region info and adding it to the
region object.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Update Region object properties in map component.
f6e6364 
Refined the region object structure in MapComponent by updating 'hasSubregions'
property with actual data from the 'newRegion' and altering the TODO comments
to reflect the shift in scope for fetching region info and adding it to the
region object.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Add tooltip to map regions.
0938bf7 
Added Material-UI Tooltip to RegionMap component to display region names when
hovering over the map regions. This enhances user interactivity by providing
immediate context about each region. Adjusted event handlers for mouse
movements to control tooltip visibility and content based on the region under
the cursor.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
@OhmSpectator OhmSpectator mentioned this issue Jan 1, 2024
Merged
5 tasks
@OhmSpectator OhmSpectator linked a pull request Jan 1, 2024 that will close this issue
Enhance interactivity and optimize region selection in RegionMap component #197
Merged
5 tasks
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Implement interactive region picking on the map.
aa8706e 
Added functionality for users to interactively pick regions directly from the
map. Included enhancements involve setting up an event listener for region
clicks, updating the selected region's state, and providing immediate UI
feedback by changing cursor styles. The region click event identifies the
selected region and updates the global state to reflect the new active region.

Currently, placeholders for fetching additional region info and subregions are
marked with TODOs.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Prevent re-selection of same region in map component.
8ebeae0 
Introduced useRef to track the previously selected region and prevent
re-rendering and redundant fetch calls when the same region is clicked multiple
times in the RegionMap component. This optimization enhances user interaction
efficiency with the map.

Issue: #186

Signed-off-by: TYR Architect <[email protected]>

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Update Region object properties in map component.
85d88dd 
Refined the region object structure in MapComponent by updating 'hasSubregions'
property with actual data from the 'newRegion' and altering the TODO comments
to reflect the shift in scope for fetching region info and adding it to the
region object.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
OhmSpectator added a commit that referenced this issue Jan 1, 2024
@OhmSpectator
front: Add tooltip to map regions.
8ae160c 
Added Material-UI Tooltip to RegionMap component to display region names when
hovering over the map regions. This enhances user interactivity by providing
immediate context about each region. Adjusted event handlers for mouse
movements to control tooltip visibility and content based on the region under
the cursor.

Issue: #186

Signed-off-by: Nikolay Martyanov <[email protected]>
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in Track Your Regions Jan 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@OhmSpectator OhmSpectator

Labels
enhancement New feature or request front Issues related to Web UI
Projects
None yet
Milestone
No milestone
1 participant
@OhmSpectator