feat(lightcurve): Added checkbox to use flux instead of magnitude.

lightcurve/src/api/static/flux.js

@@ -0,0 +1,21 @@
+// From Masci+2023 sections 6.4 and 6.5
+const SNT = 3.;
+const SNU = 5.;
+
+function magdiff2flux_uJy(mag, isdiffpos){
+    return Math.pow(10., (-0.4 * (mag - 23.9)) * isdiffpos)
+};
+
+function magtot2flux_uJy(mag){
+    return Math.pow(10., (-0.4 * (mag - 23.9)))
+};
+
+function fluxerr(magerr, flux){
+    return Math.abs(magerr) * Math.abs(flux)
+};
+
+function flux_uJy2magupperlim(fluxerr){
+    return -2.5 * Math.log10(SNU * Math.abs(fluxerr)) + 23.9
+};
+
+export { magtot2flux_uJy, magdiff2flux_uJy, fluxerr, flux_uJy2magupperlim }

lightcurve/src/api/static/lc-apparent.js

@@ -1,5 +1,6 @@
 import { jdToDate } from './astro-dates.js'
 import { LightCurveOptions } from './lc-utils.js'
+import { magtot2flux_uJy } from './flux.js'
 
 export class ApparentLightCurveOptions extends LightCurveOptions {
   constructor(detections, nonDetections, fontColor) {
@@ -33,8 +34,9 @@ export class ApparentLightCurveOptions extends LightCurveOptions {
           y: 1,
         },
         zlevel: band < 100 ? 10 : 0,
+        yAxisIndex: 0,
       }
-      serie.data = this.formatDetections(detections, band)
+      serie.data = this.formatDetections(detections, band, this.use_flux)
       this.options.series.push(serie)
     })
   }
@@ -67,15 +69,15 @@ export class ApparentLightCurveOptions extends LightCurveOptions {
       })
   }
 
-  formatDetections(detections, band) {
+  formatDetections(detections, band, use_flux) {
     return detections
       .filter(function (x) {
         return x.fid === band && x.corrected
       })
       .map(function (x) {
         return [
           x.mjd,
-          x.mag_corr,
+          use_flux ? magtot2flux_uJy(x.mag_corr) : x.mag_corr,
           x.candid !== undefined ? x.candid : x.objectid,
           x.e_mag_corr_ext,
           x.isdiffpos !== undefined ? x.isdiffpos : x.field,
@@ -106,4 +108,4 @@ export class ApparentLightCurveOptions extends LightCurveOptions {
       index: this.detections.findIndex((x) => x.mjd === detection.value[0]),
     }
   }
-}
+}

lightcurve/src/api/static/lc-difference.js

@@ -1,5 +1,6 @@
 import { jdToDate } from './astro-dates.js'
 import { LightCurveOptions } from './lc-utils.js'
+import { magtot2flux_uJy, fluxerr } from './flux.js'
 
 
 export class DifferenceLightCurveOptions extends LightCurveOptions {
@@ -35,7 +36,7 @@ export class DifferenceLightCurveOptions extends LightCurveOptions {
           y: 1,
         },
       }
-      serie.data = this.formatDetections(detections, band)
+      serie.data = this.formatDetections(detections, band, this.use_flux)
       this.options.series.push(serie)
     })
   }
@@ -49,7 +50,7 @@ export class DifferenceLightCurveOptions extends LightCurveOptions {
         color: this.bandMap[band].color,
         renderItem: this.renderError,
       }
-      serie.data = this.formatError(detections, band)
+        serie.data = this.formatError(detections, band, this.use_flux)
       this.options.series.push(serie)
     })
   }
@@ -65,38 +66,52 @@ export class DifferenceLightCurveOptions extends LightCurveOptions {
         symbol:
           'path://M0,49.017c0-13.824,11.207-25.03,25.03-25.03h438.017c13.824,0,25.029,11.207,25.029,25.03L262.81,455.745c0,0-18.772,18.773-37.545,0C206.494,436.973,0,49.017,0,49.017z',
       }
-      serie.data = this.formatNonDetections(nonDetections, band)
+      serie.data = this.formatNonDetections(nonDetections, band, this.use_flux)
       this.options.series.push(serie)
     })
   }
 
-  formatError(detections, band) {
+  formatError(detections, band, use_flux) {
     return detections
       .filter(function (x) {
         return x.fid === band
       })
       .map(function (x) {
-        return [x.mjd, x.mag - x.e_mag, x.mag + x.e_mag]
+        const flux = magtot2flux_uJy(x.mag)
+        return [
+            x.mjd,
+            use_flux ? flux - fluxerr(x.e_mag, flux) : x.mag - x.e_mag,
+            use_flux ? flux + fluxerr(x.e_mag, flux) : x.mag + x.e_mag,
+        ]
       })
   }
 
-  formatDetections(detections, band) {
+  formatDetections(detections, band, use_flux) {
     return detections
       .filter(function (x) {
         return x.fid === band
       })
       .map(function (x) {
-        return [x.mjd, x.mag, x.candid, x.e_mag, x.isdiffpos]
+        return [
+            x.mjd,
+            use_flux ? magtot2flux_uJy(x.mag) : x.mag,
+            x.candid,
+            x.e_mag,
+            x.isdiffpos
+        ]
       })
   }
 
-  formatNonDetections(nonDetections, band) {
+  formatNonDetections(nonDetections, band, use_flux) {
     return nonDetections
       .filter(function (x) {
         return x.fid === band && x.diffmaglim > 10
       })
       .map(function (x) {
-        return [x.mjd, x.diffmaglim]
+        return [
+            x.mjd,
+            use_flux ? magtot2flux_uJy(x.diffmaglim) : x.diffmaglim,
+        ]
       })
   }
 

lightcurve/src/api/static/lc-utils.js

@@ -1,7 +1,7 @@
 import { jdToDate } from './astro-dates.js'
 
 export class LightCurveOptions {
-  constructor(detections = [], nonDetections = [], fontColor = 'fff') {
+  constructor(detections = [], nonDetections = [], use_flux = false, fontColor = 'fff') {
     this.bandMap = {
       1: { name: 'g', color: '#56E03A' },
       2: { name: 'r', color: '#D42F4B' },
@@ -14,6 +14,7 @@ export class LightCurveOptions {
       202: { name: 'r forced photometry', color: '#377EB8' },
       203: { name: 'i forced photometry', color: '#FF7F00' },
     }
+    this.use_flux = use_flux
     this.detections = detections.filter(
       (x) => x.fid in this.bandMap
     )
@@ -99,9 +100,10 @@ export class LightCurveOptions {
         },
       },
       yAxis: {
-        name: 'Magnitude',
-        nameLocation: 'start',
+        name: this.use_flux ? 'Flux' : 'Magnitude',
+        nameLocation: this.use_flux ? 'end' : 'start',
         type: 'value',
+        position: 'left',
         scale: true,
         splitLine: {
           show: false,

lightcurve/src/api/static/main.css

@@ -42,10 +42,6 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.tw-preflight :is(.tw-grid-cols-3) {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .tw-preflight :is(.tw-flex-col) {
   flex-direction: column;
 }

lightcurve/src/api/templates/lightcurve.html.j2

@@ -143,15 +143,23 @@
         window.setPlot(current_plot);
     }
 
+    window.toggleFlux = () => {
+        window.setPlot(current_plot);
+    }
+
     /* Update plot on plot type change */
     window.setPlot = (type) => {
+        const flux_checkbox = document.getElementById("flux-checkbox");
+        const use_flux = document.getElementById("flux-checkbox").checked;
+        console.log(use_flux);
+
         current_plot = type;
         if (current_plot === "difference") {
-            plot_options = new DifferenceLightCurveOptions(getDetections(), non_detections, plot_text_color);
+            plot_options = new DifferenceLightCurveOptions(getDetections(), non_detections, use_flux, plot_text_color);
         } else if (current_plot === "apparent") {
-            plot_options = new ApparentLightCurveOptions(getDetectionsWithDR(), non_detections, plot_text_color);
+            plot_options = new ApparentLightCurveOptions(getDetectionsWithDR(), non_detections, use_flux, plot_text_color);
         } else if (current_plot === "folded") {
-            plot_options = new FoldedLightCurveOptions(getDetectionsWithDR(), non_detections, plot_text_color, period);
+            plot_options = new FoldedLightCurveOptions(getDetectionsWithDR(), non_detections, use_flux, plot_text_color, period);
         }
         plot.setOption(plot_options.options, true);
     };
@@ -272,6 +280,19 @@
                         </div>
                     </div>
                 </label>
+                <label class="tw-flex tw-items-center tw-space-x-2">
+                    <input
+                        id="flux-checkbox"
+                        type="checkbox"
+                        onclick="toggleFlux()"
+                    >
+                    <span>Use flux</span>
+                    <div class="tooltip">
+                        <i class="fa fa-question-circle tw-me-2"></i>
+                        <div class="tooltip-text">
+                        </div>
+                    </div>
+                </label>
             </div>
             <!-- Spacer columns -->
             <div>