Update/analysis improvements

src/components/Project/ImageAnalysis/FitsHeaderTable.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+
+const search = ref('')
+
+const props = defineProps({
+  headerData: {
+    type: Object,
+    required: true
+  }
+})
+
+const headerDataKeyValueList = Object.entries(props.headerData)
+
+const tableHeaders = ref([
+  { title: 'Key', key:'0' },
+  { title: 'Value', sortable: false, key:'1' },
+])
+
+</script>
+<template>
+  <v-sheet class="fits-header-sheet pa-12">
+    <div class="d-flex justify-space-between align-center">
+      <h1 class="mb-4 mt-4">
+        FITS Headers
+      </h1>
+      <v-text-field
+        v-model="search"
+        class="ml-6"
+        density="compact"
+        prepend-inner-icon="mdi-magnify"
+        label="Search"
+        flat
+        hide-details
+        single-line
+      />
+    </div>
+    <v-data-table
+      v-model:search="search"
+      :headers="tableHeaders"
+      :items="headerDataKeyValueList"
+      :items-per-page="headerDataKeyValueList.length"
+      hide-default-footer
+      hide-no-data
+    />
+  </v-sheet>
+</template>
+<style scoped>
+.fits-header-sheet{
+  background-color: var(--dark-blue);
+  color: var(--tan);
+}
+.v-data-table{
+  background-color: var(--dark-blue);
+}
+</style>

src/components/Project/ImageAnalysis/ImageAnalyzer.vue

@@ -8,6 +8,7 @@ import LinePlot from './LinePlot.vue'
 import FilterBadge from '@/components/Global/FilterBadge.vue'
 import NonLinearSlider from '@/components/Global/NonLinearSlider.vue'
 import ImageDownloadMenu from '@/components/Project/ImageAnalysis/ImageDownloadMenu.vue'
+import FitsHeaderTable from './FitsHeaderTable.vue'
 import { siteIDToName } from '@/utils/common'
 
 const props = defineProps({
@@ -89,6 +90,7 @@ function handleAnalysisOutput(response, action, action_callback){
   }
 }
 
+// Toggles header dialog visibility, fetches headers from archive if they are not present
 function showHeaderDialog() {
   if(headerData.value && Object.keys(headerData.value).length > 0) {
     headerDialog.value = true
@@ -112,6 +114,7 @@ function showHeaderDialog() {
 <template>
   <v-dialog
     :model-value="modelValue"
+    persistent
     fullscreen
   >
     <v-sheet class="analysis-page">
@@ -138,6 +141,7 @@ function showHeaderDialog() {
         />
         <v-btn
           icon="mdi-close"
+          color="var(--cancel)"
           @click="closeDialog()"
         />
       </v-toolbar>
@@ -207,26 +211,10 @@ function showHeaderDialog() {
   </v-dialog>
   <v-dialog
     v-model="headerDialog"
-    width="auto"
+    width="600px"
+    height="85vh"
   >
-    <v-sheet class="pa-12">
-      <h1 class="mb-4 mt-4">
-        FITS Headers
-      </h1>
-      <v-table>
-        <tbody>
-          <tr
-            v-for="(value, key) in headerData"
-            :key="key"
-          >
-            <td class="table_key">
-              {{ key }}
-            </td>
-            <td>{{ value }}</td>
-          </tr>
-        </tbody>
-      </v-table>
-    </v-sheet>
+    <fits-header-table :header-data="headerData" />
   </v-dialog>
 </template>
 <style scoped>
@@ -266,14 +254,4 @@ function showHeaderDialog() {
   height: 100%;
   margin-bottom: 0;
 }
-/* FITS Header Info Table */
-.v-table{
-  background-color: var(--dark-blue);
-  color: var(--tan);
-  max-width: 60ch;
-}
-.table_key{
-  font-weight: bold;
-  font-size: large;
-}
 </style>

src/components/Project/ImageAnalysis/ImageDownloadMenu.vue

@@ -39,6 +39,7 @@ function downloadLink(link, filename, fileType='file'){
 </script>
 <template>
   <v-speed-dial
+    variant="text"
     location="left center"
     transition="fade-transition"
   >
@@ -51,24 +52,27 @@ function downloadLink(link, filename, fileType='file'){
     <v-btn
       v-if="props.fitsUrl"
       key="1"
+      class="file-download"
       text=".FITS"
       @click="downloadLink(props.fitsUrl, props.imageName, 'FITs')"
     />
     <v-btn
       key="2"
+      class="file-download"
       text=".TIF"
       @click="$emit('analysisAction', 'get-tif', {'basename': props.imageName}, downloadLink)"
     />
     <v-btn
       v-if="props.jpgUrl"
       key="3"
+      class="file-download"
       text=".JPG"
       @click="downloadLink(props.jpgUrl, props.imageName, 'JPG')"
     />
   </v-speed-dial>
 </template>
 <style scoped>
-.v-btn{
-  background-color: var(--metal);
+.file-download {
+  background-color: var(--light-blue);
 }
 </style>

src/components/Project/ImageAnalysis/ImageViewer.vue

@@ -21,10 +21,7 @@ const props = defineProps({
 const emit = defineEmits(['analysisAction'])
 
 let imageMap = null
-let imageOverlay = null
-let imageBounds
-let initialCenter = [0, 0]
-let initialZoom = 1
+let imageBounds = null
 let lineLayer = null
 let catalogLayerGroup = null
 const imageWidth = ref(0)
@@ -35,7 +32,6 @@ const alerts = useAlertsStore()
 onMounted(() => {
   loadImageOverlay()
   leafletSetup()
-  resizeMap()
 })
 
 watch(() => props.catalog, () => {
@@ -46,8 +42,10 @@ watch(() => props.catalog, () => {
 function loadImageOverlay() {
   // Create leaflet map (here referred to as image)
   imageMap = L.map(leafletDiv.value, {
-    center: [0, 0],
-    maxZoom: 6,
+    maxZoom: 5,
+    minZoom: -3,
+    zoomSnap: 0,
+    zoomDelta: 0.5,
     crs: L.CRS.Simple,
     attributionControl: false,
     maxBoundsViscosity: 1.0,
@@ -65,23 +63,23 @@ function loadImageOverlay() {
 
     // Getting image bounds based on img's size
     imageBounds = [[0, 0], [imageHeight.value, imageWidth.value]]
-    if (imageOverlay) {
-      imageMap.removeLayer(imageOverlay)
-    }
 
     // Add new overlay with correct bounds
-    imageOverlay = L.imageOverlay(props.imageSrc, imageBounds).addTo(imageMap)
-    // Fit image view to the bounds of the image
-    imageMap.fitBounds(imageBounds)
-    imageMap.setMaxBounds(imageBounds)
-
-    // waits for DOM to load then recalculates image's size and position after the container's dimensions have changed (built in method of Leaflet)
+    L.imageOverlay(img, imageBounds).addTo(imageMap)
+
+    /**
+     * This code ensures the image fills the map space and sets a minZoom level.
+     * Next tick is used here otherwise the methods will not work due to bugs in leaflets code. 
+     * 
+     * MinZoom needs to be set to a high negative value in the settings to over-fit the whole image
+     * then we fit the image and update the minZoom to the fitted zoom level.
+     */
     nextTick(() => {
       imageMap.invalidateSize()
+      imageMap.fitBounds(imageBounds)
+      imageMap.setMaxBounds(imageBounds)
+      imageMap.setMinZoom(imageMap.getZoom())
     })
-
-    initialCenter = imageMap.getCenter()
-    initialZoom = imageMap.getZoom()
   }
 }
 
@@ -93,7 +91,7 @@ function leafletSetup(){
     title: 'Reset View',
     className: 'custom-reset-zoom-icon',
     onClick: () => {
-      imageMap.setView(initialCenter, initialZoom)
+      imageMap.fitBounds(imageBounds)
     },
     actions: [],
     toggle: false,
@@ -138,16 +136,6 @@ function leafletSetup(){
   })
 }
 
-// Recalculates image size and position after the container's dimensions have changed
-function resizeMap(){
-  const resizeObserver = new ResizeObserver(() => {
-    imageMap.invalidateSize()
-  })
-  if(leafletDiv.value){
-    resizeObserver.observe(leafletDiv.value)
-  }
-}
-
 // Adjusts the point to be within the bounds of the image
 function adjustToBounds(point) {
   const lat = Math.max(0, Math.min(imageBounds[1][0], point.lat))
@@ -270,6 +258,10 @@ function fetchCatalog(){
   color: var(--dark-blue);
   user-select: none;
 }
+.leaflet-container {
+  background-color: var(--metal);
+  border-radius: 0.25rem;
+}
 </style>
 <style scoped>
 </style>