From 689d1edd04c189967e810a1a5dc7fea9e23158bc Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 4 Oct 2024 10:19:33 +0200
Subject: [PATCH 1/7] Fix bug with lineStyle matches in FEWS style string

---
 src/lib/charts/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/charts/styles.ts b/src/lib/charts/styles.ts
index 8c0aaaa1d..1bfd9039b 100644
--- a/src/lib/charts/styles.ts
+++ b/src/lib/charts/styles.ts
@@ -49,7 +49,7 @@ export function cssStyleFromFewsLine(item: {
     /(?<lineStyle>none|solid|dashed|dashdot|dotted)(;(?<lineWidth>thick))?/
   if (item.lineStyle !== undefined) {
     const matches = item.lineStyle.match(re)
-    if (matches?.groups?.lineWidth !== undefined) {
+    if (matches?.groups?.lineStyle !== undefined) {
       style = {
         ...style,
         ...cssStyleFromFewsLineStyle(matches.groups.lineStyle),

From d3fc5fcbff6ca5f02ae554c882493475f5fc252e Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 4 Oct 2024 10:24:52 +0200
Subject: [PATCH 2/7] Remove needless undefined check

---
 src/views/TopologyDisplayView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 240add29a..fd3787c04 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/src/views/TopologyDisplayView.vue
@@ -311,8 +311,8 @@ watchEffect(() => {
   }
 
   // Create the displayTabs for the active node.
-  if (node === undefined) return
   displayTabs.value = displayTabsForNode(node, parentNodeIdNodeId)
+
   externalLink.value = node.url
 })
 

From d41879931ea898bc3dd98ec2d1f12b10a16dce63 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 8 Nov 2024 14:41:13 +0100
Subject: [PATCH 3/7] Reduce complexity of getAttributeValues

---
 .../download/DataDownloadDisplayComponent.vue | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/download/DataDownloadDisplayComponent.vue b/src/components/download/DataDownloadDisplayComponent.vue
index 3f5203e20..cddb62cc7 100644
--- a/src/components/download/DataDownloadDisplayComponent.vue
+++ b/src/components/download/DataDownloadDisplayComponent.vue
@@ -482,26 +482,25 @@ async function getLocations(): Promise<Location[]> {
 }
 
 function getAttributeValues(locations: Location[]): string[][] {
-  const attributeValuesMap: string[][] = []
-  const configuredAttributeIds =
-    props.topologyNode.dataDownloadDisplay?.attributes.map((item) => item.id)
-  configuredAttributeIds?.forEach((item) => attributeValuesMap.push([]))
-  if (configuredAttributeIds === undefined) return attributeValuesMap
-  for (const newLocation of locations) {
-    let attributes = newLocation.attributes
-    if (attributes == undefined) continue
-    for (let i = 0; i < attributes.length; i++) {
-      const attribute = attributes[i]
-      if (attribute.id === undefined) continue
-      if (attribute.value === undefined) continue
-      const arrayForAttribute =
-        attributeValuesMap[configuredAttributeIds.indexOf(attribute.id)]
-      if (!arrayForAttribute.includes(attribute.value)) {
-        arrayForAttribute.push(attribute.value)
+  const attributes = props.topologyNode.dataDownloadDisplay?.attributes
+  if (!attributes) return []
+
+  const attributeValuesMap: string[][] = attributes.map(() => [])
+
+  locations.forEach((location) => {
+    location.attributes?.forEach((attribute) => {
+      const index = attributes.findIndex((attr) => attr.id === attribute.id)
+      if (
+        index !== -1 &&
+        attribute.value &&
+        !attributeValuesMap[index].includes(attribute.value)
+      ) {
+        attributeValuesMap[index].push(attribute.value)
       }
-    }
-  }
-  attributeValuesMap.forEach((value, key) => value.sort())
+    })
+  })
+
+  attributeValuesMap.forEach((values) => values.sort())
   return attributeValuesMap
 }
 

From 544839fb88efc7c312941b9c5d083cdf3d492937 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 8 Nov 2024 14:46:10 +0100
Subject: [PATCH 4/7] Move loading methods to onMounted method

---
 .../download/DataDownloadDisplayComponent.vue | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/download/DataDownloadDisplayComponent.vue b/src/components/download/DataDownloadDisplayComponent.vue
index cddb62cc7..bfc7f702f 100644
--- a/src/components/download/DataDownloadDisplayComponent.vue
+++ b/src/components/download/DataDownloadDisplayComponent.vue
@@ -143,7 +143,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import {
   DocumentFormat,
   Location,
@@ -202,17 +202,40 @@ const parameterQualifiers = ref<ParameterQualifiersHeader[]>([])
 const selectedParameterQualifiers = ref<ParameterQualifiersHeader[]>([])
 const selectableAttributes = ref<string[][]>([])
 const onlyDownloadMetaData = ref(false)
+const errors = ref<string[]>([])
 
-getLocations().then((locationsResponse) => {
+const selectedAttributes = ref<string[][]>([])
+
+const startDate = ref<Date>(getStartDateValue())
+const endDate = ref<Date>(getEndDateValue())
+const DATE_FMT = 'yyyy-MM-dd HH:mm'
+const startDateString = ref<string>(
+  DateTime.fromJSDate(getStartDateValue()).toFormat(DATE_FMT),
+)
+const endDateString = ref<string>(
+  DateTime.fromJSDate(getEndDateValue()).toFormat(DATE_FMT),
+)
+
+const parameterQualifiersHeaders: ParameterQualifiersHeader[] = []
+
+const rules = {
+  required: (value: string) => (value !== undefined && !!value) || 'Required',
+  date: (value: string) => {
+    const date = DateTime.fromFormat(value || '', DATE_FMT)
+    return !isNaN(date.valueOf()) || 'Invalid date'
+  },
+}
+
+onMounted(async () => {
+  const locationsResponse = await getLocations()
   allLocations.value = locationsResponse
   locations.value = locationsResponse
-  selectedLocations.value = allLocations.value
-  selectableAttributes.value = getAttributeValues(allLocations.value)
-})
+  selectedLocations.value = locationsResponse
+  selectableAttributes.value = getAttributeValues(locationsResponse)
 
-allParameters.value = await getParameters()
-getTimeSeriesHeaders().then((headersResponse) => {
-  const parameterQualifiersHeaders: ParameterQualifiersHeader[] = []
+  allParameters.value = await getParameters()
+
+  const headersResponse = await getTimeSeriesHeaders()
   headersResponse?.forEach((timeSeriesResult) => {
     const parameterQualifiersHeader: ParameterQualifiersHeader = {
       parameterId: timeSeriesResult.header?.parameterId,
@@ -222,29 +245,11 @@ getTimeSeriesHeaders().then((headersResponse) => {
   })
   parameterQualifiers.value = uniqWith(parameterQualifiersHeaders, isEqual)
   selectedParameterQualifiers.value = parameterQualifiers.value
+  if (attributes) {
+    selectedAttributes.value = attributes.map(() => [])
+  }
 })
 
-let errors = ref<string[]>([])
-const startDate = ref<Date>(getStartDateValue())
-const endDate = ref<Date>(getEndDateValue())
-const selectedAttributes = ref<string[][]>([])
-const rules = {
-  required: (value: string) => (value !== undefined && !!value) || 'Required',
-  date: (value: string) => {
-    const date = DateTime.fromFormat(value || '', DATE_FMT)
-    return !isNaN(date.valueOf()) || 'Invalid date'
-  },
-}
-attributes?.forEach((item) => selectedAttributes.value.push([]))
-
-const DATE_FMT = 'yyyy-MM-dd HH:mm'
-const startDateString = ref<string>(
-  DateTime.fromJSDate(getStartDateValue()).toFormat(DATE_FMT),
-)
-const endDateString = ref<string>(
-  DateTime.fromJSDate(getEndDateValue()).toFormat(DATE_FMT),
-)
-
 watch(startDateString, (newValue) => {
   let newDateTime: DateTimeMaybeValid = DateTime.fromFormat(newValue, DATE_FMT)
   if (!newDateTime.isValid) {

From ae7bf741f6a9a454d62f7dbf7f6d2325902aa089 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 8 Nov 2024 15:01:59 +0100
Subject: [PATCH 5/7] Create load functions

---
 .../download/DataDownloadDisplayComponent.vue | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/download/DataDownloadDisplayComponent.vue b/src/components/download/DataDownloadDisplayComponent.vue
index bfc7f702f..cb24c175a 100644
--- a/src/components/download/DataDownloadDisplayComponent.vue
+++ b/src/components/download/DataDownloadDisplayComponent.vue
@@ -181,6 +181,7 @@ const options = computed<UseDisplayConfigOptions>(() => {
     convertDatum: settings.convertDatum,
   }
 })
+
 const downloadStartTime = ref<Date>()
 const downloadEndTime = ref<Date>()
 const timeSeriesFilter = ref<DataDownloadFilter>()
@@ -194,10 +195,13 @@ const filterId = props.topologyNode.filterIds
   ? props.topologyNode.filterIds[0]
   : undefined
 const attributes = props.topologyNode.dataDownloadDisplay?.attributes
+
 const allLocations = ref<Location[]>([])
-const allParameters = ref<TimeSeriesParameter[]>([])
 const locations = ref<Location[]>([])
 const selectedLocations = ref<Location[]>([])
+
+const allParameters = ref<TimeSeriesParameter[]>([])
+
 const parameterQualifiers = ref<ParameterQualifiersHeader[]>([])
 const selectedParameterQualifiers = ref<ParameterQualifiersHeader[]>([])
 const selectableAttributes = ref<string[][]>([])
@@ -227,14 +231,27 @@ const rules = {
 }
 
 onMounted(async () => {
+  loadLocations()
+  loadParameters()
+  loadTimeSeriesHeaders()
+  if (attributes) {
+    selectedAttributes.value = attributes.map(() => [])
+  }
+})
+
+async function loadLocations() {
   const locationsResponse = await getLocations()
   allLocations.value = locationsResponse
   locations.value = locationsResponse
   selectedLocations.value = locationsResponse
   selectableAttributes.value = getAttributeValues(locationsResponse)
+}
 
+async function loadParameters() {
   allParameters.value = await getParameters()
+}
 
+async function loadTimeSeriesHeaders() {
   const headersResponse = await getTimeSeriesHeaders()
   headersResponse?.forEach((timeSeriesResult) => {
     const parameterQualifiersHeader: ParameterQualifiersHeader = {
@@ -245,10 +262,7 @@ onMounted(async () => {
   })
   parameterQualifiers.value = uniqWith(parameterQualifiersHeaders, isEqual)
   selectedParameterQualifiers.value = parameterQualifiers.value
-  if (attributes) {
-    selectedAttributes.value = attributes.map(() => [])
-  }
-})
+}
 
 watch(startDateString, (newValue) => {
   let newDateTime: DateTimeMaybeValid = DateTime.fromFormat(newValue, DATE_FMT)

From af791aa309bb96f8cd0a112fd9b43aef7014da6d Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 13 Nov 2024 13:06:11 +0100
Subject: [PATCH 6/7] Use v-form for validation

---
 .../download/DataDownloadDisplayComponent.vue | 290 +++++++++---------
 1 file changed, 143 insertions(+), 147 deletions(-)

diff --git a/src/components/download/DataDownloadDisplayComponent.vue b/src/components/download/DataDownloadDisplayComponent.vue
index cb24c175a..bbf4bab68 100644
--- a/src/components/download/DataDownloadDisplayComponent.vue
+++ b/src/components/download/DataDownloadDisplayComponent.vue
@@ -1,117 +1,127 @@
 <template>
   <v-container>
     <v-card title="Make a selection to download data" flat>
-      <v-row align="start" class="ma-1">
-        <v-col v-for="(item, index) in attributes">
-          <v-autocomplete
-            v-model="selectedAttributes[index]"
-            :items="selectableAttributes[index]"
-            :label="item.name"
-            multiple
-            density="compact"
-            variant="outlined"
-            clearable
-            chips
-            closable-chips
-            prepend-icon="mdi-filter"
-            @update:modelValue="updateLocations"
-          />
-        </v-col>
-      </v-row>
-      <v-row align="start" class="ma-1">
-        <v-col>
-          <v-autocomplete
-            v-model="selectedParameterQualifiers"
-            :items="parameterQualifiers"
-            :item-title="(item) => getParameterQualifierName(item)"
-            label="Parameters"
-            multiple
-            return-object
-            density="compact"
-            variant="outlined"
-            clearable
-            prepend-icon="mdi-scale"
-          >
-            <template v-slot:selection="{ item, index }">
-              <span v-if="index < 4">{{ item.title }}</span>
-              <span v-else-if="index === 4"
-                >... ({{ selectedParameterQualifiers.length }} selected)</span
-              >
-            </template>
-            <template v-slot:append-inner>
-              <v-chip>{{ parameterQualifiers.length }}</v-chip>
-            </template>
-          </v-autocomplete>
-        </v-col>
-      </v-row>
-      <v-row align="start" class="ma-1">
-        <v-col>
-          <v-autocomplete
-            v-model="selectedLocations"
-            :items="locations"
-            :item-title="(item) => getLocationName(item)"
-            label="Locations"
-            multiple
-            return-object
-            density="compact"
-            variant="outlined"
-            clearable
-            prepend-icon="mdi-map-marker-multiple"
-          >
-            <template v-slot:selection="{ item, index }">
-              <span v-if="index < 3">{{ item.title }}</span>
-              <span v-else-if="index === 3"
-                >... ({{ selectedLocations.length }} selected)</span
-              >
-            </template>
-            <template v-slot:append-inner>
-              <v-chip>{{ locations.length }}</v-chip>
-            </template>
-          </v-autocomplete>
-        </v-col>
-      </v-row>
-      <v-row align="start" class="ma-1">
-        <v-col>
-          <v-text-field
-            v-model="startDateString"
-            label="Start date"
-            density="compact"
-            :rules="[rules.required, rules.date]"
-            variant="outlined"
-          >
-            <template v-slot:prepend>
-              <v-menu offset-y :close-on-content-click="false">
-                <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props">mdi-calendar-start</v-icon>
-                </template>
-                <v-date-picker v-model="startDate" no-title hide-actions>
-                  <template #header></template>
-                </v-date-picker>
-              </v-menu>
-            </template>
-          </v-text-field>
-        </v-col>
-        <v-col>
-          <v-text-field
-            v-model="endDateString"
-            label="End date"
-            density="compact"
-            :rules="[rules.required, rules.date]"
-            variant="outlined"
-          >
-            <template v-slot:prepend>
-              <v-menu offset-y :close-on-content-click="false">
-                <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props">mdi-calendar-end</v-icon>
-                </template>
-                <v-date-picker v-model="endDate" no-title hide-actions>
-                  <template #header></template>
-                </v-date-picker>
-              </v-menu>
-            </template>
-          </v-text-field>
-        </v-col>
-      </v-row>
+      <v-form v-model="selectionIsValid">
+        <v-row class="ma-1">
+          <v-col v-for="(item, index) in attributes">
+            <v-autocomplete
+              v-model="selectedAttributes[index]"
+              :items="selectableAttributes[index]"
+              :label="item.name"
+              multiple
+              density="compact"
+              variant="outlined"
+              clearable
+              chips
+              closable-chips
+              prepend-icon="mdi-filter"
+              @update:modelValue="updateLocations"
+            />
+          </v-col>
+        </v-row>
+        <v-row class="ma-1">
+          <v-col>
+            <v-autocomplete
+              v-model="selectedParameterQualifiers"
+              :items="parameterQualifiers"
+              :item-title="(item) => getParameterQualifierName(item)"
+              label="Parameters"
+              multiple
+              return-object
+              density="compact"
+              variant="outlined"
+              clearable
+              prepend-icon="mdi-scale"
+              :rules="[rules.noEmptySelection]"
+            >
+              <template v-slot:selection="{ item, index }">
+                <span v-if="index < 4">{{ item.title }}</span>
+                <span v-else-if="index === 4"
+                  >... ({{ selectedParameterQualifiers.length }} selected)</span
+                >
+              </template>
+              <template v-slot:append-inner>
+                <v-chip>{{ parameterQualifiers.length }}</v-chip>
+              </template>
+            </v-autocomplete>
+          </v-col>
+        </v-row>
+        <v-row align="start" class="ma-1">
+          <v-col>
+            <v-autocomplete
+              v-model="selectedLocations"
+              :items="locations"
+              :item-title="(item) => getLocationName(item)"
+              label="Locations"
+              multiple
+              return-object
+              density="compact"
+              variant="outlined"
+              clearable
+              prepend-icon="mdi-map-marker-multiple"
+              :rules="[rules.noEmptySelection]"
+            >
+              <template v-slot:selection="{ item, index }">
+                <span v-if="index < 3">{{ item.title }}</span>
+                <span v-else-if="index === 3"
+                  >... ({{ selectedLocations.length }} selected)</span
+                >
+              </template>
+              <template v-slot:append-inner>
+                <v-chip>{{ locations.length }}</v-chip>
+              </template>
+            </v-autocomplete>
+          </v-col>
+        </v-row>
+        <v-row class="ma-1">
+          <v-col>
+            <v-text-field
+              v-model="startDateString"
+              label="Start date"
+              density="compact"
+              :rules="[
+                rules.required,
+                rules.date,
+                rules.startDateBeforeEndDate,
+              ]"
+              variant="outlined"
+              :key="endDateString"
+            >
+              <template v-slot:prepend>
+                <v-menu offset-y :close-on-content-click="false">
+                  <template v-slot:activator="{ props }">
+                    <v-icon v-bind="props">mdi-calendar-start</v-icon>
+                  </template>
+                  <v-date-picker v-model="startDate" no-title hide-actions>
+                    <template #header></template>
+                  </v-date-picker>
+                </v-menu>
+              </template>
+            </v-text-field>
+          </v-col>
+          <v-col>
+            <v-text-field
+              v-model="endDateString"
+              label="End date"
+              density="compact"
+              :rules="[rules.required, rules.date, rules.endDateAfterStartDate]"
+              variant="outlined"
+              :key="startDateString"
+            >
+              <template v-slot:prepend>
+                <v-menu offset-y :close-on-content-click="false">
+                  <template v-slot:activator="{ props }">
+                    <v-icon v-bind="props">mdi-calendar-end</v-icon>
+                  </template>
+                  <v-date-picker v-model="endDate" no-title hide-actions>
+                    <template #header></template>
+                  </v-date-picker>
+                </v-menu>
+              </template>
+            </v-text-field>
+          </v-col>
+        </v-row>
+      </v-form>
       <v-card-actions>
         <v-checkbox
           v-model="onlyDownloadMetaData"
@@ -126,6 +136,7 @@
           prepend-icon="mdi-download"
           color="primary"
           @click="downloadData"
+          :disabled="!selectionIsValid"
         >
           Download
         </v-btn>
@@ -175,6 +186,7 @@ interface Props {
 const props = defineProps<Props>()
 const downloadDialogStore = useDownloadDialogStore()
 const settings = useUserSettingsStore()
+
 const options = computed<UseDisplayConfigOptions>(() => {
   return {
     useDisplayUnits: settings.useDisplayUnits,
@@ -182,6 +194,7 @@ const options = computed<UseDisplayConfigOptions>(() => {
   }
 })
 
+const selectionIsValid = ref(false)
 const downloadStartTime = ref<Date>()
 const downloadEndTime = ref<Date>()
 const timeSeriesFilter = ref<DataDownloadFilter>()
@@ -210,24 +223,39 @@ const errors = ref<string[]>([])
 
 const selectedAttributes = ref<string[][]>([])
 
-const startDate = ref<Date>(getStartDateValue())
-const endDate = ref<Date>(getEndDateValue())
 const DATE_FMT = 'yyyy-MM-dd HH:mm'
+
+const startDate = ref<Date>(getStartDateValue())
 const startDateString = ref<string>(
-  DateTime.fromJSDate(getStartDateValue()).toFormat(DATE_FMT),
+  DateTime.fromJSDate(startDate.value).toFormat(DATE_FMT),
 )
+
+const endDate = ref<Date>(getEndDateValue())
 const endDateString = ref<string>(
-  DateTime.fromJSDate(getEndDateValue()).toFormat(DATE_FMT),
+  DateTime.fromJSDate(endDate.value).toFormat(DATE_FMT),
 )
 
 const parameterQualifiersHeaders: ParameterQualifiersHeader[] = []
 
 const rules = {
+  noEmptySelection: (value: any[]) => {
+    return (
+      (value !== undefined && value.length > 0) || 'Select one or more items'
+    )
+  },
   required: (value: string) => (value !== undefined && !!value) || 'Required',
   date: (value: string) => {
     const date = DateTime.fromFormat(value || '', DATE_FMT)
     return !isNaN(date.valueOf()) || 'Invalid date'
   },
+  startDateBeforeEndDate: (value: string) => {
+    const startDate = DateTime.fromFormat(value || '', DATE_FMT).toJSDate()
+    return startDate < endDate.value || 'Start date should be before end date'
+  },
+  endDateAfterStartDate: (value: string) => {
+    const endDate = DateTime.fromFormat(value || '', DATE_FMT).toJSDate()
+    return endDate > startDate.value || 'End date should be after start date'
+  },
 }
 
 onMounted(async () => {
@@ -359,36 +387,6 @@ function getEndDateValue() {
   return endDateValue
 }
 
-function validateUserInput(
-  starTime: DateTimeMaybeValid,
-  endTime: DateTimeMaybeValid,
-): string[] {
-  let newErrors = []
-
-  if (!starTime.isValid) {
-    newErrors.push('Start date is not valid')
-  }
-
-  if (!endTime.isValid) {
-    newErrors.push('End date is not valid')
-  }
-
-  if (
-    selectedLocations.value === undefined ||
-    selectedLocations.value.length == 0
-  )
-    newErrors.push('Select one or more locations')
-  if (
-    selectedParameterQualifiers.value === undefined ||
-    selectedParameterQualifiers.value.length == 0
-  )
-    newErrors.push('Select one or more parameters/qualifiers')
-  if (endDate.value < startDate.value) {
-    newErrors.push('The end date should be greater than the start date')
-  }
-  return newErrors
-}
-
 function downloadData() {
   let startTimeRequest: DateTimeMaybeValid = DateTime.fromFormat(
     startDateString.value,
@@ -398,8 +396,6 @@ function downloadData() {
     endDateString.value,
     DATE_FMT,
   )
-  errors.value = validateUserInput(startTimeRequest, endTimeRequest)
-  if (errors.value.length !== 0) return
 
   const selectedParameterIds = selectedParameterQualifiers.value
     .map((parameterQualifier) => parameterQualifier.parameterId)

From 86090f497dcee35933afcaa92b76a5519fc5e89b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 13 Nov 2024 13:06:53 +0100
Subject: [PATCH 7/7] Remove aling start attribute

---
 src/components/download/DataDownloadDisplayComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/download/DataDownloadDisplayComponent.vue b/src/components/download/DataDownloadDisplayComponent.vue
index bbf4bab68..3a30994da 100644
--- a/src/components/download/DataDownloadDisplayComponent.vue
+++ b/src/components/download/DataDownloadDisplayComponent.vue
@@ -46,7 +46,7 @@
             </v-autocomplete>
           </v-col>
         </v-row>
-        <v-row align="start" class="ma-1">
+        <v-row class="ma-1">
           <v-col>
             <v-autocomplete
               v-model="selectedLocations"