Stoqs: Adicionar botões de opção "Plotagem de contorno"

Habilidades de desenvolvedor Full Stack são necessárias para implementar este novo recurso. No lado do cliente, há HTML e JavaScript (JQuery) a serem escritos. AJAX deve ser entendido para a passagem de dados entre a IU e o servidor. No lado do servidor, existe o código Python que precisa ser escrito para fazer a plotagem. Para finalizar, um teste funcional será escrito usando Selenium. (Idealmente, para seguir a verdadeira metodologia TDD, o teste será escrito primeiro!)

Bem-vindo @ J0S349 , @noemicuin , @LeslyGJ , @samuelrey! Estou feliz que você escolheu este problema. É algo que foi solicitado por um de nossos cientistas e acho que eles ficarão felizes em ter esse recurso.

Durante o tour do MBARI ontem, passamos por um pôster que tinha um exemplo do tipo de enredo que esse novo recurso proporcionaria:

O gráfico superior mostra a temperatura como cores e também como linhas de contorno brancas. O gráfico inferior mostra a clorofila em cores e as linhas de contorno brancas são as mesmas do gráfico superior, Temperatura.

O recurso a ser adicionado à IU do STOQS é a capacidade de adicionar linhas de contorno de qualquer Parâmetro.

O teste test_contour_plots () adicionado por https://github.com/stoqs/stoqs/pull/501 pode ser executado a partir de ~/dev/stoqsgit com:

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

Se você colocar de volta no ponto de interrupção de depuração que foi removido por https://github.com/stoqs/stoqs/pull/501/commits/b976d708e13fd208df3f29c6f12bd1692e427e38, você verá uma janela como esta:

Observe que para executar os testes funcionais, o servidor de desenvolvimento precisa estar em execução. Certifique-se de que isso foi executado em outra sessão 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

O início de um teste funcional para o recurso "plotagem de linhas de contorno" pode ser parecido com este:

-        # 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 irá falhar com:

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

Consegui adicionar o ponto de interrupção e adicionar a linha solicitando um elemento indisponível.

Olá @samuelrey ,

Isso é ótimo! Você pode enviar sua alteração de código para um novo branch para que todos possamos vê-lo?

Olá @MBARIMike , estou tendo problemas para fazer mais casos de teste.
O que eu implementei espera que uma imagem seja produzida quando um dos botões de opção de contorno for pressionado.
Outra coisa em que pensei foi verificar se um número igual de botões de contorno e botões coloridos são produzidos. Isso segue meu entendimento de que os botões de opção são produzidos dinamicamente de acordo com os parâmetros descritos pelos dados.

Olá @samuelrey (e equipe),

Se você deseja seguir o exemplo de TDD do tutorial de https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422 passar.

O código de teste falha ao procurar um elemento de entrada denominado parameters_contour_plot . A página da web existente tem uma coluna de botões de opção denominados parameters_plot . Sugiro procurar esta string no arquivo https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html e adicionar um código semelhante para adicionar uma coluna de botões de rádio chamada parameters_contour_plot .

Quando o seu teste passar, envie as alterações para o seu branch. Em seguida, escreva o próximo teste.

Olá @MBARIMike ,

Agora implementamos todos os botões de opção não funcionais nomeados da seguinte maneira: parameters_contour_plot para o gráfico de contorno junto com os testes para garantir que eles sejam gerados. Os próximos passos para nós serão implementar funcionalidades para os botões de rádio de contorno.

@MBARIMike também não estamos disponíveis para nos encontrarmos na sexta-feira, 31 de março (dia de Cesar Chavez), mas gostaríamos de nos encontrar em qualquer outra sexta-feira que você esteja disponível para mostrar nosso progresso e discutir quaisquer sugestões que você possa ter para nós. Deixe-nos saber o que funciona melhor para você.

Parece um grande progresso!

Você pode fornecer um link para a filial para essas alterações de código?

Aqui estão as alterações de código:
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (no final do arquivo)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (testes)

Na minha VM, percebi que a janela do Firefox aparece fora da tela. Não sei se você encontrou esse problema, mas essa mudança para stoqs/stoqs/tests/functional_tests.py corrige isso:

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

Aqui está um pouco de orientação:

1. É necessária uma pequena limpeza no alinhamento da coluna no título e limpar as linhas de seleção
2. Adicione um manipulador para cliques nos botões de opção nomeados parameters_contour_plot . Este código JavaScript é o manipulador dos botões existentes do Plot. Ele cria uma string de consulta que é então passada para o servidor onde o gráfico de contorno será gerado. Um código semelhante precisa ser adicionado para adicionar parameters_contour_plot à string de consulta.

As próximas etapas começam a ficar um pouco complicadas, à medida que entram no código do lado do servidor:

1. Adicione linhas para parametercontourplot ao código Python stoqs / stoqs / views / query.py
2. No arquivo stoqs / utils / STOQSQManager.py por aqui, adicione o código para puxar o contourparameterID e contourparameterGroups e adicioná-los à lista de argumentos para MeasuredParameter ().
3. No arquivo stoqs / utils / Viz / plotting.py adicione contourparameterID e contourparameterGroups ao __init __ () de MeasuredParameter ()

Neste ponto, seu teste funcional stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots deve passar e você terá acesso ao ID do parâmetro que foi selecionado para o contorno onde você precisa (o método renderDatavaluesForFlot() do MeasuredParameter classe).

Vou usar a função javascript!

Último commit em toda a sua glória crua. Terminamos tudo listado neste comentário . Agora estamos trabalhando para realmente plotar os dados! As modificações serão feitas em plotting.py .

Tive um problema ao tentar gerar plotagens coloridas. data ['parameterplatformdatavaluepng'] tem [nulo, nulo, 'Problema ao obter informações do botão de rádio do gráfico de contorno do parâmetro']. Defina um ponto de interrupção aqui , selecione qualquer um dos botões de opção do gráfico de cores e verifique se os dados são os mesmos que observei. Ainda restringindo a causa.

O texto 'Problema em obter informações do botão de opção do gráfico de contorno do parâmetro' está vindo desta linha .

Oh, isso é errado meu.
Meu palpite para este erro é que 'platformName' deve ser 'contourplatformName'? Ou outra solução pode ser não verificar 'contourplatformName'?
Qualquer conselho ajudaria a evitar uma quantidade desnecessária de commits.

Os métodos _fillXYZ e loadData têm muitos códigos que podem ser reutilizados para as variáveis ​​das linhas de contorno. Talvez, em vez de definir as variáveis ​​de membro dentro da função, possamos modificar as funções para retornar as listas que elas geram.

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

Pensando em como melhor reutilizar o método loadData () em plotting.py para preencher os dados das variáveis ​​da linha de contorno x, y e z. O que você acha de uma modificação como essa aqui perto?

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, veja este Pull Request que mergulha profundamente na "toca do coelho" para produzir contour_qs_mp paralelo e ajuda você a reutilizar loadData () para obter os valores dos dados dos parâmetros da linha de contorno. Agora você deve ser capaz de usar as variáveis ​​clx, cly e clz para fazer as linhas de contorno.

@samuelrey Altere o branch base de para https://github.com/stoqs/stoqs/pull/578 para o branch capstone-spring2017 . Aqui estão as instruções sobre como fazer isso: https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Estando em uma ramificação separada, será mais fácil gerenciar mesclagens incrementais.

Vou fazer isso até o final do dia! Está pronto para ir.

Parece bom! Você também viu este pequeno pedido ?

Pouco antes de a figura ser salva, eu insiro

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

que lança um erro em relação à forma de z.
A documentação de contorno diz que x, y e z devem ser 2d com a mesma forma ou x e y devem ser 1d com comprimento igual ao número de linhas em z.

Você precisa passar variáveis ​​em grade, produzidas da mesma maneira que xi, yi e zi são produzidos.

Oh, eu esqueci isso. Entendi!

Aqui está uma olhada no que nosso código foi capaz de produzir. A IU e a qualidade da imagem parecerão diferentes agora por causa das atualizações feitas por Mike; no entanto, isso é o que a equipe CSUMB STOQS foi capaz de oferecer.

Para fornecer um rápido resumo do trabalho que a equipe CSUMB STOQS concluiu, filtramos o código já existente e fizemos os ajustes necessários. Um desses ajustes foi adicionar uma coluna totalmente nova de botões de opção para que a IU tivesse a opção de mapear linhas de contorno; essas mudanças na interface do usuário foram feitas por mim e @LeslyGJ. Seguindo o novo formato, as conexões a esses botões também tiveram que ser feitas; fazer alterações no JavaScript @samuelrey assumiu essa tarefa. Outro ajuste veio ao mergulhar no python por trás do código do lado do servidor; @samuelrey e eu adicionamos novas variáveis ​​e passamos por novos parâmetros. Com mudanças na IU e modificações do lado do servidor, @ J0S349 e @samuelrey monitoraram as conclusões dos testes criando novos casos de teste ou fazendo alterações onde necessário para obter a passagem do código e voltar aos trilhos.