Fix duplicated static/animated layer state

src/components/wms/InformationPanel.vue

@@ -109,7 +109,7 @@
           <template v-slot:append>
             <v-switch
               density="compact"
-              v-model="animate"
+              v-model="doAnimateStreamlines"
               hide-details
             ></v-switch>
           </template>
@@ -118,11 +118,11 @@
     </v-menu>
     <v-btn
       v-if="showLayer && canUseStreamlines"
-      @click="switchLayerType"
+      @click="toggleLayerType"
       icon
       density="compact"
       variant="plain"
-      :color="animate ? 'primary' : undefined"
+      :color="doAnimateStreamlines ? 'primary' : undefined"
     >
       <v-progress-circular v-if="isLoading" size="20" indeterminate />
       <v-icon v-else>mdi-animation-play</v-icon>
@@ -158,9 +158,18 @@ const props = withDefaults(defineProps<Props>(), {
   layerTitle: '',
   completelyMissing: false,
 })
+const showLayer = defineModel<boolean>('showLayer')
+const layerKind = defineModel<LayerKind>('layerKind')
 
 const emit = defineEmits(['update:layerKind', 'update:current-colour-scale'])
 
+const doAnimateStreamlines = computed<boolean>({
+  get: () => layerKind.value === LayerKind.Streamline,
+  set: (doAnimate) => {
+    layerKind.value = doAnimate ? LayerKind.Streamline : LayerKind.Static
+  },
+})
+
 const currentColourScaleIndex = ref(0)
 watch(
   () => props.currentColourScaleIds,
@@ -207,9 +216,6 @@ const changeCurrentColourScaleRange = () => {
   currentScale.value.range = mutableColorScaleRange.value
 }
 
-const showLayer = defineModel<boolean>('showLayer')
-const animate = defineModel<boolean>('animate', { default: false })
-
 const rules = {
   required: (v: number) =>
     (v !== null && v !== undefined && String(v) !== '') || 'Field is required',
@@ -244,17 +250,9 @@ const formattedTimeRange = computed(() => {
   )} → ${DateTime.fromJSDate(props.lastValueTime).toFormat(format)}`
 })
 
-const switchLayerType = () => {
-  animate.value = !animate.value
+function toggleLayerType(): void {
+  doAnimateStreamlines.value = !doAnimateStreamlines.value
 }
-
-watch(
-  () => animate.value,
-  () => {
-    const value = animate.value ? LayerKind.Streamline : LayerKind.Static
-    emit('update:layerKind', value)
-  },
-)
 </script>
 
 <style scoped>