Skip to content

Further mobile performance optimizations for the Fire Event Explorer #36

@dzole0311

Description

@dzole0311

Context

Creating an issue to track further mobile improvements for the Fire Event Explorer. Low prio until we align on next steps for the tool with the wider team.

We recently implemented the new mobile layout of the Fire Event Explorer (thanks to @snmln). The app now displays properly on smaller screens, but map performance on mobile devices still needs improvements depending on how much we expect people to use it via mobile.

Currently, panning and zooming feels laggy: polygons tend to "drag behind" the basemap. On desktop this is less noticeable, unlike on mobiles. Two likely causes are:

  1. Frequent viewState updates through the Zustand store
  2. Complex geometries being rendered (e.g. large fires in Canada) which could be heavy for mobile devices

I've pushed some additional Deck.gl optimizations (see this PR for details), but for further improvements we have two potential paths:

  1. Simplify the mobile UX even more (smaller LOE):
  • Disable fire selection on mobile
  • Only display the most recent fire perimeter (the initial view when the app is first opened)
  • This keeps mobile as a lightweight "quick-view" experience
  1. Optimize the UX / rendering (larger LOE):
  • Limit the amount of perimeters/geometries being shown on mobiles
  • Investigate other potential improvement routes

cc @aboydnw @faustoperez @snmln

Acceptance Criteria

  • Mobile users can pan/zoom without polygons visibly lagging behind the basemap
  • (Option A) Fire selection is disabled on mobile, only latest perimeter is shown
  • (Option B) Perimeter geometries are simplified enough to improve responsiveness on mobile

Definition of Done

  • Unit tests
  • (Where applicable) Automated playwright tests to cover primary use case(s)
  • Merged to develop in relevant repo
  • (?) Tested in instance context (GHG, earth.gov, template instance, etc)
  • Relevant details of work are shared in a team forum (PR, ticket, slack, etc) to support knowledge sharing

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions