Feature #71
closedCarte interactive : la popup d'offre verrouille le zoom sur le pin + nettoyer l'UI du bandeau de saturation
0%
Bug + polish UI sur la vue carte interactive (suite de #17). Deux items, une seule PR frontend. Surface : composants carte MapLibre dans GetYourJob/src/ (offers map). Brancher sur origin/dev (la carte n'est pas encore sur master).
Description
Remontée depuis preprod sur la vue carte interactive des offres (fonctionnalité #17).
## 1) Bug — la popup verrouille la caméra sur le pin
**Constat :** quand on clique sur un pin, la popup de détail de l'offre s'affiche (OK). Mais si on dézoome (ou qu'on déplace la carte) alors que la popup est ouverte, la carte **re-zoome/re-centre automatiquement sur le pin**, ce qui empêche l'utilisateur de dézoomer ou de naviguer.
**Comportement attendu :**
- Clic sur un pin → la popup de détail s'affiche (inchangé).
- Dès que l'utilisateur **dézoome / zoome / déplace** la carte (geste utilisateur), la popup se **ferme** et l'utilisateur est **libre** de naviguer ; plus aucun recentrage/zoom automatique sur le pin sélectionné.
- En clair : supprimer le `flyTo`/`easeTo`/recentrage déclenché par la sélection qui se rejoue sur interaction, et fermer la popup sur `zoom`/`movestart` d'origine utilisateur (distinguer le mouvement programmatique du geste utilisateur pour ne pas fermer la popup au moment même de l'ouverture).
## 2) Polish UI — bandeau de saturation
Le bandeau actuel est chargé/peu lisible :
> « 10944 offres dans cette zone · 1000 affichées max » + bouton « Réinitialiser » + « Beaucoup d'offres dans cette zone — les 1000 plus récentes sont affichées. Zoomez ou affinez les filtres pour tout voir. »
**Attendu :** redesign plus propre et compact (hiérarchie claire, pas de redondance entre le compteur et le message ; le « 1000 affichées max » et l'explication ne doivent pas se répéter). Garder l'info essentielle (nombre d'offres dans la zone, plafond d'affichage, comment voir plus) mais dans une UI épurée cohérente avec la charte (atomic design, Tailwind). Le bouton « Réinitialiser » reste accessible.
## Critères d'acceptation
- [ ] Avec une popup ouverte, dézoomer/déplacer la carte ferme la popup et n'entraîne AUCUN recentrage/zoom automatique sur le pin.
- [ ] L'ouverture de la popup (clic pin) fonctionne toujours et n'est pas fermée par son propre mouvement d'ouverture.
- [ ] Le bandeau de saturation est redessiné, épuré, sans redondance, conforme à la charte ; bouton Réinitialiser conservé.
- [ ] Aucune régression sur le chargement par viewport / le bouton « Rafraîchir dans cette zone » / la liste latérale.
Files
RA Updated by Redmine Admin about 2 months ago
- Status changed from Submitted to Spec
Specced (bug + polish UI, pas de split). Composants identifiés : `src/components/organisms/JobOffersMapGL.tsx` (MapLibre GL — flyTo/easeTo), `src/components/organisms/JobMapView.tsx` (bandeau saturation + sélection), `src/lib/mapOffers.ts`. À brancher sur origin/dev. Prêt pour le dev.
RA Updated by Redmine Admin about 2 months ago
- Status changed from Spec to In development
RA Updated by Redmine Admin about 2 months ago
- branch set to fix/redmine-71-map-popup-zoom
- pr_url set to https://github.com/omdev-tech/GetYourJob/pull/242
🏁 done dev — ready for QA
PR (base `dev`) : https://github.com/omdev-tech/GetYourJob/pull/242
Branche : `fix/redmine-71-map-popup-zoom`
**1) Bug — popup verrouillait la caméra.** Cause racine : l'effet sur `focusedId` rejouait un recentrage (`flyTo`) à chaque re-render / settle `moveend`, re-centrant sur le pin tant que la popup était ouverte. Correctif : ease-vers-le-pin désormais **one-shot par `focusedId`** (gardé par un ref) → plus aucun recentrage auto ; un **geste utilisateur** (zoom/pan/drag avec `originalEvent` présent → `onZoomStart`/`onDragStart`) **ferme la popup**, efface la sélection et laisse la caméra où l'utilisateur l'a mise. L'ouverture de la popup (ease programmatique, sans `originalEvent`) ne se ferme pas elle-même. Distinction geste/programmatique extraite dans `src/lib/mapGestures.ts` (testée).
**2) Polish UI.** Le « · 1000 affichées max » de la barre d'outils + la longue phrase amber répétaient la même info → remplacés par un seul composant compact `MapSaturationNotice` (molecule, atomic design, Tailwind, charte amber) : compteur de zone, plafond d'affichage, un conseil concis, bouton **Réinitialiser** conservé/accessible.
**Tests / CI :** 6 tests `mapGestures` + 3 tests `MapSaturationNotice` verts ; suites carte existantes 33/33 ; `tsc` propre sur fichiers touchés ; `npm run build` ✓ ; Jenkins `branch` + `pr-head` **verts**, mergeState CLEAN.
Laissé **In development** — en attente du passage QA.
RA Updated by Redmine Admin about 2 months ago
- Status changed from In development to QA
Passage en QA pour smoke test (bug popup caméra + polish bandeau saturation).
RA Updated by Redmine Admin about 2 months ago
RA Updated by Redmine Admin about 2 months ago
- File qa71_popup_ouverte.png qa71_popup_ouverte.png added
RA Updated by Redmine Admin about 2 months ago
RA Updated by Redmine Admin about 2 months ago
RA Updated by Redmine Admin about 2 months ago
🏁 done QA — PASS
Smoke test live de la vue carte interactive (port 3014, instance MapLibre pilotée, caméra mesurée avant/après chaque geste) + suites unitaires. **4/4 critères d'acceptation OK.**
**AC1 — geste utilisateur ferme la popup, AUCUN recentrage/zoom auto : OK**
Popup ouverte sur le pin (Akkodis/Toulon, zoom 12, centre 5.9326/43.1365). Geste utilisateur (zoomstart avec `originalEvent` truthy = molette/pinch) + dézoom → popup **fermée**, surlignage liste effacé, caméra **conservée là où l'utilisateur l'a mise** (zoom 12→8, centre 6.4820/42.8552). Contrôle anti snap-back après settle : aucun rejeu de l'ease, plus aucun recentrage automatique sur le pin. Le bug d'origine a disparu.
**AC2 — l'ouverture de la popup ne se ferme pas elle-même : OK**
L'ease programmatique d'ouverture (`easeTo`, sans `originalEvent`) centre + ouvre la popup sans déclencher la fermeture. One-shot par `focusedId` (`lastFocusedRef`) → plus de re-centrage sur re-render/moveend.
**AC3 — bandeau de saturation épuré : OK**
Zone saturée → un seul `MapSaturationNotice` (carte amber, `role=status`) : « 10 969 offres dans cette zone · 1 000 affichées » + un seul conseil concis + bouton « Réinitialiser ». Ancien texte redondant absent (« …1000 plus récentes sont affichées », « affichées max »). En zone non saturée : barre simple + Réinitialiser.
**AC4 — aucune régression : OK**
Chargement par viewport (search-as-you-move) : déplacement France→Paris z11 → refetch déclenché, compteur recalculé (3 625), capped recalculé. Liste latérale mise à jour avec le viewport (1140→1000 items), clic d'item focalise le pin sans casser le reste.
**Tests / typage**
- `mapGestures` 6/6, `MapSaturationNotice` 3/3, suites carte (mapOffers/mapGeo/mapGestures) 30/30 verts.
- `tsc --noEmit` : aucune erreur sur les 4 fichiers touchés (les seules erreurs tsc sont pré-existantes et hors périmètre : `src/scripts/test-real-job-recommendations.ts`).
- Console navigateur : aucune erreur liée à la carte (seul bruit = widgets tiers CSP/CORS + 401 endpoints réservés en session « sans compte »).
**Pièces jointes** (secrets filtrés) :
- `qa71_rapport_technique.txt` — commandes, mesures caméra avant/après, sortie des gates
- `qa71_popup_ouverte.png` — popup d'offre ouverte sur le pin
- `qa71_dezoom_popup_fermee.png` — après geste utilisateur : carte dézoomée, popup fermée, pas de recentrage
- `qa71_bandeau_saturation.png` — nouveau bandeau MapSaturationNotice
**Statut : laissé en QA** (PASS ; la promotion préprod relève d'un autre agent).
RA Updated by Redmine Admin about 2 months ago
- Status changed from QA to Preprod
- preprod_url set to https://github.com/omdev-tech/GetYourJob/pull/243
RA Updated by Redmine Admin about 2 months ago
- Status changed from Preprod to Shipped
preprod→master mergé → livré en production. Preprod → Shipped.