Calculate the cumulative exposure time for smartstack frames

src/components/ImageDisplay/ImageInfoBar.vue

@@ -1,53 +1,49 @@
 <template>
   <div>
     <div class="image-info-bar-item site">
-      site:&nbsp;{{ current_image.site }}
+      site:&nbsp;{{ site }}
     </div>
     <div class="image-info-bar-item exptime">
-      exptime:&nbsp;{{ current_image.exposure_time }}s
+      exposure:&nbsp;{{ exposure }}s
     </div>
     <div class="image-info-bar-item filter-used">
-      filter:&nbsp;{{ current_image.filter_used }}
+      filter:&nbsp;{{ filter }}
     </div>
     <div class="image-info-bar-item smartstack">
       stack:&nbsp;{{ smartstackProgress }}
     </div>
-    <div
-      class="image-info-bar-item ra"
-      style="display:flex"
-    >
-      ra:&nbsp;<ra-display
+    <div class="image-info-bar-item ra">
+      ra:&nbsp;
+      <RaDisplay
         :ra_hours_decimal="raHours"
         :decimal_precision="3"
       />
     </div>
-    <div
-      class="image-info-bar-item dec"
-      style="display:flex"
-    >
-      dec:&nbsp;<dec-display
+    <div class="image-info-bar-item dec">
+      dec:&nbsp;
+      <DecDisplay
         :dec_deg_decimal="current_image.declination"
         :decimal_precision="3"
       />
     </div>
     <div class="image-info-bar-item airmass">
-      airmass:&nbsp;{{ current_image.airmass }}
+      airmass:&nbsp;{{ airmass }}
     </div>
     <div class="image-info-bar-item altitude">
-      altitude:&nbsp;{{ truncateDecimalString(current_image.altitude, 4) }}°
+      altitude:&nbsp;{{ altitude }}°
     </div>
     <div class="image-info-bar-item obstime">
-      {{ current_image.capture_date | dateToReadable }}
-    </div>
-    <div class="image-info-bar-item filename">
-      {{ current_image.base_filename }}
+      {{ obstime }}
     </div>
     <div class="image-info-bar-item fwhm">
       fwhm: {{ fwhm }}"
     </div>
     <div class="image-info-bar-item sepsky">
       sky: {{ sepsky }} adu
     </div>
+    <div class="image-info-bar-item filename">
+      {{ filename }}
+    </div>
   </div>
 </template>
 
@@ -67,51 +63,11 @@ export default {
       required: true
     }
   },
-  data () {
-    return {
-      fwhm: '',
-      sepsky: '',
-      smartstackLength: 1, // Total number of images for this smartstack
-      smartstackNumber: 0 // Value of n for "this image is the nth smartstack image", 0-indexed
-    }
-  },
 
-  filters: {
+  methods: {
     dateToReadable (date) {
       return moment.utc(date).format('YYYY-MM-DD HH:mm UTC')
-    }
-  },
-
-  watch: {
-    current_image () {
-      // Get header for extra infobar values
-      this.$store.dispatch('images/loadCurrentImageFitsHeader').then(header => {
-        // Round appropriately
-        if ('FWHMASEC' in header) {
-          this.fwhm = Number(header.FWHMASEC).toFixed(2)
-        } else {
-          this.fwhm = 'n/a'
-        }
-        if ('SEPSKY' in header) {
-          this.sepsky = parseInt(header.SEPSKY)
-        } else {
-          this.sepsky = 'n/a'
-        }
-        if ('SSTKLEN' in header) {
-          this.smartstackLength = parseInt(header.SSTKLEN)
-        } else {
-          this.smartstackLength = 1
-        }
-        if ('SSTKNUM' in header) {
-          this.smartstackNumber = parseInt(header.SSTKNUM)
-        } else {
-          this.smartstackNumber = 0
-        }
-      })
-    }
-  },
-
-  methods: {
+    },
     dateToUnix (date) {
       return (new Date(date).getTime() / 1000).toFixed(0)
     },
@@ -124,6 +80,64 @@ export default {
   },
 
   computed: {
+    site () {
+      return this.current_image.site
+    },
+    exposure () {
+      // Account for the cumulative exposure time represented in a smartstack by multiplying the
+      // single frame exposure time by the number of frames being represented.
+      //
+      // If the image is not part of a smartstack, it is treated like a smartstack with size 1, so the math still works.
+      const frameExposureTime = Number(this.current_image.exposure_time)
+      const framesInSmartstack = this.smartstackNumber
+      const cumulativeExposure = (framesInSmartstack + 1) * frameExposureTime
+      return cumulativeExposure
+    },
+    filter () {
+      return this.current_image.filter_used
+    },
+    airmass () {
+      return this.current_image.airmass
+    },
+    altitude () {
+      return this.truncateDecimalString(this.current_image.altitude, 4)
+    },
+    obstime () {
+      return this.dateToReadable(this.current_image.capture_date)
+    },
+    filename () {
+      return this.current_image.base_filename
+    },
+    fwhm () {
+      if (this.current_image.header && 'FWHMASEC' in this.current_image.header) {
+        return Number(this.current_image.header.FWHMASEC).toFixed(2)
+      } else {
+        return 'n/a'
+      }
+    },
+    sepsky () {
+      if (this.current_image.header && 'SEPSKY' in this.current_image.header) {
+        return parseInt(this.current_image.header.SEPSKY)
+      } else {
+        return 'n/a'
+      }
+    },
+    // Total number of images for this smartstack
+    smartstackLength () {
+      if (this.current_image.header && 'SSTKLEN' in this.current_image.header) {
+        return parseInt(this.current_image.header.SSTKLEN)
+      } else {
+        return 1
+      }
+    },
+    // Value of n for "this image is the nth smartstack image", 0-indexed
+    smartstackNumber () {
+      if (this.current_image.header && 'SSTKNUM' in this.current_image.header) {
+        return parseInt(this.current_image.header.SSTKNUM)
+      } else {
+        return 0
+      }
+    },
     smartstackProgress () {
       if (this.smartstackLength == 1) {
         return 'n/a'
@@ -155,11 +169,12 @@ export default {
   color: #aaa;
   background-color: #1e2223;
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns:  1fr 2fr 0.5fr 1fr 1fr;
-  grid-template-areas: 'site exptime . ra dec'
-                       'filter-used obstime . airmass altitude'
-                       'smartstack filename filename fwhm sepsky';
+  grid-template-rows: 1fr 1fr 1fr 1fr;
+  grid-template-columns:  1fr 1.5fr 1fr 1fr;
+  grid-template-areas: 'site exptime ra dec'
+                       'filter-used obstime airmass altitude'
+                       'smartstack fwhm sepsky .'
+                       'filename filename filename filename';
   grid-column-gap: 10px;
   padding: 1px 3px;
   font-size: 9pt;
@@ -171,8 +186,8 @@ export default {
   .filter-used { grid-area: filter-used; }
   .smartstack { grid-area: smartstack; }
   .exptime { grid-area: exptime; }
-  .ra { grid-area: ra; }
-  .dec { grid-area: dec; }
+  .ra { grid-area: ra; display: flex; }
+  .dec { grid-area: dec; display: flex }
   .airmass { grid-area: airmass; }
   .altitude { grid-area: altitude; }
   .obstime { grid-area: obstime; }

src/components/sitepages/SiteData.vue

@@ -505,7 +505,7 @@ $tabs-toggle-link-border-width: 10px;
 @import "@/style/_variables.scss";
 
 $site-data-wrapper-padding: 1em;
-$infobar-height: 70px;
+$infobar-height: 80px;
 $thumbnails-height: 100px;
 $controls-height: 55px;
 
@@ -570,7 +570,7 @@ $visible-content-height: calc(100vh - #{$top-bottom-height + #{(2 * $site-data-w
   grid-area: image;
   width: 100%;
   //display: grid; // for some reason this breaks the layout when loading lots of images
-  grid-template-rows: $infobar-height auto auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr;
   grid-template-columns: auto;
   overflow: hidden;