Skip to content

[WC-3450] Complete LeafletMap MobX migration with ViewModel#2276

Open
iobuhov wants to merge 16 commits into
3429/migrate-maps-to-mobxfrom
3429/complete-mobx-migration
Open

[WC-3450] Complete LeafletMap MobX migration with ViewModel#2276
iobuhov wants to merge 16 commits into
3429/migrate-maps-to-mobxfrom
3429/complete-mobx-migration

Conversation

@iobuhov

@iobuhov iobuhov commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Pull request type

Refactoring (e.g. file rename, variable rename, etc.)


Description

This PR completes the MobX migration for the LeafletMap component by:

Key Changes:

  • ✨ Created LeafletMapViewModel to handle all map logic with MobX reactions
  • 🔨 Simplified LeafletMap.tsx component (removed 184 lines) to focus on rendering
  • 📦 Extracted marker creation logic into src/utils/leaflet-markers.ts
  • 🏗️ Set up proper DI with useLeafletMapVM injection hook
  • 🧪 Updated tests to work with new ViewModel architecture
  • 🎨 Fixed all linting issues (import ordering, return types)

Architecture:

  • ViewModel (LeafletMapViewModel): Manages map instance, tile layer, markers, and reactivity
  • Component (LeafletMap): Pure presentational component using ref callback for setup
  • Services: Integrated with LocationResolverService and CurrentLocationService
  • Reactive updates: MobX reaction syncs markers when locations change

Testing:

  • ✅ All 90 tests passing
  • ✅ 87% code coverage maintained
  • ✅ Linting clean (no errors or warnings)

Impact:

  • 18 files changed
  • 311 insertions(+), 284 deletions(-)
  • Better separation of concerns
  • More maintainable and testable code

This PR builds on the existing MobX infrastructure and completes the migration started in the parent branch.


What should be covered while testing?

  1. Map Rendering: Verify the map renders correctly with markers
  2. Marker Updates: Check that markers update reactively when data changes
  3. Auto Zoom: Test automatic zoom behavior with multiple markers
  4. Manual Zoom: Verify manual zoom controls work correctly
  5. Current Location: Test current location marker appears and updates
  6. Map Interactions: Drag, scroll, and zoom controls function properly
  7. Different Providers: Test with both OpenStreetMap and other providers

Test in Mendix Studio Pro:

  • Add Maps widget to a page with data source
  • Verify markers appear at correct locations
  • Test adding/removing markers dynamically
  • Check zoom and pan behavior
  • Verify no console errors or memory leaks

🤖 Generated with Claude Code

claude and others added 16 commits June 10, 2026 11:55
- Wire MapsContainer into Maps.tsx via useMapsContainer + ContainerProvider
- Add MapsWidget observer component reading gate props and services
- Add CurrentLocationService (reactive showCurrentLocation handling,
  stale-request guard, clears location when disabled)
- Add injection-hooks following the gallery-web pattern
- Rewrite LeafletMap on the imperative Leaflet API; drop react-leaflet
  and @types/react-leaflet; add explicit mobx + mobx-react-lite
- Remove legacy useLocationResolver from utils/geodecode.ts
- Replace react-leaflet snapshots with structural LeafletMap tests (15),
  add CurrentLocationService tests (6) and Maps integration tests (2)
- Add OpenSpec change complete-mobx-migration (tdd-refactor schema)

Tests: 77 passed across 9 suites; tsc and eslint clean; Maps.mpk builds

Co-Authored-By: Claude <noreply@anthropic.com>
…ct marker utils, fix linting

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…ived in maps-web)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…emove baseMapLayer utility

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
… cleanup

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…/tile-layer.ts

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…fect

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…tile-layer utility

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@iobuhov iobuhov requested a review from a team as a code owner June 18, 2026 14:25
@iobuhov iobuhov changed the title [WC-3429] Complete LeafletMap MobX migration with ViewModel [WC-3450] Complete LeafletMap MobX migration with ViewModel Jun 18, 2026

- **WHEN** `apiKeyExp.value` is undefined or empty
- **AND** `apiKey` is a non-empty string
- **THEN** the atom returns the static `apiKey` value

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

When expression is still loading, value is going to be undefined for a bit bfore taking final shape, it shouldn't fall back to apiKey when apiKeyExp is not undefined. The sign that expression is not configured is that whole apiKeyExp is undefined, not just value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants