Merge pull request #102 from hydroserver2/165-visualization-testing

165 visualization testing

Author: daniel-slaugh

cypress/e2e/base/navbar.cy.ts

@@ -25,12 +25,7 @@
         color="grey"
         :to="{
           name: 'VisualizeData',
-          query: {
-            sites: datastream.thingId,
-            datastreams: datastream.id,
-            beginDate: beginTime,
-            endDate: endTime,
-          },
+          query: getDatastreamQueryParams(datastream),
         }"
       >
         Visualization Page
@@ -43,11 +38,13 @@
 import { Datastream, GraphSeries } from '@/types'
 import { subtractHours } from '@/utils/observationsUtils'
 import { createEChartsOption } from '@/utils/plotting/echarts'
-import { fetchGraphSeries } from '@/utils/plotting/graphSeriesUtils'
 import { EChartsOption } from 'echarts'
 import { onMounted, ref } from 'vue'
 import VChart from 'vue-echarts'
 import 'echarts'
+import { useObservationStore } from '@/store/observations'
+
+const { fetchGraphSeries } = useObservationStore()
 
 const props = defineProps({
   datastream: {
@@ -71,6 +68,31 @@ const timeSelections = [
   { label: 'Last Year', value: 8760 },
 ]
 
+type Query = {
+  sites: string
+  datastreams: string
+  selectedDateBtnId?: number
+  beginDate?: string
+  endDate?: string
+}
+
+const getDatastreamQueryParams = (datastream: Datastream) => {
+  let query: Query = {
+    sites: datastream.thingId,
+    datastreams: datastream.id,
+  }
+
+  if (selectedTime.value === 8760) query.selectedDateBtnId = 0
+  else if (selectedTime.value === 720) query.selectedDateBtnId = 1
+  else if (selectedTime.value === 168) query.selectedDateBtnId = 2
+  else {
+    query.beginDate = beginTime.value
+    query.endDate = endTime.value
+  }
+
+  return query
+}
+
 const updateState = async (hours?: number) => {
   updating.value = true
   selectedTime.value = hours || 72

…nents/VisualizeData/DataVisPopupPlot.vue …nents/Datastream/DatastreamPopupPlot.vuesrc/components/VisualizeData/DataVisPopupPlot.vue renamed to src/components/Datastream/DatastreamPopupPlot.vue src/components/VisualizeData/DataVisPopupPlot.vue renamed to src/components/Datastream/DatastreamPopupPlot.vue

@@ -61,7 +61,7 @@
       </div>
       <div v-else>
         <v-dialog v-model="item.chartOpen" width="80rem">
-          <DataVisPopupPlot
+          <DatastreamPopupPlot
             :datastream="item"
             @close="item.chartOpen = false"
           />
@@ -102,7 +102,7 @@
 </template>
 
 <script setup lang="ts">
-import DataVisPopupPlot from '@/components/VisualizeData/DataVisPopupPlot.vue'
+import DatastreamPopupPlot from '@/components/Datastream/DatastreamPopupPlot.vue'
 import DatastreamTableActions from '@/components/Datastream/DatastreamTableActions.vue'
 import Sparkline from '@/components/Sparkline.vue'
 import { computed, onMounted, ref } from 'vue'

src/components/Datastream/DatastreamTable.vue

@@ -77,7 +77,7 @@
         <v-list-item
           v-if="datastream.isDataVisible"
           prepend-icon="mdi-chart-line"
-          title="View Time Series Plot"
+          title="Visualize Data"
           :to="{
             name: 'VisualizeData',
             query: { sites: thingId, datastreams: datastream.id },

src/components/Datastream/DatastreamTableActions.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row class="my-2" align="center">
     <v-col>
-      <h5 class="text-h5">Datasets</h5>
+      <h5 class="text-h5">Datastreams</h5>
     </v-col>
 
     <v-col cols="12" sm="auto">
@@ -18,7 +18,7 @@
       <v-select
         label="Show/Hide Columns"
         v-model="selectedHeaders"
-        :items="headers"
+        :items="selectableHeaders"
         item-text="title"
         item-value="key"
         multiple
@@ -50,21 +50,23 @@
     <v-btn @click="clearSelected"> Clear Selected </v-btn>
 
     <v-btn variant="outlined" @click="showOnlySelected = !showOnlySelected">
-      Showing: {{ showOnlySelected ? 'Selected' : 'All' }}
+      {{ showOnlySelected ? 'Show All' : 'Show Selected' }}
     </v-btn>
 
     <v-btn
+      :loading="downloading"
       prepend-icon="mdi-download"
-      @click="downloadSelectedDatastreamsCSVs(selectedDatastreams)"
+      @click="downloadSelected(selectedDatastreams)"
       >Download Selected</v-btn
     >
   </v-toolbar>
   <v-data-table-virtual
     :headers="headers.filter((header) => header.visible)"
     :items="tableItems"
     :sort-by="sortBy"
+    multi-sort
     :search="search"
-    height="400"
+    :style="{ 'max-height': `${tableHeight}vh` }"
     fixed-header
     class="elevation-2"
     color="green"
@@ -105,18 +107,30 @@ const {
   selectedDatastreams,
   observedProperties,
   processingLevels,
+  tableHeight,
 } = storeToRefs(useDataVisStore())
 
 const emit = defineEmits(['copyState'])
 
 const showOnlySelected = ref(false)
 const openInfoCard = ref(false)
+const downloading = ref(false)
 const selectedDatastream = ref<Datastream | null>(null)
 
 const copyStateToClipboard = async () => {
   emit('copyState')
 }
 
+const downloadSelected = async (selectedDatastreams: Datastream[]) => {
+  downloading.value = true
+  try {
+    await downloadSelectedDatastreamsCSVs(selectedDatastreams)
+  } catch (error) {
+    console.error('Error downloading selected datastreams', error)
+  }
+  downloading.value = false
+}
+
 const onRowClick = (event: Event, item: any) => {
   // If the click came from a checkbox, do nothing.
   let targetElement = event.target as HTMLElement
@@ -201,7 +215,15 @@ const headers = reactive([
   },
 ])
 
-const sortBy = [{ key: 'siteCodeName' }]
+const selectableHeaders = computed(() => {
+  return headers.filter((header) => header.key !== 'plot')
+})
+
+const sortBy = [
+  { key: 'siteCodeName' },
+  { key: 'observedPropertyName' },
+  { key: 'qualityControlLevelDefinition' },
+]
 const selectedHeaders = computed({
   get: () =>
     headers.filter((header) => header.visible).map((header) => header.key),

src/components/VisualizeData/DataVisDatasetsTable.vue

@@ -17,6 +17,7 @@
       <v-expansion-panel title="Sites">
         <v-expansion-panel-text>
           <v-text-field
+            class="pb-1"
             clearable
             @click:clear="searchThing = ''"
             v-model="searchThing"
@@ -47,6 +48,7 @@
       <v-expansion-panel title="Observed Properties">
         <v-expansion-panel-text>
           <v-text-field
+            class="pb-1"
             clearable
             @click:clear="searchObservedProperty = ''"
             v-model="searchObservedProperty"
@@ -76,6 +78,7 @@
       <v-expansion-panel title="Processing Levels">
         <v-expansion-panel-text>
           <v-text-field
+            class="pb-1"
             clearable
             @click:clear="searchProcessingLevel = ''"
             v-model="searchProcessingLevel"
@@ -222,6 +225,13 @@ const clearFilters = () => {
 }
 
 const { smAndDown } = useDisplay()
-const panels = ref([0, 1, 2, 3])
+const panels = ref([0, 1, 2])
 const drawer = ref(!!smAndDown)
 </script>
+
+<style scoped>
+::v-deep .v-selection-control,
+::v-deep .v-label {
+  align-items: start;
+}
+</style>

src/components/VisualizeData/DataVisFiltersDrawer.vue

@@ -7,7 +7,7 @@
         :color="
           selectedDateBtnId === option.id ? 'blue' : 'blue-grey-lighten-4'
         "
-        @click="setDateRange(option.id)"
+        @click="onDateBtnClick(option.id)"
       >
         {{ option.label }}
       </v-btn>
@@ -17,14 +17,14 @@
       <DatePickerField
         :model-value="beginDate"
         placeholder="Begin Date"
-        @update:model-value="handleCustomDateSelection('begin', $event)"
+        @update:model-value="setDateRange({ begin: $event })"
       />
     </v-col>
     <v-col cols="6" sm="3">
       <DatePickerField
         :model-value="endDate"
         placeholder="End Date"
-        @update:model-value="handleCustomDateSelection('end', $event)"
+        @update:model-value="setDateRange({ end: $event })"
       />
     </v-col>
   </v-row>
@@ -35,15 +35,9 @@ import DatePickerField from '@/components/VisualizeData/DatePickerField.vue'
 import { useDataVisStore } from '@/store/dataVisualization'
 import { storeToRefs } from 'pinia'
 
-const { setDateRange } = useDataVisStore()
+const { setDateRange, onDateBtnClick } = useDataVisStore()
 
 const { dateOptions, beginDate, endDate, selectedDateBtnId } = storeToRefs(
   useDataVisStore()
 )
-
-const handleCustomDateSelection = (type: 'begin' | 'end', date: Date) => {
-  if (type === 'begin') beginDate.value = date
-  else endDate.value = date
-  selectedDateBtnId.value = -1
-}
 </script>