Stoqs: Ajouter des boutons radio « Tracé de contour »

Des compétences de développeur Full Stack sont nécessaires pour implémenter cette nouvelle fonctionnalité. Côté client, il y a du HTML et du JavaScript (JQuery) à écrire. AJAX doit être compris pour transmettre des données entre l'interface utilisateur et le serveur. Côté serveur, il y a du code Python qui doit être écrit pour faire le traçage. Pour conclure, un test fonctionnel sera écrit à l'aide de Selenium. (Idéalement, pour suivre la vraie méthodologie TDD, le test sera écrit en premier !)

Bienvenue @J0S349 , @noemicuin , @LeslyGJ , @samuelrey ! Je suis content que vous ayez choisi ce problème. C'est quelque chose qui a été demandé par l'un de nos scientifiques et je pense qu'ils seront heureux d'avoir cette fonctionnalité.

Lors de la tournée de MBARI hier, nous sommes passés devant une affiche qui présentait un exemple du type d'intrigue que cette nouvelle fonctionnalité fournirait :

Le graphique du haut montre la température sous forme de couleurs et également sous forme de lignes de contour blanches. Le graphique du bas montre la chlorophylle comme couleur et les lignes de contour blanches sont les mêmes que dans le graphique du haut, Température.

La fonctionnalité à ajouter à l'interface utilisateur STOQS est la possibilité d'ajouter des lignes de contour de n'importe quel paramètre.

Le test test_contour_plots() ajouté par https://github.com/stoqs/stoqs/pull/501 peut être exécuté à partir de ~/dev/stoqsgit avec :

export DJANGO_SETTINGS_MODULE=config.settings.ci
export DATABASE_URL=postgis://127.0.0.1:5432/stoqs
stoqs/manage.py test stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots

Si vous remettez le point d'arrêt de débogage qui a été supprimé par https://github.com/stoqs/stoqs/pull/501/commits/b976d708e13fd208df3f29c6f12bd1692e427e38, vous devriez voir une fenêtre comme celle-ci :

Notez que pour exécuter les tests fonctionnels, le serveur de développement doit être en cours d'exécution. Assurez-vous que cela a été exécuté dans une autre session de terminal :

cd ~/dev/stoqsgit && source venv-stoqs/bin/activate
export DATABASE_URL=postgis://stoqsadm:[email protected]:5432/stoqs
stoqs/manage.py runserver 0.0.0.0:8000 --settings=config.settings.ci

Les débuts d'un test fonctionnel pour la fonctionnalité « tracé des lignes de contour » pourraient ressembler à ceci :

-        # TODO: Add tests for contour line plot
+        # Tests for contour line plot
+        parameter_contour_plot_radio_button = self.browser.find_element(By.XPATH,
+            "//input[@name='parameters_contour_plot' and @value='{}']".format(northward_sea_water_velocity_HR_id))

Qui échouera avec :

NoSuchElementException: Message: Unable to locate element: //input[@name='parameters_contour_plot' and @value='17']

J'ai pu ajouter le point d'arrêt et ajouter la ligne demandant un élément indisponible.

Salut @samuelrey ,

C'est génial! Pouvez-vous pousser votre changement de code vers une nouvelle branche afin que nous puissions tous le voir ?

Hey @MBARIMike J'ai du
Celui que j'ai implémenté s'attend à ce qu'une image soit produite lorsque l'un des boutons radio de contour est enfoncé.
Une autre à laquelle j'ai pensé était de vérifier qu'un nombre égal de boutons de contour et de boutons de couleur sont produits. Cela fait suite à ma compréhension que les boutons radio sont produits dynamiquement en fonction des paramètres décrits par les données.

Bonjour @samuelrey (et équipe),

Si vous devez suivre l'exemple de TDD du didacticiel de https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422.

Le code de test échoue lors de la recherche d'un élément d'entrée nommé parameters_contour_plot . La page Web existante a une colonne de boutons radio nommée parameters_plot . Je suggère de rechercher cette chaîne dans le fichier https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html et d'ajouter un code similaire pour ajouter une colonne de boutons radio nommée parameters_contour_plot .

Lorsque votre test réussit, validez les modifications dans votre branche. Ensuite, écrivez le prochain test.

Bonjour @MBARIMike ,

Nous avons maintenant implémenté tous les boutons radio non fonctionnels nommés comme suit : parameters_contour_plot pour le tracé de contour ainsi que les tests pour s'assurer qu'ils sont générés. Les prochaines étapes pour nous seront d'implémenter des fonctionnalités aux boutons radio de contour.

@MBARIMike également, nous ne sommes pas disponibles pour nous rencontrer le vendredi 31 mars (Jour Cesar Chavez) mais nous aimerions rencontrer tout autre vendredi où vous êtes disponible pour vous montrer nos progrès et discuter de toutes les suggestions que vous pourriez avoir pour nous. Faites-nous savoir ce qui fonctionne le mieux pour vous.

Ça a l'air d'être une belle avancée !

Pouvez-vous fournir un lien vers la succursale pour ces changements de code ?

Voici les changements de code :
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (en fin de dossier)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (tests)

Dans ma machine virtuelle, j'ai remarqué que la fenêtre Firefox apparaît hors écran. Je ne sais pas si vous avez rencontré ce problème, mais cette modification de stoqs/stoqs/tests/functional_tests.py résout ce problème :

--- a/stoqs/stoqs/tests/functional_tests.py
+++ b/stoqs/stoqs/tests/functional_tests.py
@@ -48,9 +48,6 @@ class BrowserTestCase(TestCase):
     def setUp(self):
         profile = webdriver.FirefoxProfile()
         self.browser = webdriver.Firefox(profile)
-        self.browser.set_window_size(1200, 768)
-        self.browser.set_window_position(300, 0)
-        self.browser.implicitly_wait(10)

Voici quelques conseils :

1. Un petit nettoyage est nécessaire dans l'alignement des colonnes dans le titre et les lignes de sélection claires
2. Ajoutez un gestionnaire pour les clics sur les boutons radio nommés parameters_contour_plot . Ce code JavaScript est le gestionnaire des boutons de tracé existants. Il crée une chaîne de requête qui est ensuite transmise au serveur où le tracé de contour sera généré. Un code similaire doit être ajouté pour ajouter le parameters_contour_plot à la chaîne de requête.

Les étapes suivantes commencent à devenir un peu compliquées, à mesure qu'elles entrent dans le code côté serveur :

1. Ajoutez des lignes pour parametercontourplot au code Python stoqs/stoqs/views/query.py
2. Dans le fichier stoqs/utils/STOQSQManager.py ici, ajoutez du code pour extraire les contourparameterID et contourparameterGroups et ajoutez-les à la liste d'arguments pour MeasuredParameter().
3. Dans le fichier stoqs/utils/Viz/plotting.py, ajoutez contourparameterID et contourparameterGroups à __init__() de MeasuredParameter()

À ce stade, votre test fonctionnel stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots devrait réussir et vous aurez accès à l'ID de paramètre qui a été sélectionné pour le contournage là où vous en avez besoin (la méthode renderDatavaluesForFlot() du MeasuredParameter classer).

Je vais utiliser la fonction javascript !

Dernier commit dans toute sa splendeur brute. Nous avons terminé tout ce qui est indiqué dans ce commentaire . Maintenant, nous travaillons sur le tracé des données ! Des modifications seront apportées à plotting.py .

J'ai rencontré un problème en essayant de générer des tracés de couleur. data['parameterplatformdatavaluepng'] a [null, null, 'Problème d'obtention des informations sur le bouton paramètre-contour-plot-radio']. Définissez un point d'arrêt ici , sélectionnez l'un des boutons radio de tracé de couleur et vérifiez que les données sont les mêmes que celles que j'ai observées. Toujours en train de réduire la cause.

Le texte « Problème d'obtention des informations sur le bouton paramètre-contour-tracé-radio » provient de cette ligne .

Oh, c'est ma faute.
Ma conjecture pour cette erreur est que 'platformName' devrait être 'contourplatformName' ? Ou une autre solution peut consister à ne pas rechercher 'contourplatformName' ?
Tout conseil aiderait à éviter une quantité inutile de commits.

Les méthodes _fillXYZ & loadData ont beaucoup de code qui peut être réutilisé pour les variables de lignes de contour. Peut-être qu'au lieu de définir les variables membres dans la fonction, nous pouvons modifier les fonctions pour renvoyer les listes qu'elles génèrent.

if contourParameterID:
    self.clx, self.cly, self.clz = self.loadData(...)

Réfléchir à la meilleure façon de réutiliser la méthode loadData() dans plotting.py pour remplir les données des variables x, y et z de la ligne de contour. Que pensez-vous d'une modification comme celle-ci près d' ici ?

diff --git a/stoqs/utils/Viz/plotting.py b/stoqs/utils/Viz/plotting.py
index 81c278b..cfe679c 100644
--- a/stoqs/utils/Viz/plotting.py
+++ b/stoqs/utils/Viz/plotting.py
@@ -556,6 +556,12 @@ class MeasuredParameter(BaseParameter):

             if not self.x and not self.y and not self.z:
                 self.loadData()
+            if contourParameterID is not None:
+                if not self.clx and not self.cly and not self.clz:
+                    self.loadData()
+                    self.clx = self.x
+                    self.cly = self.y
+                    self.clz = self.z

Veuillez consulter cette Pull Request qui plonge profondément dans le "trou de lapin" pour produire un contour_qs_mp parallèle et vous aider à réutiliser loadData() pour obtenir les valeurs des données des paramètres de la ligne de contour. Vous devriez maintenant pouvoir utiliser les variables clx, cly et clz pour créer les lignes de contour.

@samuelrey Veuillez remplacer la branche de base de https://github.com/stoqs/stoqs/pull/578 par la branche capstone-spring2017 . Voici des instructions sur la façon de procéder : https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Comme il se trouve sur une branche distincte, il sera plus facile de gérer les fusions incrémentielles.

Je le ferai d'ici la fin de la journée ! C'est bon d'y aller.

Cela semble bon! Avez-vous aussi vu cette petite demande ?

Juste avant que la figure soit enregistrée, j'insère

                if self.contourParameterID is not None:
                    CS = ax.contour(clx, cly, clz)
                    ax.clabel(CS, fontsize=9, inline=1)

ce qui renvoie une erreur concernant la forme de z.
La documentation du contour indique que x, y et z doivent être soit 2d avec la même forme, soit x et y doivent être 1d avec une longueur égale au nombre de lignes dans z.

Vous devez passer des variables maillées, produites de la même manière que xi, yi et zi sont produits.

Oh j'ai regardé ça. J'ai compris!

Voici un aperçu de ce que notre code a pu produire. L'interface utilisateur et la qualité de l'image seront désormais différentes en raison des mises à jour effectuées par Mike ; cependant, c'est ce que l'équipe CSUMB STOQS a pu livrer.

Pour fournir un résumé rapide du travail effectué par l'équipe CSUMB STOQS, nous avons filtré le code déjà existant et effectué les ajustements nécessaires. L'un de ces ajustements consistait à ajouter une toute nouvelle colonne de boutons radio afin que l'interface utilisateur ait la possibilité de cartographier les courbes de niveau ; ces modifications de l'interface utilisateur ont été apportées par moi-même et @LeslyGJ. Suite au nouveau format, les connexions à ces boutons devaient également être établies ; apporter des modifications au JavaScript @samuelrey s'est emparé de cette tâche. Un autre ajustement est intervenu lors de la plongée dans le python derrière le code côté serveur ; @samuelrey et moi-même @J0S349 et @samuelrey ont surveillé les achèvements des tests en créant de nouveaux cas de test ou en apportant des modifications là où cela était nécessaire pour que le code passe et revienne sur la bonne voie.