Stoqs: "Contour Plot" 라디오 버튼 추가

이 새로운 기능을 구현하려면 전체 스택 개발자 기술이 필요합니다. 클라이언트 측에는 작성할 HTML과 JavaScript(JQuery)가 있습니다. UI와 서버 간에 데이터를 전달하려면 AJAX를 이해해야 합니다. 서버 측에는 플로팅을 수행하기 위해 작성해야 하는 Python 코드가 있습니다. 모든 것을 마무리하기 위해 기능 테스트는 Selenium을 사용하여 작성됩니다. (이상적으로는 진정한 TDD 방법론을 따르기 위해 테스트가 먼저 작성됩니다!)

@J0S349 , @noemicuin , @LeslyGJ , @samuelrey를 환영합니다! 이 문제를 선택해주셔서 기쁩니다. 이것은 우리 과학자 중 한 명이 요청한 것이며 그들이 이 기능을 갖게 되어 기쁠 것이라고 생각합니다.

어제 MBARI를 둘러보는 동안 우리는 이 새로운 기능이 제공할 플롯의 예가 있는 포스터를 지나쳤습니다.

상단 플롯은 온도를 색상과 흰색 등고선으로 표시합니다. 하단 플롯은 엽록소를 색상으로 표시하고 흰색 등고선은 상단 플롯, 온도에서와 동일합니다.

STOQS UI에 추가될 기능은 모든 Parameter의 등고선을 추가할 수 있는 기능입니다.

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에서 테스트를 통과하도록 코드를 추가하는 것입니다.

테스트 코드는 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일 금요일(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 코드 는 기존 Plot 버튼의 핸들러입니다. 그런 다음 등고선 플롯이 생성될 서버로 전달되는 쿼리 문자열을 작성합니다. parameters_contour_plot 를 쿼리 문자열에 추가하려면 비슷한 코드를 추가해야 합니다.

다음 단계는 서버 측 코드에 들어갈 때 약간 거칠어지기 시작합니다.

1. parametercontourplot 에 대한 행을 stoqs/stoqs/views/query.py Python 코드에 추가합니다.
2. 파일 stoqs / 유틸에서 / STOQSQManager.py가 주변 contourparameterID 및 contourparameterGroups을 당겨 MeasuredParameter에 대한 인수 목록에 추가하는 코드를 추가 ().
3. stoqs/utils/Viz/plotting.py 파일에서 contourparameterID 및 contourparameterGroups를 MeasuredParameter()의 __init__()에 추가합니다.

이 시점에서 당신의 기능 테스트 stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots 통과해야하고 당신이 그것을합니다 (필요로하는 곳에 윤곽을 위해 선택된 파라미터 ID에 액세스해야합니다 renderDatavaluesForFlot() 의 방법 MeasuredParameter 수업).

자바스크립트 기능을 사용하겠습니다!

원시 영광의 마지막 커밋 . 이 의견에 나열된 모든 작업을 완료했습니다. 이제 실제로 데이터를 플로팅하는 작업을 하고 있습니다! plotting.py 가 수정됩니다.

컬러 플롯을 생성하려고 할 때 문제가 발생했습니다. data['parameterplatformdatavaluepng']에 [null, null, '매개변수 윤곽선 플롯 라디오 버튼 정보 가져오기 문제']가 있습니다. 여기 에 중단점을 설정하고 색상 플롯 라디오 버튼을 선택하고 데이터가 내가 관찰한 것과 동일한지 확인합니다. 여전히 원인을 좁히고 있습니다.

'매개변수-등고선-플롯-라디오 버튼 정보 가져오기 문제' 텍스트가 이 줄 에서 나옵니다.

아, 내 잘못이야.
이 오류에 대한 내 추측은 'platformName'이 'contourplatformName'이어야 한다는 것입니다. 또는 다른 해결책은 'contourplatformName'을 확인하지 않는 것일 수 있습니까?
조언은 불필요한 양의 커밋을 피하는 데 도움이 될 것입니다.

_fillXYZ 및 loadData 메서드에는 등고선 변수에 재사용할 수 있는 많은 코드가 있습니다. 함수 내에서 멤버 변수를 설정하는 대신 생성한 목록을 반환하도록 함수를 수정할 수 있습니다.

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

등고선 x, y 및 z 변수에 대한 데이터를 채우기 위해 plotting.py에서 loadData() 메서드를 재사용하는 가장 좋은 방법에 대해 생각합니다. 이 근처 에서 이런 개조에 대해 어떻게 생각

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가 z의 행 수와 길이가 동일한 1d여야 합니다.

xi, yi 및 zi가 생성되는 것과 동일한 방식으로 생성된 그리드 변수를 전달해야 합니다.

오, 나는 그것을 보았다. 알았어요!

다음은 우리 코드가 생성할 수 있었던 것을 살펴보겠습니다. 이제 Mike의 업데이트로 인해 UI와 이미지 품질이 다르게 보일 것입니다. 그러나 이것이 CSUMB STOQS 팀이 제공할 수 있었던 것입니다.

CSUMB STOQS 팀이 완료한 작업에 대한 빠른 요약을 제공하기 위해 기존 코드를 필터링하고 필요에 따라 조정했습니다. 이러한 조정 중 하나는 완전히 새로운 라디오 버튼 열을 추가하여 UI에 등고선 매핑 옵션이 있도록 하는 것이었습니다. 이러한 UI 변경은 저와 @LeslyGJ에 의해 이루어졌습니다. 새로운 형식에 따라 해당 버튼에 대한 연결도 이루어져야 했습니다. JavaScript @samuelrey 를 변경하는 것이 그 작업을 담당했습니다. 또 다른 조정은 서버 측 코드 뒤에 있는 파이썬에 뛰어들 때 이루어졌습니다. @samuelrey 와 @J0S349 및 @samuelrey는 새로운 테스트 케이스를 생성하거나 코드가 제대로 전달되고 다시