Skip to content

Commit 440f4fe

Browse files
elias75015elias75015
authored
Merge pull request #423 from IGNF/feature/catalog-optimise
chore(Catalog): Ensemble d'optimisation / fix de l'outil
2 parents f8688c6 + 97a664c commit 440f4fe

32 files changed

+3382
-561
lines changed

‎DRAFT_CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ __DATE__
1919

2020
* 🔨 [Changed]
2121

22+
- Catalog : refonte et optimisation du widget (#423)
2223
- LayerSwitcher : refonte complète de l'outil (#434)
2324
- Contextual Menu : Changement nom de l'entrée isochrone (3d228a692c8d51155bbdf8c8c32bb51629b6a03f)
2425
- GetFeatureInfo : corrections diverse sur l'UI du panel de résultats (#448)

‎doc/NOTE-CATALOG-ICON.md‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
# Notion d'icone pour les sections du composant Catalog
2+
3+
Ce document aborde la **configuration des icônes pour les sections**, offrant la
4+
possibilité d'attribuer des icônes spécifiques ou par défaut.
5+
6+
Il **décrit les différentes méthodes pour définir ces configurations**,
7+
qu'elles soient absentes, spécifiques à une section, ou gérées globalement.
8+
9+
Le format des icônes doit adhérer au standard DSFR (`fr-icon-*`).
10+
11+
Le texte **détaille comment les options de recherche de configuration peuvent être
12+
établies**, par exemple via une URL, un objet JSON, ou un fichier local.
13+
Enfin, il **présente les emplacements possibles pour ces configurations**,
14+
incluant des fichiers spécifiques, le fichier de configuration principal
15+
(ex. `entreeCarto.json`), ou des valeurs par défaut internes au composant.
16+
17+
Pour spécifier et rechercher les configurations d'icônes spécifiques à une section,
18+
plusieurs options sont disponibles, permettant une flexibilité quant à l'emplacement
19+
et la méthode de récupération de ces configurations.
20+
21+
### Activation des icônes de section
22+
23+
Avant de parler des options de configuration, il est important de noter que les
24+
icônes de section sont utilisées si l'option **`icon=true`** est activée pour
25+
une catégorie avec regroupement par section (**`section=true`**).
26+
27+
### Options pour spécifier la configuration d'une section
28+
29+
La configuration d'icônes pour une section peut être gérée de deux manières principales :
30+
31+
1. **Absente** : la **configuration principale par défaut** est utilisée.
32+
2. **Spécifique à la section** : cela nécessite d'interroger une configuration
33+
locale ou distante propre à cette section.
34+
35+
Un format de configuration doit être spécifié pour des sections spécifiques
36+
comme "thème" et "producteur".
37+
38+
### Sources de configuration possibles
39+
40+
La configuration d'une section peut résider à plusieurs endroits :
41+
42+
* Dans un **fichier spécifique**.
43+
* Dans le **fichier de configuration principale**, tel que `entreeCarto.json`.
44+
45+
Si la configuration d'une section n'est pas trouvée, on utilise la configuration interne au composant lui-même.
46+
47+
### Options de recherche des configurations spécifiques
48+
49+
Il est nécessaire de mettre en place des options pour rechercher ces configurations.
50+
Voici les mécanismes de recherche :
51+
52+
* **Recherche par défaut (si aucune option n'est spécifiée)** :
53+
54+
Si aucune option de configuration n'est renseignée, le composant interrogera
55+
par défaut le fichier **`entreeCarto.json`**.
56+
Si les configurations spécifiques (comme `thematic`, `producer`, etc.)
57+
sont présentes dans ce fichier, elles seront prises en compte.
58+
59+
* **Recherche via une option de configuration (ex: `option iconJson`)** :
60+
61+
Pour une configuration fournie directement sous forme de données JSON.
62+
63+
Si une option de configuration est renseignée, mais aucune donnée n'est trouvée, cela déclenche un import dynamique des fichiers JSON locaux.
64+
65+
---
66+
67+
Voici un exemple de la manière dont la section `producer` serait structurée au sein d'un fichier de configuration (comme `entreeCarto.json` s'il n'y a pas d'option spécifique renseignée) :
68+
69+
```json
70+
{
71+
// ... autres configurations ...
72+
73+
"thematic": [
74+
// ... configuration spécifique aux thèmes ...
75+
],
76+
77+
"producer": [
78+
{
79+
"id": "ministere-transition",
80+
"name": "Ministère de la Transition Écologique",
81+
"icon": "fr-icon-government-line"
82+
},
83+
{
84+
"id": "insee",
85+
"name": "INSEE",
86+
"icon": "fr-icon-pie-chart-line"
87+
}
88+
],
89+
90+
// ... autres configurations ...
91+
}
92+
```
93+
94+
avec
95+
96+
```json
97+
{
98+
"categories": [
99+
{
100+
"title": "Toutes les cartes",
101+
"id": "data",
102+
"search": true,
103+
"items": [
104+
{
105+
"title": "Producteur",
106+
"default": true,
107+
"section": true,
108+
"icon": true, // Active l'utilisation des icônes pour cette section
109+
"filter": {
110+
"field": "producer", // La clef !
111+
"value": "*"
112+
}
113+
}
114+
]
115+
}
116+
]
117+
}
118+
```
119+
120+
Dans cet exemple :
121+
122+
* La clé `"producer"` est un **point d'entrée** dans la configuration, comme mentionné par la source.
123+
* Le contenu du tableau associé à `"producer"` (`[...]`) serait la définition des configurations pour les différents producteurs.
124+
* Pour que ces icônes soient affichées, la catégorie correspondante dans la section `categories` doit avoir l'option **`icon: true`** activée.
125+
126+
Les options de recherche pour ces configurations peuvent inclure des URLs, des objets JSON directs ou un mot-clé `"internal"` pour une configuration interne au composant.
127+
128+
---
129+
130+
Les mécanismes de configuration et les sources des icônes pour la section **`thematic`** sont identiques à ceux de la section `producer`, à la différence majeure, à savoir la **notion de traduction Anglais -> Français du nom de la thématique**.
131+
132+
Un exemple de configuration de catégorie montre comment cela est activé pour les "Thèmes" :
133+
134+
```json
135+
{
136+
// ... autres configurations ...
137+
138+
"categories": [
139+
{
140+
"title": "Toutes les cartes",
141+
"id": "data",
142+
"search": true,
143+
"items": [
144+
{
145+
"title": "Thème",
146+
"default": true,
147+
"section": true,
148+
"icon": true, // Active l'utilisation des icônes pour cette section
149+
"filter": {
150+
"field": "thematic", // La clef !
151+
"value": "*"
152+
}
153+
}
154+
]
155+
}
156+
]
157+
}
158+
```
159+
160+
La clé **`thematic`** sert de **point d'entrée dans la configuration**.
161+
Cette configuration peut être absente (utilisant alors la configuration principale par défaut),
162+
ou spécifique à la section (locale ou distante).
163+
164+
Voici une structure JSON pour la section `thematic`,
165+
en intégrant la traduction des noms :
166+
167+
```json
168+
{
169+
// ... autres configurations ...
170+
171+
"thematic": [
172+
{
173+
"id": "environnement",
174+
"name": {
175+
"fr": "Environnement",
176+
"en": "Environment"
177+
},
178+
"icon": "fr-icon-leaf-line" // Icône DSFR pour la thématique "Environnement"
179+
},
180+
{
181+
"id": "economie",
182+
"name": {
183+
"fr": "Économie et Emploi",
184+
"en": "Economy and Employment"
185+
},
186+
"icon": "fr-icon-bank-line" // Icône DSFR pour la thématique "Économie"
187+
},
188+
{
189+
"id": "social",
190+
"name": {
191+
"fr": "Social et Santé",
192+
"en": "Social and Health"
193+
},
194+
"icon": "fr-icon-user-line" // Icône DSFR pour la thématique "Social"
195+
}
196+
// ... d'autres thématiques ...
197+
],
198+
199+
"producer": [
200+
// ... configuration spécifique aux producteurs ...
201+
],
202+
203+
// ... autres configurations ...
204+
}
205+
```
206+
207+
Dans cet exemple, pour la traduction :
208+
209+
* Chaque objet de thématique contient une propriété `"name"` qui est elle-même un objet.
210+
* Cet objet `"name"` possède des clés de langue (ex: `"fr"`, `"en"`) associées à la traduction du nom de la thématique.

‎doc/NOTE-CATALOG-PERF.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Informations utiles sur le gestionnaire du catalogue (Copilot)
2+
3+
> Questions / Réponses realisées avec Copilot
4+
5+
## Voici plusieurs pistes concrètes pour optimiser et améliorer les performances
6+
7+
<https://web.dev/articles/dom-size-and-interactivity?hl=fr>
8+
9+
<https://learn.microsoft.com/en-us/microsoft-edge/devtools/performance/selector-stats>
10+
11+
### 1. **Chargement asynchrone et lazy loading**
12+
13+
- ✔️ **Chargement différé des couches** : Ne charge que la configuration ou les couches visibles à l’ouverture du panneau, ou lors d’un changement d’onglet/catégorie.
14+
- ✔️ **Pagination ou virtualisation** : Si le catalogue contient beaucoup de couches, affiche-les par pages ou utilise une liste virtuelle (DOM limité aux éléments visibles).
15+
16+
---
17+
18+
### 2. **Manipulation DOM efficace**
19+
20+
- ✔️ **Minimiser les accès et modifications DOM** : Utilise des fragments (`DocumentFragment`) pour construire les listes avant insertion, évite les suppressions/ajouts répétés.
21+
- ✔️ **Batch update** : Grouper les modifications DOM lors des filtres ou changements de catégories.
22+
23+
---
24+
25+
### 3. **Optimisation des filtres et recherches**
26+
27+
- ❌ **Pré-indexation** : Prépare un index (par critère de recherche) lors du chargement pour accélérer les recherches.
28+
- ✅ **Debounce sur la recherche** : Ajoute un délai (debounce) sur l’input de recherche pour éviter de recalculer à chaque frappe.
29+
30+
---
31+
32+
### 4. **Gestion mémoire et objets**
33+
34+
- ✅ **Nettoyage des listeners** : Vérifie que tous les écouteurs sont bien retirés lors de la destruction ou du retrait du contrôle.
35+
- ❌ **Réutilisation des objets** : Réutilise les objets de configuration et évite les copies profondes inutiles.
36+
37+
---
38+
39+
### 5. **Affichage et rendu**
40+
41+
- ✔️ **Affichage conditionnel** : Ne crée les éléments DOM des catégories/onglets que lorsqu’ils sont affichés.
42+
- ✅ **Utilisation de classes CSS** : Préfère masquer/afficher via des classes plutôt que de supprimer/ajouter des éléments DOM.
43+
44+
---
45+
46+
### 6. **Optimisation du tri et des boucles**
47+
48+
- ✔️ **Tri une seule fois** : Trie la liste des couches une seule fois lors du chargement, pas à chaque ajout.
49+
- ✔️ **Boucles efficaces** : Utilise `for...of` ou `Object.keys()` pour itérer sur les objets, évite les boucles imbriquées inutiles.
50+
51+
---
52+
53+
### 7. **Exemple d’amélioration sur le filtre de recherche**
54+
55+
✅ Ajoute un debounce sur la recherche :
56+
57+
````javascript
58+
// ...existing code...
59+
onSearchCatalogInputChange () {
60+
clearTimeout(this._searchTimeout);
61+
this._searchTimeout = setTimeout(() => {
62+
this.onSearchCatalogButtonClick();
63+
}, 200); // 200ms de délai
64+
}
65+
// ...existing code...
66+
````
67+
68+
---
69+
70+
### 8. **Audit et outils**
71+
72+
- **Profiler navigateur** : Utilise les outils de profilage (Chrome DevTools) pour repérer les lenteurs lors de l’ouverture du catalogue ou de la recherche.
73+
- **Audit Lighthouse** : Pour vérifier l’impact sur le temps de chargement et la réactivité.
74+
75+
---
76+
77+
### 9. **Documentation et bonnes pratiques**
78+
79+
- ✔️ Documente les points critiques (ex : pourquoi tel choix de structure, comment étendre le contrôle sans impacter les perfs).
80+
- ❌ Ajoute des tests de performance si le catalogue évolue.
81+
82+
---
83+
84+
**En résumé** :
85+
86+
- Charge et affiche uniquement ce qui est nécessaire.
87+
- Optimise les accès DOM et les traitements en mémoire.
88+
- Nettoie bien les ressources.
89+
- Utilise les outils de profilage pour cibler les vrais points à améliorer.
90+
91+
## ...

0 commit comments

Comments
 (0)