Improve map performance

[K-Markopoulos]

The goal is to improve initial load of the map and provide smooth scrolling and zooming. The main cause is that we are rendering (and re-rendering many times) 5.000+ markers at once.

Changes

• Incrementally mount site markers. Mount only visible markers, to avoid mounting all at once and freezing the UI. Keep the mounted to avoid re-mounting.
• Replace siteOnMap selector with isSelected selector which caused all markers to re-render when selected site was changed.
• Add back marker clustering.
• Move "fly to selected site" logic to map component and remove double rendering.
• Add back offset markers functionality.
• Investigate cluster icon color not matching alert levels.

[pullrequest]

⚠️ This pull request was not sent to the PullRequest network because the pull request is a draft.

[github-actions]

Build succeeded and deployed at https://aqualink-app-1069.surge.sh
(hash d814ec4 deployed at 2024-12-18T16:44:41)

[ericboucher]

@K-Markopoulos could you rebase on the last version of the reef-check frontend so that we can deploy it to programize for testing?

[K-Markopoulos]

@K-Markopoulos could you rebase on the last version of the reef-check frontend so that we can deploy it to programize for testing?

@ericboucher Sure but what's the plan for testing? This PR doesn't have any overlapping changes with the reef-check frontend PRs. The generated link: https://aqualink-app-1069.surge.sh/ shows the reef-check sites on the map as well.

[pullrequest]

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:

• Comments posted to any areas of potential concern or improvement.
• Detailed feedback or actions needed to resolve issues that are found.
• Turnaround times vary, but we aim to be swift.

---

@K-Markopoulos you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 178
- 98

66% TSX
34% TypeScript

Type of change

Feature - These changes are adding a new feature or improvement to existing code.

[pullrequest]

Nice work here. I don’t have any security concerns with these changes.

Graham C

---

Reviewed with ❤️ by PullRequest

[K-Markopoulos]

Comparing different clustering options

Options	Screenshot	Full map
maxClusterRadius={80}, sizes (1k, 100, 10, 1): [100,64,48,36]
maxClusterRadius={60}, sizes: [50,44,36,32]
background: max alert color

[pullrequest]

PullRequest reviewed the updates made to #1069 up until the latest commit (75d5c5c). No further issues were found.

Reviewed by:

Graham C

[Caesarh97]

@K-Markopoulos I like the clustering icons. I like when we clearly show how many sites that experience what heat stress. I think the white center clarify this the most.

If we would color the center, then we should display the most abundant heat stress level for the specific area. I think we should maybe separate the center and the outside circle a little bit more if we’d choose this choice. See example below.

Which do you think would be best?

[pullrequest]

PullRequest reviewed the updates made to #1069 up until the latest commit (d814ec4). No further issues were found.

Reviewed by:

Graham C

[pullrequest]

Due to inactivity, PullRequest has cancelled this review job. You can reactivate the code review job from the PullRequest dashboard.