Stoqs: Agregar botones de opción "Contour Plot"

Se necesitan habilidades de desarrollador Full Stack para implementar esta nueva característica. En el lado del cliente hay HTML y JavaScript (JQuery) para escribir. AJAX debe entenderse para pasar datos entre la interfaz de usuario y el servidor. En el lado del servidor, hay un código Python que debe escribirse para realizar el trazado. Para resumir todo, se escribirá una prueba funcional utilizando Selenium. (¡Idealmente, para seguir la verdadera metodología TDD , la prueba se redactará primero!)

¡Bienvenido @ J0S349 , @noemicuin , @LeslyGJ , @samuelrey! Me alegra que hayas elegido este problema. Es algo que ha sido solicitado por uno de nuestros científicos y creo que estarán felices de tener esta función.

Durante la gira de MBARI ayer pasamos junto a un cartel que tenía un ejemplo del tipo de trama que brindaría esta nueva característica:

El gráfico superior muestra la temperatura como colores y también como líneas de contorno blancas. El gráfico inferior muestra la clorofila como color y las líneas de contorno blancas son las mismas que en el gráfico superior, Temperatura.

La característica que se agregará a la interfaz de usuario de STOQS es la capacidad de agregar líneas de contorno de cualquier parámetro.

La prueba test_contour_plots () agregada por https://github.com/stoqs/stoqs/pull/501 se puede ejecutar desde ~/dev/stoqsgit con:

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 vuelve a colocar el punto de interrupción de depuración que fue eliminado por https://github.com/stoqs/stoqs/pull/501/commits/b976d708e13fd208df3f29c6f12bd1692e427e38 , debería ver una ventana como esta:

Tenga en cuenta que para ejecutar las pruebas funcionales, el servidor de desarrollo debe estar ejecutándose. Asegúrese de que esto se haya ejecutado en otra sesión 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

Los comienzos de una prueba funcional para la característica "trazar líneas de contorno" podrían verse así:

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

Que fallará con:

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

Pude agregar el punto de interrupción y agregar la línea que solicita un elemento no disponible.

Hola @samuelrey ,

¡Eso es genial! ¿Puede enviar su cambio de código a una nueva rama para que todos podamos verlo?

Hola @MBARIMike , tengo problemas para crear más casos de prueba.
El que he implementado espera que se produzca una imagen cuando se presiona uno de los botones de radio de contorno.
Otro en el que pensé fue en verificar que se produzca un número igual de botones de contorno que botones de color. Esto sigue a mi entendimiento de que los botones de opción se producen dinámicamente de acuerdo con los parámetros descritos por los datos.

Hola @samuelrey (y equipo),

Si va a seguir el ejemplo de TDD del tutorial de https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422 pase.

El código de prueba falla al buscar un elemento de entrada llamado parameters_contour_plot . La página web existente tiene una columna de botones de opción denominada parameters_plot . Sugiero buscar esta cadena en el archivo https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html y agregar un código similar para agregar una columna de botones de opción llamada parameters_contour_plot .

Cuando su prueba pase, confirme los cambios en su rama. Luego escribe la siguiente prueba.

Hola @MBARIMike ,

Ahora hemos implementado todos los botones de opción no funcionales nombrados de la siguiente manera: parameters_contour_plot para el gráfico de contorno junto con las pruebas para garantizar que se generen. Los siguientes pasos para nosotros serán implementar la funcionalidad de los botones de radio de contorno.

@MBARIMike también no estamos disponibles para reunirnos el viernes 31 de marzo (Día de César Chávez) pero nos gustaría reunirnos cualquier otro viernes que esté disponible para mostrarle nuestro progreso y discutir cualquier sugerencia que pueda tener para nosotros. Háganos saber qué funciona mejor para usted.

¡Parece un gran progreso!

¿Puede proporcionar un enlace a la sucursal para estos cambios de código?

Aquí están los cambios de código:
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (al final del archivo)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (pruebas)

En mi VM noté que la ventana de Firefox aparece fuera de la pantalla. No sé si encontró ese problema, pero este cambio a stoqs/stoqs/tests/functional_tests.py soluciona eso:

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

Aquí hay una pequeña guía:

1. Se necesita un poco de limpieza en la alineación de la columna en el título y las filas de selección claras
2. Agregue un controlador para los clics en los botones de opción parameters_contour_plot nombre. Este código JavaScript es el controlador de los botones de trazado existentes. Construye una cadena de consulta que luego se pasa al servidor donde se generará la gráfica de contorno. Es necesario agregar un código similar para agregar parameters_contour_plot a la cadena de consulta.

Los siguientes pasos comienzan a volverse un poco complicados, a medida que ingresan al código del lado del servidor:

1. Agregue líneas para parametercontourplot al código de Python stoqs / stoqs / views / query.py
2. En el archivo stoqs / utils / STOQSQManager.py , agregue código para extraer contourparameterID y contourparameterGroups y agregarlos a la lista de argumentos para MeasuredParameter ().
3. En el archivo stoqs / utils / Viz / plotting.py agregue contourparameterID y contourparameterGroups al __init __ () de MeasuredParameter ()

En este punto, su prueba funcional stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots debería pasar y tendrá acceso al ID de parámetro que se ha seleccionado para el contorno donde lo necesite (el método renderDatavaluesForFlot() método MeasuredParameter clase).

¡Tomaré la función javascript!

Último compromiso en toda su cruda gloria. Hemos terminado todo lo enumerado en este comentario . ¡Ahora estamos trabajando en realmente graficar los datos! Se realizarán modificaciones en plotting.py .

Me encontré con un problema al intentar generar gráficos de color. data ['parameterplatformdatavaluepng'] tiene [null, null, 'Problema al obtener información del botón de radio de parámetro-contour-plot-radio']. Establezca un punto de interrupción aquí , seleccione cualquiera de los botones de radio del gráfico de color y verifique que los datos sean los mismos que he observado. Aún reduciendo la causa.

El texto 'Problema con la obtención de información de botón de radio de parámetro-contorno-trazado' proviene de esta línea .

Oh, eso es lo que hice mal.
Supongo que este error es que 'platformName' debería ser 'contourplatformName'. ¿O otra solución puede ser no verificar 'contourplatformName'?
Cualquier consejo ayudaría a evitar una cantidad innecesaria de confirmaciones.

Los métodos _fillXYZ y loadData tienen mucho código que se puede reutilizar para las variables de las curvas de nivel. Quizás en lugar de establecer las variables miembro dentro de la función, podemos modificar las funciones para devolver las listas que generan.

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

Pensando en la mejor manera de reutilizar el método loadData () en plotting.py para completar los datos de las variables x, y y z de la línea de contorno. ¿Qué opinas de una modificación como esta cerca de aquí ?

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

Por favor, vea esta Solicitud de extracción que se sumerge profundamente en la "madriguera del conejo" para producir contour_qs_mp paralelo y lo ayuda a reutilizar loadData () para obtener los valores de datos de los parámetros de la línea de contorno. Ahora debería poder usar las variables clx, cly y clz para hacer las curvas de nivel.

@samuelrey Cambie la rama base de https://github.com/stoqs/stoqs/pull/578 por la rama capstone-spring2017 . Aquí hay instrucciones sobre cómo hacerlo: https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Al estar en una rama separada, será más fácil administrar las fusiones incrementales.

¡Lo terminaré al final del día! Es bueno irse.

¡Se ve bien! ¿Viste también esta pequeña solicitud ?

Justo antes de guardar la figura, inserto

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

que arroja un error con respecto a la forma de z.
La documentación del contorno dice que x, y y z deben ser 2d con la misma forma o xey deben ser 1d con una longitud igual al número de filas en z.

Debe pasar variables cuadriculadas, producidas de la misma manera que se producen xi, yi y zi.

Oh, miré eso. ¡Entiendo!

Aquí hay un vistazo a lo que nuestro código pudo producir. La interfaz de usuario y la calidad de la imagen se verán diferentes ahora debido a las actualizaciones realizadas por Mike; sin embargo, esto es lo que pudo ofrecer el equipo de CSUMB STOQS.

Para proporcionar un resumen rápido del trabajo que completó el equipo de CSUMB STOQS, filtramos el código ya existente e hicimos los ajustes necesarios. Uno de estos ajustes fue agregar una columna completamente nueva de botones de opción para que la interfaz de usuario tuviera la opción de mapear líneas de contorno; Estos cambios en la interfaz de usuario los hicimos yo mismo y @LeslyGJ. Siguiendo el nuevo formato, también se tuvieron que hacer conexiones a esos botones; hacer cambios en JavaScript @samuelrey se hizo cargo de esa tarea. Otro ajuste se produjo al sumergirse en Python detrás del código del lado del servidor; @samuelrey y yo agregamos nuevas variables y pasamos por nuevos parámetros. Con cambios en la interfaz de usuario y modificaciones del lado del servidor, @ J0S349 y @samuelrey monitorearon las finalizaciones de las pruebas creando nuevos casos de prueba o haciendo cambios donde sea necesario para que el código pase y vuelva a la normalidad.