From 712f8cdebe3229cf2c2d243a5a364d129e563f46 Mon Sep 17 00:00:00 2001
From: "amychan331@yahoo.com" <amychan331@yahoo.com>
Date: Tue, 3 Apr 2018 16:32:50 -0700
Subject: [PATCH] getting the comparison star plot ready

---
 imageflow/static/imageflow/js/shared.js              |  9 +++++++++
 lightcurve/static/lightcurve/js/lightcurve.js        |  2 ++
 lightcurve/templates/lightcurve.html                 |  4 ++++
 .../templates/partials/comparison_stars_plot.html    | 12 ++++++++++++
 4 files changed, 27 insertions(+)
 create mode 100644 lightcurve/templates/partials/comparison_stars_plot.html

diff --git a/imageflow/static/imageflow/js/shared.js b/imageflow/static/imageflow/js/shared.js
index 23467f9..bcc8a6b 100644
--- a/imageflow/static/imageflow/js/shared.js
+++ b/imageflow/static/imageflow/js/shared.js
@@ -22,6 +22,15 @@ function plotImage($container, canvas, imageUrl, opts) {
 									0, 0, img.width * ratio, img.height * ratio);
 
     // Then plot stars from the data source.
+    if (window.comparisonStarData) {
+      plotStars(canvas, window.comparisonStarData, {
+        color: '#4B008',
+        radius: 6,
+        text: function(star) {
+          return star.id;
+        }
+      });
+    }
     if (window.catalogData) {
       plotStars(canvas, window.catalogData, {
         color: 'red',
diff --git a/lightcurve/static/lightcurve/js/lightcurve.js b/lightcurve/static/lightcurve/js/lightcurve.js
index d9ac88d..7456e29 100644
--- a/lightcurve/static/lightcurve/js/lightcurve.js
+++ b/lightcurve/static/lightcurve/js/lightcurve.js
@@ -259,6 +259,8 @@ $(function() {
   setupFilterSelection();
   setupModals();
   setupAddAllImages();
+
+  setupPlot();
 });
 
 })();
diff --git a/lightcurve/templates/lightcurve.html b/lightcurve/templates/lightcurve.html
index 04771fd..7260521 100644
--- a/lightcurve/templates/lightcurve.html
+++ b/lightcurve/templates/lightcurve.html
@@ -163,6 +163,7 @@ <h2 id="select-comp-stars">Comparison Stars</h2>
           Magnitudes shown are from the <a href="/analysis/reference_stars/{{images.0.analysis.id}}">first image</a>.
           To review comparison stars in more detail, review the 'Reference Stars' page for each image.
         </p>
+        {% include 'partials/comparison_stars_plot.html' %}
         {% include 'partials/comparison_stars.html' %}
       {% else %}
         <p class="alert alert-danger">Uh oh - there are no common stars.  Please tune your photometry to make sure some known stars are picked up, then try again.</p>
@@ -400,10 +401,13 @@ <h4 class="modal-title">Select Image</h4>
     window.lightcurveId = {{lightcurve.id | jsonify}};
     window.comparisonStars = {{lightcurve.comparison_stars | jsonify}};
     window.commonStars = {{lightcurve.common_stars | jsonify}};
+    window.originalImageUrl = {{images.0.analysis.original_display_url | jsonify}};
+    window.comparisonStarData = {{ lightcurve.common_stars | jsonify }};
   </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <script src="{% static "imageflow/js/lib/stupidtable.min.js" %}" type="text/javascript"></script>
   <script src="{% static "imageflow/js/csrf.js" %}" type="text/javascript"></script>
+  <script src="{% static "imageflow/js/shared.js" %}" type="text/javascript"></script>
   <script src="{% static "imageflow/js/util.js" %}" type="text/javascript"></script>
   <script src="{% static "lightcurve/js/lightcurve.js" %}" type="text/javascript"></script>
   <script src="{% static "lightcurve/js/reduction.js" %}" type="text/javascript"></script>
diff --git a/lightcurve/templates/partials/comparison_stars_plot.html b/lightcurve/templates/partials/comparison_stars_plot.html
new file mode 100644
index 0000000..130aafe
--- /dev/null
+++ b/lightcurve/templates/partials/comparison_stars_plot.html
@@ -0,0 +1,12 @@
+<div class="well">
+  <div>
+    <p>
+      Field position:
+      (<span id="canvas-x-pos">0</span>,
+      <span id="canvas-y-pos">0</span>)
+    </p>
+    <div id="plot-container" style="width: 100%; height: 800px; background-color:#ccc;">
+      <canvas id="star-plot" style="cursor: crosshair" />
+    </div>
+  </div>
+</div>