Stoqs: أضف أزرار الاختيار "Contour Plot"

مهارات مطور المكدس الكامل مطلوبة لتنفيذ هذه الميزة الجديدة. على جانب العميل ، هناك HTML وجافا سكريبت (JQuery) ليتم كتابتها. يجب فهم AJAX لتمرير البيانات بين واجهة المستخدم والخادم. يوجد على جانب الخادم كود Python الذي يجب كتابته للقيام بالتخطيط. لاختتام كل شيء ، سيتم كتابة اختبار وظيفي باستخدام السيلينيوم. (من الناحية المثالية ، لاتباع منهجية TDD الحقيقية ، سيتم كتابة الاختبار أولاً!)

مرحبًا @ J0S349 ، noemicuin ، LeslyGJ ،samuelrey! أنا سعيد لأنك اخترت هذه المشكلة. إنه شيء طلبه أحد علمائنا وأعتقد أنهم سيكونون سعداء بالحصول على هذه الميزة.

خلال جولة MBARI بالأمس مررنا بملصق يحتوي على مثال على نوع الحبكة التي ستوفرها هذه الميزة الجديدة:

يُظهر الرسم البياني العلوي درجة الحرارة كألوان وأيضًا كخطوط كفاف بيضاء. يُظهر الرسم السفلي الكلوروفيل كلون وخطوط الكنتور البيضاء هي نفسها الموجودة في الرسم العلوي ، درجة الحرارة.

الميزة المراد إضافتها إلى STOQS UI هي القدرة على إضافة خطوط كفاف لأي معلمة.

يمكن تنفيذ اختبار 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/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 (والفريق) ،

إذا كنت تريد اتباع مثال 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 أيضًا ، نحن لسنا متواجدين للاجتماع يوم الجمعة ، 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 هذا هو المعالج لأزرار الرسم الموجودة. يقوم ببناء سلسلة استعلام يتم تمريرها بعد ذلك إلى الخادم حيث سيتم إنشاء مخطط الكنتور. يجب إضافة رمز مشابه لإضافة parameters_contour_plot إلى سلسلة الاستعلام.

تبدأ الخطوات التالية في الحصول على القليل من الشهرة ، لأنها تدخل في التعليمات البرمجية من جانب الخادم:

1. أضف أسطرًا parametercontourplot إلى stoqs / stoqs / views / query.py Python code
2. في ملف stoqs / utils / STOQSQManager.py هنا أضف التعليمات البرمجية لسحب contourparameterID و contourparameterGroups وإضافتهما إلى قائمة الوسيطات لـ MeasuredParameter ().
3. في ملف stoqs / utils / Viz / plotting.py أضف contourparameterID و contourparameterGroups إلى MeasuredParameter () 's __init __ ()

في هذه المرحلة ، يجب أن يجتاز الاختبار الوظيفي الخاص بك stoqs.tests.functional_tests.BrowserTestCase.test_contour_plots وسيكون لديك حق الوصول إلى معرف المعلمة الذي تم تحديده لتحديد المكان الذي تحتاج إليه (طريقة renderDatavaluesForFlot() الخاصة بـ MeasuredParameter صف دراسي).

سوف أتناول وظيفة جافا سكريبت!

الالتزام الأخير بكل مجدها الخام. لقد انتهينا من كل شيء مدرج في هذا التعليق . نحن الآن نعمل على رسم البيانات بالفعل! سيتم إجراء تعديلات على plotting.py .

واجهت مشكلة عند محاولة إنشاء مخططات ملونة. البيانات ['parameterplatformdatavaluepng'] بها [فارغة ، خالية ، "مشكلة في الحصول على معلومات زر تحديد المعلمة). عيّن نقطة توقف هنا ، وحدد أيًا من أزرار اختيار مخطط اللون وتحقق من أن البيانات هي نفسها التي لاحظتها. لا يزال يضيق السبب.

يأتي نص "مشكلة الحصول على معلومات زر تحديد معلمة-محيط-مؤامرة-زر" من هذا السطر .

أوه ، هذا هو عملي الخاطئ.
تخميني لهذا الخطأ هو أن "platformName" يجب أن يكون "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. باتباع التنسيق الجديد ، كان لا بد من إجراء اتصالات بهذه الأزرار أيضًا ؛ حدثت تغيرات صنع لsamuelrey جافا سكريبت على عقد من تلك المهمة. تم إجراء تعديل آخر عند الغوص في لغة الثعبان خلف كود جانب الخادم ؛ أضفت أنا و samuelrey متغيرات جديدة وقمت بتمرير معايير جديدة. من خلال تغييرات واجهة المستخدم والتعديلات من جانب الخادم ، راقب @ J0S349 و samuelrey إتمام الاختبار عن طريق إنشاء حالات اختبار جديدة أو إجراء تغييرات حيثما دعت الحاجة إلى تمرير الرمز والعودة إلى المسار الصحيح.