Stoqs: Optionsfelder "Konturplot" hinzufügen

Um diese neue Funktion zu implementieren, sind vollständige Stack-Entwicklerkenntnisse erforderlich. Clientseitig ist HTML und JavaScript (JQuery) zu schreiben. AJAX muss für die Weitergabe von Daten zwischen der Benutzeroberfläche und dem Server verstanden werden. Auf der Serverseite gibt es Python-Code, der geschrieben werden muss, um das Plotten durchzuführen. Zum Abschluss wird ein Funktionstest mit Selenium geschrieben. (Idealerweise wird der Test zuerst geschrieben, um der wahren TDD- Methodik zu folgen!)

Willkommen @J0S349 , @noemicuin , @LeslyGJ , @samuelrey! Ich freue mich, dass Sie sich für dieses Thema entschieden haben. Es ist etwas, das von einem unserer Wissenschaftler angefordert wurde und ich denke, sie werden sich über diese Funktion freuen.

Während der Tour durch MBARI gestern kamen wir an einem Poster vorbei, das ein Beispiel für die Art von Handlung enthielt, die dieses neue Feature bieten würde:

Der obere Plot zeigt die Temperatur als Farben und auch als weiße Konturlinien. Das untere Diagramm zeigt Chlorophyll als Farbe und die weißen Konturlinien sind die gleichen wie im oberen Diagramm, Temperatur.

Die der STOQS-Benutzeroberfläche hinzuzufügende Funktion ist die Möglichkeit, Konturlinien eines beliebigen Parameters hinzuzufügen.

Der von https://github.com/stoqs/stoqs/pull/501 hinzugefügte test_contour_plots()-Test kann ab ~/dev/stoqsgit mit:

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

Wenn Sie den Debug-Breakpoint, der von https://github.com/stoqs/stoqs/pull/501/commits/b976d708e13fd208df3f29c6f12bd1692e427e38 entfernt wurde, wieder

Beachten Sie, dass der Entwicklungsserver ausgeführt werden muss, um die Funktionstests auszuführen. Stellen Sie sicher, dass dies in einer anderen Terminalsitzung ausgeführt wurde:

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

Die Anfänge eines Funktionstests für das Feature "Konturlinienplot" könnten so aussehen:

-        # 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))

Was wird scheitern mit:

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

Ich konnte den Haltepunkt hinzufügen und die Zeile hinzufügen, die ein nicht verfügbares Element anfordert.

Hallo @samuelrey ,

Das ist großartig! Können Sie Ihre Codeänderung auf einen neuen Branch übertragen, damit wir sie alle sehen können?

Hey @MBARIMike Ich habe Probleme mit weiteren Testfällen.
Der von mir implementierte erwartet, dass ein Bild erzeugt wird, wenn einer der Kontur-Radiobuttons gedrückt wird.
Eine andere, an die ich dachte, war, zu überprüfen, ob eine gleiche Anzahl von Konturschaltflächen wie Farbschaltflächen hergestellt werden. Dies folgt meinem Verständnis, dass die Optionsfelder dynamisch gemäß den durch die Daten beschriebenen Parametern erzeugt werden.

Hallo @samuelrey (und Team),

Wenn Sie dem Beispiel von TDD aus Harry Percivals Tutorial folgen möchten, besteht Ihr nächster Schritt darin, Code hinzuzufügen, damit der Test von https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422 bestanden wird.

Der Testcode schlägt bei der Suche nach einem Eingabeelement namens parameters_contour_plot fehl. Die vorhandene Webseite hat eine Spalte mit Optionsfeldern namens parameters_plot . Ich schlage vor, nach dieser Zeichenfolge in der Datei https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html zu suchen und ähnlichen Code hinzuzufügen, um eine Spalte mit Optionsfeldern namens parameters_contour_plot hinzuzufügen

Wenn Ihr Test erfolgreich ist, übergeben Sie die Änderungen an Ihren Branch. Dann schreiben Sie den nächsten Test.

Hallo @MBARIMike ,

Wir haben jetzt alle nicht funktionsfähigen Optionsfelder mit den folgenden Namen implementiert: parameters_contour_plot für das Konturdiagramm zusammen mit den Tests, um sicherzustellen, dass sie generiert werden. Die nächsten Schritte für uns werden darin bestehen, Funktionen für die Kontur-Radiobuttons zu implementieren.

@MBARIMike auch wir sind am Freitag, den 31. März (Cesar Chavez Day) nicht verfügbar, aber wir möchten uns an jedem anderen Freitag treffen, an dem Sie verfügbar sind, um Ihnen unsere Fortschritte zu zeigen und Ihre Vorschläge für uns zu besprechen. Lassen Sie uns wissen, was für Sie am besten funktioniert.

Sieht nach großen Fortschritten aus!

Können Sie einen Link zum Branch für diese Codeänderungen bereitstellen?

Hier die Codeänderungen:
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (am Ende der Datei)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (Tests)

In meiner VM habe ich festgestellt, dass das Firefox-Fenster außerhalb des Bildschirms angezeigt wird. Ich weiß nicht, ob Sie auf dieses Problem gestoßen sind, aber diese Änderung in stoqs/stoqs/tests/functional_tests.py behebt Folgendes:

--- 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)

Hier eine kleine Anleitung:

1. Bei der Spaltenausrichtung im Titel und beim Löschen der Auswahlzeilen ist ein wenig Aufräumarbeiten erforderlich
2. Fügen Sie einen Handler für Klicks auf die benannten Optionsfelder parameters_contour_plot . Dieser JavaScript-Code ist der Handler für die vorhandenen Plot-Schaltflächen. Es erstellt einen Abfragestring, der dann an den Server übergeben wird, auf dem das Konturdiagramm generiert wird. Ähnlicher Code muss hinzugefügt werden, um parameters_contour_plot zum Abfragestring hinzuzufügen.

Die nächsten Schritte werden ein wenig knorrig, wenn sie in den serverseitigen Code gelangen:

1. Fügen Sie Zeilen für parametercontourplot zum Python-Code stoqs/stoqs/views/query.py hinzu
2. Fügen Sie in der Datei stoqs/utils/STOQSQManager.py hier Code hinzu, um die KonturparameterID und KonturparameterGroups zu ziehen und sie der Argumentliste für MeasuredParameter() hinzuzufügen.
3. Fügen Sie in der Datei stoqs/utils/Viz/plotting.py KonturparameterID und KonturparameterGroups zu MeasuredParameter ()s __init__() hinzu.

An dieser Stelle sollte Ihr Funktionstest stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots sein und Sie haben Zugriff auf die Parameter-ID, die für die Konturierung ausgewählt wurde, wo Sie sie benötigen (die renderDatavaluesForFlot() Methode des MeasuredParameter Klasse).

Ich nehme die Javascript-Funktion auf!

Letztes Commit in all seiner rohen Pracht. Wir haben alles, was in diesem Kommentar aufgeführt ist, fertig gestellt. Jetzt arbeiten wir daran, die Daten tatsächlich darzustellen! Es werden Änderungen an plotting.py vorgenommen .

Ich bin auf ein Problem gestoßen, als ich versuchte, Farbplots zu generieren. data['parameterplatformdatavaluepng'] hat [null, null, 'Problem beim Abrufen von Parameter-Kontur-Plot-Radiobutton-Info']. Legen Sie hier einen Haltepunkt fest, wählen Sie eines der Optionsfelder für das Farbdiagramm aus und überprüfen Sie, ob die Daten mit meinen Beobachtungen übereinstimmen. Immer noch die Ursache eingrenzen.

Der Text 'Problem beim Abrufen von Parameter-Kontur-Plot-Radio-Button-Info' kommt aus dieser Zeile .

Oh, das ist mein Fehler.
Meine Vermutung für diesen Fehler ist, dass 'platformName' 'contourplatformName' sein sollte? Oder kann eine andere Lösung darin bestehen, nicht nach 'contourplatformName' zu suchen?
Jeder Rat würde helfen, unnötige Commits zu vermeiden.

Die Methoden _fillXYZ & loadData haben viel Code, der für die Konturlinienvariablen wiederverwendet werden kann. Anstatt die Membervariablen innerhalb der Funktion zu setzen, können wir die Funktionen vielleicht so ändern, dass sie die von ihnen generierten Listen zurückgeben.

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

Überlegen Sie, wie Sie die Methode loadData() in plotting.py am besten wiederverwenden können, um Daten für die Variablen x, y und z der Konturlinie zu füllen. Was haltet ihr von so einer Modifikation hier in der Nähe?

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

Bitte sehen Sie sich diesen Pull Request an , der tief in das "Kaninchenloch" eintaucht, um parallele contour_qs_mp zu erzeugen und Ihnen zu helfen, loadData() wiederzuverwenden, um die Parameterdatenwerte der Konturlinie zu erhalten. Sie sollten jetzt die Variablen clx, cly und clz verwenden können, um die Höhenlinien zu erstellen.

@samuelrey Bitte ändern Sie den https://github.com/stoqs/stoqs/pull/578 in den Zweig capstone-spring2017 . Hier ist eine Anleitung dazu: https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Da es sich in einem separaten Zweig befindet, ist es einfacher, inkrementelle Zusammenführungen zu verwalten.

Ich werde es bis zum Ende des Tages schaffen! Es ist gut zu gehen.

Sieht gut aus! Haben Sie diese kleine Anfrage auch gesehen ?

Kurz bevor die Figur gespeichert wird, füge ich ein

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

was einen Fehler bezüglich der Form von z wirft.
Die Konturdokumentation besagt, dass x, y und z entweder 2d mit derselben Form sein müssen oder x und y 1d mit einer Länge gleich der Anzahl der Reihen in z sein müssen.

Sie müssen gerasterte Variablen übergeben, die auf die gleiche Weise erzeugt werden, wie xi, yi und zi erzeugt werden.

Oh, das habe ich übersehen. Ich habs!

Hier sehen Sie, was unser Code produzieren konnte. Die Benutzeroberfläche und die Bildqualität werden jetzt aufgrund von Updates von Mike anders aussehen. Dies konnte jedoch das Team von CSUMB STOQS liefern.

Um einen schnellen Überblick über die Arbeit des CSUMB STOQS-Teams zu geben, haben wir den bereits vorhandenen Code gefiltert und bei Bedarf Anpassungen vorgenommen. Eine dieser Anpassungen war das Hinzufügen einer ganz neuen Spalte mit Optionsfeldern, sodass die Benutzeroberfläche die Möglichkeit hatte, Höhenlinien zuzuordnen. diese UI-Änderungen wurden von mir und @LeslyGJ vorgenommen. Nach dem neuen Format mussten auch Verbindungen zu diesen Schaltflächen hergestellt werden; Änderungen am JavaScript vornehmen @samuelrey hat diese Aufgabe übernommen. Eine weitere Anpassung erfolgte beim Eintauchen in die Python hinter dem serverseitigen Code; @samuelrey und ich haben neue Variablen hinzugefügt und neue Parameter übergeben. Mit UI-Änderungen und serverseitigen Modifikationen überwachten @J0S349 und @samuelrey die Testabschlüsse, indem sie neue Testfälle erstellten oder Änderungen an den erforderlichen Stellen vornahmen , um den Code zu übergeben und wieder auf Kurs zu bringen.