From 6132504ce06947d56500a2e66c1e827f0ef8b7a9 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Mon, 9 Dec 2024 15:25:43 -0800
Subject: [PATCH 1/5] comment changes, one-lined layer control creation

---
 src/components/Project/ImageAnalysis/ImageViewer.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index d64493d..b46fee5 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -26,7 +26,6 @@ let imageBounds
 let initialCenter = [0, 0]
 let initialZoom = 1
 let lineLayer = null
-let layerControl = null
 const imageWidth = ref(0)
 const imageHeight = ref(0)
 const isLoading = ref(true)
@@ -101,7 +100,7 @@ function leafletSetup(){
     toggle: false,
   })
 
-  // Disabling default controls
+  // Geoman settings setup
   imageMap.pm.addControls({
     position: 'topleft',
     drawMarker: false,
@@ -117,6 +116,7 @@ function leafletSetup(){
     removalMode: true
   })
 
+  // Logic to only allow the user to draw one line with two points
   imageMap.on('pm:drawstart', ({ workingLayer }) => {
     // Remove last drawn line when starting new one
     if (lineLayer && imageMap.hasLayer(lineLayer)) {
@@ -130,7 +130,7 @@ function leafletSetup(){
     })
   })
 
-  // Get coordinates of the line
+  // Requests a Line Profile when a line is drawn/edited
   imageMap.on('pm:create', (e) => {
     // Save last drawn line
     lineLayer = e.layer
@@ -214,9 +214,7 @@ function createCatalogLayer(){
   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')
+  L.control.layers(null, { 'Source Catalog': catalogLayerGroup }, { collapsed: false }).addTo(imageMap)
 }
 
 function fetchCatalog(){

From 4ec04168751e7768ac34edc2d0bcea4bc2570e17 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Wed, 11 Dec 2024 15:11:25 -0800
Subject: [PATCH 2/5] nonlinearslider.vue, added slider to analyzer,
 imageviewer clears control group

---
 src/components/Global/NonLinearSlider.vue     | 89 +++++++++++++++++++
 .../Global/Scaling/HistogramSlider.vue        | 27 +++---
 .../Project/ImageAnalysis/ImageAnalyzer.vue   | 34 ++++---
 .../Project/ImageAnalysis/ImageViewer.vue     | 52 +++++------
 4 files changed, 147 insertions(+), 55 deletions(-)
 create mode 100644 src/components/Global/NonLinearSlider.vue

diff --git a/src/components/Global/NonLinearSlider.vue b/src/components/Global/NonLinearSlider.vue
new file mode 100644
index 0000000..1fb00a4
--- /dev/null
+++ b/src/components/Global/NonLinearSlider.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+/**
+ * Non Linear modification of the Vuetify range slider
+ * Props:
+ * - min: Minimum value of the range
+ * - max: Maximum value of the range
+ * - stepCount: Number of steps to use in the range slider, default is 200, higher values will result in a smoother slider
+ * - scaling: The scaling function to use, default is log10
+ * Emits:
+ * - updateRange: This is emitted when the range slider is moved, returns a tuple of the range values
+ */
+
+const props = defineProps({
+  min: {
+    type: Number,
+    default: 0,
+    required: true
+  },
+  max: {
+    type: Number,
+    required: true
+  },
+  stepCount: {
+    type: Number,
+    default: 200,
+    required: false,
+  },
+  scaling: {
+    type: Function,
+    default: (index, stepCount, max) => Math.floor(Math.pow(10, index * Math.log10(max) / stepCount)),
+    required: false,
+  }
+})
+
+const emit = defineEmits(['updateRange'])
+
+const customScale = ref([])
+const scaledRange = ref([])
+const sliderRange = ref([])
+
+function updateRange() {
+  // We are essentially mapping the range slider values to the custom scale
+  // so if the slider is at 0 and 3, we use the custom scale values at those indices
+  const [start, end] = sliderRange.value
+  scaledRange.value = [customScale.value[start], customScale.value[end]]
+  emit('updateRange', scaledRange.value)
+}
+
+function calcCustomScale(){
+
+  customScale.value = Array.from({length: props.stepCount}, (_, i) => props.scaling(i, props.stepCount, props.max))
+
+  // Calculation could result in last value being less than max, so we add the max value to the scale
+  if (customScale.value.at(-1) < props.max) {
+    customScale.value.push(props.max)
+  }
+
+  // Clips the custom scale to the min value
+  customScale.value.splice(0, customScale.value.findIndex((value) => value >= props.min)-1)
+}
+
+watch(() => [props.max, props.min], () => {
+
+  calcCustomScale()
+
+  // Set the initial range selection on the slider to the ends
+  scaledRange.value = [customScale.value[0], customScale.value[customScale.value.length-1]]
+  sliderRange.value = [0, customScale.value.length-1]
+
+  updateRange()
+},{ deep: true, immediate: true })
+
+</script>
+<template>
+  <v-range-slider
+    v-model="sliderRange"
+    step="1"
+    :max="customScale.length-1"
+    color="var(--light-blue)"
+    thumb-color="var(--dark-green)"
+    strict
+    hide-details
+    @update:model-value="updateRange"
+  />
+</template>
+<style scoped>
+</style>
diff --git a/src/components/Global/Scaling/HistogramSlider.vue b/src/components/Global/Scaling/HistogramSlider.vue
index 41d2323..4b1fb31 100644
--- a/src/components/Global/Scaling/HistogramSlider.vue
+++ b/src/components/Global/Scaling/HistogramSlider.vue
@@ -152,8 +152,8 @@ watch(
         variant="outlined"
         step="10"
         hide-details
-        @update:modelValue="updateLowerScale">
-      </v-text-field>
+        @update:model-value="updateLowerScale"
+      />
     </v-col>
     <v-col cols="4">
       <v-text-field
@@ -165,33 +165,34 @@ watch(
         variant="outlined"
         step="10"
         hide-details
-        @update:modelValue="updateUpperScale">
-      </v-text-field>
+        @update:model-value="updateUpperScale"
+      />
     </v-col>
     <v-col cols="4">
       <v-btn
         class="ml-2"
         variant="outlined"
         @click="zScaleImage"
-      >Z-Scale</v-btn>
+      >
+        Z-Scale
+      </v-btn>
     </v-col>
   </v-row>
   <v-row class="ma-0">
     <v-sheet class="stackSheet">
       <v-sparkline
-        smooth=true
-        fill=true
+        :smooth="true"
+        :fill="true"
         line-width="0.1"
         height="50"
         :gradient="gradient"
-        gradient-direction='left'
+        gradient-direction="left"
         :model-value="props.histogram"
         auto-draw
-      >
-      </v-sparkline>
+      />
       <v-range-slider
-        class="stackControls"
         v-model="sliderRange"
+        class="stackControls"
         step="1"
         track-size="0"
         :track-color="backgroundColor"
@@ -202,9 +203,9 @@ watch(
         thumb-label="always"
         strict
         hide-details
-        @update:modelValue="updateScaleRange"
+        @update:model-value="updateScaleRange"
       >
-        <template v-slot:thumb-label="{ modelValue }">
+        <template #thumb-label="{ modelValue }">
           {{ labelSliderToScaleValue(modelValue) }}
         </template>
       </v-range-slider>
diff --git a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
index 76ec27e..3348269 100644
--- a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
+++ b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { fetchApiCall } from '../../../utils/api'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useAlertsStore } from '@/stores/alerts'
 import ImageViewer from './ImageViewer.vue'
 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 { siteIDToName } from '@/utils/common'
 
@@ -32,9 +33,15 @@ const catalog = ref([])
 const positionAngle = ref()
 const headerDialog = ref(false)
 const headerData = ref({})
+const fluxSliderRange = ref([0, 10000])
+
+const filteredCatalog = computed(() => {
+  return catalog.value.filter((source) => source.flux >= fluxSliderRange.value[0] && source.flux <= fluxSliderRange.value[1])
+})
 
 function closeDialog() {
   lineProfile.value = []
+  catalog.value = []
   lineProfileLength.value = 0
   startCoords.value = null
   endCoords.value = null
@@ -131,19 +138,22 @@ function showHeaderDialog() {
       <div class="analysis-content">
         <image-viewer
           :image-src="image.largeCachedUrl"
-          :catalog="catalog"
+          :catalog="filteredCatalog"
           @analysis-action="requestAnalysis"
         />
         <div class="side-panel-container">
           <v-sheet
-            v-if="image.site_id || image.telescope_id || image.instrument_id || image.observation_date"
+            v-if="catalog.length"
             rounded
-            class="basic-info-sheet"
+            class="image-controls-sheet"
           >
-            <p><v-icon icon="mdi-earth" /> {{ siteIDToName(image.site_id) ?? 'Missing Site' }}</p>
-            <p><v-icon icon="mdi-telescope" /> {{ image.telescope_id ?? 'Missing Telescope ID' }}</p>
-            <p><v-icon icon="mdi-camera" /> {{ image.instrument_id ?? 'Missing Instrument ID' }} </p>
-            <p><v-icon icon="mdi-clock" /> {{ new Date(image.observation_date).toLocaleString() }}</p>
+            <b>{{ filteredCatalog.length }} Sources with Flux between {{ fluxSliderRange[0] }} and {{ fluxSliderRange[1] }}</b>
+            <non-linear-slider
+              prepend-icon="mdi-flare"
+              :max="Math.max(...catalog.map((source) => source.flux))"
+              :min="Math.min(...catalog.map((source) => source.flux))"
+              @update-range="(range) => {fluxSliderRange = range}"
+            />
           </v-sheet>
           <v-sheet
             class="line-plot-sheet"
@@ -166,7 +176,11 @@ function showHeaderDialog() {
     width="auto"
   >
     <v-sheet class="pa-12">
-      <h1 class="mb-8">
+      <p><v-icon icon="mdi-earth" /> {{ siteIDToName(image.site_id) ?? 'Missing Site' }}</p>
+      <p><v-icon icon="mdi-telescope" /> {{ image.telescope_id ?? 'Missing Telescope ID' }}</p>
+      <p><v-icon icon="mdi-camera" /> {{ image.instrument_id ?? 'Missing Instrument ID' }} </p>
+      <p><v-icon icon="mdi-clock" /> {{ new Date(image.observation_date).toLocaleString() }}</p>
+      <h1 class="mb-4 mt-4">
         FITS Headers
       </h1>
       <v-table>
@@ -215,7 +229,7 @@ a{
   margin-left: 10px;
   width: 45vw;
 }
-.basic-info-sheet{
+.image-controls-sheet{
   padding: 1rem;
   margin-bottom: 1rem;
   color: var(--tan);
diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index b46fee5..bc64015 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -26,10 +26,11 @@ let imageBounds
 let initialCenter = [0, 0]
 let initialZoom = 1
 let lineLayer = null
+let catalogLayerGroup = null
+let catalogLayerControl = null
 const imageWidth = ref(0)
 const imageHeight = ref(0)
-const isLoading = ref(true)
-const imageContainer = ref(null)
+const leafletDiv = ref(null)
 const alerts = useAlertsStore()
 
 onMounted(() => {
@@ -45,7 +46,7 @@ watch(() => props.catalog, () => {
 // loads image overlay and set bounds
 function loadImageOverlay() {
   // Create leaflet map (here referred to as image)
-  imageMap = L.map(imageContainer.value, {
+  imageMap = L.map(leafletDiv.value, {
     center: [0, 0],
     maxZoom: 6,
     crs: L.CRS.Simple,
@@ -82,7 +83,6 @@ function loadImageOverlay() {
 
     initialCenter = imageMap.getCenter()
     initialZoom = imageMap.getZoom()
-    isLoading.value = false
   }
 }
 
@@ -144,8 +144,8 @@ function resizeMap(){
   const resizeObserver = new ResizeObserver(() => {
     imageMap.invalidateSize()
   })
-  if(imageContainer.value){
-    resizeObserver.observe(imageContainer.value)
+  if(leafletDiv.value){
+    resizeObserver.observe(leafletDiv.value)
   }
 }
 
@@ -186,35 +186,31 @@ function requestLineProfile(latLngs) {
 
 // When we get the catalog data this creates a layer of circles on the map
 function createCatalogLayer(){
-  if (!props.catalog){
-    alerts.setAlert('info', 'No source catalog data for this image')
-    return
-  }
-
-  let sourceCatalogMarkers = []
-
-  props.catalog.forEach((source) => {
-    let sourceMarker = L.circle([source.y, source.x], {
+  // Function to create a marker for a source
+  function createSourceMarker(source){
+    return new L.Circle([source.y, source.x], {
       color: 'var(--tangerine)',
       fillColor: 'var(--tangerine)',
       fillOpacity: 0.2,
       radius: 10,
       pmIgnore: true, // Ignore this layer for editing
       snapIgnore: false, // Allow snapping to this layer
-    })
+    }).bindPopup(`Flux: ${source.flux ?? 'N/A'}<br>Ra: ${source.ra ?? 'N/A'}<br>Dec: ${source.dec ?? 'N/A'}`)
+  }
 
-    sourceMarker.bindPopup(`Flux: ${source.flux ?? 'N/A'}<br>Ra: ${source.ra ?? 'N/A'}<br>Dec: ${source.dec ?? 'N/A'}`)
-    sourceCatalogMarkers.push(sourceMarker)
-  })
+  const sourceCatalogMarkers = props.catalog.map(createSourceMarker)
 
-  // Associate all source markers with a single layer group
-  let catalogLayerGroup = L.layerGroup(sourceCatalogMarkers)
+  // Remove the previous catalog layer group/control if it exists
+  if (catalogLayerGroup || catalogLayerControl) {
+    imageMap.removeLayer(catalogLayerGroup)
+    imageMap.removeControl(catalogLayerControl)
+  }
 
-  // Displays the catalog layer by default
+  catalogLayerGroup = new L.LayerGroup(sourceCatalogMarkers)
   catalogLayerGroup.addTo(imageMap)
 
   // Layer control allows the toggling of layers on the map
-  L.control.layers(null, { 'Source Catalog': catalogLayerGroup }, { collapsed: false }).addTo(imageMap)
+  catalogLayerControl = new L.Control.Layers(null, { 'Source Catalog': catalogLayerGroup }, { collapsed: false }).addTo(imageMap)
 }
 
 function fetchCatalog(){
@@ -227,16 +223,8 @@ function fetchCatalog(){
 
 </script>
 <template>
-  <template v-if="isLoading">
-    <v-progress-circular
-      indeterminate
-      model-value="20"
-      :size="50"
-      :width="9"
-    />
-  </template>
   <div
-    ref="imageContainer"
+    ref="leafletDiv"
     :style="{ width: imageWidth + 'px' }"
   />
 </template>

From bd31cc7da748594ea4dc044d9c8a31a084034192 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Wed, 11 Dec 2024 15:17:17 -0800
Subject: [PATCH 3/5] replace emit and ref with a v-model

---
 src/components/Global/NonLinearSlider.vue              | 4 +---
 src/components/Project/ImageAnalysis/ImageAnalyzer.vue | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Global/NonLinearSlider.vue b/src/components/Global/NonLinearSlider.vue
index 1fb00a4..940601b 100644
--- a/src/components/Global/NonLinearSlider.vue
+++ b/src/components/Global/NonLinearSlider.vue
@@ -34,10 +34,9 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['updateRange'])
+const scaledRange = defineModel({ type: Array })
 
 const customScale = ref([])
-const scaledRange = ref([])
 const sliderRange = ref([])
 
 function updateRange() {
@@ -45,7 +44,6 @@ function updateRange() {
   // so if the slider is at 0 and 3, we use the custom scale values at those indices
   const [start, end] = sliderRange.value
   scaledRange.value = [customScale.value[start], customScale.value[end]]
-  emit('updateRange', scaledRange.value)
 }
 
 function calcCustomScale(){
diff --git a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
index 3348269..d833218 100644
--- a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
+++ b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
@@ -149,10 +149,10 @@ function showHeaderDialog() {
           >
             <b>{{ filteredCatalog.length }} Sources with Flux between {{ fluxSliderRange[0] }} and {{ fluxSliderRange[1] }}</b>
             <non-linear-slider
+              v-model="fluxSliderRange"
               prepend-icon="mdi-flare"
               :max="Math.max(...catalog.map((source) => source.flux))"
               :min="Math.min(...catalog.map((source) => source.flux))"
-              @update-range="(range) => {fluxSliderRange = range}"
             />
           </v-sheet>
           <v-sheet

From baab8eb78c4e2e65c46da9d99c4d18549eca5d87 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Wed, 11 Dec 2024 15:42:30 -0800
Subject: [PATCH 4/5] comment fixes, remove unnecessary deep watch

---
 src/components/Global/NonLinearSlider.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Global/NonLinearSlider.vue b/src/components/Global/NonLinearSlider.vue
index 940601b..3bd1cd9 100644
--- a/src/components/Global/NonLinearSlider.vue
+++ b/src/components/Global/NonLinearSlider.vue
@@ -8,8 +8,6 @@ import { ref, watch } from 'vue'
  * - max: Maximum value of the range
  * - stepCount: Number of steps to use in the range slider, default is 200, higher values will result in a smoother slider
  * - scaling: The scaling function to use, default is log10
- * Emits:
- * - updateRange: This is emitted when the range slider is moved, returns a tuple of the range values
  */
 
 const props = defineProps({
@@ -40,8 +38,7 @@ const customScale = ref([])
 const sliderRange = ref([])
 
 function updateRange() {
-  // We are essentially mapping the range slider values to the custom scale
-  // so if the slider is at 0 and 3, we use the custom scale values at those indices
+  // Mapping the range slider values to the custom scale
   const [start, end] = sliderRange.value
   scaledRange.value = [customScale.value[start], customScale.value[end]]
 }
@@ -68,7 +65,7 @@ watch(() => [props.max, props.min], () => {
   sliderRange.value = [0, customScale.value.length-1]
 
   updateRange()
-},{ deep: true, immediate: true })
+},{ immediate: true })
 
 </script>
 <template>

From 9369acf385ae8614beed99a1d9999cab688c6acc Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Wed, 11 Dec 2024 16:01:17 -0800
Subject: [PATCH 5/5] optimize DOM updates by removing redraw of control and
 using clearLayers()

---
 .../Project/ImageAnalysis/ImageViewer.vue      | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index bc64015..c26b794 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -200,17 +200,19 @@ function createCatalogLayer(){
 
   const sourceCatalogMarkers = props.catalog.map(createSourceMarker)
 
-  // Remove the previous catalog layer group/control if it exists
-  if (catalogLayerGroup || catalogLayerControl) {
-    imageMap.removeLayer(catalogLayerGroup)
-    imageMap.removeControl(catalogLayerControl)
+  // update or create the catalog layer group
+  if (catalogLayerGroup) {
+    catalogLayerGroup.clearLayers()
+    sourceCatalogMarkers.forEach((marker) => catalogLayerGroup.addLayer(marker))
+  } else {
+    catalogLayerGroup = new L.LayerGroup(sourceCatalogMarkers)
+    catalogLayerGroup.addTo(imageMap)
   }
 
-  catalogLayerGroup = new L.LayerGroup(sourceCatalogMarkers)
-  catalogLayerGroup.addTo(imageMap)
-
   // Layer control allows the toggling of layers on the map
-  catalogLayerControl = new L.Control.Layers(null, { 'Source Catalog': catalogLayerGroup }, { collapsed: false }).addTo(imageMap)
+  if(!catalogLayerControl){
+    catalogLayerControl = new L.Control.Layers(null, { 'Source Catalog': catalogLayerGroup }, { collapsed: false }).addTo(imageMap)
+  }
 }
 
 function fetchCatalog(){