Merge pull request #130 from LCOGT/fix/output-analysis

Fixes for datalab output analysis

Author: LTDakin

package-lock.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.17.0",
     "@mdi/font": "5.9.55",
+    "chart.js": "^4.4.6",
     "core-js": "^3.8.3",
-    "d3": "^7.9.0",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lru-cache": "^10.2.0",
@@ -21,7 +21,6 @@
     "serve": "^14.2.1",
     "vue": "^3.5.9",
     "vue-router": "^4.2.5",
-    "vue3-carousel": "^0.3.1",
     "vuetify": "^3.7.4",
     "webfontloader": "^1.0.0"
   },

package.json

@@ -39,6 +39,8 @@ async function addImagesToExistingSession(session){
   const inputData = [...existingSession.input_data, ...props.newImages.map(image => ({
     'source': 'archive',
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
+    'id': image.id,
+    'url': image.url,
     'filter': image.FILTER
   }))]
   const requestBody = {
@@ -57,6 +59,8 @@ async function createNewDataSession(){
   const inputData = props.newImages.map(image => ({
     'source': 'archive',
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
+    'id': image.id,
+    'url': image.url,
     'filter': image.FILTER
   }))
   const requestBody = {

src/components/Project/CreateSessionDialog.vue

@@ -39,6 +39,7 @@ function closeDialog() {
   startCoords.value = null
   endCoords.value = null
   headerData.value = null
+  positionAngle.value = null
   emit('update:modelValue', false)
 }
 
@@ -47,6 +48,7 @@ function requestAnalysis(action, input, action_callback=null){
   const url = configStore.datalabApiBaseUrl + 'analysis/' + action + '/'
   const body = {
     'basename': props.image.basename,
+    'source': props.image.source,
     ...input
   }
   fetchApiCall({url: url, method: 'POST', body: body, successCallback: (response) => {handleAnalysisOutput(response, action, action_callback)}})
@@ -111,10 +113,13 @@ function showHeaderDialog() {
         />
         <v-toolbar-title>{{ image.basename || "Unknown" }}</v-toolbar-title>
         <image-download-menu
-          :image="image"
+          :image-name="image.basename"
+          :fits-url="image.url || image.fits_url"
+          :jpg-url="image.largeCachedUrl"
           @analysis-action="requestAnalysis"
         />
         <v-btn
+          v-if="image.id"
           icon="mdi-information"
           @click="showHeaderDialog"
         />
@@ -145,8 +150,8 @@ function showHeaderDialog() {
             rounded
           >
             <line-plot
-              :y-axis-luminosity="lineProfile"
-              :x-axis-arcsecs="lineProfileLength"
+              :y-axis-data="lineProfile"
+              :x-axis-length="lineProfileLength"
               :start-coords="startCoords"
               :end-coords="endCoords"
               :position-angle="positionAngle"
@@ -212,11 +217,11 @@ a{
 }
 .basic-info-sheet{
   padding: 1rem;
+  margin-bottom: 1rem;
   color: var(--tan);
   background-color: var(--metal);
 }
 .line-plot-sheet {
-  margin-top: 1rem;
   padding: 1rem;
   background-color: var(--metal);
   height: 100%;

src/components/Project/ImageAnalysis/ImageAnalyzer.vue

@@ -1,7 +1,23 @@
 <script setup>
 import { useAlertsStore } from '@/stores/alerts'
 
-const props = defineProps(['image', 'tifUrl'])
+const props = defineProps({
+  imageName: {
+    type: String,
+    required: true,
+    default: null,
+  },
+  fitsUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  jpgUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
 
 defineEmits(['analysisAction'])
 
@@ -12,6 +28,7 @@ function downloadLink(link, filename, fileType='file'){
     alertStore.setAlert('error', `No ${fileType} available for download`)
     return
   }
+  // Create a link element and click it to download the file
   const a = document.createElement('a')
   a.href = link
   a.download = filename
@@ -33,19 +50,21 @@ function downloadLink(link, filename, fileType='file'){
       />
     </template>
     <v-btn
+      v-if="props.fitsUrl"
       key="1"
       text=".FITS"
-      @click="downloadLink(props.image.url, props.image.basename, 'FITs')"
+      @click="downloadLink(props.fitsUrl, props.imageName, 'FITs')"
     />
     <v-btn
       key="2"
       text=".TIF"
-      @click="$emit('analysisAction', 'get-tif', {'basename': props.image.basename}, downloadLink)"
+      @click="$emit('analysisAction', 'get-tif', {'basename': props.imageName}, downloadLink)"
     />
     <v-btn
+      v-if="props.jpgUrl"
       key="3"
       text=".JPG"
-      @click="downloadLink(props.image.largeCachedUrl, props.image.basename, 'JPG')"
+      @click="downloadLink(props.jpgUrl, props.imageName, 'JPG')"
     />
   </v-speed-dial>
 </template>

src/components/Project/ImageAnalysis/ImageDownloadMenu.vue

@@ -54,9 +54,6 @@ function loadImageOverlay() {
     maxBoundsViscosity: 1.0,
   })
 
-  // Layer control allows the toggling of layers on the map
-  layerControl = L.control.layers(null, null, {collapsed:false}).addTo(imageMap)
-
   const img = new Image()
   img.src = props.imageSrc
   
@@ -206,7 +203,7 @@ function createCatalogLayer(){
       snapIgnore: false, // Allow snapping to this layer
     })
 
-    sourceMarker.bindPopup(`Flux: ${source.flux}<br>Ra: ${source.ra}<br>Dec: ${source.dec}`)
+    sourceMarker.bindPopup(`Flux: ${source.flux ?? 'N/A'}<br>Ra: ${source.ra ?? 'N/A'}<br>Dec: ${source.dec ?? 'N/A'}`)
     sourceCatalogMarkers.push(sourceMarker)
   })
 
@@ -216,6 +213,9 @@ function createCatalogLayer(){
   // Displays the catalog layer by default
   catalogLayerGroup.addTo(imageMap)
 
+  // Layer control allows the toggling of layers on the map
+  layerControl = L.control.layers(null, null, {collapsed:false}).addTo(imageMap)
+
   layerControl.addOverlay(catalogLayerGroup, 'Source Catalog')
 }