css changes, replace scaling method with drawImage scaling

src/components/Global/Scaling/CompositeImage.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, defineProps, computed, watch, onMounted } from 'vue'
 import { useScalingStore } from '@/stores/scaling'
-import { scaleImageData } from '@/utils/common'
 
 // This component draws a composite RGB image from the scaling store
 
@@ -21,9 +20,7 @@ const props = defineProps({
 })
 
 const store = useScalingStore()
-// This isn't currently used by can be used to trigger showing a spinning circular
-// loading icon over the image if we add a debounce to the redraw in the future
-const isLoading = ref(false)
+const isLoading = ref(false) // not being used yet
 const imageCanvas = ref(null)
 var context = null
 
@@ -34,8 +31,11 @@ const ableToDraw = computed(() => {
 function redrawImage() {
   if (ableToDraw.value) {
     const compositeImage = store.scaledImageArrays[props.imageName].combined
-    const scaledCompositeImage = scaleImageData(compositeImage, props.width, props.height)
-    context.putImageData(scaledCompositeImage, 0, 0)
+    // convert to ImageBitMap to use drawImage
+    createImageBitmap(compositeImage).then((compositeImageBitMap) => {
+      // scale image to fit canvas
+      context.drawImage(compositeImageBitMap, 0, 0, compositeImageBitMap.width, compositeImageBitMap.height, 0, 0, props.width, props.height)
+    })
   }
 }
 
@@ -54,30 +54,22 @@ watch(
 
 </script>
 <template>
-  <div
-    :id="'image-container-' + imageName"
-    class="image-container"
-    :style="'max-width: ' + props.width"
-  >
-    <canvas
-      ref="imageCanvas"
-      :width="props.width"
-      :height="props.height"
-    />
-    <v-progress-circular
-      v-show="isLoading"
-      color="primary"
-      size="200"
-      indeterminate
-    />
-  </div>
+  <canvas
+    ref="imageCanvas"
+    :width="props.width"
+    :height="props.height"
+  />
+  <v-progress-circular
+    v-show="isLoading"
+    color="primary"
+    size="200"
+    indeterminate
+  />
 </template>
 <style scoped>
-
 .v-progress-circular {
   position:fixed;
   bottom: 40%;
   left: 60%;
 }
-
 </style>

src/components/Global/Scaling/HistogramSlider.vue

@@ -182,7 +182,7 @@ watch(
       </v-btn>
     </v-col>
   </v-row>
-  <v-row class="histogram-range-slider">
+  <div class="histogram-range-slider">
     <v-sparkline
       :smooth="true"
       :fill="true"
@@ -210,13 +210,13 @@ watch(
         {{ labelSliderToScaleValue(modelValue) }}
       </template>
     </v-range-slider>
-  </v-row>
+  </div>
 </template>
 <style scoped>
 .histogram-range-slider {
+  position: relative;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-  position: relative;
 }
 
 .v-range-slider {

src/components/Global/Scaling/ImageScaler.vue

@@ -132,8 +132,7 @@ onMounted(async () => {
   background-color: var(--metal);
 }
 .image-scale-title {
-  width: 100%;
-  padding-bottom: 1rem;
+  margin-bottom: 0.5rem;
   text-align: center;
   color: var(--tan);
   font-weight: bold;

src/components/Global/Scaling/ImageScalingGroup.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   }
 })
 
-const compositeImageMaxWidth = window.innerWidth * 0.45
+const compositeImageMaxWidth = window.innerWidth * 0.4
 
 const emit = defineEmits(['updateScaling'])
 
@@ -50,7 +50,7 @@ const scaleGroupings = computed(() => {
         :image-name="groupName"
       />
     </div>
-    <v-col class="scale-controls-col ma-0 pa-0">
+    <div class="scale-controls">
       <image-scaler
         v-for="(groupInput, groupInputName ) in groupInputs"
         :key="groupName + '-' + groupInputName"
@@ -59,23 +59,30 @@ const scaleGroupings = computed(() => {
         :composite-name="groupName"
         @update-scaling="(imageName, zmin, zmax) => emit('updateScaling', imageName, zmin, zmax)"
       />
-    </v-col>
+    </div>
   </div>
 </template>
 <style scoped>
 .image-scaling-group{
   height: 80vh;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
 }
 .composite-image-container{
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.scale-controls-col {
-  max-width: 50%;
-  min-width: 590px;
+.scale-controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  min-width: 532px;
+}
+.image-scaler{
+  width: 100%;
 }
 </style>

src/components/Global/Scaling/RawScaledImage.vue

@@ -78,17 +78,15 @@ watch(
 
 </script>
 <template>
-  <div :id="'image-container-' + imageName">
-    <canvas
-      ref="imageCanvas"
-      class="raw-scaled-canvas"
-      :width="props.maxSize"
-      :height="props.maxSize"
-    />
-  </div>
+  <canvas
+    ref="imageCanvas"
+    class="raw-scaled-canvas"
+    :width="props.maxSize"
+    :height="props.maxSize"
+  />
 </template>
 <style scoped>
-.raw-scaled-canvas {
+.raw-scaled-canvas{
   width: 200px;
   height: 200px;
 }

src/utils/common.js

@@ -67,40 +67,4 @@ function initializeDate(dateString = 'none', defaultOffsetDays = 0) {
   return isNaN(date.getTime()) ? new Date(Date.now() + defaultOffsetDays * 24 * 3600 * 1000) : date
 }
 
-function scaleImageData(imageData, targetWidth, targetHeight) {
-  // Create a temporary canvas to draw the original ImageData
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = imageData.width
-  tempCanvas.height = imageData.height
-  const tempContext = tempCanvas.getContext('2d')
-  tempContext.putImageData(imageData, 0, 0)
-
-  // Create another canvas for the scaled version
-  const outputCanvas = document.createElement('canvas')
-  outputCanvas.width = targetWidth
-  outputCanvas.height = targetHeight
-  const outputContext = outputCanvas.getContext('2d')
-
-  // Calculate scaling to maintain aspect ratio
-  const scale = Math.min(
-    targetWidth / imageData.width,
-    targetHeight / imageData.height
-  )
-
-  // Calculate centered position
-  const scaledWidth = imageData.width * scale
-  const scaledHeight = imageData.height * scale
-  const x = (targetWidth - scaledWidth) / 2
-  const y = (targetHeight - scaledHeight) / 2
-
-  // Draw the scaled image centered on the output canvas
-  outputContext.drawImage(
-    tempCanvas,
-    0, 0, imageData.width, imageData.height,  // source rectangle
-    x, y, scaledWidth, scaledHeight           // destination rectangle
-  )
-
-  return outputContext.getImageData(0, 0, targetWidth, targetHeight)
-}
-
-export { calculateColumnSpan, siteIDToName, initializeDate, convertFilter, filterToPixelIndex, scaleImageData, filterToColor }
+export { calculateColumnSpan, siteIDToName, initializeDate, convertFilter, filterToPixelIndex, filterToColor }