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

[#7704] React maps #1513

Merged
merged 4 commits into from
Mar 11, 2024
Merged

[#7704] React maps #1513

merged 4 commits into from
Mar 11, 2024

Conversation

vellip
Copy link
Collaborator

@vellip vellip commented Dec 6, 2023 •
edited
Loading

Tasks

  • PR name contains story or task reference
  • Documentation (docs and inline)
  • Tests (including n+1 and django_assert_num_queries where applicable)
  • Changelog

@m4ra m4ra force-pushed the main branch 2 times, most recently from 36978a9 to e26c42f Compare December 11, 2023 15:55
@vellip vellip force-pushed the pv-2023-11-react-maps branch from 1b6620e to 74c94b7 Compare December 13, 2023 12:57
@vellip vellip marked this pull request as ready for review December 13, 2023 12:58
@vellip vellip changed the title WIP: working on react-maps [#7704] React maps Dec 13, 2023
@vellip vellip force-pushed the pv-2023-11-react-maps branch 2 times, most recently from d34e22c to 2ec3e9d Compare December 13, 2023 13:14
@github-actions GitHub Actions

This comment was marked as resolved.

Sign in to view
@vellip vellip force-pushed the pv-2023-11-react-maps branch from 2ec3e9d to 5b0cea6 Compare December 18, 2023 00:57
hom3mad3
hom3mad3 reviewed Jan 2, 2024
View reviewed changes
adhocracy4/maps_react/static/a4maps_react/Map.jsx
}

return (
<MapContainer
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we make the map containers all have lazy load?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have a specific solution for that in your mind? Theoretically you could just lazy import any Map code within the projects by using React.lazy. Then we would not have to dictate every a4 project to be using lazy load.

hom3mad3
hom3mad3 reviewed Jan 2, 2024
View reviewed changes
adhocracy4/maps_react/static/a4maps_react/ZoomControl.js Outdated
}

if (map._zoom === map.getMaxZoom() || (map._zoomSnap && Math.abs(map.getZoom() - map.getMaxZoom()) < map._zoomSnap)) {
L.DomUtil.addClass(zoomInBtn, className)
Copy link
Contributor

@hom3mad3 hom3mad3 Jan 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to refactor all the leaflet-control-zoom-in zoom-out `to be buttons otherwise it's not accessible via keyboard

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

by leaflet defaults they are already links and therefore focusable. Did you try to focus them and it didn't work? Maybe there's another issue then, I can tab through the zoom buttons successfully.
image

hom3mad3
hom3mad3 reviewed Jan 2, 2024
View reviewed changes
hom3mad3
hom3mad3 reviewed Jan 2, 2024
View reviewed changes
hom3mad3
hom3mad3 requested changes Jan 2, 2024
View reviewed changes
Copy link
Contributor

@hom3mad3 hom3mad3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, @vellip, for the maps implementation—it's a great addition!

While exploring, I encountered a few areas for improvement:

  1. Ensure keyboard navigation on maps. The leaflet elements don't seem to be accessible by default, so we might have to add some customizations here.

  2. I would suggest adding lazy loading to the map container, for better performance.

  3. Unstyled Toggle on /projekte/: The "Show Maps" toggle appears unstyled when not activated, affecting the visual consistency.
    Project overview

  4. Responsive Design: The map container doesn't adjust to screen size, leading to readability challenges (desktop screen below).

maps-responsive-height
  1. JavaScript Error: also on /projekte, I encountered a 'Uncaught (in promise) DOMException: The operation was aborted' error.

Additionally, on the /projekte/module/kiezkasse/?mode=map:

  1. The map doesn't reload upon refreshing the page, and displays an 'Error list is null' message, suggesting a potential issue with data handling or state management.

These observations should help in enhancing the functionality and user experience of the maps feature. Thanks again for your hard work!

@goapunk goapunk force-pushed the pv-2023-11-react-maps branch from 5b0cea6 to 087bb8e Compare January 3, 2024 10:47
goapunk
goapunk reviewed Jan 3, 2024
View reviewed changes
Copy link
Contributor

@goapunk goapunk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mostly looks good from my side, some small notes

docs/react_maps.md
which are designed to offer a unique interactivity and to display the data in a
visually appealing and user-friendly manner.

## Components List
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More of a general reminder, this can also be done by us later: maybe have `## General`` section which mentions that django stores everything as geojson (which is LngLat) but leaflet needs coordinates as LatLng, might save someone a headache when debugging/working on maps in the future

philli-m
philli-m reviewed Jan 4, 2024
View reviewed changes
Copy link
Contributor

@philli-m philli-m left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, I added most comments are in mB. Cheers!

@vellip vellip force-pushed the pv-2023-11-react-maps branch 2 times, most recently from 14a4a74 to 38f880a Compare January 16, 2024 22:36
@goapunk goapunk force-pushed the pv-2023-11-react-maps branch from 38f880a to 48661d3 Compare February 5, 2024 10:51
@goapunk goapunk force-pushed the pv-2023-11-react-maps branch from 1155aa8 to f6e827a Compare February 14, 2024 12:49
goapunk
goapunk requested changes Feb 26, 2024
View reviewed changes
Copy link
Contributor

@goapunk goapunk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vellip left a note regarding the missing attribution and added some hacky code to load it from the style, would be cool if you could have a look at that as well :)

@goapunk goapunk force-pushed the pv-2023-11-react-maps branch from 09938d4 to 3f8ddd8 Compare March 11, 2024 15:18
@goapunk goapunk self-requested a review March 11, 2024 15:19
goapunk
goapunk approved these changes Mar 11, 2024
View reviewed changes
Copy link
Contributor

@goapunk goapunk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@goapunk goapunk enabled auto-merge (rebase) March 11, 2024 15:19
@goapunk goapunk merged commit 1971b6c into main Mar 11, 2024
2 checks passed
@goapunk goapunk deleted the pv-2023-11-react-maps branch March 11, 2024 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@goapunk goapunk goapunk approved these changes

@hom3mad3 hom3mad3 Awaiting requested review from hom3mad3

@philli-m philli-m Awaiting requested review from philli-m

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@vellip @goapunk @philli-m @hom3mad3