Tech: Réduction de la taille du paquet javascript

frontend/cypress/e2e/main_window/reporting/create_reporting.spec.ts

@@ -1,4 +1,4 @@
-import { omit } from 'lodash'
+import { omit } from 'lodash-es'
 
 import { FAKE_MAPBOX_RESPONSE } from '../../constants'
 import { createReporting } from '../../utils/createReporting'

frontend/package.json

@@ -26,15 +26,14 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "24.12.0",
+    "@mtes-mct/monitor-ui": "24.12.1",
     "@react-pdf/renderer": "4.2.1",
     "@reduxjs/toolkit": "2.5.1",
     "@sentry/browser": "8.54.0",
     "@sentry/react": "8.54.0",
     "@sentry/tracing": "7.120.3",
-    "@sentry/vite-plugin": "2.22.7",
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.12.0",
     "classnames": "2.5.1",
     "compressorjs": "1.2.1",
@@ -45,7 +44,7 @@
     "hammerjs": "2.0.8",
     "imask": "7.6.1",
     "jsts": "2.12.1",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "oidc-client-ts": "2.4.1",
     "ol": "10.4.0",
     "ol-mapbox-style": "12.3.3",
@@ -87,6 +86,7 @@
     "@types/google.maps": "3.58.1",
     "@types/jest": "29.5.14",
     "@types/node": "20.9.0",
+    "@types/lodash-es": "4.17.12",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "7.1.0",
@@ -127,6 +127,7 @@
     "prettier": "2.7.1",
     "puppeteer": "22.12.1",
     "ramda": "0.30.1",
+    "rollup-plugin-visualizer": "5.14.0",
     "type-fest": "4.33.0",
     "typescript": "5.7.3",
     "vite": "6.1.0",

frontend/src/api/googlePlacesAPI/googlePlacesAPI.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import { throttle } from 'lodash-es'
 import { useEffect, useState, useMemo, useRef, type MutableRefObject } from 'react'
 
 import { loadGoogleMapScript } from './utils'
@@ -52,7 +52,7 @@ export const useGooglePlacesAPI = search => {
   }, [])
 
   const throttledSearch = useMemo(() => {
-    const throttled = _.throttle(
+    const throttled = throttle(
       async query => {
         if (abortControlerRef.current) {
           abortControlerRef.current.abort()

frontend/src/api/nominatimAPI.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import { isEmpty, throttle } from 'lodash-es'
 import { useEffect, useState, useMemo, useRef, type MutableRefObject } from 'react'
 
 const NOMINATIM_API_URL = 'https://nominatim.openstreetmap.org/search'
@@ -39,7 +39,7 @@ export const useNominatimAPI = (search, { limit = 10 } = {}) => {
   const abortControlerRef = useRef() as MutableRefObject<AbortController>
 
   const throttledSearch = useMemo(() => {
-    const throttled = _.throttle(
+    const throttled = throttle(
       query => {
         if (abortControlerRef.current) {
           abortControlerRef.current.abort()
@@ -63,7 +63,7 @@ export const useNominatimAPI = (search, { limit = 10 } = {}) => {
 
           return fetch(queryURL, { signal: abortControlerRef.current.signal })
             .then(r => r.json())
-            .then(data => setResults(_.isEmpty(data) ? [{ display_name: 'Pas de résultats' }] : data))
+            .then(data => setResults(isEmpty(data) ? [{ display_name: 'Pas de résultats' }] : data))
         }
 
         return setResults([])

frontend/src/domain/shared_slices/Administrative.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -22,7 +22,7 @@ const administrativeSlice = createSlice({
      * @param {AdministrativeZone} action.payload - The regulatory zone
      */
     hideAdministrativeLayer(state, action) {
-      state.showedAdministrativeLayerIds = _.without(state.showedAdministrativeLayerIds, action.payload)
+      state.showedAdministrativeLayerIds = without(state.showedAdministrativeLayerIds, action.payload)
     },
 
     /**
@@ -33,7 +33,7 @@ const administrativeSlice = createSlice({
      * @param {AdministrativeZone} action.payload - The regulatory zone
      */
     showAdministrativeLayer(state, action) {
-      state.showedAdministrativeLayerIds = _.uniq(_.concat(state.showedAdministrativeLayerIds, action.payload))
+      state.showedAdministrativeLayerIds = uniq(concat(state.showedAdministrativeLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/shared_slices/Amp.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, difference, union, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -31,8 +31,8 @@ const ampSlice = createSlice({
     addAmpZonesToMyLayers(state, action) {
       return {
         ...state,
-        selectedAmpLayerIds: _.union(state.selectedAmpLayerIds, action.payload),
-        showedAmpLayerIds: _.union(state.showedAmpLayerIds, action.payload)
+        selectedAmpLayerIds: union(state.selectedAmpLayerIds, action.payload),
+        showedAmpLayerIds: union(state.showedAmpLayerIds, action.payload)
       }
     },
 
@@ -43,10 +43,10 @@ const ampSlice = createSlice({
      * @param {number} action.payload - The amp zone id
      */
     hideAmpLayer(state, action) {
-      state.showedAmpLayerIds = _.without(state.showedAmpLayerIds, action.payload)
+      state.showedAmpLayerIds = without(state.showedAmpLayerIds, action.payload)
     },
     hideAmpLayers(state, action) {
-      state.showedAmpLayerIds = _.without(state.showedAmpLayerIds, ...action.payload)
+      state.showedAmpLayerIds = without(state.showedAmpLayerIds, ...action.payload)
     },
 
     /**
@@ -59,8 +59,8 @@ const ampSlice = createSlice({
     removeAmpZonesFromMyLayers(state, action) {
       return {
         ...state,
-        selectedAmpLayerIds: _.difference(state.selectedAmpLayerIds, action.payload),
-        showedAmpLayerIds: _.difference(state.showedAmpLayerIds, action.payload)
+        selectedAmpLayerIds: difference(state.selectedAmpLayerIds, action.payload),
+        showedAmpLayerIds: difference(state.showedAmpLayerIds, action.payload)
       }
     },
 
@@ -71,7 +71,7 @@ const ampSlice = createSlice({
      * @param {AmpZone[]} action.payload - The amp zone
      */
     showAmpLayer(state, action) {
-      state.showedAmpLayerIds = _.uniq(_.concat(state.showedAmpLayerIds, action.payload))
+      state.showedAmpLayerIds = uniq(concat(state.showedAmpLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/shared_slices/MissionFilters.ts

@@ -1,6 +1,6 @@
 import { customDayjs } from '@mtes-mct/monitor-ui'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { isEqual, omit } from 'lodash'
+import { isEqual, omit } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 

frontend/src/domain/shared_slices/Regulatory.ts

@@ -1,5 +1,5 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, difference, union, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -31,8 +31,8 @@ const regulatorySlice = createSlice({
     addRegulatoryZonesToMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
-        selectedRegulatoryLayerIds: _.union(state.selectedRegulatoryLayerIds, action.payload),
-        showedRegulatoryLayerIds: _.union(state.showedRegulatoryLayerIds, action.payload)
+        selectedRegulatoryLayerIds: union(state.selectedRegulatoryLayerIds, action.payload),
+        showedRegulatoryLayerIds: union(state.showedRegulatoryLayerIds, action.payload)
       }
     },
 
@@ -43,10 +43,10 @@ const regulatorySlice = createSlice({
      * @param {number} action.payload - The regulatory zone id
      */
     hideRegulatoryLayer(state, action: PayloadAction<number>) {
-      state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, action.payload)
+      state.showedRegulatoryLayerIds = without(state.showedRegulatoryLayerIds, action.payload)
     },
     hideRegulatoryLayers(state, action: PayloadAction<number[]>) {
-      state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, ...action.payload)
+      state.showedRegulatoryLayerIds = without(state.showedRegulatoryLayerIds, ...action.payload)
     },
 
     /**
@@ -59,13 +59,13 @@ const regulatorySlice = createSlice({
     removeRegulatoryZonesFromMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
-        selectedRegulatoryLayerIds: _.difference(state.selectedRegulatoryLayerIds, action.payload),
-        showedRegulatoryLayerIds: _.difference(state.showedRegulatoryLayerIds, action.payload)
+        selectedRegulatoryLayerIds: difference(state.selectedRegulatoryLayerIds, action.payload),
+        showedRegulatoryLayerIds: difference(state.showedRegulatoryLayerIds, action.payload)
       }
     },
 
     showRegulatoryLayer(state, action: PayloadAction<number | number[]>) {
-      state.showedRegulatoryLayerIds = _.uniq(_.concat(state.showedRegulatoryLayerIds, action.payload))
+      state.showedRegulatoryLayerIds = uniq(concat(state.showedRegulatoryLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/use_cases/administrative/showAdministrativeLayer.ts

@@ -1,5 +1,5 @@
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
-import { find, flatten } from 'lodash'
+import { find, flatten } from 'lodash-es'
 import GeoJSON from 'ol/format/GeoJSON'
 import VectorImageLayer from 'ol/layer/VectorImage'
 import { bbox as bboxStrategy } from 'ol/loadingstrategy'

frontend/src/features/Administration/components/AdministrationTable/index.tsx

@@ -46,7 +46,7 @@ export function AdministrationTable() {
   }, [administrationTable.filtersState, administrations])
 
   const askForArchivingConfirmation = useCallback(
-    async (cellContext: CellContext<Administration.Administration, unknown>) => {
+    async (cellContext: CellContext<Administration.Administration, any>) => {
       const administration = cellContext.getValue<Administration.Administration>()
 
       const { data: canArchiveAdministration } = await dispatch(
@@ -65,7 +65,7 @@ export function AdministrationTable() {
   )
 
   const askForDeletionConfirmation = useCallback(
-    async (cellContext: CellContext<Administration.Administration, unknown>) => {
+    async (cellContext: CellContext<Administration.Administration, any>) => {
       const administration = cellContext.getValue<Administration.Administration>()
 
       const { data: canDeleteAdministration } = await dispatch(

frontend/src/features/Administration/components/AdministrationTable/slice.ts

@@ -1,5 +1,5 @@
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { set } from 'lodash/fp'
+import { set } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -32,7 +32,7 @@ const AdministrationTableSlice = createSlice({
         value: any
       }>
     ) {
-      state.filtersState = set(action.payload.key, action.payload.value, state.filtersState)
+      state.filtersState = set(state.filtersState, action.payload.key, action.payload.value)
     }
   }
 })

frontend/src/features/Administration/components/AdministrationTable/utils.tsx

@@ -8,8 +8,8 @@ import type { CellContext, ColumnDef } from '@tanstack/react-table'
 import type { Promisable } from 'type-fest'
 
 export function getAdministrationTableColumns(
-  askForArchivingConfirmation: (cellContext: CellContext<Administration.Administration, unknown>) => Promisable<void>,
-  askForDeletionConfirmation: (cellContext: CellContext<Administration.Administration, unknown>) => Promisable<void>,
+  askForArchivingConfirmation: (cellContext: CellContext<Administration.Administration, any>) => Promisable<void>,
+  askForDeletionConfirmation: (cellContext: CellContext<Administration.Administration, any>) => Promisable<void>,
   isArchived: boolean = false
 ): Array<ColumnDef<Administration.Administration>> {
   const archiveColumn: ColumnDef<Administration.Administration> = {

frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/utils.ts

@@ -1,5 +1,5 @@
 import { type ControlUnit } from '@mtes-mct/monitor-ui'
-import { sortBy } from 'lodash/fp'
+import { sortBy } from 'lodash-es'
 
 import { CONTROL_UNIT_CONTACT_PREDEFINED_NAMES } from './constants'
 
@@ -18,8 +18,8 @@ export function sortControlUnitContactsByQualifiedName(
   const customNamedContacts = controlUnitContacts.filter(
     ({ name }) => !CONTROL_UNIT_CONTACT_PREDEFINED_NAMES.includes(name)
   )
-  const sortedPredefinedNamedContacts = sortBy(['name'], predefinedNamedContacts)
-  const sortedCustomNamedContacts = sortBy(['name'], customNamedContacts)
+  const sortedPredefinedNamedContacts = sortBy(predefinedNamedContacts, ['name'])
+  const sortedCustomNamedContacts = sortBy(customNamedContacts, ['name'])
 
   return [...sortedPredefinedNamedContacts, ...sortedCustomNamedContacts]
 }

frontend/src/features/ControlUnit/components/ControlUnitDialog/index.tsx

@@ -6,7 +6,7 @@ import { DateRangeEnum } from 'domain/entities/dateRange'
 import { sideWindowPaths } from 'domain/entities/sideWindow'
 import { MissionFiltersEnum, resetMissionFilters, updateFilters } from 'domain/shared_slices/MissionFilters'
 import { Formik } from 'formik'
-import { noop } from 'lodash/fp'
+import { noop } from 'lodash-es'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/ControlUnit/components/ControlUnitForm/index.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mtes-mct/monitor-ui'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { Formik } from 'formik'
-import { sortBy } from 'lodash/fp'
+import { sortBy } from 'lodash-es'
 import { useCallback, useMemo } from 'react'
 import { useNavigate, useParams } from 'react-router'
 import styled from 'styled-components'
@@ -62,11 +62,11 @@ export function ControlUnitForm() {
     () =>
       departmentAreas
         ? sortBy(
-            ['label'],
             departmentAreas.map(departmentArea => ({
               label: `${departmentArea.inseeCode} - ${departmentArea.name}`,
               value: departmentArea.inseeCode
-            }))
+            })),
+            ['label']
           )
         : undefined,
     [departmentAreas]

frontend/src/features/ControlUnit/components/ControlUnitListDialog/slice.ts

@@ -1,5 +1,5 @@
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { set } from 'lodash/fp'
+import { set } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -32,7 +32,7 @@ const controlUnitListDialogSlice = createSlice({
         value: any
       }>
     ) {
-      state.filtersState = set(action.payload.key, action.payload.value, state.filtersState)
+      state.filtersState = set(state.filtersState, action.payload.key, action.payload.value)
     }
   }
 })

frontend/src/features/ControlUnit/components/ControlUnitTable/index.tsx

@@ -41,18 +41,15 @@ export function ControlUnitTable() {
     return filters.reduce((previousControlUnits, filter) => filter(previousControlUnits), controlUnits)
   }, [controlUnits, controlUnitTable.filtersState])
 
-  const askForArchivingConfirmation = useCallback(
-    async (cellContext: CellContext<ControlUnit.ControlUnit, unknown>) => {
-      const controlUnit = cellContext.getValue<ControlUnit.ControlUnit>()
+  const askForArchivingConfirmation = useCallback(async (cellContext: CellContext<ControlUnit.ControlUnit, any>) => {
+    const controlUnit = cellContext.getValue<ControlUnit.ControlUnit>()
 
-      setTargetedControlUnit(controlUnit)
-      setIsArchivingConfirmationModalOpen(true)
-    },
-    []
-  )
+    setTargetedControlUnit(controlUnit)
+    setIsArchivingConfirmationModalOpen(true)
+  }, [])
 
   const askForDeletionConfirmation = useCallback(
-    async (cellContext: CellContext<ControlUnit.ControlUnit, unknown>) => {
+    async (cellContext: CellContext<ControlUnit.ControlUnit, any>) => {
       const controlUnit = cellContext.getValue<ControlUnit.ControlUnit>()
 
       const { data: canDeleteControlUnit } = await dispatch(

frontend/src/features/ControlUnit/components/ControlUnitTable/slice.ts

@@ -1,5 +1,5 @@
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { set } from 'lodash/fp'
+import { set } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -33,7 +33,7 @@ const controlUnitTableSlice = createSlice({
         value: any
       }>
     ) {
-      state.filtersState = set(action.payload.key, action.payload.value, state.filtersState)
+      state.filtersState = set(state.filtersState, action.payload.key, action.payload.value)
     }
   }
 })

frontend/src/features/ControlUnit/components/ControlUnitTable/utils.tsx

@@ -7,8 +7,8 @@ import type { CellContext, ColumnDef } from '@tanstack/react-table'
 import type { Promisable } from 'type-fest'
 
 export function getControlUnitTableColumns(
-  askForArchivingConfirmation: (cellContext: CellContext<ControlUnit.ControlUnit, unknown>) => Promisable<void>,
-  askForDeletionConfirmation: (cellContext: CellContext<ControlUnit.ControlUnit, unknown>) => Promisable<void>,
+  askForArchivingConfirmation: (cellContext: CellContext<ControlUnit.ControlUnit, any>) => Promisable<void>,
+  askForDeletionConfirmation: (cellContext: CellContext<ControlUnit.ControlUnit, any>) => Promisable<void>,
   isArchived: boolean = false
 ): Array<ColumnDef<ControlUnit.ControlUnit>> {
   const archiveColumn: ColumnDef<ControlUnit.ControlUnit> = {