Stoqs: Добавить радиокнопки "Контурная диаграмма"

Для реализации этой новой функции необходимы навыки разработчика Full Stack. На стороне клиента должны быть написаны HTML и JavaScript (JQuery). Необходимо понимать AJAX для передачи данных между пользовательским интерфейсом и сервером. На стороне сервера есть код Python, который необходимо написать для построения графика. Чтобы завершить все это, будет написан функциональный тест с использованием Selenium. (В идеале, чтобы следовать истинной методологии TDD, тест будет написан первым!)

Добро пожаловать, @ J0S349 , @noemicuin , @LeslyGJ , @samuelrey! Я рад, что вы выбрали этот выпуск. Об этом попросил один из наших ученых, и я думаю, они будут счастливы получить эту функцию.

Вчера во время экскурсии по MBARI мы прошли мимо плаката, на котором был пример сюжета, который может дать эта новая функция:

На верхнем графике температура отображается в виде цветов, а также в виде белых контурных линий. На нижнем графике показан цвет хлорофилла, а белые контурные линии такие же, как на верхнем графике, температура.

Функция, которая будет добавлена ​​в пользовательский интерфейс STOQS, - это возможность добавлять контурные линии любого параметра.

Тест test_contour_plots (), добавленный https://github.com/stoqs/stoqs/pull/501, может быть выполнен из ~/dev/stoqsgit с помощью:

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

Если вы вернете точку останова отладки, которая была удалена https://github.com/stoqs/stoqs/pull/501/commit/b976d708e13fd208df3f29c6f12bd1692e427e38, вы должны увидеть такое окно:

Обратите внимание, что для выполнения функциональных тестов должен быть запущен сервер разработки. Убедитесь, что это было выполнено в другом сеансе терминала:

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

Начало функционального тестирования функции "контурные линии" может выглядеть следующим образом:

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

Что не удастся:

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

Мне удалось добавить точку останова и добавить строку, запрашивающую недоступный элемент.

Привет @samuelrey!

Замечательно! Можете ли вы перенести изменение кода в новую ветку, чтобы мы все могли это увидеть?

Привет, @MBARIMike, у меня проблемы с придумыванием дополнительных тестовых примеров.
Тот, который я реализовал, ожидает, что изображение будет создано при нажатии одной из переключателей контура.
Еще я подумал о том, чтобы убедиться, что количество контурных кнопок равно количеству цветных. Это следует из моего понимания, что переключатели динамически создаются в соответствии с параметрами, описываемыми данными.

Привет @samuelrey (и команда),

Если вы должны следовать примеру TDD из учебника Гарри Персиваля, то следующим шагом будет добавление кода для выполнения теста из https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422 pass.

Тестовый код не выполняет поиск элемента ввода с именем parameters_contour_plot . На существующей веб-странице есть столбец переключателей с именем parameters_plot . Я предлагаю найти эту строку в файле https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html и добавить аналогичный код для добавления столбца переключателей с именем parameters_contour_plot .

Когда ваш тест пройден, зафиксируйте изменения в своей ветке. Затем напишите следующий тест.

Привет @MBARIMike!

Теперь мы реализовали все нефункциональные переключатели, названные следующим образом: parameters_contour_plot для контурного графика вместе с тестами, чтобы гарантировать их создание. Следующими шагами для нас будет реализация функций переключателей контура.

@MBARIMike также мы не можем встретиться в пятницу, 31 марта (день Сезара Чавеса), но мы хотели бы встретиться в любую другую пятницу, когда вы готовы показать вам наш прогресс и обсудить любые ваши предложения для нас. Сообщите нам, что лучше всего подходит для вас.

Похоже, большой прогресс!

Можете ли вы предоставить ссылку на ветку для этих изменений кода?

Вот изменения кода:
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (в конце файла)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (тесты)

В моей виртуальной машине я заметил, что окно Firefox появляется за пределами экрана. Не знаю, сталкивались ли вы с этой проблемой, но это изменение на stoqs/stoqs/tests/functional_tests.py устраняет следующее:

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

Вот небольшое руководство:

1. Требуется небольшая очистка выравнивания столбцов в заголовке и очистки строк выбора.
2. Добавьте обработчик щелчков по названным переключателям parameters_contour_plot . Этот код JavaScript является обработчиком существующих кнопок Plot. Он создает строку запроса, которая затем передается на сервер, где будет создан контурный график. Аналогичный код необходимо добавить, чтобы добавить parameters_contour_plot в строку запроса.

Следующие шаги начинают становиться немного корявыми по мере того, как они попадают в код на стороне сервера:

1. Добавьте строки для parametercontourplot в код Python stoqs / stoqs / views / query.py
2. В файле stoqs / utils / STOQSQManager.py здесь добавьте код для извлечения contourparameterID и contourparameterGroups и добавления их в список аргументов для MeasuredParameter ().
3. В файле stoqs / utils / Viz / plotting.py добавьте contourparameterID и contourparameterGroups в __init __ () MeasuredParameter ()

На этом этапе ваш функциональный тест stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots должен пройти, и у вас будет доступ к идентификатору параметра, который был выбран для контурной обработки там, где он вам нужен (метод renderDatavaluesForFlot() метода MeasuredParameter класс).

Я займусь функцией javascript!

Последний коммит во всей красе. Мы закончили все перечисленное в этом комментарии . Теперь мы работаем над нанесением данных на график! Изменения будут внесены plotting.py .

Я столкнулся с проблемой при попытке создать цветные графики. data ['parameterplatformdatavaluepng'] имеет [null, null, 'Проблема с получением информации о параметрах-контуре-графике-переключателе']. Установить точку останова здесь , выберите любой из кнопок цвета сюжетных радио и убедитесь , что данные так же , как я заметил. Причина все еще сокращается.

Текст "Проблема с получением информации о параметрах-контуре-графике-переключателе" исходит из этой строки .

О, это моя ошибка.
Я предполагаю, что для этой ошибки «имя платформы» должно быть «contourplatformName»? Или другое решение может заключаться в том, чтобы не проверять «contourplatformName»?
Любой совет поможет избежать ненужного количества коммитов.

Методы _fillXYZ и loadData содержат много кода, который можно повторно использовать для переменных горизонтальных линий. Возможно, вместо того, чтобы устанавливать переменные-члены внутри функции, мы можем изменить функции, чтобы они возвращали списки, которые они генерируют.

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

Подумайте о том, как лучше всего повторно использовать метод loadData () в plotting.py для заполнения данных для переменных x, y и z контурной линии. Что вы думаете о модификации , как это недалеко отсюда ?

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

См. Этот запрос на вытягивание, который углубляется в «кроличью нору» для создания параллельного contour_qs_mp и помогает повторно использовать loadData () для получения значений данных параметров линии контура. Теперь у вас должна быть возможность использовать переменные clx, cly и clz для построения контурных линий.

@samuelrey Измените базовую ветку https://github.com/stoqs/stoqs/pull/578 на ветку capstone-spring2017 . Вот инструкции, как это сделать: https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Поскольку он находится в отдельной ветке, будет проще управлять инкрементными слияниями.

Я сделаю это до конца дня! Хорошо идти.

Выглядит неплохо! Вы тоже видели эту небольшую просьбу ?

Непосредственно перед сохранением рисунка я вставляю

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

что вызывает ошибку относительно формы z.
В документации контура указано, что x, y и z должны быть либо 2d с одинаковой формой, либо x и y должны быть 1d с длиной, равной количеству строк в z.

Вам необходимо передать переменные с координатной сеткой, созданные так же, как и xi, yi и zi.

О, я это посмотрел. Понятно!

Вот посмотрите, что смог произвести наш код. Пользовательский интерфейс и качество изображения теперь будут выглядеть по-другому из-за обновлений, сделанных Майком; однако это то, что команда CSUMB STOQS смогла выполнить.

Чтобы получить краткое описание работы, выполненной командой CSUMB STOQS, мы отфильтровали уже существующий код и внесли необходимые корректировки. Одна из этих корректировок заключалась в добавлении нового столбца переключателей, чтобы пользовательский интерфейс имел возможность отображать горизонтальные линии; эти изменения пользовательского интерфейса были сделаны мной и @LeslyGJ. Следуя новому формату, необходимо было также выполнить подключения к этим кнопкам; внесение изменений в JavaScript @samuelrey взяло на себя эту задачу. Еще одна корректировка произошла, когда мы погрузились в питон за серверным кодом; Мы с @samuelrey добавили новые переменные и передали новые параметры. С изменениями пользовательского интерфейса и модификациями на стороне сервера @ J0S349 и @samuelrey отслеживали завершение тестов, создавая новые тестовые примеры или внося изменения везде, где это было необходимо, чтобы обеспечить прохождение кода и его восстановление.