Stoqs: 添加“轮廓图”单选按钮

实现这一新功能需要全栈开发人员技能。 在客户端，需要编写 HTML 和 JavaScript (JQuery)。 要在 UI 和服务器之间传递数据，必须理解 AJAX。 在服务器端，需要编写 Python 代码来进行绘图。 最后，将使用 Selenium 编写一个功能测试。 （理想情况下，要遵循真正的TDD方法，将首先编写测试！）

欢迎@ J0S349，@noemicuin，@LeslyGJ，@samuelrey！ 我很高兴你选择了这个问题。 这是我们的一位科学家提出的要求，我认为他们会很高兴拥有此功能。

在昨天的 MBARI 之旅中，我们经过了一张海报，上面有这个新功能将提供的情节示例：

上图将温度显示为颜色，也显示为白色等高线。 下图以颜色显示叶绿素，白色等高线与上图温度相同。

要添加到 STOQS UI 的功能是能够添加任何参数的轮廓线。

https://github.com/stoqs/stoqs/pull/501添加的 test_contour_plots() 测试可以从~/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/commits/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 （和团队），

如果您要遵循Harry Percival 教程中的 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我们也无法在 3 月 31 日星期五（凯撒查韦斯纪念日）见面，但我们希望在任何其他星期五见面，您可以向您展示我们的进展并讨论您可能对我们提出的任何建议。 让我们知道什么最适合您。

看起来进步很大！

您能否提供指向这些代码更改的分支的链接？

以下是代码更改：
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a （文件末尾）
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 （测试）

在我的 VM 中，我注意到 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行添加到stoqs/stoqs/views/query.py Python 代码
2. 在文件 stoqs/utils/STOQSQManager.py 中，添加代码以提取轮廓参数 ID 和轮廓参数组，并将它们添加到 MeasuredParameter() 的参数列表中。
3. 在文件 stoqs/utils/Viz/plotting.py 中，将 contourparameterID 和 contourparameterGroups 添加到MeasuredParameter() 的 __init__()

此时你的功能测试stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots要经过，你将有机会获得已被选定为轮廓，你需要它（参数ID renderDatavaluesForFlot()的方法MeasuredParameter班级）。

我将使用 javascript 函数！

在其所有原始荣耀中的最后一次提交。 我们已完成此评论中列出的所有内容。 现在我们正在实际绘制数据！ 将对plotting.py进行修改。

我在尝试生成彩色图时遇到了问题。 data['parameterplatformdatavaluepng'] 有 [null, null, '获取参数轮廓图-单选按钮信息的问题']。 在此处设置断点，选择任何颜色图单选按钮并验证数据是否与我观察到的相同。 仍在缩小原因。

'Problem with getting parameter-contour-plot-radio button info' 文本来自这一行。

哦，那是我的错。
我对这个错误的猜测是“platformName”应该是“contourplatformName”？ 或者另一种解决方案可能是不检查“contourplatformName”？
任何建议都有助于避免不必要的提交。

_fillXYZ 和 loadData 方法有很多代码可以重用于等高线变量。 也许我们可以修改函数以返回它们生成的列表，而不是在函数内设置成员变量。

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

思考如何最好地重用 plotting.py 中的 loadData() 方法来填充等高线 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

请看这个深入“兔子洞”的Pull Request ，产生平行的contour_qs_mp，帮助你重用loadData()来获取等高线参数数据值。 您现在应该能够使用 clx、cly 和 clz 变量来制作等高线。

@samuelrey请将https://github.com/stoqs/stoqs/pull/578的基本分支更改为capstone-spring2017分支。 以下是有关如何执行此操作的说明： https :

由于它位于单独的分支上，因此管理增量合并会更容易。

我会在一天结束前完成它！ 去就好了。

看起来挺好的！ 你也看到这个小要求了吗？

在保存图形之前，我插入

                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 必须是长度等于 z 中的行数的 1d。

您需要传入网格变量，其生成方式与生成 xi、yi 和 zi 的方式相同。

哦，我看过了。 知道了！

下面来看看我们的代码能够产生什么。 由于 Mike 所做的更新，UI 和图像质量现在看起来会有所不同； 然而，这正是 CSUMB STOQS 团队能够提供的。

为了快速总结 CSUMB STOQS 团队完成的工作，我们筛选了现有代码并根据需要进行了调整。 其中一项调整是添加了一列全新的单选按钮，以便用户界面可以选择绘制轮廓线； 这些 UI 更改是由我和 @LeslyGJ 完成的。 按照新格式，还必须连接到这些按钮； 对 JavaScript 进行更改@samuelrey 完成了这项任务。 当深入研究服务器端代码背后的 python 时，另一个调整出现了； @samuelrey和我自己添加了新变量并传递了新参数。 通过 UI 更改和服务器端修改， @J0S349和@samuelrey通过创建新的测试用例或在需要的任何地方进行更改以使代码通过并回到正轨来监控测试完成情况。