IHM - Paramétrage et visualisation des résultats pour le service des traits de côte

[pierrejego]

Description

En tant qu' Utilisateur Je souhaite choisir parmi une liste de traits de côtes disponibles Afin de lancer le traitement et visualiser l'évolution de la cinématique du trait de côte

(Si) Règles spécifiques - Règles métiers

• A minima deux traits de côtes doivent pouvoir être choisi.
• Pas de limitation dans le nombre côte serveur, mais une limite est peut être a fixer pour une meilleur lisibilité.
• Les traits de côtes sélectionnés doivent être visibles sur la carte
• Mettre en évidence le trait de côte de référence (= année sélectionnée la plus ancienne)

(Si) Tests d'acceptabilité

L'utilisateur choisit deux traits de côtes, les données récupérées du service WPS montrent bien les données issues de ces deux traits de côte dans le graphique.

• [x] Je peux sélectionner différents traits de côte sur le site d'étude grâce à un système intuitif
• [x] Je peux modifier les paramètres initiaux du service WPS (ligne de référence et radiale)
• [x] Je peux visualiser l'évolution de la cinématique du trait de côte aux dates sélectionnées grâce à un graphique
• [x] Je peux exporter mes résultats en png

Complément (graphique, capture, schéma, etc.)

[Agath21]

Solution(s) proposée(s)

Maquettes

Maquettes non contractuelles, les données visualisées sont inventées pour les besoins de compréhension des fonctionnalités

Parcours utilisateurs

Après avoir sélectionné le service "Traits de côte" dans la liste, l'utilisateur doit suivre les étapes suivantes :

Onglet PARAMÈTRES DU SERVICE

1 - Par défaut, l'ensemble des traits de côte disponible pour le site d'étude est affiché sur la carte et dans la boîte de sélection "Traits de côte sélectionnées"

2 - L'utilisateur sélectionne / désélectionne les dates souhaitées à l'aide des 4 boutons centraux. Il a la possibilité d'effectuer une recherche de date avec la barre de recherche

L'affichage cartographique s'ajuste selon les sélections Voir un exemple live du composant ici https://crlcu.github.io/multiselect/examples/search.html

3 - L'utilisateur peut modifier les paramètres initiaux de la ligne de référence et la radiale en dépliant une boîte grâce à l'icône +

• Tracer une nouvelle ligne de de référence pour créer la radiale
• La longueur de la radial – en mètre
• L’espacement entre deux traits de radial – en mètre
• La direction de la radiale ( true ou false )

4 - On lance le traitement via le bouton associé. Il est aussi possible de supprimer tous les paramètres via le bouton "Réinitialiser"

En cliquant sur le bouton de lancement, l'application doit changer d'onglet sans action de l'utilisateur pour afficher le graphique

Onglet VISUALISATION DES RÉSULTATS

5 - L'utilisateur visualise l'évolution des traits de côte selon le TDC de référence (affiché en 0) et les différents profils de la radiale.

Le graphique affiche n TDC correspondants aux n TDC sélectionnés auparavant. Le graphique est légèrement interactif : affichage des valeurs lors du survol + affichage / désaffichage des TDC

6 - L'utilisateur peut ensuite exporter le graph en png

Fonctionnalités IHM mobilisées et démo

Système d'onglet pour switcher entre les paramètres et résultats :

• Bootstrap / Navs et Tabs
• https://getbootstrap.com/docs/5.0/components/navs-tabs/

Système de multi sélection en deux blocs avec barre de recherche

• Bootstrap et jQuery
• Démo: https://crlcu.github.io/multiselect/examples/search.html

Système d'affichage des paramètres avancés en accordéon

• Bootstrap / Collapse
• https://getbootstrap.com/docs/5.0/components/collapse/

À définir

• [x] Intitulés des paramètres avancés + textes descriptifs lors du survol de l'icône
• [x] Intitulés du graphique et des axes (+ unités)

[Gaetanbrl]

L'utilisateur sélectionne / désélectionne les dates souhaitées à l'aide des 4 boutons centraux. Il a la possibilité d'effectuer une recherche de date avec la barre de recherche

Comment tout désélectionner / tout sélectionner @Agath21 ?

[Agath21]

@Gaetanbrl En utilisant le système ci-dessous (comme les SLD dans geoserver) :

Tu peux voir une démo ici >> https://crlcu.github.io/multiselect/examples/search.html

[Gaetanbrl]

Merci, j'ai modifié ta description pour ajouter ce lien.

[Agath21]

Merci je l'avais mis en dessous mais ce n'est pas explicite ...

[Agath21]

Je précise que ce fonctionnement est à valider lors de notre point de vendredi.

[Gaetanbrl]

Attention ==> Je vois que JQuery est une dépendance du MultiSelect alors qu'on est en train de dégager complètement JQuery de Mviewer.

Solutions possibles pour ce type d'UI:

• conserver ce composant qui embarquera JQuery comme dépendance au module (mais pas comme dépendance mviewer)
• Trouver une alternative : https://www.cssscript.com/demo/pure-js-dual-list-box-component/

[Gaetanbrl]

Merci je l'avais mis en dessous mais ce n'est pas explicite ...

J'avais pas vu, c'est très explicite comme ca ;)

[Agath21]

Dans l'onglet "Résultats", il semble compliqué d'afficher toutes les légendes lorsque l'on a sélectionné 50 traits de côte.

Afin d'améliorer la lisibilité, il est proposé de rajouter un bloc légende dans la partie cartographique avec les TDC sélectionnées et la symbologie associée :

La légende devra s'adapter lors de la sélection et rester affichée lors de la visualisation des résultats

[Gaetanbrl]

En cours :

• [x] Afficher tous les TDC sur la carte au clic sur la carte du service "TDC"
• [x] Voir les dates des TDC dans le multi select toutes cochées par défaut
• [x] Ajouter un nouveau bloc "légende" vide
• [x] Lors de la sélection d'une date, compléter le bloc le nouveau bloc de "légende" avec les TDC sélectionnés
• [x] Lors de la sélection d'une date, voir sur la carte les TDC sélectionnés uniquement
• [x] A l'ouverture du menu TDC, voir tous les TDC sur la carte
• [x] Lors de l'affichage de la radiale, afficher la ligne de référence sur la carte
• [x] Voir dans le graph les infos retournées par le costalinetracking
• [x] Voir dans le graph la date de référence dans le titre (date la plus ancienne si plusieurs dates sans données)
• [x] Au clic sur "réinitialiser", suppression du graph
• [x] Au clic sur "réinitialiser", voir tous les TDC sur la carte
• [x] Lors de l'utilisation du multi select, contrôler que les dates sont >= à 2 pour pouvoir cliquer sur "Lancer le traitement"
• [x] Paramétrage de la longueur
• [x] Paramétrage de l'espacement
• [x] Paramétrage de la direction
• [x] Voir les lignes dans le graph de la même couleur que les dates dans le multi select
• [x] Voir les lignes dans le graph de la même couleur que les TDC
• [x] Voir les lignes dans le graph de la même couleur que la légende
• [x] Lors du clic sur un autre site, tout doit être réinitialisé avec le comportement identique au premier clic
• [x] Lors du clic sur un autre site, les TDC, radiales, lignes de références d'un autre site ne sont plus visibles
• [x] Le bouton "Lancer le traitement" ne doit pas apparaître avec l'onglet "Résultat"
• [x] Masquer le site au clic sur un site (lors du zoom)
• [x] Utiliser Plotly.js
• [x] Masquer les TDC au retour vers le menu principal (les cards)
• [x] export CSV des données du graph
• [x] export PNG
• [x] export SVG
• [x] Graph tauxRecul
• [x] Bouton "Tous sélectionner"
• [x] Bouton "Tous désélectionner"
• [x] Afficher les dates par ordre chronologique dans la légende et le multi selector
• [ ] Afficher les taux sur l'échelle axe Y (penser à diviser par 365)
• [x] Ajouter un labels sur les profils
• [x] Zoom sur la commune au clic
• [x] Pouvoir tracer la ligne de référence sur la carte
• [x] Pouvoir voir le bon nom de site au survol (récupérer les infos dans la couche GS WFS)
• [x] Pouvoir avoir les paramètres par défaut depuis postgREST (https://gis.jdev.fr/maddogapi/site?code_site=eq.VOUGOT)
• [x] Voir namesite pour le nom du site d'étude et non le champ idsite

[pierrejego]

• [x] Empêcher le lancement du traitement si moins de deux traits de cotes sont sélectionnés

[pierrejego]

• [x] Ajouter un loader
• [x] Ajout le graphe sur le taux de recul