From b16b389b22857e23bbd3229e67346cc2e5dce3a6 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Thu, 16 May 2024 16:41:21 +0200
Subject: [PATCH 01/14] =?UTF-8?q?[feat]=20Suppression=20de=20la=20liste=20?=
 =?UTF-8?q?des=20types=20de=20points=20d'int=C3=A9r=C3=AAt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/InterestPoint/types.ts  |  4 +-
 .../map/layers/InterestPointLayer.tsx         | 16 ++--
 .../tools/interestPoint/EditInterestPoint.tsx | 80 +++++++++----------
 3 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/frontend/src/features/InterestPoint/types.ts b/frontend/src/features/InterestPoint/types.ts
index d4cc4be0a..bf6fdd2c5 100644
--- a/frontend/src/features/InterestPoint/types.ts
+++ b/frontend/src/features/InterestPoint/types.ts
@@ -8,7 +8,7 @@ export type InterestPoint = {
   feature?: Feature<LineString>
   name: string
   observations: string
-  type: string
+  // type: string
   uuid: string
 }
 
@@ -17,7 +17,7 @@ export type NewInterestPoint = {
   feature?: Feature<LineString>
   name: string | null
   observations: string | null
-  type: string | null
+  // type: string | null
   uuid: string
 }
 
diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
index a40c40e46..22d1c531f 100644
--- a/frontend/src/features/map/layers/InterestPointLayer.tsx
+++ b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -1,7 +1,7 @@
 import { usePrevious } from '@mtes-mct/monitor-ui'
 import GeoJSON from 'ol/format/GeoJSON'
 import LineString from 'ol/geom/LineString'
-import Draw from 'ol/interaction/Draw'
+import Draw, { DrawEvent } from 'ol/interaction/Draw'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { getLength } from 'ol/sphere'
@@ -10,11 +10,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 import { getInterestPointStyle, POIStyle } from './styles/interestPoint.style'
 import { InterestPointLine } from '../../../domain/entities/interestPointLine'
-import {
-  coordinatesAreModified,
-  coordinatesOrTypeAreModified,
-  interestPointType
-} from '../../../domain/entities/interestPoints'
+import { coordinatesAreModified, coordinatesOrTypeAreModified } from '../../../domain/entities/interestPoints'
 import { Layers } from '../../../domain/entities/layers/constants'
 import { MapToolType, OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
 import { globalActions } from '../../../domain/shared_slices/Global'
@@ -164,7 +160,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
           coordinates: null,
           name: null,
           observations: null,
-          type: null,
+          // type: null,
           uuid: uuidv4()
         })
       )
@@ -205,20 +201,20 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     function handleDrawEvents() {
       if (drawObject) {
         drawObject.once(DRAW_START_EVENT, event => {
-          function startDrawing(e, type) {
+          function startDrawing(e: DrawEvent) {
             dispatch(
               updateInterestPointBeingDrawed({
                 coordinates: e.feature.getGeometry().getLastCoordinate(),
                 name: null,
                 observations: null,
-                type,
+                // type,
                 // TODO Check that.
                 uuid: interestPointBeingDrawed!.uuid
               })
             )
           }
 
-          startDrawing(event, interestPointBeingDrawed?.type ?? interestPointType.OTHER)
+          startDrawing(event)
         })
 
         drawObject.once(DRAW_ABORT_EVENT, () => {
diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
index 77c69e772..c6aafd602 100644
--- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
+++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
@@ -1,10 +1,9 @@
-import { Label, MultiRadio, type Option } from '@mtes-mct/monitor-ui'
+import { Label } from '@mtes-mct/monitor-ui'
 import { boundingExtent } from 'ol/extent'
 import { transform, transformExtent } from 'ol/proj'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { interestPointType } from '../../../../domain/entities/interestPoints'
 import { CoordinatesFormat, OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../../domain/entities/map/constants'
 import { addInterestPoint, updateInterestPointKeyBeingDrawed } from '../../../../domain/shared_slices/InterestPoint'
 import { setFitToExtent } from '../../../../domain/shared_slices/Map'
@@ -17,20 +16,20 @@ import { MapToolBox } from '../MapToolBox'
 
 import type { Coordinate } from 'ol/coordinate'
 
-const INTEREST_POINT_OPTIONS: Array<Option> = [
-  {
-    label: 'Moyen de contrôle',
-    value: interestPointType.CONTROL_ENTITY
-  },
-  {
-    label: 'Navire de pêche',
-    value: interestPointType.FISHING_VESSEL
-  },
-  {
-    label: 'Autre point',
-    value: interestPointType.OTHER
-  }
-]
+// const INTEREST_POINT_OPTIONS: Array<Option> = [
+//   {
+//     label: 'Moyen de contrôle',
+//     value: interestPointType.CONTROL_ENTITY
+//   },
+//   {
+//     label: 'Navire de pêche',
+//     value: interestPointType.FISHING_VESSEL
+//   },
+//   {
+//     label: 'Autre point',
+//     value: interestPointType.OTHER
+//   }
+// ]
 
 // TODO Refactor this component
 // - Move the state logic to the reducer
@@ -47,12 +46,12 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
 
   const [localCoordinates, setLocalCoordinates] = useState<Coordinate>([0, 0])
 
-  const defaultType = interestPointBeingDrawed?.type
-    ? INTEREST_POINT_OPTIONS.find(interestPointOption => interestPointOption.value === interestPointBeingDrawed.type)
-        ?.value
-    : INTEREST_POINT_OPTIONS[2]?.value
+  // const defaultType = interestPointBeingDrawed?.type
+  //   ? INTEREST_POINT_OPTIONS.find(interestPointOption => interestPointOption.value === interestPointBeingDrawed.type)
+  //       ?.value
+  //   : INTEREST_POINT_OPTIONS[2]?.value
 
-  const [selectedOption, setSelectedOption] = useState()
+  // const [selectedOption, setSelectedOption] = useState()
 
   /** Coordinates formatted in DD [latitude, longitude] */
   const coordinates: number[] = useMemo(() => {
@@ -101,20 +100,20 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
     [dispatch, interestPointBeingDrawed?.observations]
   )
 
-  const updateType = useCallback(
-    option => {
-      setSelectedOption(option)
-      if (option && interestPointBeingDrawed?.type !== option) {
-        dispatch(
-          updateInterestPointKeyBeingDrawed({
-            key: 'type',
-            value: option
-          })
-        )
-      }
-    },
-    [dispatch, interestPointBeingDrawed?.type]
-  )
+  // const updateType = useCallback(
+  //   option => {
+  //     setSelectedOption(option)
+  //     if (option && interestPointBeingDrawed?.type !== option) {
+  //       dispatch(
+  //         updateInterestPointKeyBeingDrawed({
+  //           key: 'type',
+  //           value: option
+  //         })
+  //       )
+  //     }
+  //   },
+  //   [dispatch, interestPointBeingDrawed?.type]
+  // )
 
   /**
    * Compare with previous coordinates and update interest point coordinates
@@ -157,15 +156,15 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
         dispatch(setFitToExtent(extent))
       }
 
-      // reset state
-      setSelectedOption(undefined)
+      // // reset state
+      // setSelectedOption(undefined)
     }
   }
 
   const cancel = () => {
     close()
     // reset state
-    setSelectedOption(undefined)
+    // setSelectedOption(undefined)
   }
 
   return (
@@ -179,7 +178,7 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
               <SetCoordinates coordinates={coordinates} updateCoordinates={updateCoordinates} />
             </div>
 
-            <MultiRadio
+            {/* <MultiRadio
               key={interestPointBeingDrawed?.uuid}
               data-cy="interest-point-type-radio"
               label="Type de point"
@@ -187,7 +186,8 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
               onChange={updateType}
               options={INTEREST_POINT_OPTIONS}
               value={selectedOption ?? defaultType}
-            />
+            /> */}
+
             <div>
               <Label>Libellé du point</Label>
               <Name

From 5ad16861a85f84856ad379aeb282afa98f27d977 Mon Sep 17 00:00:00 2001
From: Claire Dagan <clairedagan@gmail.com>
Date: Thu, 16 May 2024 16:55:11 +0200
Subject: [PATCH 02/14] [InterestPoint] clean style

---
 .../src/domain/entities/interestPointLine.ts  |  1 -
 .../map/layers/styles/interestPoint.style.ts  | 44 +++++--------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/frontend/src/domain/entities/interestPointLine.ts b/frontend/src/domain/entities/interestPointLine.ts
index aa6374fa3..2481d37d4 100644
--- a/frontend/src/domain/entities/interestPointLine.ts
+++ b/frontend/src/domain/entities/interestPointLine.ts
@@ -2,7 +2,6 @@ import Feature from 'ol/Feature'
 import LineString from 'ol/geom/LineString'
 
 export class InterestPointLine {
-  static typeProperty = 'type'
   static isHiddenByZoomProperty = 'isHiddenByZoom'
   /**
    * InterestPointLine object for building OpenLayers interest point line to draggable overlay
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.ts b/frontend/src/features/map/layers/styles/interestPoint.style.ts
index 8df7764d7..61546893a 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.ts
@@ -4,10 +4,7 @@ import CircleStyle from 'ol/style/Circle'
 import Fill from 'ol/style/Fill'
 import Stroke from 'ol/style/Stroke'
 
-import { InterestPointLine } from '../../../../domain/entities/interestPointLine'
-import { INTEREST_POINT_STYLE, interestPointType } from '../../../../domain/entities/interestPoints'
-
-const interestPointStylesCache = new Map()
+import { INTEREST_POINT_STYLE } from '../../../../domain/entities/interestPoints'
 
 const lineStyle = new Style({
   stroke: new Stroke({
@@ -18,45 +15,24 @@ const lineStyle = new Style({
 })
 
 export const getInterestPointStyle = (feature, resolution) => {
-  const type = feature.get(InterestPointLine.typeProperty)
-
   if (feature?.getId()?.toString()?.includes('line')) {
     return [lineStyle]
   }
 
-  if (!interestPointStylesCache.has(type)) {
-    const filename = getFilename(type)
-
-    const style = new Style({
-      image: new Icon({
-        offset: [0, 0],
-        size: [30, 79],
-        src: filename
-      }),
-      zIndex: INTEREST_POINT_STYLE
-    })
-
-    interestPointStylesCache.set(type, [style])
-  }
+  const style = new Style({
+    image: new Icon({
+      offset: [0, 0],
+      size: [30, 79],
+      src: 'Point_interet_feature_autre.png'
+    }),
+    zIndex: INTEREST_POINT_STYLE
+  })
 
-  const style = interestPointStylesCache.get(type)
-  style[0].getImage().setScale(1 / resolution ** (1 / 8) + 0.3)
+  style.getImage()?.setScale(1 / resolution ** (1 / 8) + 0.3)
 
   return style
 }
 
-const getFilename = type => {
-  switch (type) {
-    case interestPointType.CONTROL_ENTITY:
-      return 'Point_interet_feature_moyen.png'
-    case interestPointType.FISHING_VESSEL:
-      return 'Point_interet_feature_navire.png'
-    case interestPointType.OTHER:
-    default:
-      return 'Point_interet_feature_autre.png'
-  }
-}
-
 export const POIStyle = new Style({
   image: new CircleStyle({
     fill: new Fill({

From 520f9cf54029c21c7a5b22275e6066543cfc6d20 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Fri, 17 May 2024 13:18:20 +0200
Subject: [PATCH 03/14] [feat] Changer la couleur des points sur la carte et
 nettoyage du code mort

---
 .../public/Point_interet_feature_autre.png    | Bin 1882 -> 0 bytes
 .../public/Point_interet_feature_engin.png    | Bin 1613 -> 0 bytes
 .../public/Point_interet_feature_moyen.png    | Bin 1666 -> 0 bytes
 .../public/Point_interet_feature_navire.png   | Bin 1809 -> 0 bytes
 frontend/public/interest_point.svg            |  15 +++++
 .../src/domain/entities/interestPoints.ts     |   3 +-
 frontend/src/features/InterestPoint/types.ts  |   9 ++-
 .../map/layers/InterestPointLayer.tsx         |  52 +++++++++--------
 .../layers/styles/interestPoint.style.test.ts |  54 ++++++++++++++++++
 .../map/layers/styles/interestPoint.style.ts  |  36 ++++++------
 .../map/overlays/InterestPointOverlay.tsx     |   8 ++-
 .../tools/interestPoint/EditInterestPoint.tsx |  52 -----------------
 12 files changed, 128 insertions(+), 101 deletions(-)
 delete mode 100644 frontend/public/Point_interet_feature_autre.png
 delete mode 100644 frontend/public/Point_interet_feature_engin.png
 delete mode 100644 frontend/public/Point_interet_feature_moyen.png
 delete mode 100644 frontend/public/Point_interet_feature_navire.png
 create mode 100644 frontend/public/interest_point.svg
 create mode 100644 frontend/src/features/map/layers/styles/interestPoint.style.test.ts

diff --git a/frontend/public/Point_interet_feature_autre.png b/frontend/public/Point_interet_feature_autre.png
deleted file mode 100644
index 7177c18dd045c8b5a741f5795a027d87da7acd06..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1882
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
U1<ee1IsgCw07*qoM6N<$g3GXj!vFvP

diff --git a/frontend/public/Point_interet_feature_engin.png b/frontend/public/Point_interet_feature_engin.png
deleted file mode 100644
index d9cc4e2316a29c801a8d4e29793c3760e2205aba..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1613
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
LNkvXXu0mjfRHgHp

diff --git a/frontend/public/Point_interet_feature_moyen.png b/frontend/public/Point_interet_feature_moyen.png
deleted file mode 100644
index 414b17c10041d78fa51b6615c87c4487eb5d3815..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1666
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
M07*qoM6N<$f=!qeVE_OC

diff --git a/frontend/public/Point_interet_feature_navire.png b/frontend/public/Point_interet_feature_navire.png
deleted file mode 100644
index 44cb91b646958a6e6189f17ed6bda5bf96d98aeb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1809
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

diff --git a/frontend/public/interest_point.svg b/frontend/public/interest_point.svg
new file mode 100644
index 000000000..c790b3900
--- /dev/null
+++ b/frontend/public/interest_point.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+  <g id="Groupe_5245" data-name="Groupe 5245" transform="translate(164 101)">
+    <g id="Groupe_4639" data-name="Groupe 4639" fill="#CCCFD6">
+      <g id="Tracé_1681" data-name="Tracé 1681" fill="#3B4559">
+        <path d="M -151 -75.59290313720703 L -151.3535461425781 -75.94644927978516 L -152.7295532226562 -77.32244873046875 L -152.8760070800781 -77.46888732910156 L -152.8760070800781 -77.67600250244141 L -152.8760070800781 -83.44999694824219 L -152.8760070800781 -84.02741241455078 L -152.3045349121094 -83.94486236572266 C -151.8092041015625 -83.87332153320312 -151.3946838378906 -83.83999633789062 -151 -83.83999633789062 C -150.6053161621094 -83.83999633789062 -150.1907958984375 -83.87332153320312 -149.6954650878906 -83.94486236572266 L -149.1239929199219 -84.02741241455078 L -149.1239929199219 -83.44999694824219 L -149.1239929199219 -77.67600250244141 L -149.1239929199219 -77.46888732910156 L -149.2704467773438 -77.32244873046875 L -150.6464538574219 -75.94644927978516 L -151 -75.59290313720703 Z" stroke="none"/>
+        <path d="M -152.3760070800781 -83.44999694824219 L -152.3760070800781 -77.67600250244141 L -151 -76.30000305175781 L -149.6239929199219 -77.67600250244141 L -149.6239929199219 -83.44999694824219 C -150.0740051269531 -83.38500213623047 -150.531005859375 -83.33999633789062 -151 -83.33999633789062 C -151.468994140625 -83.33999633789062 -151.9259948730469 -83.38500213623047 -152.3760070800781 -83.44999694824219 M -153.3760070800781 -84.60482025146484 L -152.2330627441406 -84.43972778320312 C -151.7619934082031 -84.37168884277344 -151.3701782226562 -84.33999633789062 -151 -84.33999633789062 C -150.6298217773438 -84.33999633789062 -150.2380065917969 -84.37168884277344 -149.7669372558594 -84.43972778320312 L -148.6239929199219 -84.60482025146484 L -148.6239929199219 -77.26177978515625 L -151 -74.88578796386719 L -153.3760070800781 -77.26177978515625 L -153.3760070800781 -84.60482025146484 Z" stroke="none" fill="#cccfd6"/>
+      </g>
+      <g id="Tracé_1680" data-name="Tracé 1680" fill="#A13112">
+        <path d="M -151 -83.59999084472656 C -151.4325561523438 -83.59999084472656 -151.8847961425781 -83.64051055908203 -152.3825836181641 -83.723876953125 C -152.8599243164062 -83.80394744873047 -153.3368835449219 -83.92852020263672 -153.80029296875 -84.09418487548828 L -153.8059234619141 -84.09619140625 L -153.8114929199219 -84.09833526611328 L -153.8194885253906 -84.10140991210938 C -155.1568908691406 -84.58441162109375 -156.3556213378906 -85.41038513183594 -157.2873992919922 -86.49087524414062 L -157.3003234863281 -86.50438690185547 L -157.310302734375 -86.51481628417969 L -157.3196563720703 -86.52579498291016 C -157.5925750732422 -86.84623718261719 -157.8457794189453 -87.19938659667969 -158.0937347412109 -87.60540008544922 L -158.0965728759766 -87.61005401611328 L -158.0993041992188 -87.61475372314453 C -158.1094970703125 -87.63230133056641 -158.1201629638672 -87.6494140625 -158.1307678222656 -87.66654205322266 C -158.1461334228516 -87.69136047363281 -158.1614379882812 -87.71620178222656 -158.1762084960938 -87.74160766601562 C -158.3872833251953 -88.10494232177734 -158.5741882324219 -88.49405670166016 -158.7318572998047 -88.89835357666016 C -158.7472381591797 -88.93715667724609 -158.7623748779297 -88.97897338867188 -158.7775268554688 -89.02097320556641 C -158.7847595214844 -89.04110717773438 -158.7920227050781 -89.06127166748047 -158.7995300292969 -89.08144378662109 L -158.800537109375 -89.08411407470703 L -158.8014831542969 -89.08680725097656 C -158.9574432373047 -89.52046203613281 -159.0711975097656 -89.93131256103516 -159.1492462158203 -90.34281158447266 C -159.1565246582031 -90.38307189941406 -159.1617736816406 -90.41921234130859 -159.1669158935547 -90.45528411865234 C -159.1693572998047 -90.47231292724609 -159.1717529296875 -90.48931884765625 -159.1744384765625 -90.50619506835938 C -159.2589263916016 -91.00249481201172 -159.3000030517578 -91.45845794677734 -159.3000030517578 -91.90000152587891 C -159.3000030517578 -96.47663116455078 -155.5766448974609 -100.1999969482422 -151 -100.1999969482422 C -146.4233551025391 -100.1999969482422 -142.6999969482422 -96.47663116455078 -142.6999969482422 -91.90000152587891 C -142.6999969482422 -91.45845794677734 -142.7410583496094 -91.00253295898438 -142.8255615234375 -90.50623321533203 C -142.8282470703125 -90.48931884765625 -142.8306579589844 -90.47225189208984 -142.8330841064453 -90.45518493652344 C -142.8382263183594 -90.41917419433594 -142.8434753417969 -90.38310241699219 -142.8498992919922 -90.34743499755859 C -142.9288177490234 -89.93128204345703 -143.0425720214844 -89.52044677734375 -143.1985168457031 -89.08680725097656 L -143.199462890625 -89.08411407470703 L -143.2004699707031 -89.08144378662109 C -143.2079772949219 -89.06127166748047 -143.2152404785156 -89.04110717773438 -143.2224731445312 -89.02097320556641 C -143.2376251220703 -88.97897338867188 -143.2527618408203 -88.93715667724609 -143.2691650390625 -88.89576721191406 C -143.4258117675781 -88.49405670166016 -143.6127166748047 -88.10494232177734 -143.8236541748047 -87.7418212890625 C -143.8385620117188 -87.71620178222656 -143.8538665771484 -87.69136047363281 -143.8692321777344 -87.66654205322266 C -143.8798370361328 -87.6494140625 -143.8905029296875 -87.63230133056641 -143.9006958007812 -87.61475372314453 L -143.9034271240234 -87.61005401611328 L -143.9062652587891 -87.60540008544922 C -144.1541748046875 -87.19943237304688 -144.4073791503906 -86.84628295898438 -144.6803436279297 -86.52579498291016 L -144.6859741210938 -86.51918029785156 L -144.6918334960938 -86.51278686523438 L -144.7080078125 -86.49506378173828 C -145.6427001953125 -85.41189575195312 -146.8431549072266 -84.58439636230469 -148.1805114746094 -84.10140991210938 L -148.1885070800781 -84.09833526611328 L -148.1940765380859 -84.09619140625 L -148.19970703125 -84.09418487548828 C -148.6631164550781 -83.92852020263672 -149.1400756835938 -83.80394744873047 -149.6172943115234 -83.72389221191406 C -150.1152038574219 -83.64051055908203 -150.5674438476562 -83.59999084472656 -151 -83.59999084472656 Z" stroke="none"/>
+        <path d="M -151 -99.69999694824219 C -155.3079986572266 -99.69999694824219 -158.8000030517578 -96.20800018310547 -158.8000030517578 -91.90000152587891 C -158.8000030517578 -91.45200347900391 -158.7539978027344 -91.01500701904297 -158.6809997558594 -90.58699035644531 C -158.6730041503906 -90.53700256347656 -158.6670074462891 -90.48600769042969 -158.6580047607422 -90.43599700927734 C -158.5809936523438 -90.02999114990234 -158.4680023193359 -89.63700103759766 -158.3309936523438 -89.25599670410156 C -158.3090057373047 -89.19699096679688 -158.2890014648438 -89.13800048828125 -158.2660064697266 -89.08000183105469 C -158.1190032958984 -88.7030029296875 -157.9450073242188 -88.33899688720703 -157.7440032958984 -87.99299621582031 C -157.718994140625 -87.94999694824219 -157.6920013427734 -87.90899658203125 -157.6670074462891 -87.86599731445312 C -157.4490051269531 -87.50900268554688 -157.2089996337891 -87.16700744628906 -156.9389953613281 -86.84999084472656 L -156.9170074462891 -86.82700347900391 C -156.0480041503906 -85.81600189208984 -154.9239959716797 -85.03099060058594 -153.6450042724609 -84.57000732421875 L -153.6320037841797 -84.56500244140625 C -153.2039947509766 -84.41200256347656 -152.7590026855469 -84.29400634765625 -152.3000030517578 -84.21700286865234 C -151.8760070800781 -84.14600372314453 -151.4440002441406 -84.09999084472656 -151 -84.09999084472656 C -150.5559997558594 -84.09999084472656 -150.1239929199219 -84.14600372314453 -149.6999969482422 -84.21700286865234 C -149.2409973144531 -84.29400634765625 -148.7960052490234 -84.41200256347656 -148.3679962158203 -84.56500244140625 L -148.3549957275391 -84.57000732421875 C -147.0760040283203 -85.03099060058594 -145.9519958496094 -85.81700134277344 -145.0820007324219 -86.82700347900391 L -145.0610046386719 -86.84999084472656 C -144.7910003662109 -87.16700744628906 -144.5509948730469 -87.50900268554688 -144.3329925537109 -87.86599731445312 C -144.3079986572266 -87.90899658203125 -144.281005859375 -87.94999694824219 -144.2559967041016 -87.99299621582031 C -144.0549926757812 -88.33899688720703 -143.8809967041016 -88.7030029296875 -143.7339935302734 -89.08000183105469 C -143.7109985351562 -89.13800048828125 -143.6909942626953 -89.19699096679688 -143.6690063476562 -89.25599670410156 C -143.5319976806641 -89.63700103759766 -143.4190063476562 -90.02999114990234 -143.3419952392578 -90.43599700927734 C -143.3329925537109 -90.48600769042969 -143.3269958496094 -90.53700256347656 -143.3190002441406 -90.58699035644531 C -143.2460021972656 -91.01500701904297 -143.1999969482422 -91.45200347900391 -143.1999969482422 -91.90000152587891 C -143.1999969482422 -96.20800018310547 -146.6920013427734 -99.69999694824219 -151 -99.69999694824219 M -151 -100.6999969482422 C -146.1476593017578 -100.6999969482422 -142.1999969482422 -96.75233459472656 -142.1999969482422 -91.90000152587891 C -142.1999969482422 -91.43075561523438 -142.2432556152344 -90.94815063476562 -142.3322296142578 -90.42476654052734 C -142.3343048095703 -90.41147613525391 -142.3361663818359 -90.39810180664062 -142.3380737304688 -90.38471221923828 C -142.3440856933594 -90.34259033203125 -142.3503265380859 -90.3004150390625 -142.3578338623047 -90.25868225097656 L -142.3595275878906 -90.2496337890625 C -142.4425354003906 -89.81200408935547 -142.5630645751953 -89.37629699707031 -142.7279968261719 -88.91761016845703 L -142.73193359375 -88.90689086914062 C -142.7388000488281 -88.88842010498047 -142.7454376220703 -88.86996459960938 -142.7520751953125 -88.85154724121094 C -142.7686614990234 -88.80548095703125 -142.7853240966797 -88.75966644287109 -142.8032684326172 -88.71426391601562 C -142.9700469970703 -88.28691101074219 -143.1678924560547 -87.87525177001953 -143.3913269042969 -87.49065399169922 C -143.4086608886719 -87.46085357666016 -143.4263153076172 -87.43209075927734 -143.4440765380859 -87.40340423583984 C -143.4522552490234 -87.39019012451172 -143.4605255126953 -87.37705230712891 -143.4683990478516 -87.363525390625 L -143.4795532226562 -87.34480285644531 C -143.7413024902344 -86.91616058349609 -144.0095825195312 -86.54221343994141 -144.2996978759766 -86.20159149169922 L -144.3341522216797 -86.16298675537109 C -145.3229217529297 -85.01904296875 -146.5919036865234 -84.14455413818359 -148.0054779052734 -83.63301086425781 L -148.0313873291016 -83.62336730957031 C -148.5225067138672 -83.44780731201172 -149.0282440185547 -83.31572723388672 -149.5345611572266 -83.23078155517578 C -150.0602111816406 -83.14276123046875 -150.5394744873047 -83.09999084472656 -151 -83.09999084472656 C -151.4605255126953 -83.09999084472656 -151.9397888183594 -83.14276123046875 -152.4651641845703 -83.23073577880859 C -152.9717559814453 -83.31572723388672 -153.4774932861328 -83.44780731201172 -153.9686126708984 -83.62336730957031 L -153.9945068359375 -83.63301086425781 C -155.4062805175781 -84.14389038085938 -156.6721343994141 -85.01531982421875 -157.6574401855469 -86.15437316894531 L -157.7003021240234 -86.20159149169922 C -157.9904479980469 -86.54226684570312 -158.2587280273438 -86.91622161865234 -158.5204620361328 -87.34482574462891 L -158.5316009521484 -87.363525390625 C -158.5394744873047 -87.37705230712891 -158.5477447509766 -87.39019012451172 -158.5559234619141 -87.40340423583984 C -158.5736846923828 -87.43209075927734 -158.5913391113281 -87.46085357666016 -158.6084136962891 -87.49022674560547 C -158.8321075439453 -87.87525177001953 -159.0299530029297 -88.28691101074219 -159.1967315673828 -88.71426391601562 C -159.2146759033203 -88.75966644287109 -159.2313385009766 -88.80548095703125 -159.2479248046875 -88.85154724121094 C -159.2545623779297 -88.86996459960938 -159.2611999511719 -88.88842010498047 -159.26806640625 -88.90689086914062 L -159.2720031738281 -88.91761016845703 C -159.4369354248047 -89.37627410888672 -159.5574645996094 -89.81197357177734 -159.6404876708984 -90.24961090087891 L -159.6421966552734 -90.25887298583984 C -159.6496887207031 -90.30051422119141 -159.6559143066406 -90.34260559082031 -159.6619110107422 -90.38462066650391 C -159.663818359375 -90.39801025390625 -159.6656799316406 -90.411376953125 -159.6677551269531 -90.42464447021484 C -159.7567443847656 -90.94806671142578 -159.8000030517578 -91.43072509765625 -159.8000030517578 -91.90000152587891 C -159.8000030517578 -96.75233459472656 -155.8523406982422 -100.6999969482422 -151 -100.6999969482422 Z" stroke="none" fill="#cccfd6"/>
+      </g>
+    </g>
+    <rect id="Rectangle_6540" data-name="Rectangle 6540" width="26" height="26" transform="translate(-164 -101)" fill="none"/>
+  </g>
+</svg>
diff --git a/frontend/src/domain/entities/interestPoints.ts b/frontend/src/domain/entities/interestPoints.ts
index dd2084365..7317217de 100644
--- a/frontend/src/domain/entities/interestPoints.ts
+++ b/frontend/src/domain/entities/interestPoints.ts
@@ -4,7 +4,8 @@ export const interestPointType = {
   OTHER: 'OTHER'
 }
 
-export const INTEREST_POINT_STYLE = 150
+export const INTEREST_POINT_STYLE_ZINDEX = 150
+export const INTEREST_POINT_STYLE_ICON_FILENAME = 'interest_point.svg'
 
 export function coordinatesOrTypeAreModified(drawingFeatureToUpdate, interestPointBeingDrawed) {
   return (
diff --git a/frontend/src/features/InterestPoint/types.ts b/frontend/src/features/InterestPoint/types.ts
index bf6fdd2c5..225075c19 100644
--- a/frontend/src/features/InterestPoint/types.ts
+++ b/frontend/src/features/InterestPoint/types.ts
@@ -1,23 +1,22 @@
-import type { Coordinates, IconProps } from '@mtes-mct/monitor-ui'
+import type { IconProps } from '@mtes-mct/monitor-ui'
+import type { Coordinate } from 'ol/coordinate'
 import type Feature from 'ol/Feature'
 import type { LineString } from 'ol/geom'
 import type { FunctionComponent } from 'react'
 
 export type InterestPoint = {
-  coordinates: Coordinates
+  coordinates: Coordinate
   feature?: Feature<LineString>
   name: string
   observations: string
-  // type: string
   uuid: string
 }
 
 export type NewInterestPoint = {
-  coordinates: Coordinates | null
+  coordinates: Coordinate | null
   feature?: Feature<LineString>
   name: string | null
   observations: string | null
-  // type: string | null
   uuid: string
 }
 
diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
index 22d1c531f..af308a0f7 100644
--- a/frontend/src/features/map/layers/InterestPointLayer.tsx
+++ b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -1,6 +1,8 @@
 import { usePrevious } from '@mtes-mct/monitor-ui'
+import Feature from 'ol/Feature'
 import GeoJSON from 'ol/format/GeoJSON'
 import LineString from 'ol/geom/LineString'
+import Point from 'ol/geom/Point'
 import Draw, { DrawEvent } from 'ol/interaction/Draw'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
@@ -8,7 +10,7 @@ import { getLength } from 'ol/sphere'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import { getInterestPointStyle, POIStyle } from './styles/interestPoint.style'
+import { POIStyle, getInterestPointStyle } from './styles/interestPoint.style'
 import { InterestPointLine } from '../../../domain/entities/interestPointLine'
 import { coordinatesAreModified, coordinatesOrTypeAreModified } from '../../../domain/entities/interestPoints'
 import { Layers } from '../../../domain/entities/layers/constants'
@@ -30,7 +32,7 @@ import { InterestPointOverlay } from '../overlays/InterestPointOverlay'
 
 import type { NewInterestPoint } from '../../InterestPoint/types'
 import type { BaseMapChildrenProps } from '../BaseMap'
-import type Feature from 'ol/Feature'
+import type { Coordinate } from 'ol/coordinate'
 
 const DRAW_START_EVENT = 'drawstart'
 const DRAW_ABORT_EVENT = 'drawabort'
@@ -57,7 +59,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   const [interestPointToCoordinates, setInterestPointToCoordinates] = useState(new Map())
   const previousInterestPointBeingDrawed = usePrevious<NewInterestPoint | null>(interestPointBeingDrawed)
   const deleteInterestPoint = useCallback(
-    uuid => {
+    (uuid: string) => {
       const feature = GetVectorSource().getFeatureById(uuid)
       if (feature) {
         GetVectorSource().removeFeature(feature)
@@ -75,7 +77,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     [dispatch]
   )
   const moveInterestPointLine = useCallback(
-    (uuid, coordinates, nextCoordinates, offset) => {
+    (uuid: string | number, coordinates: Coordinate, nextCoordinates: Coordinate, offset: any) => {
       const featureId = InterestPointLine.getFeatureId(uuid)
 
       if (interestPointToCoordinates.has(featureId)) {
@@ -83,9 +85,9 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
         const interestPointFeature = GetVectorSource().getFeatureById(uuid)
 
         if (existingLabelLineFeature) {
-          const geom = interestPointFeature?.getGeometry()
-          if (geom) {
-            existingLabelLineFeature.setGeometry(new LineString([geom.getCoordinates(), nextCoordinates]))
+          const geometry = interestPointFeature?.getGeometry()
+          if (geometry) {
+            existingLabelLineFeature.setGeometry(new LineString([nextCoordinates, geometry.getFlatCoordinates()]))
           }
         }
       } else {
@@ -102,7 +104,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   )
 
   const modifyInterestPoint = useCallback(
-    uuid => {
+    (uuid: string) => {
       dispatch(globalActions.hideSideButtons())
       dispatch(editInterestPoint(uuid))
       dispatch(globalActions.setIsMapToolVisible(MapToolType.INTEREST_POINT))
@@ -114,7 +116,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     const interestPointVectorLayer = new VectorLayer({
       renderBuffer: 7,
       source: GetVectorSource(),
-      style: (feature, resolution) => getInterestPointStyle(feature, resolution),
+      style: (feature, resolution) => getInterestPointStyle(feature?.getId()?.toString()?.includes('line'), resolution),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
@@ -160,7 +162,6 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
           coordinates: null,
           name: null,
           observations: null,
-          // type: null,
           uuid: uuidv4()
         })
       )
@@ -202,16 +203,19 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       if (drawObject) {
         drawObject.once(DRAW_START_EVENT, event => {
           function startDrawing(e: DrawEvent) {
-            dispatch(
-              updateInterestPointBeingDrawed({
-                coordinates: e.feature.getGeometry().getLastCoordinate(),
-                name: null,
-                observations: null,
-                // type,
-                // TODO Check that.
-                uuid: interestPointBeingDrawed!.uuid
-              })
-            )
+            const geometry = e.feature.getGeometry()
+            if (geometry instanceof Point) {
+              const coordinates = geometry.getLastCoordinate()
+              dispatch(
+                updateInterestPointBeingDrawed({
+                  coordinates,
+                  name: null,
+                  observations: null,
+                  // TODO Check that.
+                  uuid: interestPointBeingDrawed!.uuid
+                })
+              )
+            }
           }
 
           startDrawing(event)
@@ -246,9 +250,11 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
         if (drawingFeatureToUpdate && coordinatesOrTypeAreModified(drawingFeatureToUpdate, interestPointBeingDrawed)) {
           const { feature, ...interestPointWithoutFeature } = interestPointBeingDrawed
-          const geom = drawingFeatureToUpdate.getGeometry()
-          // TODO Remove this any.
-          geom?.setCoordinates(interestPointWithoutFeature.coordinates as any)
+          const geometry = drawingFeatureToUpdate.getGeometry()
+          if (interestPointWithoutFeature.coordinates) {
+            // TODO [17/05/2024] typage à refacto: Openlayer fonctionne avec Coordinate[] et Coordinate
+            geometry?.setCoordinates(interestPointWithoutFeature.coordinates as unknown as Coordinate[])
+          }
           drawingFeatureToUpdate.setProperties(interestPointWithoutFeature)
 
           const nextFeature = new GeoJSON().writeFeatureObject(drawingFeatureToUpdate, {
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.test.ts b/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
new file mode 100644
index 000000000..1d7beaf68
--- /dev/null
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from '@jest/globals'
+import { THEME } from '@mtes-mct/monitor-ui'
+import { Icon, Stroke, Style } from 'ol/style'
+
+import { getInterestPointStyle } from './interestPoint.style'
+import {
+  INTEREST_POINT_STYLE_ICON_FILENAME,
+  INTEREST_POINT_STYLE_ZINDEX
+} from '../../../../domain/entities/interestPoints'
+
+describe('getInterestPointStyle', () => {
+  it('should return stroke style when it should style it', async () => {
+    // Given
+    const shouldStyleStroke = true
+    const dummyResolution = 1
+
+    // When
+    const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
+
+    // Then
+    const styleExpected = [
+      new Style({
+        stroke: new Stroke({
+          color: THEME.color.slateGray,
+          lineDash: [4, 4],
+          width: 2
+        })
+      })
+    ]
+
+    expect(strokeStyle).toEqual(styleExpected)
+  })
+  it('should return a icon', async () => {
+    // Given
+    const shouldStyleStroke = false
+    const dummyResolution = 1
+
+    // When
+    const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
+
+    // Then
+    const styleExpected = new Style({
+      image: new Icon({
+        offset: [0, 0],
+        scale: 1 / dummyResolution ** (1 / 8) + 0.3,
+        size: [30, 79],
+        src: INTEREST_POINT_STYLE_ICON_FILENAME
+      }),
+      zIndex: INTEREST_POINT_STYLE_ZINDEX
+    })
+
+    expect(styleExpected).toEqual(strokeStyle)
+  })
+})
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.ts b/frontend/src/features/map/layers/styles/interestPoint.style.ts
index 61546893a..03cea8368 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.ts
@@ -4,32 +4,34 @@ import CircleStyle from 'ol/style/Circle'
 import Fill from 'ol/style/Fill'
 import Stroke from 'ol/style/Stroke'
 
-import { INTEREST_POINT_STYLE } from '../../../../domain/entities/interestPoints'
+import {
+  INTEREST_POINT_STYLE_ICON_FILENAME,
+  INTEREST_POINT_STYLE_ZINDEX
+} from '../../../../domain/entities/interestPoints'
 
-const lineStyle = new Style({
-  stroke: new Stroke({
-    color: THEME.color.slateGray,
-    lineDash: [4, 4],
-    width: 2
+const getStrokeStyles = () => [
+  new Style({
+    stroke: new Stroke({
+      color: THEME.color.slateGray,
+      lineDash: [4, 4],
+      width: 2
+    })
   })
-})
+]
 
-export const getInterestPointStyle = (feature, resolution) => {
-  if (feature?.getId()?.toString()?.includes('line')) {
-    return [lineStyle]
+export const getInterestPointStyle = (shouldStyleStroke: boolean | undefined, resolution: number) => {
+  if (shouldStyleStroke) {
+    return getStrokeStyles()
   }
-
   const style = new Style({
     image: new Icon({
-      offset: [0, 0],
-      size: [30, 79],
-      src: 'Point_interet_feature_autre.png'
+      displacement: [0, 10],
+      scale: 1 / resolution ** (1 / 8) + 0.3,
+      src: INTEREST_POINT_STYLE_ICON_FILENAME
     }),
-    zIndex: INTEREST_POINT_STYLE
+    zIndex: INTEREST_POINT_STYLE_ZINDEX
   })
 
-  style.getImage()?.setScale(1 / resolution ** (1 / 8) + 0.3)
-
   return style
 }
 
diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index f9ceaa63a..32519088f 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -1,4 +1,4 @@
-import { Accent, Icon, IconButton, Size, usePrevious, type Coordinates } from '@mtes-mct/monitor-ui'
+import { Accent, Icon, IconButton, Size } from '@mtes-mct/monitor-ui'
 import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'
@@ -11,12 +11,14 @@ import { useAppSelector } from '../../../hooks/useAppSelector'
 import { useMoveOverlayWhenDragging } from '../../../hooks/useMoveOverlayWhenDragging'
 import { getCoordinates } from '../../../utils/coordinates'
 
+import type { Coordinate } from 'ol/coordinate'
+
 const X = 0
 const Y = 1
 export const initialOffsetValue = [-90, 10]
 
 // TODO Move that into a utils file.
-function coordinatesAreModified(nextCoordinates: Coordinates, previousCoordinates: Coordinates): boolean {
+function coordinatesAreModified(nextCoordinates: Coordinate, previousCoordinates: Coordinate): boolean {
   return (
     !Number.isNaN(nextCoordinates[0]) &&
     !Number.isNaN(nextCoordinates[1]) &&
@@ -27,7 +29,7 @@ function coordinatesAreModified(nextCoordinates: Coordinates, previousCoordinate
 }
 
 type InterestPointOverlayProps = {
-  coordinates: Coordinates
+  coordinates: Coordinate
   deleteInterestPoint: (uuid: string) => void
   featureIsShowed: boolean
   map: any
diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
index c6aafd602..4dc549183 100644
--- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
+++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
@@ -16,21 +16,6 @@ import { MapToolBox } from '../MapToolBox'
 
 import type { Coordinate } from 'ol/coordinate'
 
-// const INTEREST_POINT_OPTIONS: Array<Option> = [
-//   {
-//     label: 'Moyen de contrôle',
-//     value: interestPointType.CONTROL_ENTITY
-//   },
-//   {
-//     label: 'Navire de pêche',
-//     value: interestPointType.FISHING_VESSEL
-//   },
-//   {
-//     label: 'Autre point',
-//     value: interestPointType.OTHER
-//   }
-// ]
-
 // TODO Refactor this component
 // - Move the state logic to the reducer
 // - Use formik (or at least uncontrolled form components)
@@ -46,13 +31,6 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
 
   const [localCoordinates, setLocalCoordinates] = useState<Coordinate>([0, 0])
 
-  // const defaultType = interestPointBeingDrawed?.type
-  //   ? INTEREST_POINT_OPTIONS.find(interestPointOption => interestPointOption.value === interestPointBeingDrawed.type)
-  //       ?.value
-  //   : INTEREST_POINT_OPTIONS[2]?.value
-
-  // const [selectedOption, setSelectedOption] = useState()
-
   /** Coordinates formatted in DD [latitude, longitude] */
   const coordinates: number[] = useMemo(() => {
     if (!interestPointBeingDrawed?.coordinates?.length) {
@@ -100,21 +78,6 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
     [dispatch, interestPointBeingDrawed?.observations]
   )
 
-  // const updateType = useCallback(
-  //   option => {
-  //     setSelectedOption(option)
-  //     if (option && interestPointBeingDrawed?.type !== option) {
-  //       dispatch(
-  //         updateInterestPointKeyBeingDrawed({
-  //           key: 'type',
-  //           value: option
-  //         })
-  //       )
-  //     }
-  //   },
-  //   [dispatch, interestPointBeingDrawed?.type]
-  // )
-
   /**
    * Compare with previous coordinates and update interest point coordinates
    * @param {Coordinate} nextCoordinates - Coordinates ([latitude, longitude]) to update, in decimal format.
@@ -155,16 +118,11 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
         const extent = transformExtent(boundingExtent([formattedCoordinates]), WSG84_PROJECTION, OPENLAYERS_PROJECTION)
         dispatch(setFitToExtent(extent))
       }
-
-      // // reset state
-      // setSelectedOption(undefined)
     }
   }
 
   const cancel = () => {
     close()
-    // reset state
-    // setSelectedOption(undefined)
   }
 
   return (
@@ -178,16 +136,6 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
               <SetCoordinates coordinates={coordinates} updateCoordinates={updateCoordinates} />
             </div>
 
-            {/* <MultiRadio
-              key={interestPointBeingDrawed?.uuid}
-              data-cy="interest-point-type-radio"
-              label="Type de point"
-              name="interestPointTypeRadio"
-              onChange={updateType}
-              options={INTEREST_POINT_OPTIONS}
-              value={selectedOption ?? defaultType}
-            /> */}
-
             <div>
               <Label>Libellé du point</Label>
               <Name

From ebdb8ad8902a1ee8dd1e583710a7fb5c9e2690c9 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Fri, 17 May 2024 16:49:28 +0200
Subject: [PATCH 04/14] =?UTF-8?q?feat:=20Pouvoir=20masquer/afficher=20tous?=
 =?UTF-8?q?=20les=20points=20d'int=C3=A9r=C3=AAt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/domain/shared_slices/Global.ts   |   2 +
 .../features/coordinates/SetCoordinates.tsx   |   9 +-
 frontend/src/features/map/BaseMap.tsx         |   8 +-
 .../map/layers/InterestPointLayer.tsx         |  64 ++++---
 .../layers/Missions/SelectedMissionLayer.ts   |   1 +
 .../map/overlays/InterestPointOverlay.tsx     |  16 +-
 .../tools/interestPoint/EditInterestPoint.tsx | 180 ++++++------------
 .../interestPoint/InterestPointMapButton.tsx  |  47 +++--
 .../tools/measurements/CustomCircleRange.tsx  |   1 -
 9 files changed, 144 insertions(+), 184 deletions(-)

diff --git a/frontend/src/domain/shared_slices/Global.ts b/frontend/src/domain/shared_slices/Global.ts
index ece8872ae..4041d590a 100644
--- a/frontend/src/domain/shared_slices/Global.ts
+++ b/frontend/src/domain/shared_slices/Global.ts
@@ -55,6 +55,7 @@ type GlobalStateType = {
   displayMissionsLayer: boolean
   displayMissionSelectedLayer: boolean
   displayMissionToAttachLayer: boolean
+  displayInterestPointLayer: boolean
   displayReportingToAttachLayer: boolean
 
   // state entry for other children components whom visibility is already handled by parent components
@@ -105,6 +106,7 @@ const initialState: GlobalStateType = {
   displayMissionEditingLayer: true,
   displayMissionSelectedLayer: true,
   displayMissionToAttachLayer: true,
+  displayInterestPointLayer: true,
   displayReportingToAttachLayer: true,
 
   // state entry for other children components whom visibility is already handled by parent components
diff --git a/frontend/src/features/coordinates/SetCoordinates.tsx b/frontend/src/features/coordinates/SetCoordinates.tsx
index 843a8dd68..ccb953913 100644
--- a/frontend/src/features/coordinates/SetCoordinates.tsx
+++ b/frontend/src/features/coordinates/SetCoordinates.tsx
@@ -1,3 +1,4 @@
+import { Label } from '@mtes-mct/monitor-ui'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
@@ -39,7 +40,12 @@ export function SetCoordinates({ coordinates, updateCoordinates }: SetCoordinate
     }
   }, [coordinates, updateCoordinates, coordinatesFormat])
 
-  return <Body>{getCoordinatesInput()}</Body>
+  return (
+    <div>
+      <Label>Coordonnées</Label>
+      <Body>{getCoordinatesInput()}</Body>
+    </div>
+  )
 }
 
 const Body = styled.div`
@@ -52,7 +58,6 @@ const Body = styled.div`
     border: none;
     color: ${p => p.theme.color.gunMetal};
     height: 27px;
-    margin-top: 7px;
     padding-left: 8px;
   }
 `
diff --git a/frontend/src/features/map/BaseMap.tsx b/frontend/src/features/map/BaseMap.tsx
index afd7c2fb0..00b62fc07 100644
--- a/frontend/src/features/map/BaseMap.tsx
+++ b/frontend/src/features/map/BaseMap.tsx
@@ -42,6 +42,8 @@ import { useClickOutsideWhenOpened } from '../../hooks/useClickOutsideWhenOpened
 
 import type { VectorLayerWithName } from '../../domain/types/layer'
 import type { MapBrowserEvent } from 'ol'
+import type VectorLayer from 'ol/layer/Vector'
+import type VectorSource from 'ol/source/Vector'
 
 export type BaseMapChildrenProps = {
   currentFeatureListOver: SerializedFeature<Record<string, any>>[] | undefined
@@ -51,6 +53,8 @@ export type BaseMapChildrenProps = {
   pixel: number[] | undefined
 }
 
+type VectorLayerType = VectorLayerWithName & VectorLayer<VectorSource>
+
 export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChildrenProps> | null> }) {
   const dispatch = useAppDispatch()
   const [currentMap, setCurrentMap] = useState<OpenLayerMap | undefined>(undefined)
@@ -88,7 +92,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
       const features = current_map.getFeaturesAtPixel(event.pixel, {
         hitTolerance: HIT_PIXEL_TO_TOLERANCE,
         layerFilter: layer => {
-          const typedLayer = layer as VectorLayerWithName
+          const typedLayer = layer as VectorLayerType
 
           const layerName = typedLayer.name ?? typedLayer.get('name')
 
@@ -124,7 +128,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
           const features = current_map.getFeaturesAtPixel(event.pixel, {
             hitTolerance: HIT_PIXEL_TO_TOLERANCE,
             layerFilter: layer => {
-              const typedLayer = layer as VectorLayerWithName
+              const typedLayer = layer as VectorLayerType
 
               const layerName = typedLayer.name ?? typedLayer.get('name')
 
diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
index af308a0f7..04fa50f76 100644
--- a/frontend/src/features/map/layers/InterestPointLayer.tsx
+++ b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -7,7 +7,7 @@ import Draw, { DrawEvent } from 'ol/interaction/Draw'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { getLength } from 'ol/sphere'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
 import { POIStyle, getInterestPointStyle } from './styles/interestPoint.style'
@@ -42,34 +42,27 @@ export const MIN_ZOOM = 7
 
 export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   const dispatch = useAppDispatch()
+  const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
   const { interestPointBeingDrawed, interestPoints, isDrawing, isEditing, triggerInterestPointFeatureDeletion } =
     useAppSelector(state => state.interestPoint)
 
   const [drawObject, setDrawObject] = useState<Draw>()
-  const vectorSourceRef = useRef() as React.MutableRefObject<VectorSource<Feature<LineString>>>
-  const GetVectorSource = () => {
-    if (vectorSourceRef.current === undefined) {
-      vectorSourceRef.current = new VectorSource({ wrapX: false })
-    }
-
-    return vectorSourceRef.current
-  }
 
   const [interestPointToCoordinates, setInterestPointToCoordinates] = useState(new Map())
   const previousInterestPointBeingDrawed = usePrevious<NewInterestPoint | null>(interestPointBeingDrawed)
   const deleteInterestPoint = useCallback(
     (uuid: string) => {
-      const feature = GetVectorSource().getFeatureById(uuid)
+      const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
       if (feature) {
-        GetVectorSource().removeFeature(feature)
-        GetVectorSource().changed()
+        interestPointVectorSourceRef.current.removeFeature(feature)
+        interestPointVectorSourceRef.current.changed()
       }
 
-      const featureLine = GetVectorSource().getFeatureById(InterestPointLine.getFeatureId(uuid))
+      const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
       if (featureLine) {
-        GetVectorSource().removeFeature(featureLine)
-        GetVectorSource().changed()
+        interestPointVectorSourceRef.current.removeFeature(featureLine)
+        interestPointVectorSourceRef.current.changed()
       }
 
       dispatch(removeInterestPoint(uuid))
@@ -81,8 +74,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       const featureId = InterestPointLine.getFeatureId(uuid)
 
       if (interestPointToCoordinates.has(featureId)) {
-        const existingLabelLineFeature = GetVectorSource().getFeatureById(featureId)
-        const interestPointFeature = GetVectorSource().getFeatureById(uuid)
+        const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
+        const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
 
         if (existingLabelLineFeature) {
           const geometry = interestPointFeature?.getGeometry()
@@ -93,7 +86,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       } else {
         const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
 
-        GetVectorSource().addFeature(interestPointLineFeature)
+        interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
       }
 
       const nextVesselToCoordinates = interestPointToCoordinates
@@ -112,19 +105,26 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     [dispatch]
   )
 
-  useEffect(() => {
-    const interestPointVectorLayer = new VectorLayer({
+  const interestPointVectorSourceRef = useRef(new VectorSource({ wrapX: false })) as MutableRefObject<
+    VectorSource<Feature<LineString>>
+  >
+  const interestPointVectorLayer = useRef(
+    new VectorLayer({
       renderBuffer: 7,
-      source: GetVectorSource(),
+      source: interestPointVectorSourceRef.current,
       style: (feature, resolution) => getInterestPointStyle(feature?.getId()?.toString()?.includes('line'), resolution),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
     })
-    map?.getLayers().push(interestPointVectorLayer)
+  ) as MutableRefObject<VectorLayer<VectorSource>>
+
+  useEffect(() => {
+    map?.getLayers().push(interestPointVectorLayer.current)
 
     return () => {
-      map?.removeLayer(interestPointVectorLayer)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      map?.removeLayer(interestPointVectorLayer.current)
     }
   }, [map])
 
@@ -148,7 +148,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
           return feats
         }, [] as Array<Feature<LineString>>)
-        GetVectorSource().addFeatures(features)
+        interestPointVectorSourceRef.current.addFeatures(features)
       }
     }
 
@@ -169,7 +169,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
     function drawNewFeatureOnMap() {
       const draw = new Draw({
-        source: GetVectorSource(),
+        source: interestPointVectorSourceRef.current,
         stopClick: true,
         style: POIStyle,
         type: 'Point'
@@ -246,7 +246,9 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   useEffect(() => {
     function modifyFeatureWhenCoordinatesOrTypeModified() {
       if (interestPointBeingDrawed?.coordinates?.length && interestPointBeingDrawed?.uuid) {
-        const drawingFeatureToUpdate = GetVectorSource().getFeatureById(interestPointBeingDrawed.uuid)
+        const drawingFeatureToUpdate = interestPointVectorSourceRef.current.getFeatureById(
+          interestPointBeingDrawed.uuid
+        )
 
         if (drawingFeatureToUpdate && coordinatesOrTypeAreModified(drawingFeatureToUpdate, interestPointBeingDrawed)) {
           const { feature, ...interestPointWithoutFeature } = interestPointBeingDrawed
@@ -293,7 +295,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
           const featureId = InterestPointLine.getFeatureId(interestPointBeingDrawed.uuid)
           if (interestPointToCoordinates.has(featureId)) {
             interestPointToCoordinates.delete(featureId)
-            const feature = GetVectorSource().getFeatureById(featureId)
+            const feature = interestPointVectorSourceRef.current.getFeatureById(featureId)
             if (feature && !!interestPointBeingDrawed.coordinates) {
               feature.setGeometry(
                 new LineString([interestPointBeingDrawed.coordinates, interestPointBeingDrawed.coordinates])
@@ -307,6 +309,10 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     initLineWhenInterestPointCoordinatesModified()
   }, [interestPointBeingDrawed, interestPointToCoordinates, previousInterestPointBeingDrawed])
 
+  useEffect(() => {
+    interestPointVectorLayer.current.setVisible(displayInterestPointLayer)
+  }, [displayInterestPointLayer])
+
   return (
     <div>
       {interestPoints && Array.isArray(interestPoints)
@@ -315,7 +321,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
               key={interestPoint.uuid}
               coordinates={interestPoint.coordinates}
               deleteInterestPoint={deleteInterestPoint}
-              featureIsShowed
+              isVisible={displayInterestPointLayer}
               map={map}
               modifyInterestPoint={modifyInterestPoint}
               moveLine={moveInterestPointLine}
@@ -329,7 +335,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
         <InterestPointOverlay
           coordinates={interestPointBeingDrawed.coordinates}
           deleteInterestPoint={() => dispatch(endInterestPointDraw()) && dispatch(deleteInterestPointBeingDrawed())}
-          featureIsShowed={!!drawObject}
+          isVisible={displayInterestPointLayer}
           map={map}
           modifyInterestPoint={() => {}}
           moveLine={moveInterestPointLine}
diff --git a/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts b/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts
index e9230cd17..dec95989b 100644
--- a/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts
+++ b/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts
@@ -60,6 +60,7 @@ export function SelectedMissionLayer({ map }: BaseMapChildrenProps) {
       zIndex: Layers.ACTIONS.zIndex
     })
   ) as MutableRefObject<VectorLayerWithName>
+
   ;(selectedMissionActionsVectorLayerRef.current as VectorLayerWithName).name = Layers.ACTIONS.code
 
   useEffect(() => {
diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index 32519088f..e001267ca 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -3,7 +3,7 @@ import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'
 import { getLength } from 'ol/sphere'
-import { createRef, useCallback, useEffect, useRef, useState } from 'react'
+import { createRef, useCallback, useEffect, useRef } from 'react'
 import styled from 'styled-components'
 
 import { OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
@@ -31,7 +31,7 @@ function coordinatesAreModified(nextCoordinates: Coordinate, previousCoordinates
 type InterestPointOverlayProps = {
   coordinates: Coordinate
   deleteInterestPoint: (uuid: string) => void
-  featureIsShowed: boolean
+  isVisible: boolean
   map: any
   modifyInterestPoint: (uuid: string) => void
   moveLine: (uuid: string, previousCoordinates: number[], nextCoordinates: number[], offset: number[]) => void
@@ -42,7 +42,7 @@ type InterestPointOverlayProps = {
 export function InterestPointOverlay({
   coordinates,
   deleteInterestPoint,
-  featureIsShowed,
+  isVisible,
   map,
   modifyInterestPoint,
   moveLine,
@@ -57,7 +57,6 @@ export function InterestPointOverlay({
   const currentCoordinates = useRef([])
   const interestPointCoordinates = useRef(coordinates)
   const isThrottled = useRef(false)
-  const [showed, setShowed] = useState(false)
   const overlayRef = useRef<Overlay | null>(null)
   const setOverlayRef = () => {
     if (overlayRef.current === null) {
@@ -102,7 +101,7 @@ export function InterestPointOverlay({
     [interestPointCoordinates.current]
   )
 
-  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, showed)
+  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, isVisible)
   const previousCoordinates = usePrevious(coordinates)
 
   useEffect(() => {
@@ -126,9 +125,6 @@ export function InterestPointOverlay({
         overlayRef.current?.setElement(ref.current ?? undefined)
 
         map.addOverlay(overlayRef.current)
-        if (featureIsShowed) {
-          setShowed(true)
-        }
 
         return () => {
           map.removeOverlay(overlayRef.current)
@@ -146,7 +142,7 @@ export function InterestPointOverlay({
   return (
     <WrapperToBeKeptForDOMManagement>
       <div ref={ref}>
-        {showed ? (
+        {isVisible ? (
           <InterestPointOverlayElement>
             <Header>
               <Name data-cy="interest-point-name" title={name ?? 'Aucun Libellé'}>
@@ -158,6 +154,7 @@ export function InterestPointOverlay({
                 Icon={Icon.Edit}
                 onClick={() => modifyInterestPoint(uuid)}
                 size={Size.SMALL}
+                title="Editer"
               />
               <IconButton
                 accent={Accent.TERTIARY}
@@ -165,6 +162,7 @@ export function InterestPointOverlay({
                 Icon={Icon.Delete}
                 onClick={() => deleteInterestPoint(uuid)}
                 size={Size.SMALL}
+                title="Supprimer"
               />
             </Header>
             <Body data-cy="interest-point-observations">{observations ?? 'Aucune observation'}</Body>
diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
index 4dc549183..8ff4e8f69 100644
--- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
+++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
@@ -1,18 +1,24 @@
-import { Label } from '@mtes-mct/monitor-ui'
+import { Accent, Button, Icon, MapMenuDialog, TextInput, Textarea } from '@mtes-mct/monitor-ui'
+import { setDisplayedItems } from 'domain/shared_slices/Global'
 import { boundingExtent } from 'ol/extent'
 import { transform, transformExtent } from 'ol/proj'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
 import { CoordinatesFormat, OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../../domain/entities/map/constants'
-import { addInterestPoint, updateInterestPointKeyBeingDrawed } from '../../../../domain/shared_slices/InterestPoint'
+import {
+  addInterestPoint,
+  deleteInterestPointBeingDrawed,
+  drawInterestPoint,
+  endInterestPointDraw,
+  updateInterestPointKeyBeingDrawed
+} from '../../../../domain/shared_slices/InterestPoint'
 import { setFitToExtent } from '../../../../domain/shared_slices/Map'
 import { saveInterestPointFeature } from '../../../../domain/use_cases/interestPoint/saveInterestPointFeature'
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { coordinatesAreDistinct, getCoordinates } from '../../../../utils/coordinates'
 import { SetCoordinates } from '../../../coordinates/SetCoordinates'
-import { MapToolBox } from '../MapToolBox'
 
 import type { Coordinate } from 'ol/coordinate'
 
@@ -21,13 +27,12 @@ import type { Coordinate } from 'ol/coordinate'
 // - Use formik (or at least uncontrolled form components)
 type EditInterestPointProps = {
   close: () => void
-  healthcheckTextWarning: string | undefined
-  isOpen: boolean
 }
-export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: EditInterestPointProps) {
+export function EditInterestPoint({ close }: EditInterestPointProps) {
   const dispatch = useAppDispatch()
 
   const { interestPointBeingDrawed, isEditing } = useAppSelector(state => state.interestPoint)
+  const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
   const [localCoordinates, setLocalCoordinates] = useState<Coordinate>([0, 0])
 
@@ -126,126 +131,57 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi
   }
 
   return (
-    <Wrapper data-cy="save-interest-point" healthcheckTextWarning={!!healthcheckTextWarning} isOpen={isOpen}>
-      {isOpen && (
-        <>
-          <Header>Créer un point d&apos;intérêt</Header>
-          <Body>
-            <div>
-              <Label>Coordonnées</Label>
-              <SetCoordinates coordinates={coordinates} updateCoordinates={updateCoordinates} />
-            </div>
-
-            <div>
-              <Label>Libellé du point</Label>
-              <Name
-                data-cy="interest-point-name-input"
-                onChange={e => updateName(e.target.value)}
-                type="text"
-                value={interestPointBeingDrawed?.name ?? ''}
-              />
-            </div>
-
-            <div>
-              <Label>Observations</Label>
-              <textarea
-                data-cy="interest-point-observations-input"
-                onChange={e => updateObservations(e.target.value)}
-                value={interestPointBeingDrawed?.observations ?? ''}
-              />
-            </div>
-
-            <ButtonContainer>
-              <OkButton data-cy="interest-point-save" onClick={saveInterestPoint}>
-                OK
-              </OkButton>
-              <CancelButton disabled={isEditing} onClick={cancel}>
-                Annuler
-              </CancelButton>
-            </ButtonContainer>
-          </Body>
-        </>
-      )}
-    </Wrapper>
+    <MapMenuDialog.Container data-cy="save-interest-point">
+      <MapMenuDialog.Header>
+        <MapMenuDialog.CloseButton Icon={Icon.Close} onClick={close} />
+        <MapMenuDialog.Title>Créer un point d&apos;intérêt</MapMenuDialog.Title>
+        <MapMenuDialog.VisibilityButton
+          accent={Accent.SECONDARY}
+          Icon={displayInterestPointLayer ? Icon.Display : Icon.Hide}
+          onClick={() => {
+            dispatch(setDisplayedItems({ displayInterestPointLayer: !displayInterestPointLayer }))
+            if (displayInterestPointLayer) {
+              dispatch(endInterestPointDraw())
+              dispatch(deleteInterestPointBeingDrawed())
+            } else {
+              dispatch(drawInterestPoint())
+            }
+          }}
+        />
+      </MapMenuDialog.Header>
+      <StyledDialogBody>
+        <SetCoordinates coordinates={coordinates} updateCoordinates={updateCoordinates} />
+
+        <TextInput
+          data-cy="interest-point-name-input"
+          label="Libellé du point"
+          name="name"
+          onChange={updateName}
+          value={interestPointBeingDrawed?.name ?? ''}
+        />
+
+        <Textarea
+          data-cy="interest-point-observations-input"
+          label="Observations"
+          name="observations"
+          onChange={updateObservations}
+          value={interestPointBeingDrawed?.observations ?? ''}
+        />
+      </StyledDialogBody>
+      <MapMenuDialog.Footer>
+        <Button data-cy="interest-point-save" onClick={saveInterestPoint}>
+          Créer le point
+        </Button>
+        <Button accent={Accent.SECONDARY} disabled={isEditing} onClick={cancel}>
+          Annuler
+        </Button>
+      </MapMenuDialog.Footer>
+    </MapMenuDialog.Container>
   )
 }
 
-const Name = styled.input`
-  width: 100%;
-`
-
-const CancelButton = styled.button`
-  border: 1px solid ${p => p.theme.color.lightGray};
-  color: ${p => p.theme.color.gunMetal};
-  font-size: 13px;
-  margin: 15px 0 0 15px;
-  padding: 5px 12px;
-  width: 130px;
-
-  :disabled {
-    border: 1px solid ${p => p.theme.color.lightGray};
-    color: ${p => p.theme.color.slateGray};
-  }
-`
-
-const OkButton = styled.button`
-  background: ${p => p.theme.color.charcoal};
-  color: ${p => p.theme.color.gainsboro};
-  font-size: 13px;
-  margin: 15px 0 0;
-  padding: 5px 12px;
-  width: 130px;
-
-  :hover,
-  :focus {
-    background: ${p => p.theme.color.charcoal};
-  }
-`
-
-const Body = styled.div`
-  color: ${p => p.theme.color.slateGray};
-  font-size: 13px;
-  margin: 10px 15px;
-  text-align: left;
+const StyledDialogBody = styled(MapMenuDialog.Body)`
   display: flex;
   flex-direction: column;
   gap: 16px;
-
-  input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    color: ${p => p.theme.color.gunMetal};
-    height: 27px;
-    padding-left: 8px;
-  }
-
-  textarea {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    color: ${p => p.theme.color.gunMetal};
-    min-height: 50px;
-    padding-left: 8px;
-    padding-top: 3px;
-    resize: vertical;
-    width: 100% !important;
-  }
-`
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-`
-
-const Header = styled.div`
-  background: ${p => p.theme.color.charcoal};
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  color: ${p => p.theme.color.gainsboro};
-  font-size: 16px;
-  padding: 9px 0 7px 15px;
-  text-align: left;
-`
-
-const Wrapper = styled(MapToolBox)`
-  top: 0px;
-  width: 306px;
 `
diff --git a/frontend/src/features/map/tools/interestPoint/InterestPointMapButton.tsx b/frontend/src/features/map/tools/interestPoint/InterestPointMapButton.tsx
index cfeacc8c6..3f1499a5a 100644
--- a/frontend/src/features/map/tools/interestPoint/InterestPointMapButton.tsx
+++ b/frontend/src/features/map/tools/interestPoint/InterestPointMapButton.tsx
@@ -1,9 +1,10 @@
-import { Icon } from '@mtes-mct/monitor-ui'
+import { MenuWithCloseButton } from '@features/commonStyles/map/MenuWithCloseButton'
+import { Icon, Size } from '@mtes-mct/monitor-ui'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { EditInterestPoint } from './EditInterestPoint'
 import { MapToolType } from '../../../../domain/entities/map/constants'
-import { globalActions } from '../../../../domain/shared_slices/Global'
+import { globalActions, setDisplayedItems } from '../../../../domain/shared_slices/Global'
 import {
   deleteInterestPointBeingDrawed,
   drawInterestPoint,
@@ -14,13 +15,11 @@ import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { useEscapeFromKeyboardAndExecute } from '../../../../hooks/useEscapeFromKeyboardAndExecute'
 import { ButtonWrapper } from '../../../MainWindow/components/RightMenu/ButtonWrapper'
-import { MapToolButton } from '../MapToolButton'
 
 export function InterestPointMapButton() {
   const dispatch = useAppDispatch()
-  const displayInterestPoint = useAppSelector(state => state.global.displayInterestPoint)
-  const healthcheckTextWarning = useAppSelector(state => state.global.healthcheckTextWarning)
   const isMapToolVisible = useAppSelector(state => state.global.isMapToolVisible)
+  const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
   const isOpen = useMemo(() => isMapToolVisible === MapToolType.INTEREST_POINT, [isMapToolVisible])
   const wrapperRef = useRef(null)
@@ -38,29 +37,39 @@ export function InterestPointMapButton() {
     }
   }, [dispatch, isOpen])
 
-  const openOrCloseInterestPoint = useCallback(() => {
+  const toggleInterestPointMenu = useCallback(() => {
     if (!isOpen) {
-      dispatch(drawInterestPoint())
+      if (displayInterestPointLayer) {
+        dispatch(drawInterestPoint())
+      }
+      dispatch(
+        setDisplayedItems({
+          isControlUnitDialogVisible: false,
+          isControlUnitListDialogVisible: false,
+          isSearchMissionsVisible: false,
+          isSearchReportingsVisible: false,
+          isSearchSemaphoreVisible: false
+        })
+      )
+      dispatch(reduceReportingFormOnMap())
       dispatch(globalActions.setIsMapToolVisible(MapToolType.INTEREST_POINT))
     } else {
       close()
     }
-    dispatch(reduceReportingFormOnMap())
-  }, [close, dispatch, isOpen])
+  }, [close, dispatch, isOpen, displayInterestPointLayer])
 
   return (
     <ButtonWrapper ref={wrapperRef} topPosition={346}>
-      <MapToolButton
-        dataCy="interest-point"
-        icon={Icon.Landmark}
-        isHidden={!displayInterestPoint}
-        isOpen={isOpen}
-        onClick={openOrCloseInterestPoint}
-        style={{ top: 301 }}
-        title={"Créer un point d'intérêt"}
-      />
+      {isOpen && <EditInterestPoint close={close} />}
 
-      <EditInterestPoint close={close} healthcheckTextWarning={healthcheckTextWarning} isOpen={isOpen} />
+      <MenuWithCloseButton.ButtonOnMap
+        className={isOpen ? '_active' : undefined}
+        data-cy="interest-point"
+        Icon={Icon.Landmark}
+        onClick={toggleInterestPointMenu}
+        size={Size.LARGE}
+        title="Créer un point d'intérêt"
+      />
     </ButtonWrapper>
   )
 }
diff --git a/frontend/src/features/map/tools/measurements/CustomCircleRange.tsx b/frontend/src/features/map/tools/measurements/CustomCircleRange.tsx
index 33bb6aa16..a70e82aa1 100644
--- a/frontend/src/features/map/tools/measurements/CustomCircleRange.tsx
+++ b/frontend/src/features/map/tools/measurements/CustomCircleRange.tsx
@@ -122,7 +122,6 @@ export function CustomCircleRange() {
     >
       <Header>Définir une valeur</Header>
       <Body>
-        <p>Coordonnées</p>
         <SetCoordinates coordinates={circleCoordinates} updateCoordinates={updateCoordinates} />
         <p>Distance (rayon)</p>
         <input

From 9f6e222882b84ccf373406dab1135bc6699d5cbc Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Fri, 17 May 2024 17:31:46 +0200
Subject: [PATCH 05/14] =?UTF-8?q?feat=20:=20correction=20du=20d=C3=A9passe?=
 =?UTF-8?q?ment=20des=20observations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/map/overlays/InterestPointOverlay.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index e001267ca..fa2d3d8f8 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -184,16 +184,17 @@ const Body = styled.div`
   font-weight: 500;
   text-align: left;
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
+  word-wrap: break-word;
 `
 
-const Footer = styled.div`
+const Footer = styled.footer`
   padding: 3px;
   font-size: 12px;
   text-align: center;
   color: ${p => p.theme.color.slateGray};
 `
 
-const Header = styled.div`
+const Header = styled.header`
   display: flex;
   height: 30px;
   background: ${p => p.theme.color.gainsboro};

From 86f93298c229678339d7a97d80c6270754c29ca1 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 21 May 2024 11:11:13 +0200
Subject: [PATCH 06/14] [feat] Ajout du useEffect de type componentdidMount
 pour le drag&drop

---
 .../map/overlays/InterestPointOverlay.tsx         |  9 +++++++--
 .../map/overlays/OverlayPositionOnCentroid.tsx    | 15 ++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index fa2d3d8f8..bb0010097 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -3,7 +3,7 @@ import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'
 import { getLength } from 'ol/sphere'
-import { createRef, useCallback, useEffect, useRef } from 'react'
+import { createRef, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
@@ -56,6 +56,7 @@ export function InterestPointOverlay({
   const currentOffset = useRef(initialOffsetValue)
   const currentCoordinates = useRef([])
   const interestPointCoordinates = useRef(coordinates)
+  const [isMounted, setIsMounted] = useState(false)
   const isThrottled = useRef(false)
   const overlayRef = useRef<Overlay | null>(null)
   const setOverlayRef = () => {
@@ -71,6 +72,10 @@ export function InterestPointOverlay({
   }
   setOverlayRef()
 
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   const moveInterestPointWithThrottle = useCallback(
     (target, delay) => {
       if (isThrottled.current) {
@@ -101,7 +106,7 @@ export function InterestPointOverlay({
     [interestPointCoordinates.current]
   )
 
-  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, isVisible)
+  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, isMounted)
   const previousCoordinates = usePrevious(coordinates)
 
   useEffect(() => {
diff --git a/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx b/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx
index 394ae0439..d7cd032b6 100644
--- a/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx
+++ b/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx
@@ -55,12 +55,17 @@ export function OverlayPositionOnCentroid({
   const olOverlayRef = useRef<Overlay | null>(null)
 
   const isThrottled = useRef(false)
-  const [showed, setShowed] = useState(false)
+  const [isMounted, setIsMounted] = useState(false)
+
   const currentCoordinates = useRef<Extent | undefined>()
 
   const [overlayTopLeftMargin, setOverlayTopLeftMargin] = useState([margins.yBottom, margins.xMiddle])
   const currentOffset = useRef(INITIAL_OFFSET_VALUE)
 
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   const attachContentToOverlay = useCallback(
     (ref: HTMLDivElement) => {
       containerRef.current = ref
@@ -92,10 +97,6 @@ export function OverlayPositionOnCentroid({
   useEffect(() => {
     if (map && olOverlayRef.current) {
       map.addOverlay(olOverlayRef.current)
-
-      if (featureIsShowed && !showed) {
-        setShowed(true)
-      }
     }
 
     return () => {
@@ -103,7 +104,7 @@ export function OverlayPositionOnCentroid({
         map.removeOverlay(olOverlayRef.current)
       }
     }
-  }, [map, olOverlayRef, featureIsShowed, showed])
+  }, [map, olOverlayRef, featureIsShowed])
 
   const moveCardWithThrottle = useCallback(
     (target, delay) => {
@@ -158,7 +159,7 @@ export function OverlayPositionOnCentroid({
     }
   }, [dispatch, feature, containerRef, olOverlayRef, map, margins])
 
-  useMoveOverlayWhenDragging(olOverlayRef.current, map, currentOffset, moveCardWithThrottle, showed)
+  useMoveOverlayWhenDragging(olOverlayRef.current, map, currentOffset, moveCardWithThrottle, isMounted)
 
   return (
     <OverlayComponent ref={attachContentToOverlay} $overlayTopLeftMargin={overlayTopLeftMargin} $zIndex={zIndex}>

From 9663536b9806f06a91092809b55c1aef3239d615 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 21 May 2024 11:11:21 +0200
Subject: [PATCH 07/14] [feat] Ajout du useEffect de type componentdidMount
 pour le drag&drop

---
 frontend/.env.example | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/.env.example b/frontend/.env.example
index 0b95b4201..55cec802b 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -45,6 +45,4 @@ FRONTEND_REPORTING_FORM_AUTO_UPDATE=true
 
 FRONTEND_MONITORENV_VERSION=0.0.0
 
-################################################################################
-# MonitorFish
-MONITORFISH_API_KEY=""
\ No newline at end of file
+################################################################################
\ No newline at end of file

From 139d9c5ce59f4a7184d9fff47a1b4950c384d758 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 21 May 2024 11:37:28 +0200
Subject: [PATCH 08/14] [feat] Ajout du useEffect de type componentdidMount
 pour le drag&drop

---
 .../layers/styles/interestPoint.style.test.ts | 28 ++-----------------
 .../map/layers/styles/interestPoint.style.ts  | 22 ++++++++-------
 2 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.test.ts b/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
index 1d7beaf68..0de02384c 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
@@ -1,12 +1,6 @@
 import { describe, expect, it } from '@jest/globals'
-import { THEME } from '@mtes-mct/monitor-ui'
-import { Icon, Stroke, Style } from 'ol/style'
 
-import { getInterestPointStyle } from './interestPoint.style'
-import {
-  INTEREST_POINT_STYLE_ICON_FILENAME,
-  INTEREST_POINT_STYLE_ZINDEX
-} from '../../../../domain/entities/interestPoints'
+import { getIconStyle, getInterestPointStyle, getStrokeStyles } from './interestPoint.style'
 
 describe('getInterestPointStyle', () => {
   it('should return stroke style when it should style it', async () => {
@@ -18,15 +12,7 @@ describe('getInterestPointStyle', () => {
     const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
 
     // Then
-    const styleExpected = [
-      new Style({
-        stroke: new Stroke({
-          color: THEME.color.slateGray,
-          lineDash: [4, 4],
-          width: 2
-        })
-      })
-    ]
+    const styleExpected = getStrokeStyles()
 
     expect(strokeStyle).toEqual(styleExpected)
   })
@@ -39,15 +25,7 @@ describe('getInterestPointStyle', () => {
     const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
 
     // Then
-    const styleExpected = new Style({
-      image: new Icon({
-        offset: [0, 0],
-        scale: 1 / dummyResolution ** (1 / 8) + 0.3,
-        size: [30, 79],
-        src: INTEREST_POINT_STYLE_ICON_FILENAME
-      }),
-      zIndex: INTEREST_POINT_STYLE_ZINDEX
-    })
+    const styleExpected = getIconStyle(dummyResolution)
 
     expect(styleExpected).toEqual(strokeStyle)
   })
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.ts b/frontend/src/features/map/layers/styles/interestPoint.style.ts
index 03cea8368..2bc3091a7 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.ts
@@ -9,7 +9,17 @@ import {
   INTEREST_POINT_STYLE_ZINDEX
 } from '../../../../domain/entities/interestPoints'
 
-const getStrokeStyles = () => [
+export const getIconStyle = (resolution: number) =>
+  new Style({
+    image: new Icon({
+      displacement: [0, 10],
+      scale: 1 / resolution ** (1 / 8) + 0.3,
+      src: INTEREST_POINT_STYLE_ICON_FILENAME
+    }),
+    zIndex: INTEREST_POINT_STYLE_ZINDEX
+  })
+
+export const getStrokeStyles = () => [
   new Style({
     stroke: new Stroke({
       color: THEME.color.slateGray,
@@ -23,16 +33,8 @@ export const getInterestPointStyle = (shouldStyleStroke: boolean | undefined, re
   if (shouldStyleStroke) {
     return getStrokeStyles()
   }
-  const style = new Style({
-    image: new Icon({
-      displacement: [0, 10],
-      scale: 1 / resolution ** (1 / 8) + 0.3,
-      src: INTEREST_POINT_STYLE_ICON_FILENAME
-    }),
-    zIndex: INTEREST_POINT_STYLE_ZINDEX
-  })
 
-  return style
+  return getIconStyle(resolution)
 }
 
 export const POIStyle = new Style({

From f67b4410527245492ab5c0ad79eec9ff2d95e6a7 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 21 May 2024 18:42:30 +0200
Subject: [PATCH 09/14] [feat] cleanup & refacto

---
 .../src/domain/shared_slices/InterestPoint.ts |  15 ++-
 .../coordinates/DDCoordinatesInput.tsx        |   8 --
 .../coordinates/DMDCoordinatesInput.tsx       |   5 -
 .../coordinates/DMSCoordinatesInput.tsx       |   5 -
 .../map/controls/MapCoordinatesBox.tsx        |  26 ++---
 .../map/layers/InterestPointLayer.tsx         | 104 +++++++++++-------
 .../layers/styles/interestPoint.style.test.ts |  32 ------
 .../map/layers/styles/interestPoint.style.ts  |  10 +-
 .../map/overlays/InterestPointOverlay.tsx     |   4 +-
 9 files changed, 85 insertions(+), 124 deletions(-)
 delete mode 100644 frontend/src/features/map/layers/styles/interestPoint.style.test.ts

diff --git a/frontend/src/domain/shared_slices/InterestPoint.ts b/frontend/src/domain/shared_slices/InterestPoint.ts
index 67c67897a..5c9124147 100644
--- a/frontend/src/domain/shared_slices/InterestPoint.ts
+++ b/frontend/src/domain/shared_slices/InterestPoint.ts
@@ -6,18 +6,18 @@ import type { InterestPoint, NewInterestPoint } from '../../features/InterestPoi
 
 interface InterestPointState {
   interestPointBeingDrawed: NewInterestPoint | null
+  interestPointToDelete: string | null
   interestPoints: InterestPoint[]
   isDrawing: boolean
   isEditing: boolean
-  triggerInterestPointFeatureDeletion: string | null
 }
 
 const INITIAL_STATE: InterestPointState = {
   interestPointBeingDrawed: null,
   interestPoints: [],
+  interestPointToDelete: null,
   isDrawing: false,
-  isEditing: false,
-  triggerInterestPointFeatureDeletion: null
+  isEditing: false
 }
 
 const persistConfig = {
@@ -46,7 +46,7 @@ const interestPointSlice = createSlice({
      */
     deleteInterestPointBeingDrawed(state) {
       if (state.interestPointBeingDrawed && !!state.interestPointBeingDrawed.uuid) {
-        state.triggerInterestPointFeatureDeletion = state.interestPointBeingDrawed.uuid
+        state.interestPointToDelete = state.interestPointBeingDrawed.uuid
       }
       state.interestPointBeingDrawed = null
     },
@@ -81,14 +81,13 @@ const interestPointSlice = createSlice({
      */
     removeInterestPoint(state, action: PayloadAction<string>) {
       state.interestPoints = state.interestPoints.filter(interestPoint => interestPoint.uuid !== action.payload)
-      state.isEditing = false
     },
 
     /**
      * Reset the trigger of the interest point deletion feature currently showed
      */
-    resetInterestPointFeatureDeletion(state) {
-      state.triggerInterestPointFeatureDeletion = null
+    resetInterestPointToDelete(state) {
+      state.interestPointToDelete = null
     },
 
     /**
@@ -133,7 +132,7 @@ export const {
   editInterestPoint,
   endInterestPointDraw,
   removeInterestPoint,
-  resetInterestPointFeatureDeletion,
+  resetInterestPointToDelete,
   updateInterestPointBeingDrawed,
   updateInterestPointKeyBeingDrawed
 } = interestPointSlice.actions
diff --git a/frontend/src/features/coordinates/DDCoordinatesInput.tsx b/frontend/src/features/coordinates/DDCoordinatesInput.tsx
index d169d6aef..60758190a 100644
--- a/frontend/src/features/coordinates/DDCoordinatesInput.tsx
+++ b/frontend/src/features/coordinates/DDCoordinatesInput.tsx
@@ -106,12 +106,4 @@ const Error = styled.span`
 const Body = styled.div`
   font-size: 13px;
   text-align: left;
-
-  input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
-  }
 `
diff --git a/frontend/src/features/coordinates/DMDCoordinatesInput.tsx b/frontend/src/features/coordinates/DMDCoordinatesInput.tsx
index 0afc9c37a..142a3b456 100644
--- a/frontend/src/features/coordinates/DMDCoordinatesInput.tsx
+++ b/frontend/src/features/coordinates/DMDCoordinatesInput.tsx
@@ -118,11 +118,6 @@ const Body = styled.div`
   text-align: left;
 
   input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
     width: 200px;
   }
 `
diff --git a/frontend/src/features/coordinates/DMSCoordinatesInput.tsx b/frontend/src/features/coordinates/DMSCoordinatesInput.tsx
index b66030807..ad4229f1b 100644
--- a/frontend/src/features/coordinates/DMSCoordinatesInput.tsx
+++ b/frontend/src/features/coordinates/DMSCoordinatesInput.tsx
@@ -49,11 +49,6 @@ const Body = styled.div`
   text-align: left;
 
   input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
     width: 200px;
   }
 `
diff --git a/frontend/src/features/map/controls/MapCoordinatesBox.tsx b/frontend/src/features/map/controls/MapCoordinatesBox.tsx
index 60a6631d9..b636f9b25 100644
--- a/frontend/src/features/map/controls/MapCoordinatesBox.tsx
+++ b/frontend/src/features/map/controls/MapCoordinatesBox.tsx
@@ -79,18 +79,16 @@ export function MapCoordinatesBox({ map }: BaseMapChildrenProps) {
         <Header data-cy="coordinates-selection" onClick={() => setCoordinatesSelectionIsOpen(false)}>
           Unités des coordonnées
         </Header>
-        <RadioContainer>
-          <MultiRadio
-            data-cy="coordinates-radio"
-            isInline
-            isLabelHidden
-            label="Unités des coordonnées"
-            name="coordinatesRadio"
-            onChange={selectCordinatesFormat}
-            options={COORDINATES_OPTIONS}
-            value={coordinatesFormat}
-          />
-        </RadioContainer>
+        <StyledMultiRadio
+          data-cy="coordinates-radio"
+          isInline
+          isLabelHidden
+          label="Unités des coordonnées"
+          name="coordinatesRadio"
+          onChange={selectCordinatesFormat}
+          options={COORDINATES_OPTIONS}
+          value={coordinatesFormat}
+        />
       </CoordinatesTypeSelection>
       <Coordinates onClick={() => setCoordinatesSelectionIsOpen(!coordinatesSelectionIsOpen)}>
         {getShowedCoordinates(coordinates, coordinatesFormat)} ({coordinatesFormat})
@@ -112,11 +110,11 @@ const getShowedCoordinates = (coordinates, coordinatesFormat) => {
 const StyledCoordinatesContainer = styled.div`
   z-index: 2;
 `
-const RadioContainer = styled.div`
+const StyledMultiRadio = styled(MultiRadio)`
   padding: 12px;
 `
 
-const Header = styled.span`
+const Header = styled.header`
   background-color: ${p => p.theme.color.charcoal};
   color: ${p => p.theme.color.gainsboro};
   padding: 5px 0;
diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
index 04fa50f76..ac34cb5a7 100644
--- a/frontend/src/features/map/layers/InterestPointLayer.tsx
+++ b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -10,7 +10,7 @@ import { getLength } from 'ol/sphere'
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import { POIStyle, getInterestPointStyle } from './styles/interestPoint.style'
+import { POIStyle, getInterestPointStyle, getLinesStyle } from './styles/interestPoint.style'
 import { InterestPointLine } from '../../../domain/entities/interestPointLine'
 import { coordinatesAreModified, coordinatesOrTypeAreModified } from '../../../domain/entities/interestPoints'
 import { Layers } from '../../../domain/entities/layers/constants'
@@ -21,7 +21,7 @@ import {
   editInterestPoint,
   endInterestPointDraw,
   removeInterestPoint,
-  resetInterestPointFeatureDeletion,
+  resetInterestPointToDelete,
   updateInterestPointBeingDrawed,
   updateInterestPointKeyBeingDrawed
 } from '../../../domain/shared_slices/InterestPoint'
@@ -44,27 +44,18 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   const dispatch = useAppDispatch()
   const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
-  const { interestPointBeingDrawed, interestPoints, isDrawing, isEditing, triggerInterestPointFeatureDeletion } =
-    useAppSelector(state => state.interestPoint)
+  const { interestPointBeingDrawed, interestPoints, interestPointToDelete, isDrawing, isEditing } = useAppSelector(
+    state => state.interestPoint
+  )
 
   const [drawObject, setDrawObject] = useState<Draw>()
 
-  const [interestPointToCoordinates, setInterestPointToCoordinates] = useState(new Map())
+  const [interestsPointsToCoordinate, setInterestsPointsToCoordinate] = useState(new Map())
   const previousInterestPointBeingDrawed = usePrevious<NewInterestPoint | null>(interestPointBeingDrawed)
   const deleteInterestPoint = useCallback(
     (uuid: string) => {
-      const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
-      if (feature) {
-        interestPointVectorSourceRef.current.removeFeature(feature)
-        interestPointVectorSourceRef.current.changed()
-      }
-
-      const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
-      if (featureLine) {
-        interestPointVectorSourceRef.current.removeFeature(featureLine)
-        interestPointVectorSourceRef.current.changed()
-      }
-
+      removePoint(uuid)
+      removeLine(uuid)
       dispatch(removeInterestPoint(uuid))
     },
     [dispatch]
@@ -73,27 +64,17 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     (uuid: string | number, coordinates: Coordinate, nextCoordinates: Coordinate, offset: any) => {
       const featureId = InterestPointLine.getFeatureId(uuid)
 
-      if (interestPointToCoordinates.has(featureId)) {
-        const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
-        const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
-
-        if (existingLabelLineFeature) {
-          const geometry = interestPointFeature?.getGeometry()
-          if (geometry) {
-            existingLabelLineFeature.setGeometry(new LineString([nextCoordinates, geometry.getFlatCoordinates()]))
-          }
-        }
+      if (interestsPointsToCoordinate.has(featureId)) {
+        updateLineFromExistingFeature(featureId, uuid, nextCoordinates)
       } else {
-        const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
-
-        interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
+        addLineToFeature(coordinates, nextCoordinates, featureId)
       }
 
-      const nextVesselToCoordinates = interestPointToCoordinates
-      interestPointToCoordinates.set(featureId, { coordinates: nextCoordinates, offset })
-      setInterestPointToCoordinates(nextVesselToCoordinates)
+      const nextFeatureToCoordinates = interestsPointsToCoordinate
+      interestsPointsToCoordinate.set(featureId, { coordinates: nextCoordinates, offset })
+      setInterestsPointsToCoordinate(nextFeatureToCoordinates)
     },
-    [interestPointToCoordinates]
+    [interestsPointsToCoordinate]
   )
 
   const modifyInterestPoint = useCallback(
@@ -112,7 +93,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     new VectorLayer({
       renderBuffer: 7,
       source: interestPointVectorSourceRef.current,
-      style: (feature, resolution) => getInterestPointStyle(feature?.getId()?.toString()?.includes('line'), resolution),
+      style: (feature, resolution) =>
+        shouldStyledLines(feature) ? getLinesStyle() : getInterestPointStyle(resolution),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
@@ -237,11 +219,11 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   }, [dispatch, drawObject, interestPointBeingDrawed])
 
   useEffect(() => {
-    if (triggerInterestPointFeatureDeletion) {
-      deleteInterestPoint(triggerInterestPointFeatureDeletion)
-      resetInterestPointFeatureDeletion()
+    if (interestPointToDelete) {
+      deleteInterestPoint(interestPointToDelete)
+      resetInterestPointToDelete()
     }
-  }, [deleteInterestPoint, triggerInterestPointFeatureDeletion])
+  }, [deleteInterestPoint, interestPointToDelete])
 
   useEffect(() => {
     function modifyFeatureWhenCoordinatesOrTypeModified() {
@@ -293,8 +275,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
         if (distance > 10) {
           const featureId = InterestPointLine.getFeatureId(interestPointBeingDrawed.uuid)
-          if (interestPointToCoordinates.has(featureId)) {
-            interestPointToCoordinates.delete(featureId)
+          if (interestsPointsToCoordinate.has(featureId)) {
+            interestsPointsToCoordinate.delete(featureId)
             const feature = interestPointVectorSourceRef.current.getFeatureById(featureId)
             if (feature && !!interestPointBeingDrawed.coordinates) {
               feature.setGeometry(
@@ -307,7 +289,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     }
 
     initLineWhenInterestPointCoordinatesModified()
-  }, [interestPointBeingDrawed, interestPointToCoordinates, previousInterestPointBeingDrawed])
+  }, [interestPointBeingDrawed, interestsPointsToCoordinate, previousInterestPointBeingDrawed])
 
   useEffect(() => {
     interestPointVectorLayer.current.setVisible(displayInterestPointLayer)
@@ -346,4 +328,42 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       ) : null}
     </div>
   )
+
+  function shouldStyledLines(feature) {
+    return feature?.getId()?.toString()?.includes('line')
+  }
+
+  function addLineToFeature(coordinates: Coordinate, nextCoordinates: Coordinate, featureId: string) {
+    const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
+
+    interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
+  }
+
+  function updateLineFromExistingFeature(featureId: string, uuid: string | number, nextCoordinates: Coordinate) {
+    const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
+    const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
+
+    if (existingLabelLineFeature) {
+      const geometry = interestPointFeature?.getGeometry()
+      if (geometry) {
+        existingLabelLineFeature.setGeometry(new LineString([nextCoordinates, geometry.getFlatCoordinates()]))
+      }
+    }
+  }
+
+  function removeLine(uuid: string) {
+    const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
+    if (featureLine) {
+      interestPointVectorSourceRef.current.removeFeature(featureLine)
+      interestPointVectorSourceRef.current.changed()
+    }
+  }
+
+  function removePoint(uuid: string) {
+    const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
+    if (feature) {
+      interestPointVectorSourceRef.current.removeFeature(feature)
+      interestPointVectorSourceRef.current.changed()
+    }
+  }
 }
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.test.ts b/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
deleted file mode 100644
index 0de02384c..000000000
--- a/frontend/src/features/map/layers/styles/interestPoint.style.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { describe, expect, it } from '@jest/globals'
-
-import { getIconStyle, getInterestPointStyle, getStrokeStyles } from './interestPoint.style'
-
-describe('getInterestPointStyle', () => {
-  it('should return stroke style when it should style it', async () => {
-    // Given
-    const shouldStyleStroke = true
-    const dummyResolution = 1
-
-    // When
-    const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
-
-    // Then
-    const styleExpected = getStrokeStyles()
-
-    expect(strokeStyle).toEqual(styleExpected)
-  })
-  it('should return a icon', async () => {
-    // Given
-    const shouldStyleStroke = false
-    const dummyResolution = 1
-
-    // When
-    const strokeStyle = getInterestPointStyle(shouldStyleStroke, dummyResolution)
-
-    // Then
-    const styleExpected = getIconStyle(dummyResolution)
-
-    expect(styleExpected).toEqual(strokeStyle)
-  })
-})
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.ts b/frontend/src/features/map/layers/styles/interestPoint.style.ts
index 2bc3091a7..a2def835e 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.ts
@@ -19,7 +19,7 @@ export const getIconStyle = (resolution: number) =>
     zIndex: INTEREST_POINT_STYLE_ZINDEX
   })
 
-export const getStrokeStyles = () => [
+export const getLinesStyle = () => [
   new Style({
     stroke: new Stroke({
       color: THEME.color.slateGray,
@@ -29,13 +29,7 @@ export const getStrokeStyles = () => [
   })
 ]
 
-export const getInterestPointStyle = (shouldStyleStroke: boolean | undefined, resolution: number) => {
-  if (shouldStyleStroke) {
-    return getStrokeStyles()
-  }
-
-  return getIconStyle(resolution)
-}
+export const getInterestPointStyle = (resolution: number) => getIconStyle(resolution)
 
 export const POIStyle = new Style({
   image: new CircleStyle({
diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index bb0010097..b12290288 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -183,7 +183,7 @@ export function InterestPointOverlay({
   )
 }
 
-const Body = styled.div`
+const Body = styled.p`
   padding: 10px;
   font-size: 13px;
   font-weight: 500;
@@ -213,7 +213,7 @@ const WrapperToBeKeptForDOMManagement = styled.div`
   z-index: 300;
 `
 
-const InterestPointOverlayElement = styled.div`
+const InterestPointOverlayElement = styled.section`
   background: ${p => p.theme.color.white};
   cursor: grabbing;
   width: 183px;

From d9ad7981aa7dd6b29d4f8f45b1df9c84812ea987 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 21 May 2024 18:43:11 +0200
Subject: [PATCH 10/14] [feat] Ajout et correction des tests e2e

---
 .../e2e/main_window/interest_point.spec.ts    | 320 +++++++++++-------
 .../tools/interestPoint/EditInterestPoint.tsx |   1 +
 2 files changed, 200 insertions(+), 121 deletions(-)

diff --git a/frontend/cypress/e2e/main_window/interest_point.spec.ts b/frontend/cypress/e2e/main_window/interest_point.spec.ts
index 697203c62..89b3c19a7 100644
--- a/frontend/cypress/e2e/main_window/interest_point.spec.ts
+++ b/frontend/cypress/e2e/main_window/interest_point.spec.ts
@@ -6,77 +6,48 @@ context('InterestPoint', () => {
     cy.visit('/#@-824534.42,6082993.21,8.70')
   })
 
-  it('An interest point Should be created When clicking on the map', () => {
-    // When
-    cy.getDataCy('interest-point').click()
-    cy.get('#root').click(490, 580)
-
-    // Then
-    cy.getDataCy('interest-point-name-input').type('Phénomène')
-    cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
-
-    cy.getDataCy('interest-point-name').first().contains('Phénomène')
-    cy.getDataCy('interest-point-observations').first().contains('Est dans la bergerie')
-    cy.getDataCy('interest-point-coordinates').first().contains('47° 4')
-    cy.getDataCy('interest-point-coordinates').first().contains('N')
-    cy.getDataCy('interest-point-coordinates').first().contains('007° 5')
-    cy.getDataCy('interest-point-coordinates').first().contains('W')
-
-    cy.getDataCy('interest-point-save').click()
-  })
-
-  it('Multiple interest points Should be created When clicking on the map', () => {
-    // When
-    cy.getDataCy('interest-point').click()
-    cy.get('#root').click(490, 580)
-    cy.getDataCy('interest-point-name-input').type('Phénomène')
-    cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
-    cy.getDataCy('interest-point-save').click()
-    cy.getDataCy('interest-point-observations').eq(0).contains('Est dans la bergerie')
-    cy.getDataCy('interest-point-observations').should('have.length', 1)
-
-    cy.getDataCy('interest-point').click()
-    cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '__° __′ __″ _ ___° __′ __″ _')
-    cy.get('#root').click(300, 430)
-    cy.getDataCy('interest-point-name-input').type('Phénomène 2')
-    cy.getDataCy('interest-point-observations-input').type('Est encore dans la bergerie')
-    cy.getDataCy('interest-point-save').click()
-    cy.getDataCy('interest-point-observations').should('have.length', 2)
-    cy.getDataCy('interest-point-observations').eq(0).contains('Est encore dans la bergerie')
-
-    cy.getDataCy('interest-point').click()
-    cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '__° __′ __″ _ ___° __′ __″ _')
-    cy.wait(400)
-    cy.get('#root').click(650, 690)
-    cy.getDataCy('interest-point-name-input').type('Phénomène 3')
-    cy.getDataCy('interest-point-observations-input').type('Est encore encore dans la bergerie')
-    cy.getDataCy('interest-point-save').click()
-    cy.getDataCy('interest-point-observations').should('have.length', 3)
-    cy.getDataCy('interest-point-observations').eq(0).contains('Est encore encore dans la bergerie')
-  })
-
-  it('An interest Should be created from input When DD coordinates are selected', () => {
-    // When
-    cy.getDataCy('coordinates-selection').click({ force: true })
-    cy.get('#root').click(159, 1000)
-    cy.fill('Unités des coordonnées', 'DD')
-    cy.getDataCy('interest-point').click()
-
-    // Then
-    cy.getDataCy('coordinates-dd-input-lat').eq(1).type('47.5525')
-    cy.getDataCy('coordinates-dd-input-lon').eq(1).type('-007.5563')
-
-    cy.getDataCy('interest-point-name').first().contains('Aucun Libellé')
-    cy.getDataCy('interest-point-observations').first().contains('Aucune observation')
-    cy.getDataCy('interest-point-coordinates').first().contains('47.5525° -007.5563°')
-
-    cy.getDataCy('interest-point-save').click()
-    // Then
-    cy.getDataCy('interest-point-coordinates').contains('47.5525° -007.5563°')
-  })
-
-  // TODO understand why coordinate are diffents on CI ('47° 42.11′ N 007° 34.500′ W')
-  /*   it('An interest Should be edited When DMD coordinates are selected', () => {
+  describe('An interest point', () => {
+    it('should be created when clicking on the map', () => {
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+
+      // Then
+      cy.getDataCy('interest-point-name-input').type('Phénomène')
+      cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
+
+      cy.getDataCy('interest-point-name').first().contains('Phénomène')
+      cy.getDataCy('interest-point-observations').first().contains('Est dans la bergerie')
+      cy.getDataCy('interest-point-coordinates').first().contains('47° 4')
+      cy.getDataCy('interest-point-coordinates').first().contains('N')
+      cy.getDataCy('interest-point-coordinates').first().contains('007° 5')
+      cy.getDataCy('interest-point-coordinates').first().contains('W')
+
+      cy.getDataCy('interest-point-save').click()
+    })
+
+    it('should be created from input when DD coordinates are selected', () => {
+      // When
+      cy.getDataCy('coordinates-selection').click({ force: true })
+      cy.get('#root').click(159, 1000)
+      cy.fill('Unités des coordonnées', 'DD')
+      cy.getDataCy('interest-point').click()
+
+      // Then
+      cy.getDataCy('coordinates-dd-input-lat').eq(1).type('47.5525')
+      cy.getDataCy('coordinates-dd-input-lon').eq(1).type('-007.5563')
+
+      cy.getDataCy('interest-point-name').first().contains('Aucun Libellé')
+      cy.getDataCy('interest-point-observations').first().contains('Aucune observation')
+      cy.getDataCy('interest-point-coordinates').first().contains('47.5525° -007.5563°')
+
+      cy.getDataCy('interest-point-save').click()
+      // Then
+      cy.getDataCy('interest-point-coordinates').contains('47.5525° -007.5563°')
+    })
+
+    // TODO understand why coordinate are diffents on CI ('47° 42.11′ N 007° 34.500′ W')
+    /*   it('An interest should be edited When DMD coordinates are selected', () => {
     // When
     cy.getDataCy('coordinates-selection').click({ force: true })
     cy.get('#root').click(159, 1000)
@@ -95,56 +66,163 @@ context('InterestPoint', () => {
     cy.getDataCy('interest-point-coordinates').contains('47° 42.043′ N 007° 34.500′ W')
   }) */
 
-  it('An interest Should be edited with East value When DMS coordinates are selected', () => {
-    // When
-    cy.getDataCy('coordinates-selection').click({ force: true })
-    cy.get('#root').click(159, 1000)
-    cy.getDataCy('interest-point').click()
-    cy.get('#root').click(490, 580)
-    cy.getDataCy('interest-point-save').click()
-    cy.get('[data-cy="interest-point-edit').click()
-
-    // The interest point is moved to the East side
-    cy.getDataCy('dms-coordinates-input').eq(1).type('{backspace}E')
-    cy.getDataCy('interest-point-save').click()
-
-    // Then
-    cy.get('#root').click(536, 600)
-    cy.getDataCy('save-interest-point').should('not.be.visible')
-
-    cy.getDataCy('interest-point-edit').should('not.be.visible')
-    cy.getDataCy('interest-point-edit').click({ force: true })
-    cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '47° 42′ 07″ N 007° 54′ 51″ E')
-    cy.get('.rs-radio').first().should('have.class', 'rs-radio-checked')
-    cy.getDataCy('interest-point-save').click({ timeout: 10000 })
-
-    cy.getDataCy('interest-point-coordinates').first().contains('47° 42′')
-    cy.getDataCy('interest-point-coordinates').first().contains('N')
-    cy.getDataCy('interest-point-coordinates').first().contains('007° 54′')
-    cy.getDataCy('interest-point-coordinates').first().contains('E')
+    it('should be edited with East value when DMS coordinates are selected', () => {
+      // When
+      cy.getDataCy('coordinates-selection').click({ force: true })
+      cy.get('#root').click(159, 1000)
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-edit').click()
+
+      // The interest point is moved to the East side
+      cy.getDataCy('dms-coordinates-input').eq(1).type('{backspace}E')
+      cy.getDataCy('interest-point-save').click()
+
+      // Then
+      cy.get('#root').click(536, 600)
+      cy.getDataCy('save-interest-point').should('not.exist')
+
+      cy.getDataCy('interest-point-edit').should('not.be.visible')
+      cy.getDataCy('interest-point-edit').click({ force: true })
+      cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '47° 42′ 07″ N 007° 54′ 51″ E')
+      cy.get('.rs-radio').first().should('have.class', 'rs-radio-checked')
+      cy.getDataCy('interest-point-save').click({ timeout: 10000 })
+
+      cy.getDataCy('interest-point-coordinates').first().contains('47° 42′')
+      cy.getDataCy('interest-point-coordinates').first().contains('N')
+      cy.getDataCy('interest-point-coordinates').first().contains('007° 54′')
+      cy.getDataCy('interest-point-coordinates').first().contains('E')
+    })
+
+    it('should be deleted when it is in edit mode', () => {
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-edit').click()
+      cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
+      cy.getDataCy('interest-point-delete').click()
+
+      // Then
+      cy.getDataCy('interest-point-coordinates').should('not.exist')
+    })
+
+    it('in drawing mode should be stopped when closing the interest point tool', () => {
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.wait(100)
+      cy.get('body').type('{esc}')
+      cy.wait(200)
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-save').should('not.exist')
+      cy.getDataCy('interest-point-edit').should('not.exist')
+    })
+    it('should not be displayed on map when clicking on the hide all button', () => {
+      // Given
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+
+      cy.getDataCy('interest-point-name-input').type('Phénomène')
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-name').should('be.visible')
+
+      // When
+
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+
+      // Then
+      cy.getDataCy('interest-point-name').should('not.exist')
+    })
+    it('should be displayed on map when clicking on the hide all button twice', () => {
+      // Given
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+
+      cy.getDataCy('interest-point-name-input').type('Phénomène')
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-name').should('be.visible')
+
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+
+      // Then
+      cy.getDataCy('interest-point-name').should('be.visible')
+    })
   })
-
-  it('An interest Should be deleted When it is in edit mode', () => {
-    // When
-    cy.getDataCy('interest-point').click()
-    cy.get('#root').click(490, 580)
-    cy.getDataCy('interest-point-save').click()
-    cy.getDataCy('interest-point-edit').click()
-    cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
-    cy.getDataCy('interest-point-delete').click()
-
-    // Then
-    cy.getDataCy('interest-point-coordinates').should('not.exist')
-  })
-
-  it('An interest in drawing mode Should be stopped When closing the interest point tool', () => {
-    // When
-    cy.getDataCy('interest-point').click()
-    cy.wait(100)
-    cy.get('body').type('{esc}')
-    cy.wait(200)
-    cy.get('#root').click(490, 580)
-    cy.getDataCy('interest-point-save').should('not.exist')
-    cy.getDataCy('interest-point-edit').should('not.exist')
+  describe('Multiple interest points ', () => {
+    it('should be created when clicking on the map', () => {
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-name-input').type('Phénomène')
+      cy.getDataCy('interest-point-observations-input').type('Est dans la bergerie')
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-observations').eq(0).contains('Est dans la bergerie')
+      cy.getDataCy('interest-point-observations').should('have.length', 1)
+
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '__° __′ __″ _ ___° __′ __″ _')
+      cy.get('#root').click(300, 430)
+      cy.getDataCy('interest-point-name-input').type('Phénomène 2')
+      cy.getDataCy('interest-point-observations-input').type('Est encore dans la bergerie')
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-observations').should('have.length', 2)
+      cy.getDataCy('interest-point-observations').eq(0).contains('Est encore dans la bergerie')
+
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('dms-coordinates-input').eq(1).should('have.value', '__° __′ __″ _ ___° __′ __″ _')
+      cy.wait(400)
+      cy.get('#root').click(650, 690)
+      cy.getDataCy('interest-point-name-input').type('Phénomène 3')
+      cy.getDataCy('interest-point-observations-input').type('Est encore encore dans la bergerie')
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-observations').should('have.length', 3)
+      cy.getDataCy('interest-point-observations').eq(0).contains('Est encore encore dans la bergerie')
+    })
+    it('should be hidden when clicking on the hide all button', () => {
+      // Given
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-save').click()
+
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(300, 430)
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-observations').should('have.length', 2)
+      cy.getDataCy('interest-point-observations').should('be.visible')
+
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+
+      // Then
+      cy.getDataCy('interest-point-observations').should('have.length', 0)
+      cy.getDataCy('interest-point-name').should('not.exist')
+    })
+    it('should be displayed when clicking on the hide all button twice', () => {
+      // Given
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(490, 580)
+      cy.getDataCy('interest-point-save').click()
+
+      cy.getDataCy('interest-point').click()
+      cy.get('#root').click(300, 430)
+      cy.getDataCy('interest-point-save').click()
+      cy.getDataCy('interest-point-observations').should('have.length', 2)
+      cy.getDataCy('interest-point-observations').should('be.visible')
+
+      // When
+      cy.getDataCy('interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+      cy.getDataCy('hide-all-interest-point').click()
+
+      // Then
+      cy.getDataCy('interest-point-observations').should('have.length', 2)
+      cy.getDataCy('interest-point-name').should('be.visible')
+    })
   })
 })
diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
index 8ff4e8f69..4776d25d7 100644
--- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
+++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx
@@ -137,6 +137,7 @@ export function EditInterestPoint({ close }: EditInterestPointProps) {
         <MapMenuDialog.Title>Créer un point d&apos;intérêt</MapMenuDialog.Title>
         <MapMenuDialog.VisibilityButton
           accent={Accent.SECONDARY}
+          data-cy="hide-all-interest-point"
           Icon={displayInterestPointLayer ? Icon.Display : Icon.Hide}
           onClick={() => {
             dispatch(setDisplayedItems({ displayInterestPointLayer: !displayInterestPointLayer }))

From f063a32fde2a720152eb44759a1d8025ef9f2442 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Thu, 23 May 2024 14:28:36 +0200
Subject: [PATCH 11/14] =?UTF-8?q?[fix]=20mont=C3=A9e=20de=20version=20cypr?=
 =?UTF-8?q?ess=20(bug=20firefox=20r=C3=A9solu=20en=2013.9.0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json | 18 +++++++++---------
 frontend/package.json      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a2387dd2f..98ce2db1a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -75,7 +75,7 @@
         "babel-eslint": "10.1.0",
         "chromatic": "6.7.0",
         "codecov": "3.8.3",
-        "cypress": "13.6.4",
+        "cypress": "13.10.0",
         "cypress-mouse-position": "1.0.0",
         "cypress-plugin-snapshots": "github:ivangabriele/cypress-plugin-snapshots",
         "dotenv": "16.4.1",
@@ -6874,9 +6874,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001606",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001606.tgz",
-      "integrity": "sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==",
+      "version": "1.0.30001621",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
+      "integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
       "funding": [
         {
           "type": "opencollective",
@@ -7574,9 +7574,9 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
-      "version": "13.6.4",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.4.tgz",
-      "integrity": "sha512-pYJjCfDYB+hoOoZuhysbbYhEmNW7DEDsqn+ToCLwuVowxUXppIWRr7qk4TVRIU471ksfzyZcH+mkoF0CQUKnpw==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+      "integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
       "hasInstallScript": true,
       "dependencies": {
         "@cypress/request": "^3.0.0",
@@ -7586,7 +7586,7 @@
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.6.0",
+        "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -7604,7 +7604,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.0",
+        "is-ci": "^3.0.1",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
diff --git a/frontend/package.json b/frontend/package.json
index b6cd19f99..25dc5370f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -92,7 +92,7 @@
     "babel-eslint": "10.1.0",
     "chromatic": "6.7.0",
     "codecov": "3.8.3",
-    "cypress": "13.6.4",
+    "cypress": "13.10.0",
     "cypress-mouse-position": "1.0.0",
     "cypress-plugin-snapshots": "github:ivangabriele/cypress-plugin-snapshots",
     "dotenv": "16.4.1",

From fd0d4a9340c617081873595718a97227f02d87bb Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Thu, 23 May 2024 14:34:48 +0200
Subject: [PATCH 12/14] mise en place de l'idempotence des tests e2e

---
 .../back_office/administration_form.spec.ts   | 77 ++++++++--------
 .../e2e/back_office/control_unit_form.spec.ts | 89 ++++++++++---------
 .../e2e/back_office/station_form.spec.ts      |  7 +-
 .../mission_form/delete_mission.spec.ts       | 19 ++--
 .../mission_form/main_form.spec.ts            | 48 ++++++----
 .../mission_form/mission_actions.spec.ts      |  2 +-
 .../side_window/mission_list/filters.spec.ts  | 25 ++----
 .../e2e/side_window/reporting/filters.spec.ts | 22 +----
 frontend/cypress/e2e/utils/dates.test.ts      | 30 +++++++
 frontend/cypress/e2e/utils/dates.ts           | 15 ++++
 .../cypress/e2e/utils/getMissionEndDate.ts    |  2 +-
 11 files changed, 185 insertions(+), 151 deletions(-)
 create mode 100644 frontend/cypress/e2e/utils/dates.test.ts
 create mode 100644 frontend/cypress/e2e/utils/dates.ts

diff --git a/frontend/cypress/e2e/back_office/administration_form.spec.ts b/frontend/cypress/e2e/back_office/administration_form.spec.ts
index bb3551f65..9f987e32b 100644
--- a/frontend/cypress/e2e/back_office/administration_form.spec.ts
+++ b/frontend/cypress/e2e/back_office/administration_form.spec.ts
@@ -31,66 +31,67 @@ context('Back Office > Administration Form', () => {
 
     cy.clickButton('Créer')
 
-    cy.wait('@createAdministration').then(interception => {
-      if (!interception.response) {
-        assert.fail('`interception.response` is undefined.')
+    cy.wait('@createAdministration').then(({ request, response }) => {
+      if (!response) {
+        assert.fail('response is undefined.')
       }
+      const id = response.body.id
 
-      assert.deepEqual(interception.request.body, {
+      assert.deepEqual(request.body, {
         isArchived: false,
         name: 'Administration 1'
       })
-    })
 
-    // -------------------------------------------------------------------------
-    // Edit
+      // -------------------------------------------------------------------------
+      // Edit
 
-    cy.intercept('PUT', `/api/v1/administrations/2007`).as('updateAdministration')
+      cy.intercept('PUT', `/api/v1/administrations/${id}`).as('updateAdministration')
 
-    cy.getTableRowById(2007).clickButton('Éditer cette administration')
+      cy.getTableRowById(id).clickButton('Éditer cette administration')
 
-    cy.fill('Nom', 'Administration 2')
+      cy.fill('Nom', 'Administration 2')
 
-    cy.clickButton('Mettre à jour')
+      cy.clickButton('Mettre à jour')
 
-    cy.wait('@updateAdministration').then(interception => {
-      if (!interception.response) {
-        assert.fail('`interception.response` is undefined.')
-      }
+      cy.wait('@updateAdministration').then(({ request: requestOfUpdate, response: responseOfUpdate }) => {
+        if (!responseOfUpdate) {
+          assert.fail('response is undefined.')
+        }
 
-      assert.deepInclude(interception.request.body, {
-        id: 2007,
-        isArchived: false,
-        name: 'Administration 2'
+        assert.deepInclude(requestOfUpdate.body, {
+          id,
+          isArchived: false,
+          name: 'Administration 2'
+        })
       })
-    })
 
-    // -------------------------------------------------------------------------
-    // Archive
+      // -------------------------------------------------------------------------
+      // Archive
 
-    cy.intercept('PUT', `/api/v1/administrations/2007/archive`).as('archiveAdministration')
+      cy.intercept('PUT', `/api/v1/administrations/${id}/archive`).as('archiveAdministration')
 
-    cy.getTableRowById(2007).clickButton('Archiver cette administration')
-    cy.clickButton('Archiver')
+      cy.getTableRowById(id).clickButton('Archiver cette administration')
+      cy.clickButton('Archiver')
 
-    cy.wait('@archiveAdministration')
+      cy.wait('@archiveAdministration')
 
-    cy.getTableRowById(2007).should('not.exist')
-    cy.clickButton('Administrations archivées')
-    cy.getTableRowById(2007).should('exist')
+      cy.getTableRowById(id).should('not.exist')
+      cy.clickButton('Administrations archivées')
+      cy.getTableRowById(id).should('exist')
 
-    // -------------------------------------------------------------------------
-    // Delete
+      // -------------------------------------------------------------------------
+      // Delete
 
-    cy.intercept('DELETE', `/api/v1/administrations/2007`).as('deleteAdministration')
+      cy.intercept('DELETE', `/api/v1/administrations/${id}`).as('deleteAdministration')
 
-    cy.getTableRowById(2007).clickButton('Supprimer cette administration')
-    cy.clickButton('Supprimer')
+      cy.getTableRowById(id).clickButton('Supprimer cette administration')
+      cy.clickButton('Supprimer')
 
-    cy.wait('@deleteAdministration')
+      cy.wait('@deleteAdministration')
 
-    cy.getTableRowById(2007).should('not.exist')
-    cy.clickButton('Administrations actives')
-    cy.getTableRowById(2007).should('not.exist')
+      cy.getTableRowById(id).should('not.exist')
+      cy.clickButton('Administrations actives')
+      cy.getTableRowById(id).should('not.exist')
+    })
   })
 })
diff --git a/frontend/cypress/e2e/back_office/control_unit_form.spec.ts b/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
index 32709de36..3fd85175a 100644
--- a/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
+++ b/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
@@ -38,12 +38,13 @@ context('Back Office > Control Unit Form', () => {
 
     cy.clickButton('Créer')
 
-    cy.wait('@createControlUnit').then(interception => {
-      if (!interception.response) {
+    cy.wait('@createControlUnit').then(({ request, response }) => {
+      if (!response) {
         assert.fail('`interception.response` is undefined.')
       }
+      const id = response.body.id
 
-      assert.deepEqual(interception.request.body, {
+      assert.deepEqual(request.body, {
         administrationId: 1007,
         areaNote: null,
         departmentAreaInseeCode: '50',
@@ -51,65 +52,65 @@ context('Back Office > Control Unit Form', () => {
         name: 'Unité 1',
         termsNote: null
       })
-    })
 
-    // -------------------------------------------------------------------------
-    // Edit
+      // -------------------------------------------------------------------------
+      // Edit
 
-    cy.intercept('PUT', `/api/v2/control_units/10122`).as('updateControlUnit')
+      cy.intercept('PUT', `/api/v2/control_units/${id}`).as('updateControlUnit')
 
-    cy.getTableRowById(10122).clickButton('Éditer cette unité de contrôle')
+      cy.getTableRowById(id).clickButton('Éditer cette unité de contrôle')
 
-    expectPathToBe('/backoffice/control_units/10122')
+      expectPathToBe(`/backoffice/control_units/${id}`)
 
-    cy.fill('Administration', 'AFB')
-    cy.fill('Nom', 'Unité 2')
-    cy.fill('Département', 'Vendée')
+      cy.fill('Administration', 'AFB')
+      cy.fill('Nom', 'Unité 2')
+      cy.fill('Département', 'Vendée')
 
-    cy.clickButton('Mettre à jour')
+      cy.clickButton('Mettre à jour')
 
-    cy.wait('@updateControlUnit').then(interception => {
-      if (!interception.response) {
-        assert.fail('`interception.response` is undefined.')
-      }
+      cy.wait('@updateControlUnit').then(({ request: requestOfUpdate, response: responseOfUpdate }) => {
+        if (!responseOfUpdate) {
+          assert.fail('`interception.response` is undefined.')
+        }
 
-      assert.deepInclude(interception.request.body, {
-        administrationId: 1002,
-        areaNote: null,
-        departmentAreaInseeCode: '85',
-        id: 10122,
-        isArchived: false,
-        name: 'Unité 2',
-        termsNote: null
+        assert.deepInclude(requestOfUpdate.body, {
+          administrationId: 1002,
+          areaNote: null,
+          departmentAreaInseeCode: '85',
+          id,
+          isArchived: false,
+          name: 'Unité 2',
+          termsNote: null
+        })
       })
-    })
 
-    // -------------------------------------------------------------------------
-    // Archive
+      // -------------------------------------------------------------------------
+      // Archive
 
-    cy.intercept('PUT', `/api/v2/control_units/10122/archive`).as('archiveControlUnit')
+      cy.intercept('PUT', `/api/v2/control_units/${id}/archive`).as('archiveControlUnit')
 
-    cy.getTableRowById(10122).clickButton('Archiver cette unité de contrôle')
-    cy.clickButton('Archiver')
+      cy.getTableRowById(id).clickButton('Archiver cette unité de contrôle')
+      cy.clickButton('Archiver')
 
-    cy.wait('@archiveControlUnit')
+      cy.wait('@archiveControlUnit')
 
-    cy.getTableRowById(10122).should('not.exist')
-    cy.clickButton('Unités archivées')
-    cy.getTableRowById(10122).should('exist')
+      cy.getTableRowById(id).should('not.exist')
+      cy.clickButton('Unités archivées')
+      cy.getTableRowById(id).should('exist')
 
-    // -------------------------------------------------------------------------
-    // Delete
+      // -------------------------------------------------------------------------
+      // Delete
 
-    cy.intercept('DELETE', `/api/v2/control_units/10122`).as('deleteControlUnit')
+      cy.intercept('DELETE', `/api/v2/control_units/${id}`).as('deleteControlUnit')
 
-    cy.getTableRowById(10122).clickButton('Supprimer cette unité de contrôle')
-    cy.clickButton('Supprimer')
+      cy.getTableRowById(id).clickButton('Supprimer cette unité de contrôle')
+      cy.clickButton('Supprimer')
 
-    cy.wait('@deleteControlUnit')
+      cy.wait('@deleteControlUnit')
 
-    cy.getTableRowById(10122).should('not.exist')
-    cy.clickButton('Unités actives')
-    cy.getTableRowById(10122).should('not.exist')
+      cy.getTableRowById(id).should('not.exist')
+      cy.clickButton('Unités actives')
+      cy.getTableRowById(id).should('not.exist')
+    })
   })
 })
diff --git a/frontend/cypress/e2e/back_office/station_form.spec.ts b/frontend/cypress/e2e/back_office/station_form.spec.ts
index 6833fa708..6ac38c5d6 100644
--- a/frontend/cypress/e2e/back_office/station_form.spec.ts
+++ b/frontend/cypress/e2e/back_office/station_form.spec.ts
@@ -37,12 +37,11 @@ context('Back Office > Station Form', () => {
 
     cy.clickButton('Créer')
 
-    cy.wait('@createStation').then(interception => {
-      if (!interception.response) {
+    cy.wait('@createStation').then(({ request, response }) => {
+      if (!response) {
         assert.fail('`interception.response` is undefined.')
       }
-
-      assert.deepEqual(interception.request.body, {
+      assert.deepEqual(request.body, {
         latitude: 1.2,
         longitude: 3.4,
         name: newBaseName
diff --git a/frontend/cypress/e2e/side_window/mission_form/delete_mission.spec.ts b/frontend/cypress/e2e/side_window/mission_form/delete_mission.spec.ts
index 7c867b632..50b376d31 100644
--- a/frontend/cypress/e2e/side_window/mission_form/delete_mission.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/delete_mission.spec.ts
@@ -2,6 +2,8 @@ import { FAKE_MISSION_WITH_EXTERNAL_ACTIONS } from '../../constants'
 import { createMissionWithAttachedReportingAndAttachedAction } from '../../utils/createMissionWithAttachedReportingAndAttachedAction'
 import { visitSideWindow } from '../../utils/visitSideWindow'
 
+import type { Mission } from 'domain/entities/missions'
+
 context('Side Window > Mission Form > Delete Mission', () => {
   beforeEach(() => {
     cy.viewport(1280, 1024)
@@ -24,9 +26,8 @@ context('Side Window > Mission Form > Delete Mission', () => {
     cy.intercept({ method: 'GET', url: `/bff/v1/missions/${missionId}/can_delete?source=MONITORENV` }).as(
       'canDeleteMission'
     )
-    cy.intercept({
-      method: 'DELETE',
-      url: `/bff/v1/missions/${missionId}`
+    cy.intercept('DELETE', `/bff/v1/missions/${missionId}`, {
+      statusCode: 200
     }).as('deleteMission')
 
     cy.get('*[data-cy="delete-mission"]').click()
@@ -44,12 +45,14 @@ context('Side Window > Mission Form > Delete Mission', () => {
     cy.wait('@deleteMission').then(({ response }) => {
       expect(response && response.statusCode).equal(200)
     })
-    cy.wait('@getMissions')
-    cy.wait(500)
-    cy.get('*[data-cy="Missions-numberOfDisplayedMissions"]').then($el => {
-      const numberOfMissions = parseInt($el.text(), 10)
+    cy.wait('@getMissions').then(({ response }) => {
+      if (!response) {
+        assert.fail('response is undefined')
+      }
+      const numberOfMissions = (response.body as Array<Mission>).filter(({ id }) => id !== missionId)
+
       cy.get('@numberOfMissions').then(numberOfMissionsBefore => {
-        expect(numberOfMissions).equal(parseInt(numberOfMissionsBefore as unknown as string, 10) - 1)
+        expect(numberOfMissions.length).equal(parseInt(numberOfMissionsBefore as unknown as string, 10) - 1)
       })
     })
   })
diff --git a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
index a6764ceff..79f253615 100644
--- a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
@@ -1,5 +1,8 @@
+import { customDayjs } from '@mtes-mct/monitor-ui'
+
 import { setGeometry } from '../../../../src/domain/shared_slices/Draw'
 import { createPendingMission } from '../../utils/createPendingMission'
+import { getPreviousMonthUTC, todayUTC } from '../../utils/dates'
 import { getMissionEndDateWithTime } from '../../utils/getMissionEndDate'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 import { visitSideWindow } from '../../utils/visitSideWindow'
@@ -199,28 +202,41 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.get('*[data-cy="delete-mission"]').should('be.disabled')
   })
 
-  it('A user can delete mission if control unit already engaged and be redirected to filtered mission list', () => {
+  it('An user can cancel mission creation if control unit already engaged and be redirected to filtered mission list', () => {
     // Given
     visitSideWindow()
     cy.wait(200)
-    cy.intercept('GET', '/api/v1/missions/engaged_control_units').as('getEngagedControlUnits')
+    const { asDatePickerDate: expectedStartDate } = getUtcDateInMultipleFormats(
+      getPreviousMonthUTC(2, customDayjs().utc())
+    )
+    const { asDatePickerDate: expectedEndDate } = getUtcDateInMultipleFormats(todayUTC())
 
-    // When
-    cy.get('*[data-cy="add-mission"]').click()
-    cy.fill('Unité 1', 'PAM Jeanne Barret')
-    cy.wait('@getEngagedControlUnits')
+    cy.fill('Période', 'Période spécifique')
+    cy.fill('Période spécifique', [expectedStartDate, expectedEndDate])
+    const unite = 'PAM Jeanne Barret'
+    cy.fill('Unité', [unite])
+    cy.fill('Statut de mission', ['En cours'])
 
-    // Then
-    cy.get('body').contains('Une autre mission, ouverte par le CACEM, est en cours avec cette unité.')
-    cy.clickButton("Non, l'abandonner")
+    cy.get('.Table-SimpleTable tr').then(rows => {
+      cy.intercept('GET', '/api/v1/missions/engaged_control_units').as('getEngagedControlUnits')
 
-    cy.intercept('GET', '/bff/v1/missions*').as('getMissions')
+      // When
+      cy.get('*[data-cy="add-mission"]').click()
+      cy.fill('Unité 1', unite)
+      cy.wait('@getEngagedControlUnits')
+
+      // Then
+      cy.get('body').contains('Une autre mission, ouverte par le CACEM, est en cours avec cette unité.')
+      cy.clickButton("Non, l'abandonner")
 
-    // table have two rows for one résult because of the header
-    cy.get('.Table-SimpleTable tr').should('have.length', 2)
+      cy.intercept('GET', '/bff/v1/missions*').as('getMissions')
+
+      // table should have the same number of rows than before
+      cy.get('.Table-SimpleTable tr').should('have.length', rows.length)
+    })
   })
 
-  it('A user can create mission even if control unit already engaged', () => {
+  it('An user can create mission even if control unit already engaged', () => {
     visitSideWindow()
     cy.wait(200)
     cy.intercept('GET', '/api/v1/missions/engaged_control_units').as('getEngagedControlUnits')
@@ -228,10 +244,10 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.get('*[data-cy="add-mission"]').click()
 
     const startDate = getUtcDateInMultipleFormats().asDatePickerDateTime
-    const ennDate = getMissionEndDateWithTime(7, 'day')
+    const endDate = getMissionEndDateWithTime(7, 'day')
 
     cy.fill('Date de début (UTC)', startDate)
-    cy.fill('Date de fin (UTC)', ennDate)
+    cy.fill('Date de fin (UTC)', endDate)
 
     cy.fill('Unité 1', 'PAM Jeanne Barret')
     cy.wait('@getEngagedControlUnits')
@@ -418,7 +434,7 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.fill("Contact de l'unité 2", 'Un autre contact')
     cy.wait(250)
 
-    cy.clickButton('Enregistrer')
+    cy.clickButton('Enregistrer').wait(250)
     cy.wait('@updateMission').then(({ response }) => {
       if (!response) {
         return
diff --git a/frontend/cypress/e2e/side_window/mission_form/mission_actions.spec.ts b/frontend/cypress/e2e/side_window/mission_form/mission_actions.spec.ts
index a736e6224..3dd072b01 100644
--- a/frontend/cypress/e2e/side_window/mission_form/mission_actions.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/mission_actions.spec.ts
@@ -309,7 +309,7 @@ context('Side Window > Mission Form > Mission actions', () => {
     })
   })
 
-  it('Sould create surveillance and control actions with valid themes and subthemes depending on mission year', () => {
+  it('Should create surveillance and control actions with valid themes and subthemes depending on mission year', () => {
     // Given
     cy.wait(400)
 
diff --git a/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts b/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts
index e050c063d..e3e27f2e6 100644
--- a/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts
@@ -7,6 +7,10 @@ context('Side Window > Mission List > Filter Bar', () => {
     cy.visit(`/side_window`).wait(1000)
   })
 
+  afterEach(() => {
+    cy.getDataCy('reinitialize-filters').click()
+  })
+
   it('Should filter missions for the current day', () => {
     cy.fill('Période', 'Aujourd’hui')
     cy.wait('@getMissions')
@@ -43,8 +47,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'Complétées')
     })
-
-    cy.fill('Etat des données', undefined)
   })
 
   it('Should filter missions by administrations', () => {
@@ -58,7 +60,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'DDTM')
     })
-    cy.fill('Administration', undefined)
   })
 
   it('Should filter missions by units', () => {
@@ -72,8 +73,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'BSN Ste Maxime')
     })
-
-    cy.fill('Unité', undefined)
   })
 
   it('Should filter missions by administration, and units filter accordingly.', () => {
@@ -121,10 +120,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'DREAL Pays-de-La-Loire (DREAL / DEAL)')
     })
-
-    // clear filters
-    cy.fill('Administration', undefined)
-    cy.fill('Unité', undefined)
   })
 
   it('Should filter missions by types', () => {
@@ -138,8 +133,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'Mer')
     })
-
-    cy.fill('Type de mission', undefined)
   })
 
   it('Should filter missions by sea fronts', () => {
@@ -153,11 +146,9 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'MED')
     })
-
-    cy.fill('Façade', undefined)
   })
 
-  it('Should filter missions by statuses', () => {
+  it('Should filter missions by status', () => {
     cy.fill('Statut de mission', ['En cours'])
 
     cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
@@ -168,8 +159,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'En cours')
     })
-
-    cy.fill('Statut de mission', undefined)
   })
 
   it('Should filter missions by themes', () => {
@@ -184,8 +173,6 @@ context('Side Window > Mission List > Filter Bar', () => {
 
       cy.wrap(row).should('contain', 'Mouillage individuel')
     })
-
-    cy.fill('Thématique', undefined)
   })
 
   it('Should themes filter depends on date filter', () => {
@@ -225,7 +212,5 @@ context('Side Window > Mission List > Filter Bar', () => {
     cy.getDataCy('edit-mission-38').should('exist')
     cy.getDataCy('edit-mission-22').should('not.exist')
     cy.getDataCy('edit-mission-43').should('not.exist')
-
-    cy.fill('Missions avec actions CACEM', false)
   })
 })
diff --git a/frontend/cypress/e2e/side_window/reporting/filters.spec.ts b/frontend/cypress/e2e/side_window/reporting/filters.spec.ts
index cc22bb13d..a35a8f402 100644
--- a/frontend/cypress/e2e/side_window/reporting/filters.spec.ts
+++ b/frontend/cypress/e2e/side_window/reporting/filters.spec.ts
@@ -9,6 +9,9 @@ context('Reportings', () => {
     cy.clickButton('signalements')
     cy.wait('@getReportings')
   })
+  afterEach(() => {
+    cy.getDataCy('reinitialize-filters').click({ force: true })
+  })
 
   it('Should filter reportings for the last seven days', () => {
     cy.fill('Période', '7 derniers jours')
@@ -16,8 +19,6 @@ context('Reportings', () => {
     cy.wait('@getReportings')
 
     cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
-
-    cy.fill('Période', '24 dernières heures')
   })
   it('Should filter reportings by source type', () => {
     cy.fill('Type de source', [ReportingSourceLabels.SEMAPHORE])
@@ -34,9 +35,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'Sémaphore')
     })
-
-    // here we test if the clear button worked correctly
-    cy.fill('Type de source', undefined)
   })
 
   it('Should filter reportings by source', () => {
@@ -54,8 +52,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'Sémaphore de Fécamp')
     })
-    // here we test if the clear button worked correctly
-    cy.fill('Source', undefined)
   })
 
   it('Should filter reportings by type', () => {
@@ -90,9 +86,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'La description du signalement')
     })
-
-    // here we test if the clear button worked correctly
-    cy.fill('Type de cible', undefined)
   })
 
   it('Should filter reportings by themes', () => {
@@ -108,8 +101,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'Arrêté à visa environnemental')
     })
-
-    cy.fill('Thématiques', undefined)
   })
 
   it('Should filter reportings by sub-themes', () => {
@@ -128,8 +119,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'Surveillance générale')
     })
-
-    cy.fill('Sous-thématiques', undefined)
   })
 
   it('Should filter reportings by sea-fronts', () => {
@@ -146,8 +135,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('contain', 'NAMO')
     })
-
-    cy.fill('Façade', undefined)
   })
 
   it('Should filter reportings by status', () => {
@@ -193,9 +180,6 @@ context('Reportings', () => {
 
       cy.wrap(row).should('not.contain', 'Mission')
     })
-
-    // clean filter
-    cy.getDataCy('attach-to-mission-filter-UNATTACHED').click()
   })
 
   it('Should filter reportings by search query', () => {
diff --git a/frontend/cypress/e2e/utils/dates.test.ts b/frontend/cypress/e2e/utils/dates.test.ts
new file mode 100644
index 000000000..6ff186a79
--- /dev/null
+++ b/frontend/cypress/e2e/utils/dates.test.ts
@@ -0,0 +1,30 @@
+import { expect } from '@jest/globals'
+import { customDayjs } from '@mtes-mct/monitor-ui'
+
+import { getPreviousMonthUTC, todayUTC } from './dates'
+
+describe('todayUTC', () => {
+  it('should return the time of the day in UTC format', () => {
+    // When
+    const today = todayUTC()
+
+    // Then
+    const todayExpected = `${new Date().toISOString().split('.')[0]}Z`
+    expect(todayExpected).toEqual(today)
+  })
+})
+
+describe('getPreviousMonthUTC', () => {
+  it('should return the previous month from the date in UTC format', () => {
+    // Given
+    const previousNumberOfMonths = 2
+    const from = customDayjs.utc('2024-04-23')
+
+    // When
+    const previousDate = getPreviousMonthUTC(previousNumberOfMonths, from)
+
+    // Then
+    const dateExpected = `${new Date('2024-02-23').toISOString().split('.')[0]}Z`
+    expect(dateExpected).toEqual(previousDate)
+  })
+})
diff --git a/frontend/cypress/e2e/utils/dates.ts b/frontend/cypress/e2e/utils/dates.ts
new file mode 100644
index 000000000..068d4f124
--- /dev/null
+++ b/frontend/cypress/e2e/utils/dates.ts
@@ -0,0 +1,15 @@
+import { Dayjs } from 'dayjs'
+
+import { customDayjs } from './customDayjs'
+
+export function getPreviousMonthUTC(previousNumberOfMonths: number, from: Dayjs): string {
+  const previousMonthDate = from.subtract(previousNumberOfMonths, 'month')
+
+  return previousMonthDate.format('YYYY-MM-DDTHH:mm:ss[Z]')
+}
+
+export function todayUTC(): string {
+  const currentDate = customDayjs().utc()
+
+  return currentDate.format('YYYY-MM-DDTHH:mm:ss[Z]')
+}
diff --git a/frontend/cypress/e2e/utils/getMissionEndDate.ts b/frontend/cypress/e2e/utils/getMissionEndDate.ts
index d0ab6f468..85f65437b 100644
--- a/frontend/cypress/e2e/utils/getMissionEndDate.ts
+++ b/frontend/cypress/e2e/utils/getMissionEndDate.ts
@@ -1,6 +1,6 @@
 import { getUtcDateInMultipleFormats } from './getUtcDateInMultipleFormats'
 
-// daysjs want a `ManipoulateType`for unitLabel but has no exported it, so we have to use `any`
+// daysjs want a `ManipulateType`for unitLabel but has no exported it, so we have to use `any`
 export function getMissionEndDateWithTime(unitToAdd: number, unitLabel: any) {
   const endDateInString = getUtcDateInMultipleFormats().asDayjsUtcDate.add(unitToAdd, unitLabel).toISOString()
 

From 0f5affc14382b559f1524f2ad498a80bfa394eb7 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Fri, 24 May 2024 17:29:39 +0200
Subject: [PATCH 13/14] [review] claire dagan's review check

---
 .../e2e/back_office/control_unit_form.spec.ts      |  4 ++--
 .../cypress/e2e/back_office/station_form.spec.ts   | 10 +++++-----
 .../e2e/side_window/mission_form/main_form.spec.ts |  6 +++---
 frontend/src/features/map/BaseMap.tsx              | 14 +++++---------
 .../src/features/map/layers/InterestPointLayer.tsx |  7 +++----
 .../map/layers/styles/interestPoint.style.ts       |  4 ++--
 6 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/frontend/cypress/e2e/back_office/control_unit_form.spec.ts b/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
index 3fd85175a..fbfe9ae9a 100644
--- a/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
+++ b/frontend/cypress/e2e/back_office/control_unit_form.spec.ts
@@ -40,7 +40,7 @@ context('Back Office > Control Unit Form', () => {
 
     cy.wait('@createControlUnit').then(({ request, response }) => {
       if (!response) {
-        assert.fail('`interception.response` is undefined.')
+        assert.fail('response is undefined.')
       }
       const id = response.body.id
 
@@ -70,7 +70,7 @@ context('Back Office > Control Unit Form', () => {
 
       cy.wait('@updateControlUnit').then(({ request: requestOfUpdate, response: responseOfUpdate }) => {
         if (!responseOfUpdate) {
-          assert.fail('`interception.response` is undefined.')
+          assert.fail('response is undefined.')
         }
 
         assert.deepInclude(requestOfUpdate.body, {
diff --git a/frontend/cypress/e2e/back_office/station_form.spec.ts b/frontend/cypress/e2e/back_office/station_form.spec.ts
index 6ac38c5d6..0e3482852 100644
--- a/frontend/cypress/e2e/back_office/station_form.spec.ts
+++ b/frontend/cypress/e2e/back_office/station_form.spec.ts
@@ -39,7 +39,7 @@ context('Back Office > Station Form', () => {
 
     cy.wait('@createStation').then(({ request, response }) => {
       if (!response) {
-        assert.fail('`interception.response` is undefined.')
+        assert.fail('response is undefined.')
       }
       assert.deepEqual(request.body, {
         latitude: 1.2,
@@ -64,12 +64,12 @@ context('Back Office > Station Form', () => {
 
     cy.clickButton('Mettre à jour')
 
-    cy.wait('@updateStation').then(interception => {
-      if (!interception.response) {
-        assert.fail('`interception.response` is undefined.')
+    cy.wait('@updateStation').then(({ request: requestOfUpdate, response: responseOfUpdate }) => {
+      if (!responseOfUpdate) {
+        assert.fail('response is undefined.')
       }
 
-      assert.deepInclude(interception.request.body, {
+      assert.deepInclude(requestOfUpdate.body, {
         latitude: 5.6,
         longitude: 7.8,
         name: nextBaseName
diff --git a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
index 79f253615..d5c6f7221 100644
--- a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
@@ -213,8 +213,8 @@ context('Side Window > Mission Form > Main Form', () => {
 
     cy.fill('Période', 'Période spécifique')
     cy.fill('Période spécifique', [expectedStartDate, expectedEndDate])
-    const unite = 'PAM Jeanne Barret'
-    cy.fill('Unité', [unite])
+    const controlUnit = 'PAM Jeanne Barret'
+    cy.fill('Unité', [controlUnit])
     cy.fill('Statut de mission', ['En cours'])
 
     cy.get('.Table-SimpleTable tr').then(rows => {
@@ -222,7 +222,7 @@ context('Side Window > Mission Form > Main Form', () => {
 
       // When
       cy.get('*[data-cy="add-mission"]').click()
-      cy.fill('Unité 1', unite)
+      cy.fill('Unité 1', controlUnit)
       cy.wait('@getEngagedControlUnits')
 
       // Then
diff --git a/frontend/src/features/map/BaseMap.tsx b/frontend/src/features/map/BaseMap.tsx
index 00b62fc07..3977d85fb 100644
--- a/frontend/src/features/map/BaseMap.tsx
+++ b/frontend/src/features/map/BaseMap.tsx
@@ -6,21 +6,21 @@ import {
   type SerializedFeature
 } from 'domain/types/map'
 import { throttle } from 'lodash'
-import { ScaleLine, defaults as defaultControls } from 'ol/control'
+import { defaults as defaultControls, ScaleLine } from 'ol/control'
 import Zoom from 'ol/control/Zoom'
 import { platformModifierKeyOnly } from 'ol/events/condition'
 import OpenLayerMap from 'ol/Map'
 import { transform } from 'ol/proj'
 import View from 'ol/View'
 import {
+  Children,
   cloneElement,
   useCallback,
-  useMemo,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type MutableRefObject,
-  Children,
   type ReactElement
 } from 'react'
 import styled from 'styled-components'
@@ -42,8 +42,6 @@ import { useClickOutsideWhenOpened } from '../../hooks/useClickOutsideWhenOpened
 
 import type { VectorLayerWithName } from '../../domain/types/layer'
 import type { MapBrowserEvent } from 'ol'
-import type VectorLayer from 'ol/layer/Vector'
-import type VectorSource from 'ol/source/Vector'
 
 export type BaseMapChildrenProps = {
   currentFeatureListOver: SerializedFeature<Record<string, any>>[] | undefined
@@ -53,8 +51,6 @@ export type BaseMapChildrenProps = {
   pixel: number[] | undefined
 }
 
-type VectorLayerType = VectorLayerWithName & VectorLayer<VectorSource>
-
 export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChildrenProps> | null> }) {
   const dispatch = useAppDispatch()
   const [currentMap, setCurrentMap] = useState<OpenLayerMap | undefined>(undefined)
@@ -92,7 +88,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
       const features = current_map.getFeaturesAtPixel(event.pixel, {
         hitTolerance: HIT_PIXEL_TO_TOLERANCE,
         layerFilter: layer => {
-          const typedLayer = layer as VectorLayerType
+          const typedLayer = layer as VectorLayerWithName
 
           const layerName = typedLayer.name ?? typedLayer.get('name')
 
@@ -128,7 +124,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
           const features = current_map.getFeaturesAtPixel(event.pixel, {
             hitTolerance: HIT_PIXEL_TO_TOLERANCE,
             layerFilter: layer => {
-              const typedLayer = layer as VectorLayerType
+              const typedLayer = layer as VectorLayerWithName
 
               const layerName = typedLayer.name ?? typedLayer.get('name')
 
diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
index ac34cb5a7..791c8ab48 100644
--- a/frontend/src/features/map/layers/InterestPointLayer.tsx
+++ b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -10,7 +10,7 @@ import { getLength } from 'ol/sphere'
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import { POIStyle, getInterestPointStyle, getLinesStyle } from './styles/interestPoint.style'
+import { POIStyle, getInterestPointStyle, getLineStyle } from './styles/interestPoint.style'
 import { InterestPointLine } from '../../../domain/entities/interestPointLine'
 import { coordinatesAreModified, coordinatesOrTypeAreModified } from '../../../domain/entities/interestPoints'
 import { Layers } from '../../../domain/entities/layers/constants'
@@ -93,8 +93,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     new VectorLayer({
       renderBuffer: 7,
       source: interestPointVectorSourceRef.current,
-      style: (feature, resolution) =>
-        shouldStyledLines(feature) ? getLinesStyle() : getInterestPointStyle(resolution),
+      style: (feature, resolution) => (isFeatureIsALine(feature) ? getLineStyle() : getInterestPointStyle(resolution)),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
@@ -329,7 +328,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     </div>
   )
 
-  function shouldStyledLines(feature) {
+  function isFeatureIsALine(feature) {
     return feature?.getId()?.toString()?.includes('line')
   }
 
diff --git a/frontend/src/features/map/layers/styles/interestPoint.style.ts b/frontend/src/features/map/layers/styles/interestPoint.style.ts
index a2def835e..7c16bc2a1 100644
--- a/frontend/src/features/map/layers/styles/interestPoint.style.ts
+++ b/frontend/src/features/map/layers/styles/interestPoint.style.ts
@@ -9,7 +9,7 @@ import {
   INTEREST_POINT_STYLE_ZINDEX
 } from '../../../../domain/entities/interestPoints'
 
-export const getIconStyle = (resolution: number) =>
+const getIconStyle = (resolution: number) =>
   new Style({
     image: new Icon({
       displacement: [0, 10],
@@ -19,7 +19,7 @@ export const getIconStyle = (resolution: number) =>
     zIndex: INTEREST_POINT_STYLE_ZINDEX
   })
 
-export const getLinesStyle = () => [
+export const getLineStyle = () => [
   new Style({
     stroke: new Stroke({
       color: THEME.color.slateGray,

From fdab195f3ccd39cab6f21615ce34ccb462298ca1 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Mon, 27 May 2024 11:58:32 +0200
Subject: [PATCH 14/14] [review] fix tests e2e idempotent

---
 .../mission_form/main_form.spec.ts            | 41 ++++++++-----------
 .../map/overlays/InterestPointOverlay.tsx     |  2 +-
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
index d5c6f7221..573813aea 100644
--- a/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts
@@ -75,6 +75,8 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.get('div').contains('Mission créée par le')
     cy.get('div').contains('Dernière modification enregistrée')
     cy.get('.Component-Banner').contains('La mission a bien été créée')
+    cy.clickButton('Supprimer la mission')
+    cy.get('*[name="delete-mission-modal-confirm"]').click()
   })
 
   it('A mission should be created When auto-save is not enabled', () => {
@@ -135,33 +137,22 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.clickButton('Enregistrer')
 
     // Then
-    cy.waitForLastRequest(
-      '@createMission',
-      {
-        body: {
-          controlUnits: [
-            {
-              administration: 'DIRM / DM',
-              id: 10011,
-              name: 'Cross Etel'
-            }
-          ],
-          missionTypes: ['SEA', 'LAND'],
-          openBy: 'PCF'
-        }
-      },
-      5
-    )
-      .its('response.statusCode')
-      .should('eq', 200)
+    cy.wait('@createMission').then(({ response }) => {
+      const id = response?.body.id
+      if (!response) {
+        assert.fail('response is undefined.')
+      }
+      assert.equal(response.statusCode, 200)
 
-    cy.wait('@getMissions')
-    cy.wait(500)
-    cy.get('*[data-cy="Missions-numberOfDisplayedMissions"]').then($el => {
-      const numberOfMissions = parseInt($el.text(), 10)
-      cy.get('@numberOfMissions').then(numberOfMissionsBefore => {
-        expect(numberOfMissions).equal(parseInt(numberOfMissionsBefore as unknown as string, 10) + 1)
+      cy.wait('@getMissions')
+      cy.wait(500)
+      cy.get('*[data-cy="Missions-numberOfDisplayedMissions"]').then($el => {
+        const numberOfMissions = parseInt($el.text(), 10)
+        cy.get('@numberOfMissions').then(numberOfMissionsBefore => {
+          expect(numberOfMissions).equal(parseInt(numberOfMissionsBefore as unknown as string, 10) + 1)
+        })
       })
+      cy.get(`*[data-cy="edit-mission-${id}"]`).scrollIntoView().click({ force: true })
     })
   })
 
diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
index b12290288..ae58bd0c5 100644
--- a/frontend/src/features/map/overlays/InterestPointOverlay.tsx
+++ b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -1,4 +1,4 @@
-import { Accent, Icon, IconButton, Size } from '@mtes-mct/monitor-ui'
+import { Accent, Icon, IconButton, Size, usePrevious } from '@mtes-mct/monitor-ui'
 import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'