Stoqs: Tambahkan tombol radio "Plot Kontur"

Keterampilan pengembang Full Stack diperlukan untuk mengimplementasikan fitur baru ini. Di sisi klien ada HTML dan JavaScript (JQuery) untuk ditulis. AJAX harus dipahami untuk melewatkan data antara UI dan server. Di sisi server ada kode Python yang perlu ditulis untuk melakukan plotting. Untuk menyelesaikan semuanya, tes fungsional akan ditulis menggunakan Selenium. (Idealnya, untuk mengikuti metodologi TDD yang benar, tes akan ditulis terlebih dahulu!)

Selamat datang @J0S349 , @noemicuin , @LeslyGJ , @samuelrey! Saya senang Anda memilih masalah ini. Ini adalah sesuatu yang diminta oleh salah satu ilmuwan kami dan saya pikir mereka akan senang memiliki fitur ini.

Selama tur MBARI kemarin kami melewati sebuah poster yang memiliki contoh plot yang akan disediakan oleh fitur baru ini:

Plot atas menunjukkan Suhu sebagai warna dan juga sebagai garis kontur putih. Plot bawah menunjukkan Klorofil sebagai warna dan garis kontur putih sama seperti di plot atas, Suhu.

Fitur yang akan ditambahkan ke UI STOQS adalah kemampuan untuk menambahkan garis kontur Parameter apa pun.

Tes test_contour_plots() yang ditambahkan oleh https://github.com/stoqs/stoqs/pull/501 dapat dieksekusi dari ~/dev/stoqsgit dengan:

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

Jika Anda memasukkan kembali titik jeda debug yang telah dihapus oleh https://github.com/stoqs/stoqs/pull/501/commits/b976d708e13fd208df3f29c6f12bd1692e427e38 Anda akan melihat jendela seperti ini:

Perhatikan bahwa untuk menjalankan tes fungsional, server pengembangan harus dijalankan. Pastikan ini telah dieksekusi di sesi terminal lain:

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

Awal dari tes fungsional untuk fitur "garis kontur plot" mungkin terlihat seperti ini:

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

Yang akan gagal dengan:

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

Saya dapat menambahkan breakpoint dan menambahkan baris yang meminta elemen yang tidak tersedia.

Hai @samuelrey ,

Itu hebat! Bisakah Anda mendorong perubahan kode Anda ke cabang baru sehingga kita semua bisa melihatnya?

Hai @MBARIMike Saya mengalami masalah dengan lebih banyak kasus uji.
Salah satu yang saya terapkan mengharapkan gambar dihasilkan ketika salah satu tombol radio kontur ditekan.
Hal lain yang saya pikirkan adalah memverifikasi bahwa jumlah tombol kontur yang sama dengan tombol warna diproduksi. Ini mengikuti pemahaman saya bahwa tombol radio diproduksi secara dinamis sesuai dengan parameter yang dijelaskan oleh data.

Halo @samuelrey (dan tim),

Jika Anda ingin mengikuti contoh TDD dari tutorial Harry Percival maka langkah Anda selanjutnya adalah menambahkan kode untuk membuat tes dari https://github.com/stoqs/stoqs/issues/230#issuecomment -280171422 lulus.

Kode pengujian gagal mencari elemen input bernama parameters_contour_plot . Halaman web yang ada memiliki kolom tombol radio bernama parameters_plot . Saya sarankan mencari string ini di file https://github.com/stoqs/stoqs/blob/master/stoqs/stoqs/templates/stoqs/stoqsquery.html dan menambahkan kode serupa untuk menambahkan kolom tombol radio bernama parameters_contour_plot .

Saat pengujian Anda berhasil, lakukan perubahan ke cabang Anda. Kemudian tulis tes berikutnya.

Halo @MBARIMike ,

Kami sekarang telah menerapkan semua tombol radio non-fungsional bernama sebagai berikut: parameters_contour_plot untuk plot kontur bersama dengan tes untuk memastikan mereka dihasilkan. Langkah selanjutnya bagi kami adalah mengimplementasikan fungsionalitas ke tombol radio kontur.

@MBARIMike juga kami tidak tersedia untuk bertemu pada hari Jumat, 31 Maret (Hari Cesar Chavez) tetapi kami ingin bertemu pada hari Jumat lainnya Anda tersedia untuk menunjukkan kemajuan kami dan mendiskusikan saran apa pun yang mungkin Anda miliki untuk kami. Beri tahu kami apa yang paling cocok untuk Anda.

Sepertinya kemajuan besar!

Bisakah Anda memberikan tautan ke cabang untuk perubahan kode ini?

Berikut perubahan kodenya:
https://github.com/samuelrey/stoqs/commit/01fd692e5010fb6aa287899b5d7afb5bd10e9825
https://github.com/samuelrey/stoqs/commit/a3173e7368528c17f3a57ab5daf4ae4aa730153a (di akhir file)
https://github.com/samuelrey/stoqs/commit/3122a4ee412b859e949549ebf7e384a61c9fb438 (tes)

Di VM saya, saya perhatikan bahwa jendela Firefox muncul di luar layar. Saya tidak tahu apakah Anda mengalami masalah itu, tetapi perubahan ke stoqs/stoqs/tests/functional_tests.py memperbaikinya:

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

Berikut sedikit panduannya:

1. Diperlukan sedikit pembersihan dalam penyelarasan kolom di judul dan menghapus baris pilihan
2. Tambahkan pengendali untuk klik pada tombol radio bernama parameters_contour_plot . Kode JavaScript ini adalah handler untuk tombol Plot yang ada. Itu membangun string kueri yang kemudian diteruskan ke server tempat plot kontur akan dihasilkan. Kode serupa perlu ditambahkan untuk menambahkan parameters_contour_plot ke string kueri.

Langkah selanjutnya mulai menjadi sedikit kasar, saat mereka masuk ke kode sisi server:

1. Tambahkan baris untuk parametercontourplot ke stoqs/stoqs/views/query.py kode Python
2. Dalam file stoqs/utils/STOQSQManager.py di sekitar sini tambahkan kode untuk menarik contourparameterID dan contourparameterGroups dan menambahkannya ke daftar argumen untuk MeasuredParameter().
3. Dalam file stoqs/utils/Viz/plotting.py tambahkan contourparameterID dan contourparameterGroups ke MeasuredParameter()'s __init__()

Pada titik ini pengujian fungsional Anda stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots harus lulus dan Anda akan memiliki akses ke ID parameter yang telah dipilih untuk membuat kontur di tempat yang Anda butuhkan (metode renderDatavaluesForFlot() dari MeasuredParameter kelas).

Saya akan menggunakan fungsi javascript!

Komitmen terakhir dalam semua kemuliaan mentahnya. Kami telah menyelesaikan semua yang tercantum dalam komentar ini . Sekarang kami sedang bekerja untuk benar-benar merencanakan data! Modifikasi akan dilakukan pada plotting.py .

Saya mengalami masalah saat mencoba membuat plot warna. data['parameterplatformdatavaluepng'] memiliki [null, null, 'Masalah dengan mendapatkan info tombol parameter-contour-plot-radio']. Tetapkan breakpoint di sini , pilih salah satu tombol radio plot warna & verifikasi bahwa datanya sama dengan yang saya amati. Masih mempersempit penyebabnya.

Teks 'Masalah dengan mendapatkan informasi tombol parameter-contour-plot-radio' berasal dari baris ini .

Oh, itu salah saya lakukan.
Dugaan saya untuk kesalahan ini adalah 'platformName' harus 'contourplatformName'? Atau solusi lain mungkin tidak memeriksa 'contourplatformName'?
Saran apa pun akan membantu menghindari jumlah komitmen yang tidak diperlukan.

Metode _fillXYZ & loadData memiliki banyak kode yang dapat digunakan kembali untuk variabel garis kontur. Mungkin alih-alih mengatur variabel anggota di dalam fungsi, kita dapat memodifikasi fungsi untuk mengembalikan daftar yang mereka hasilkan.

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

Memikirkan cara terbaik untuk menggunakan kembali metode loadData() di plotting.py untuk mengisi data untuk variabel garis kontur x, y, dan z. Apa pendapat Anda tentang modifikasi seperti ini di dekat sini ?

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

Silakan lihat Permintaan Tarik ini yang menyelam jauh ke dalam "lubang kelinci" untuk menghasilkan kontur_qs_mp paralel dan membantu Anda menggunakan kembali loadData() untuk mendapatkan nilai data parameter garis kontur. Anda sekarang seharusnya dapat menggunakan variabel clx, cly, dan clz untuk membuat garis kontur.

@samuelrey Silakan ubah cabang dasar ke https://github.com/stoqs/stoqs/pull/578 ke cabang capstone-spring2017 . Berikut adalah petunjuk tentang cara melakukannya: https://github.com/blog/2224-change-the-base-branch-of-a-pull-request

Dengan berada di cabang terpisah, akan lebih mudah untuk mengelola penggabungan tambahan.

Aku akan menyelesaikannya di penghujung hari! Ini bagus untuk pergi.

Kelihatan bagus! Apakah Anda juga melihat permintaan kecil ini?

Tepat sebelum gambar disimpan, saya memasukkan

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

yang melempar kesalahan mengenai bentuk z.
Dokumentasi kontur mengatakan bahwa x, y dan z harus berupa 2d dengan bentuk yang sama atau x dan y harus 1d dengan panjang yang sama dengan jumlah baris dalam z.

Anda harus memasukkan variabel grid, diproduksi dengan cara yang sama seperti xi, yi, dan zi diproduksi.

Oh saya lebih melihat itu. Mengerti!

Berikut ini adalah apa yang dapat dihasilkan oleh kode kami. UI dan kualitas gambar akan terlihat berbeda sekarang karena pembaruan yang dibuat oleh Mike; namun, inilah yang dapat disampaikan oleh tim CSUMB STOQS.

Untuk memberikan ringkasan singkat tentang pekerjaan yang diselesaikan oleh tim CSUMB STOQS, kami memfilter kode yang sudah ada dan membuat penyesuaian yang diperlukan. Salah satu penyesuaian ini adalah menambahkan kolom baru tombol radio sehingga UI memiliki opsi untuk memetakan garis kontur; perubahan UI ini dibuat oleh saya dan @LeslyGJ. Mengikuti format baru, koneksi ke tombol-tombol itu juga harus dibuat; membuat perubahan pada JavaScript @samuelrey mengambil alih tugas itu. Penyesuaian lain datang saat menyelam ke python di belakang kode sisi server; @samuelrey dan saya sendiri menambahkan variabel baru dan melewati parameter baru. Dengan perubahan UI, dan modifikasi sisi server, @J0S349 dan @samuelrey memantau penyelesaian pengujian dengan membuat kasus pengujian baru atau membuat perubahan di mana pun diperlukan untuk mendapatkan kode yang lolos dan kembali ke jalurnya.