Merge commit '879678adde6351e43f0cdd278bcf30c193c9ce64'

frontend/src/components/LineChart.vue

@@ -155,10 +155,11 @@ const updateChartColor = (color) => {
   if (!color) {
     color = chartStore.dynamicColors()
   }
-  line.value.chart.data.datasets.forEach((dataset) => {
+  chartStore.chartData.datasets.forEach((dataset) => {
     dataset.borderColor = color
     dataset.backgroundColor = color
   })
+  line.value.chart.data.datasets = chartStore.chartData.datasets
   // TODO: for some reasone the chart gets clobbered when updating
   line.value.chart.update()
 }
@@ -168,42 +169,21 @@ const updateChartLine = () => {
   if (plotStyle.value === 'Connected') {
     showLine = true
   }
-  line.value.chart.data.datasets.forEach((dataset) => {
+  chartStore.chartData.datasets.forEach((dataset) => {
     dataset.showLine = showLine
   })
+  line.value.chart.data.datasets = chartStore.chartData.datasets
   // TODO: for some reasone the chart gets clobbered when updating
   line.value.chart.update()
 }
 
 const filterAllDatasets = () => {
-  // TODO: this allows for narrowing the dataset but doesn't allow for expanding it
   let dataQualityValues = dataQuality.value
-  console.log("Initial datasets", chartData.value.datasets)
-  console.log("Data Quality Filters", dataQualityValues)
-  chartData.value.datasets.forEach((dataset) => {
-    console.log("Filtering dataset", dataset)
-    const filtered = filterDataset(dataset)
-    console.log("Filtered Dataset", filtered)
-  })
-  console.log("Filtered datasets", chartData.value.datasets)
-  // TODO: for some reason the chart doesn't get updated even though the data does
+  chartStore.filterDataQuality(dataQualityValues)
+  line.value.chart.data.datasets = chartStore.chartData.datasets
   line.value.chart.update()
 }
 
-const filterDataset = (dataset) => {
-  let dataQualityValues = dataQuality.value
-  console.log("Filtering dataset", dataset)
-  console.log("Starting number of points", dataset.data.length)
-  let filteredData = dataset.data.filter((dataPoint) => {
-    const include = dataQualityValues.includes(parseInt(dataPoint.reach_q))
-    console.log("Data Point Quality", parseInt(dataPoint.reach_q))
-    console.log("Include?", include)
-    return include
-  })
-  console.log("Ending number of points", filteredData.length)
-  return dataset.data = filteredData
-}
-
 
 onMounted(() => {
   const chartInstance = line.value

frontend/src/stores/charts.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 export const useChartsStore = defineStore('charts', () => {
-  const chartData = ref({})
+  let chartData = ref({})
   const chart = ref(null)
   const showChart = ref(false)
 
@@ -11,54 +11,94 @@ export const useChartsStore = defineStore('charts', () => {
   }
 
   const updateChartData = (data) => {
+    // TODO: bug in reactivity
+    // https://github.com/apertureless/vue-chartjs/issues/1040
     chartData.value = data
+    console.log('Updated chart data', chartData.value)
   }
 
   const clearChartData = () => {
     chartData.value = {}
   }
 
-  const buildChart = (selectedFeatures) => {
-    // https://www.chartjs.org/docs/latest/general/data-structures.html#parsing
-    console.log('Building vis for selected features', selectedFeatures)
-    const datasets = getChartDatasets(selectedFeatures)
+  const getLabels = (selectedFeatures) => {
     const labels = selectedFeatures[0].results.geojson.features.map((feature) => {
       if (feature.properties.time_str == 'no_data') {
         return
       }
       return feature.properties.time_str
     })
-    console.log('Labels', labels)
+    return labels.filter((l) => l != undefined)
+  }
+
+  const buildChart = (selectedFeatures) => {
+    // https://www.chartjs.org/docs/latest/general/data-structures.html#parsing
+    console.log('Building vis for selected features', selectedFeatures)
+    const datasets = getChartDatasets(selectedFeatures)
     console.log('Datasets', datasets)
     const data = {
-      labels: labels,
+      labels: getLabels(selectedFeatures),
       datasets: datasets
     }
     updateChartData(data)
     return data
   }
 
-  const getChartDatasets = (selectedFeatures) => {
+  const filterDataQuality = (dataQualityFlags) => {
+    console.log('Filtering data quality', dataQualityFlags)
+    const datasets = chartData.value.datasets
+    console.log('Starting Datasets', datasets)
+    datasets.forEach((dataset) => {
+      const pointStyles = dataset.data.map((m) => {
+        let pointStyle = 'circle'
+        if (!dataQualityFlags.includes(parseInt(m.reach_q))) {
+          // TODO: could also set to false to hide the point
+          // need to figure out how to have the connecting line skip the point
+          // https://www.chartjs.org/docs/latest/samples/line/segments.html
+          pointStyle = 'star'
+        }
+        return pointStyle
+      })
+      dataset.pointStyle = pointStyles
+    })
+    console.log('Ending Datasets', datasets)
+  }
+
+  const getChartDatasets = (selectedFeatures, dataQualityFlags = null) => {
     // TODO: need to update just for the newly selected feature: this currently will re-map all selected features
     return selectedFeatures.map((feature) => {
       let measurements = feature.results.geojson.features.map((feature) => {
         return feature.properties
       })
       // TODO: this is a hack to remove the invalid measurements
       // need to handle this with a formal validator
-      measurements = measurements.map((m) => {
-        m.datetime = new Date(m.time_str)
+      console.log('Starting number of measurements', measurements.length)
+      measurements = measurements.filter((m) => {
         if (m.time_str == 'no_data') {
-          return
+          return false
         }
+        m.datetime = new Date(m.time_str)
         if (isNaN(m.datetime)) {
-          return
+          return false
         }
         if (m.wse == '-999999999999.0') {
-          return
+          return false
+        }
+        if (m.slope == '-999999999999.0') {
+          return false
+        }
+        if (m.with == '-999999999999.0') {
+          return false
+        }
+        // check data quality flags
+        if (dataQualityFlags != null) {
+          if (!dataQualityFlags.includes(parseInt(m.reach_q))) {
+            return false
+          }
         }
-        return m
+        return true
       })
+      console.log('Ending number of measurements', measurements.length)
       console.log('SWOT measurements', measurements)
       return {
         label: `${feature.sword.river_name} | ${feature.sword.reach_id}`,
@@ -71,6 +111,10 @@ export const useChartsStore = defineStore('charts', () => {
         // borderColor: dynamicColors(),
         borderColor: 'rgb(75, 192, 192)',
         showLine: false,
+        pointStyle: 'circle',
+        pointRadius: 5,
+        pointHoverRadius: 10,
+        fill: false
       }
     })
   }
@@ -101,5 +145,6 @@ export const useChartsStore = defineStore('charts', () => {
     getChart,
     chart,
     dynamicColors,
+    filterDataQuality
   }
 })