search

Plant-for-the-Planet-org / planet-webapp

The Open Source and Commission Free Application that powers the Trillion Tree Campaign. Visit us to meet reforestation Organizations, individuals and companies who are on a journey to plant, monitor and restore a trillion trees.
https://www.trilliontreecampaign.org
Other
34 stars 14 forks source link

Refactors map for better performance while showing a single project #2071

Closed shyambhongle closed 3 months ago

shyambhongle commented 3 months ago

Fixes

Changes in this pull request: Code refactor to improve map performance. Use of geoJSON filters instead of mapping.

@mohitb35

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
planet-webapp ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 30, 2024 8:06am
planet-webapp-multi-tenancy-setup ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 30, 2024 8:06am
1 Ignored Deployment | Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **planet-webapp-temp** | ⬜️ Ignored ([Inspect](https://vercel.com/planetapp/planet-webapp-temp/AaMT8g6JLhYnTnuz9vSMpEDudaGN)) | | | May 30, 2024 8:06am |
coderabbitai[bot] commented 3 months ago

[!WARNING]

Rate limit exceeded

@mohitb35 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 34 minutes and 16 seconds before requesting another review.

How to resolve this issue? After the wait time has elapsed, a review can be triggered using the `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR. We recommend that you space out your commits to avoid hitting the rate limit.
How do rate limits work? CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our [FAQ](https://coderabbit.ai/docs/faq) for further information.
Commits Files that changed from the base of the PR and between 678e14cdea84fe7a2b0cec2939eb3f534d809b6c and 7c9f1b7e552a994b8a7718dd9fb5257eb413f06f.

Walkthrough

The recent updates have improved the handling and rendering of plant locations on the map. Key changes include the introduction of new functions in ProjectsMap.tsx to manage plant location selection and map loading, as well as refactoring PlantLocations.tsx to use a new function for generating GeoJSON features. Additionally, type definitions for plant locations have been refined for better clarity and consistency.

Changes

Files Change Summary
src/features/projects/components/ProjectsMap.tsx Added functions for handling plant location selection and map loading; updated component props and imports.
src/features/projects/components/maps/PlantLocations.tsx Introduced makeInterventionGeoJson function to generate GeoJSON; refactored rendering logic for plant locations.
src/features/common/types/plantLocation.d.ts Updated type properties and adjusted geometry property types for plant location interfaces.

Sequence Diagram(s) (Beta)

sequenceDiagram
    participant User
    participant ProjectsMap
    participant PlantLocations
    participant GeoJSON

    User ->> ProjectsMap: Interacts with map
    ProjectsMap ->> ProjectsMap: handlePlantLocationSelection
    ProjectsMap ->> ProjectsMap: handleOnLoad
    ProjectsMap ->> PlantLocations: Render plant locations
    PlantLocations ->> GeoJSON: makeInterventionGeoJson
    GeoJSON -->> PlantLocations: Return GeoJSON features
    PlantLocations -->> ProjectsMap: Display locations on map

Poem

In the code, where plants do grow, 🌱
A map now shines with a gentle glow. ✨
Refactored logic, neat and clear,
GeoJSON whispers, "Locations here!"
With types refined and functions bright,
Our map now gleams in the soft moonlight. 🌕
Hooray for changes, done just right! 🎉

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
norbertschuler commented 3 months ago

Zooming is working better than in the current develope branch, but when I test this locally with npm run dev I sometimes experiences this crash:

Bildschirmfoto 2024-05-27 um 14 34 34
shyambhongle commented 3 months ago

Zooming is working better than in the current develope branch, but when I test this locally with npm run dev I sometimes experiences this crash:

Yes, @Norbert, there are some known issues with the zoom-in functionality. Once this PR is merged, we will work on resolving these issues. Regarding the crash, is it specific to this PR, or can it be reproduced on the develop branch as well?

norbertschuler commented 3 months ago

Zooming is working better than in the current develope branch, but when I test this locally with npm run dev I sometimes experiences this crash:

Yes, @norbert, there are some known issues with the zoom-in functionality. Once this PR is merged, we will work on resolving these issues. Regarding the crash, is it specific to this PR, or can it be reproduced on the develop branch as well?

I cannot reproduce the crash on the develop branch.

mohitb35 commented 3 months ago

@norbertschuler I couldn't reproduce the crash you mentioned while running this locally. Was it on a specific project? Or in any specific scenario?

norbertschuler commented 3 months ago

@norbertschuler I couldn't reproduce the crash you mentioned while running this locally. Was it on a specific project? Or in any specific scenario?

I can not reproduce the above crash any more with the latest version now. On Vercel it works fine for me, locally with npm run dev(also tested with npm run build & npm run start -p 3000) the zooming does not always work. Check the attached video. But if it works on Vercel with the builded version I am fine.

https://github.com/Plant-for-the-Planet-org/planet-webapp/assets/1532418/1fe0e807-a798-4de1-83ac-13328fa44bef

mohitb35 commented 3 months ago

Zoom works on the built version on Vercel, or at least it works as well as the current webapp on production. I think we can get this out, and handle the zoom issues separately.