Add opacity slider (#259)

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch } from 'vue'
-import useSettings, { GLOBAL_DATA_MAP_FIELD_START_ZOOM_LEVEL } from '../composables/useSettings'
+import useSettings from '../composables/useSettings'
 import useMap from '../composables/useMap'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
@@ -14,34 +13,6 @@ const { map } = useMap()
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
 
-const zoom = ref(0)
-const onZoomChange = () => {
-  zoom.value = map.value?.getView()?.getZoom() ?? 0
-}
-
-// Watch map and attach zoom listener when map becomes available
-watch(
-  map,
-  (newMap, oldMap) => {
-    // Clean up previous listener
-    if (oldMap) {
-      oldMap.getView()?.un('change:resolution', onZoomChange)
-    }
-
-    // Attach new listener if map is available
-    if (newMap) {
-      onZoomChange()
-      newMap.getView().on('change:resolution', onZoomChange)
-    }
-  },
-  { immediate: true },
-)
-
-onUnmounted(() => {
-  map.value?.getView()?.un('change:resolution', onZoomChange)
-})
-const fieldBoundariesDisabled = computed(() => zoom.value < GLOBAL_DATA_MAP_FIELD_START_ZOOM_LEVEL)
-
 const handleLocationSelected = (place: PlaceResult) => {
   if (!map.value) return
   if (!place.boundingbox) {
@@ -81,14 +52,16 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
-        <v-checkbox
-          v-model="settings.showFieldBoundaries"
-          label="Show field boundaries"
-          density="compact"
-          hide-details
+        <h3 class="group">Opacity: {{ settings.fieldBoundariesOpacity }}%</h3>
+        <v-slider
+          v-model.number="settings.fieldBoundariesOpacity"
+          :min="0"
+          :max="100"
+          :step="1"
           color="teal"
-          class="mt-2"
-          :disabled="fieldBoundariesDisabled"
+          track-color="grey-darken-2"
+          thumb-color="teal"
+          hide-details
         />
         <h3 class="group legend">Legend</h3>
         <MapLegend />

src/composables/useMap.ts

@@ -93,16 +93,20 @@ watch(
       }
 
       globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
-      globalPredictionsController.value.layer.setVisible(settings.value.showFieldBoundaries)
+      globalPredictionsController.value.layer.setOpacity(
+        settings.value.fieldBoundariesOpacity / 100,
+      )
       map.value.addLayer(globalPredictionsController.value.layer)
     }
   },
 )
 
 watch(
-  () => settings.value.showFieldBoundaries,
-  (visible) => {
-    globalPredictionsController.value?.layer.setVisible(visible)
+  () => settings.value.fieldBoundariesOpacity,
+  (opacity) => {
+    const olOpacity = opacity / 100
+    globalPredictionsController.value?.layer.setOpacity(olOpacity)
+    globalOverviewLayer.value?.setOpacity(olOpacity)
   },
 )
 
@@ -157,11 +161,14 @@ const updateLayers = () => {
     if (!globalPredictionsController.value) {
       // Only handle first initialization here, year changes are handled by a watcher on year above
       globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
-      globalPredictionsController.value.layer.setVisible(settings.value.showFieldBoundaries)
+      globalPredictionsController.value.layer.setOpacity(
+        settings.value.fieldBoundariesOpacity / 100,
+      )
       map.value.addLayer(globalPredictionsController.value.layer)
     }
     if (!globalOverviewLayer.value) {
       globalOverviewLayer.value = createGlobalOverviewLayer(settings.value)
+      globalOverviewLayer.value.setOpacity(settings.value.fieldBoundariesOpacity / 100)
       map.value.addLayer(globalOverviewLayer.value)
     }
   } else {

src/composables/usePermalink.ts

@@ -30,7 +30,7 @@ export interface PermalinkStateInference extends PermalinkState {
 
 export interface PermalinkStateGlobal extends PermalinkState {
   threshold: number
-  showFieldBoundaries: boolean
+  fieldBoundariesOpacity: number
 }
 
 export default function usePermalink() {
@@ -59,7 +59,7 @@ export default function usePermalink() {
     center: [0, 0],
     year: 2025,
     threshold: 0.4,
-    showFieldBoundaries: true,
+    fieldBoundariesOpacity: 90,
   }
 
   const getDefaultState = (mode: string): PermalinkStateInference | PermalinkStateGlobal => {
@@ -175,7 +175,7 @@ export default function usePermalink() {
             zoom,
             center,
             threshold: defaultGlobalState.threshold,
-            showFieldBoundaries: defaultGlobalState.showFieldBoundaries,
+            fieldBoundariesOpacity: defaultGlobalState.fieldBoundariesOpacity,
           }
 
           for (const part of keyValueParts) {
@@ -185,8 +185,9 @@ export default function usePermalink() {
             } else if (part.startsWith('year:')) {
               const year = parseInt(part.substring(5), 10)
               if (!isNaN(year)) result.year = year
-            } else if (part.startsWith('field_boundaries:')) {
-              result.showFieldBoundaries = part.substring(17) === '1'
+            } else if (part.startsWith('opacity:')) {
+              const opacity = parseInt(part.substring(8), 10)
+              result.fieldBoundariesOpacity = isNaN(opacity) ? 90 : opacity
             }
           }
 
@@ -289,15 +290,15 @@ export default function usePermalink() {
       if (settings.value.year) {
         hashParts.push(`year:${settings.value.year}`)
       }
-      hashParts.push(`field_boundaries:${settings.value.showFieldBoundaries ? 1 : 0}`)
+      hashParts.push(`opacity:${settings.value.fieldBoundariesOpacity}`)
 
       state = {
         mode,
         zoom,
         center,
         threshold: settings.value.threshold,
         year: settings.value.year,
-        showFieldBoundaries: settings.value.showFieldBoundaries,
+        fieldBoundariesOpacity: settings.value.fieldBoundariesOpacity,
       }
     }
 
@@ -334,7 +335,7 @@ export default function usePermalink() {
 
   function restoreGlobalState(state: PermalinkStateGlobal) {
     settings.value.threshold = state.threshold
-    settings.value.showFieldBoundaries = state.showFieldBoundaries
+    settings.value.fieldBoundariesOpacity = state.fieldBoundariesOpacity
     if (state.year) {
       settings.value.year = state.year
     }
@@ -366,7 +367,7 @@ export default function usePermalink() {
         settings.value.areaCoverage,
         settings.value.buffer,
         settings.value.threshold,
-        settings.value.showFieldBoundaries,
+        settings.value.fieldBoundariesOpacity,
       ],
       () => {
         if (!map.value) {

src/composables/useSettings.ts

@@ -12,7 +12,7 @@ export interface Settings {
   expertMode: boolean
   mode: string
   threshold: number
-  showFieldBoundaries: boolean
+  fieldBoundariesOpacity: number
 }
 
 export interface ModelInfo {
@@ -58,7 +58,7 @@ const defaultSettings: Settings = {
   expertMode: false,
   mode: defaultMode,
   threshold: 0.4,
-  showFieldBoundaries: true,
+  fieldBoundariesOpacity: 90,
 }
 
 const defaultModel = computed(() => {

src/workers/predictions-worker.ts

@@ -37,7 +37,7 @@ layer.setStyle((feature, resolution) => {
   const widthPx = (extent[2] - extent[0]) / resolution
   const heightPx = (extent[3] - extent[1]) / resolution
   if (widthPx < 3 && heightPx < 3) return smallStyle
-  fill.setColor(getColorForValue(confidenceColorScale, confidence, 0.3))
+  fill.setColor(getColorForValue(confidenceColorScale, confidence, 0.35))
   return polyStyle
 })