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私はより多くのテストケースを
私が実装したものは、輪郭ラジオボタンの1つが押されたときに画像が生成されることを期待しています。
もう1つ考えたのは、カラーボタンと同じ数の輪郭ボタンが生成されることを確認することでした。 これは、ラジオボタンがデータによって記述されたパラメータに従って動的に生成されるという私の理解に基づいています。

こんにちは@samuelrey （およびチーム）、

Harry PercivalのチュートリアルのTDDの例に従う場合、次のステップは、 https： //github.com/stoqs/stoqs/issues/230#issuecomment-280171422からのテストに合格するためのコードを追加することです。

テストコードは、 parameters_contour_plotという名前の入力要素の検索に失敗します。 既存のWebページには、 parameters_plotという名前のラジオボタンの列があります。 ファイルhttps://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.htmlでこの文字列を探し、同様のコードを追加してparameters_contour_plotという名前のラジオボタンの列を追加することをお勧めします。 parameters_contour_plot 。

テストに合格したら、ブランチに変更をコミットします。 次に、次のテストを作成します。

こんにちは@MBARIMike 、

これで、次の名前のすべての機能しないラジオボタンが実装されました。等高線図のparameters_contour_plotと、それらが生成されることを確認するためのテスト。 次のステップは、輪郭ラジオボタンに機能を実装することです。

@MBARIMikeも、3月31日金曜日（Cesar Chavez Day）に会うことはできませんが、他の金曜日に会って、進捗状況を示し、提案について話し合うことができます。 あなたに最適なものを教えてください。

大きな進歩のようです！

これらのコード変更のためのブランチへのリンクを提供できますか？

コードの変更は次のとおりです。
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コードは、既存のプロットボタンのハンドラーです。 クエリ文字列を作成し、サーバーに渡して等高線図を生成します。 parameters_contour_plotをクエリ文字列に追加するには、同様のコードを追加する必要があります。

次のステップは、サーバー側のコードに入ると、少し厄介になり始めます。

1. parametercontourplotをstoqs / stoqs / views / query.pyPythonコードに追加します
2. このあたりのファイルstoqs / utils / STOQSQManager.pyに、contourparameterIDとcontourparameterGroupsをプルするコードを追加し、それらをMeasuredParameter（）の引数リストに追加します。
3. ファイルstoqs / utils / Viz / plotting.pyで、contourparameterIDとcontourparameterGroupsをMeasuredParameter（）の__init __（）に追加します。

この時点で、機能テストstoqs.tests.functional_tests.BrowserTestCase.test_contour_plots合格し、必要な場所で輪郭を描くために選択されたパラメーターIDにアクセスできるようになります（ MeasuredParameterのrenderDatavaluesForFlot()メソッド）クラス）。

javascript関数を取り上げます！

その生の栄光のすべての最後のコミット。 このコメントに記載されているすべてを終了しました。 現在、実際にデータをプロットする作業を行っています。 plotting.pyに変更が加えられます。

カラープロットを生成しようとしたときに問題が発生しました。 data ['parameterplatformdatavaluepng']には[null、null、 'parameter-contour-plot-radioボタン情報の取得に関する問題']があります。 ここにブレークポイントを設定し、カラープロットのラジオボタンのいずれかを選択して、データが私が観察したものと同じであることを確認します。 まだ原因を絞り込んでいます。

'parameter-contour-plot-radio buttoninfoの取得に関する問題'テキストはこの行から来て

ああ、それは私の間違ったことです。
このエラーの私の推測では、「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

「ウサギの穴」を深く掘り下げて平行な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が生成されるのと同じ方法で生成されたグリッド変数を渡す必要があります。

ああ、私はそれを見落としました。 とった！

これが私たちのコードが生成できたものです。 マイクによる更新により、UIと画質は異なって見えるようになります。 ただし、これはCSUMBSTOQSチームが提供できたものです。

CSUMB STOQSチームが完了した作業の概要を簡単に提供するために、既存のコードをフィルタリングし、必要に応じて調整を行いました。 これらの調整の1つは、ラジオボタンのまったく新しい列を追加して、UIに等高線をマッピングするオプションがあるようにすることでした。 これらのUIの変更は、私と@LeslyGJによって行われました。 新しいフォーマットに従って、これらのボタンへの接続も行う必要がありました。 JavaScriptに変更を加えると、 @ samuelreyがそのタスクを実行しました。 サーバーサイドコードの背後にあるPythonに飛び込むときに、別の調整が行われました。 @samuelreyと私は新しい変数を追加し、新しいパラメーターを渡しました。 UIの変更とサーバー側の変更により、 @ J0S349と@samuelreyは、新しいテストケースを作成するか、コードを通過させて軌道に戻すために必要な場所で変更を加えることにより、テストの完了を監視しました。