Store user preference for layer type (static/animated)

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -226,6 +226,7 @@ const currentColourScale = ref<ColourScale>()
 const currentColourScaleIds = ref<string[]>([])
 
 const workflowsStore = useWorkflowsStore()
+const userSettingsStore = useUserSettingsStore()
 
 const showLocationsLayer = ref<boolean>(true)
 
@@ -295,11 +296,24 @@ const canUseStreamlines = computed(
   () => props.layerCapabilities?.animatedVectors !== undefined,
 )
 
-watch(canUseStreamlines, (canUse) => {
-  // If available, use animated streamlines by default, use static layer
-  // otherwise
-  layerKind.value = canUse ? LayerKind.Streamline : LayerKind.Static
-})
+// When the layer changes, select a default layer type (static or animated).
+watch(
+  () => props.layerCapabilities,
+  () => (layerKind.value = getDefaultLayerKind()),
+  { immediate: true },
+)
+function getDefaultLayerKind() {
+  // If we cannot use streamlines, always use static.
+  if (!canUseStreamlines.value) {
+    return LayerKind.Static
+  }
+  if (userSettingsStore.preferredLayerKind !== null) {
+    // If we have a preference, use that.
+    return userSettingsStore.preferredLayerKind
+  }
+  // Otherwise, use streamlines.
+  return LayerKind.Streamline
+}
 
 const offsetBottomControls = computed(() => {
   return props.times?.length ? '60px' : '0px'

src/components/wms/InformationPanel.vue

@@ -131,7 +131,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { DateTime } from 'luxon'
 import { ref } from 'vue'
 import { LayerKind } from '@/lib/streamlines'
@@ -141,6 +141,7 @@ import { useColourScalesStore, type Range } from '@/stores/colourScales'
 import ColourLegendTable from './ColourLegendTable.vue'
 import ControlChip from '@/components/wms/ControlChip.vue'
 import { useColourScales } from '@/services/useColourScales'
+import { useUserSettingsStore } from '@/stores/userSettings'
 
 interface Props {
   layerTitle?: string
@@ -154,12 +155,14 @@ interface Props {
   currentColourScaleIds: string[]
 }
 
+const userSettingsStore = useUserSettingsStore()
+
 const props = withDefaults(defineProps<Props>(), {
   layerTitle: '',
   completelyMissing: false,
 })
 const showLayer = defineModel<boolean>('showLayer')
-const layerKind = defineModel<LayerKind>('layerKind')
+const layerKind = defineModel<LayerKind>('layerKind', { required: true })
 
 const emit = defineEmits(['update:layerKind', 'update:current-colour-scale'])
 
@@ -252,6 +255,14 @@ const formattedTimeRange = computed(() => {
 
 function toggleLayerType(): void {
   doAnimateStreamlines.value = !doAnimateStreamlines.value
+
+  // If we are in this function, the user manually selected a layer kind, so
+  // store their preference. Wait for the layerkind to update based on the
+  // change in the doAnimateStreamlines boolean, then store the newly updated
+  // layerKind.
+  nextTick(() => {
+    userSettingsStore.preferredLayerKind = layerKind.value
+  })
 }
 </script>
 

src/stores/userSettings.ts

@@ -1,6 +1,7 @@
 // src/store/userSettings.ts
 import { defineStore } from 'pinia'
 import DefaultUserSettings from '@/assets/DefaultUserSettings.json'
+import { LayerKind } from '@/lib/streamlines'
 
 export const UserSettingsType = {
   oneOfMultiple: 'oneOfMultiple',
@@ -44,6 +45,7 @@ export interface UserSettingsState {
   groups: string[]
   convertDatum: boolean
   useDisplayUnits: boolean
+  preferredLayerKind: LayerKind | null
 }
 
 const defaultUserSettings = DefaultUserSettings as UserSettingsItem[]
@@ -56,6 +58,7 @@ export const useUserSettingsStore = defineStore({
     items: defaultUserSettings,
     convertDatum: false,
     useDisplayUnits: true,
+    preferredLayerKind: null,
   }),
   getters: {
     listGroups: (state) => {