From e9c18573c7413a8049039d5c21ccb584e5adc4ba Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 14 Apr 2025 15:15:02 -0400
Subject: [PATCH 1/8] initial globalTime config

---
 client/src/MapStore.ts                        | 37 +++++++++++++++++++
 .../FeatureSelection/VectorFeatureChart.vue   |  1 -
 .../TabularData/MapLayerTableGraph.vue        | 10 ++++-
 client/src/types.ts                           |  2 +
 uvdat/core/rest/vector_feature_table_data.py  | 13 +++++++
 5 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/client/src/MapStore.ts b/client/src/MapStore.ts
index b1f4df4..3fe2f9b 100644
--- a/client/src/MapStore.ts
+++ b/client/src/MapStore.ts
@@ -17,6 +17,7 @@ import {
   VectorMapLayer,
 } from './types';
 import UVdatApi from './api/UVDATApi';
+import { visibleNetCDFLayers } from './map/mapNetCDFLayer';
 
 export const VECTOR_PMTILES_URL = '/public/vectortiles/us.pmtiles';
 
@@ -34,6 +35,8 @@ export default class MapStore {
 
   public static proModeButtonEnabled = ref(true);
 
+  public static globalTime = ref(new Date());
+
   public static displayConfiguration: Ref<DisplayConfiguration> = ref(
     { default_displayed_layers: [], enabled_ui: ['Collections', 'Datasets', 'Metadata'], default_tab: 'Scenarios' },
   );
@@ -353,4 +356,38 @@ export default class MapStore {
       }
     }
   };
+
+  // Graph Charts current Min/Max Values in unix_time
+  public static graphChartsMinMax = ref({
+    min: 0,
+    max: 0,
+  });
+
+  public static updateChartsMinMax = (min: number, max: number) => {
+    MapStore.graphChartsMinMax.value.min = min;
+    MapStore.graphChartsMinMax.value.max = max;
+  };
+
+  // Computes in Unix Time
+  public static globalTimeRange = computed(() => {
+    let globalMin = Infinity;
+    let globalMax = -Infinity;
+    MapStore.visibleMapLayers.value.forEach((visibleMapLayer) => {
+      const [type, layerId] = visibleMapLayer.split('_');
+      const foundLayer = MapStore.selectedMapLayers.value.find((layer) => layer.id === parseInt(layerId, 10) && layer.type === type);
+      if (type === 'netcdf' && foundLayer !== undefined) {
+        const netCDFLayer = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === foundLayer.id);
+        if (netCDFLayer && netCDFLayer.sliding) {
+          const { min, max } = netCDFLayer.sliding;
+          globalMin = Math.min(globalMin, min);
+          globalMax = Math.max(globalMax, max);
+        }
+      }
+    });
+    if (MapStore.mapLayerFeatureGraphsVisible.value && MapStore.mapLayerFeatureGraphs.value.length) {
+      globalMin = Math.min(globalMin, MapStore.graphChartsMinMax.value.min);
+      globalMax = Math.max(globalMax, MapStore.graphChartsMinMax.value.max);
+    }
+    return { min: globalMin, max: globalMax };
+  });
 }
diff --git a/client/src/components/FeatureSelection/VectorFeatureChart.vue b/client/src/components/FeatureSelection/VectorFeatureChart.vue
index e6a59d9..330cf97 100644
--- a/client/src/components/FeatureSelection/VectorFeatureChart.vue
+++ b/client/src/components/FeatureSelection/VectorFeatureChart.vue
@@ -66,7 +66,6 @@ export default defineComponent({
           confidenceLevel.value,
           false,
           movingAverageValue.value,
-
         );
         if (data.graphs && Object.keys(data.graphs).length === 0) {
           noGraphData.value = true;
diff --git a/client/src/components/TabularData/MapLayerTableGraph.vue b/client/src/components/TabularData/MapLayerTableGraph.vue
index 80b0268..9f1b610 100644
--- a/client/src/components/TabularData/MapLayerTableGraph.vue
+++ b/client/src/components/TabularData/MapLayerTableGraph.vue
@@ -114,7 +114,15 @@ export default defineComponent({
           movingAverageValue.value,
         );
         graphData.value = data;
-
+        let minGraph = Infinity;
+        let maxGraph = -Infinity;
+        Object.keys(data.graphs).forEach((key) => {
+          const index = parseInt(key, 10);
+          const [min, max] = data.graphs[index].xAxisRange;
+          minGraph = Math.min(minGraph, min);
+          maxGraph = Math.max(maxGraph, max);
+        });
+        MapStore.updateChartsMinMax(minGraph, maxGraph);
         if (graphContainer.value) {
           const colorMapping = renderVectorFeatureGraph(
             data,
diff --git a/client/src/types.ts b/client/src/types.ts
index 11fdf7d..d4fd4aa 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -802,6 +802,8 @@ export interface FeatureGraphData {
     trendLine?:[number, number][];
     confidenceIntervals?:[number, number, number][];
     movingAverage?:[number, number][];
+    xAxisRange:[number, number];
+    yAxisRange:[number, number];
   }>
 }
 
diff --git a/uvdat/core/rest/vector_feature_table_data.py b/uvdat/core/rest/vector_feature_table_data.py
index 1dd83ef..28723da 100644
--- a/uvdat/core/rest/vector_feature_table_data.py
+++ b/uvdat/core/rest/vector_feature_table_data.py
@@ -172,6 +172,8 @@ def get_graphs(
 
         table_data = {'tableName': tables.first().name, 'graphs': {}}
         all_x_vals = {}
+        all_x_list = []  # <<< Added
+        all_y_list = []  # <<< Added
 
         for table in tables:
             if y_axis not in table.columns or x_axis not in table.columns:
@@ -205,6 +207,10 @@ def get_graphs(
             x_vals = sorted_x_vals
             y_vals = [np.mean(data[x]) for x in sorted_x_vals]
 
+            # Add x and y values to global list for min/max later
+            all_x_list.extend(x_vals)
+            all_y_list.extend(y_vals)
+
             for x, y in zip(x_vals, y_vals):
                 if x not in all_x_vals:
                     all_x_vals[x] = []
@@ -251,6 +257,9 @@ def get_graphs(
             avg_y_vals = [np.mean(all_x_vals[x]) for x in sorted_x_vals]
             aggregate_result = {'indexer': 'all', 'vectorFeatureId': 'all'}
 
+            all_x_list.extend(sorted_x_vals)
+            all_y_list.extend(avg_y_vals)
+
             if 'data' in data_types:
                 aggregate_result['data'] = list(zip(sorted_x_vals, avg_y_vals))
 
@@ -280,6 +289,10 @@ def get_graphs(
 
             table_data['graphs'][-1] = aggregate_result
 
+        if all_x_list and all_y_list:
+            table_data['xAxisRange'] = [min(all_x_list), max(all_x_list)]
+            table_data['yAxisRange'] = [min(all_y_list), max(all_y_list)]
+
         return table_data
 
     @action(detail=False, methods=['get'], url_path='feature-graph')

From 715a0cb7f46d5d703c70161bbe72e79af7560eab Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 15 Apr 2025 13:31:13 -0400
Subject: [PATCH 2/8] init globalTime Component

---
 client/src/MapStore.ts                        |  2 +-
 .../src/components/MapLegends/GlobalTime.vue  | 75 +++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/MapLegends/GlobalTime.vue

diff --git a/client/src/MapStore.ts b/client/src/MapStore.ts
index 3fe2f9b..6c69931 100644
--- a/client/src/MapStore.ts
+++ b/client/src/MapStore.ts
@@ -35,7 +35,7 @@ export default class MapStore {
 
   public static proModeButtonEnabled = ref(true);
 
-  public static globalTime = ref(new Date());
+  public static globalTime = ref(Math.floor(new Date().getTime() / 1000));
 
   public static displayConfiguration: Ref<DisplayConfiguration> = ref(
     { default_displayed_layers: [], enabled_ui: ['Collections', 'Datasets', 'Metadata'], default_tab: 'Scenarios' },
diff --git a/client/src/components/MapLegends/GlobalTime.vue b/client/src/components/MapLegends/GlobalTime.vue
new file mode 100644
index 0000000..deb6ee3
--- /dev/null
+++ b/client/src/components/MapLegends/GlobalTime.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import MapStore from '../../MapStore';
+
+export default defineComponent({
+  name: 'GlobalTime',
+  components: {
+  },
+  props: {
+  },
+  setup() {
+    const minMax = computed(() => MapStore.graphChartsMinMax.value);
+
+    const updateGlobalTime = (time: number) => {
+      let updateTime = time;
+      if (time > minMax.value.max) {
+        updateTime = minMax.value.max;
+      } else if (time < minMax.value.min) {
+        updateTime = minMax.value.min;
+      }
+      MapStore.globalTime.value = updateTime;
+    };
+    const dateString = computed(() => {
+      const date = new Date(MapStore.globalTime.value * 1000);
+      return date.toISOString().split('T')[0];
+    });
+
+    return {
+      minMax,
+      globalTime: MapStore.globalTime,
+      updateGlobalTime,
+      dateString,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="1">
+      <v-tooltip text="Global Time">
+        <template #activator="{ props }">
+          <v-icon
+            class="pl-3"
+            v-bind="props"
+            color="primary"
+          >
+            mdi-timer-outline
+          </v-icon>
+        </template>
+      </v-tooltip>
+    </v-col>
+    <v-col cols="6">
+      <v-slider
+        :model-value="globalTime"
+        :min="minMax.min"
+        :max="minMax.max"
+        step="1"
+        hide-details
+        thumb-size="12"
+        track-size="4"
+        color="primary"
+        track-color="grey lighten-3"
+        density="compact"
+        @update:model-value="updateGlobalTime($event)"
+      />
+    </v-col>
+    <v-col
+      cols="5"
+      class="text-right pr-1"
+    >
+      <span class="text-xs">{{ dateString }}</span>
+    </v-col>
+  </v-row>
+</template>

From 7edf7fb5f886c75809e5aefa272e686e38dd6c80 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 16 Apr 2025 15:13:23 -0400
Subject: [PATCH 3/8] initial time config synching

---
 client/src/MapStore.ts                        | 37 ++++++++++--------
 .../src/components/MapLegends/ControlsKey.vue | 39 ++++++++++++++++---
 .../src/components/MapLegends/GlobalTime.vue  | 33 ++++++++++------
 client/src/components/NetCDFLayerConfig.vue   |  9 +++--
 .../TabularData/MapLayerTableGraph.vue        |  5 ++-
 client/src/map/mapNetCDFLayer.ts              | 17 ++++----
 6 files changed, 93 insertions(+), 47 deletions(-)

diff --git a/client/src/MapStore.ts b/client/src/MapStore.ts
index 6c69931..495841b 100644
--- a/client/src/MapStore.ts
+++ b/client/src/MapStore.ts
@@ -10,6 +10,7 @@ import {
   DisplayConfiguration,
   LayerCollection,
   NetCDFData,
+  NetCDFImageWorking,
   NetCDFLayer,
   RasterMapLayer,
   SearchableVectorData,
@@ -17,7 +18,6 @@ import {
   VectorMapLayer,
 } from './types';
 import UVdatApi from './api/UVDATApi';
-import { visibleNetCDFLayers } from './map/mapNetCDFLayer';
 
 export const VECTOR_PMTILES_URL = '/public/vectortiles/us.pmtiles';
 
@@ -72,6 +72,10 @@ export default class MapStore {
 
   public static visibleMapLayers: Ref<Set<string>> = ref(new Set());
 
+  // Net CDF Layers
+
+  public static visibleNetCDFLayers: Ref<NetCDFImageWorking[]> = ref([]);
+
   public static selectedVectorMapLayers: Ref<VectorMapLayer[]> = computed(
     () => MapStore.selectedMapLayers.value.filter((layer) => layer.type === 'vector'),
   );
@@ -361,33 +365,34 @@ export default class MapStore {
   public static graphChartsMinMax = ref({
     min: 0,
     max: 0,
+    stepSize: 0,
   });
 
-  public static updateChartsMinMax = (min: number, max: number) => {
-    MapStore.graphChartsMinMax.value.min = min;
-    MapStore.graphChartsMinMax.value.max = max;
+  public static timeLinked = ref(true);
+
+  public static updateChartsMinMax = (min: number, max: number, stepSize: number) => {
+    MapStore.graphChartsMinMax.value = { min, max, stepSize };
   };
 
   // Computes in Unix Time
-  public static globalTimeRange = computed(() => {
+  public static globalTimeRange: Ref<{ min: number; max: number, stepSize: number }> = computed(() => {
     let globalMin = Infinity;
     let globalMax = -Infinity;
-    MapStore.visibleMapLayers.value.forEach((visibleMapLayer) => {
-      const [type, layerId] = visibleMapLayer.split('_');
-      const foundLayer = MapStore.selectedMapLayers.value.find((layer) => layer.id === parseInt(layerId, 10) && layer.type === type);
-      if (type === 'netcdf' && foundLayer !== undefined) {
-        const netCDFLayer = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === foundLayer.id);
-        if (netCDFLayer && netCDFLayer.sliding) {
-          const { min, max } = netCDFLayer.sliding;
-          globalMin = Math.min(globalMin, min);
-          globalMax = Math.max(globalMax, max);
-        }
+    let stepSize = Infinity;
+    MapStore.visibleNetCDFLayers.value.forEach((layer) => {
+      if (layer.sliding) {
+        const { min, max } = layer.sliding;
+        const stepsize = layer.images.length;
+        stepSize = Math.min(stepSize, (max - min) / stepsize);
+        globalMin = Math.min(globalMin, min);
+        globalMax = Math.max(globalMax, max);
       }
     });
     if (MapStore.mapLayerFeatureGraphsVisible.value && MapStore.mapLayerFeatureGraphs.value.length) {
       globalMin = Math.min(globalMin, MapStore.graphChartsMinMax.value.min);
       globalMax = Math.max(globalMax, MapStore.graphChartsMinMax.value.max);
+      stepSize = Math.min(stepSize, MapStore.graphChartsMinMax.value.stepSize);
     }
-    return { min: globalMin, max: globalMax };
+    return { min: globalMin, max: globalMax, stepSize };
   });
 }
diff --git a/client/src/components/MapLegends/ControlsKey.vue b/client/src/components/MapLegends/ControlsKey.vue
index 1b011c3..ac686d9 100644
--- a/client/src/components/MapLegends/ControlsKey.vue
+++ b/client/src/components/MapLegends/ControlsKey.vue
@@ -2,8 +2,10 @@
 <script lang="ts">
 import {
   computed, defineComponent,
+  watch,
 } from 'vue';
 import { throttle } from 'lodash';
+import GlobalTime from './GlobalTime.vue';
 import {
   AnnotationTypes,
   NetCDFLayer,
@@ -13,12 +15,15 @@ import {
   VectorMapLayer,
 } from '../../types'; // Import your defined types
 import MapStore from '../../MapStore';
-import { updateNetCDFLayer, visibleNetCDFLayers } from '../../map/mapNetCDFLayer';
+import { updateNetCDFLayer } from '../../map/mapNetCDFLayer';
 import { getRasterLayerDisplayConfig, getVectorLayerDisplayConfig } from '../../utils';
 import { updateLayer } from '../../map/mapLayers';
 
 export default defineComponent({
   name: 'ControlsKey',
+  components: {
+    GlobalTime,
+  },
   props: {
     vectorLayers: {
       type: Array as () => VectorMapLayer[],
@@ -73,7 +78,7 @@ export default defineComponent({
       // Compute NetCDF Layer Keys
       const stepIndexMap: Record<string, { length: number, currentIndex: number }> = {};
       const resamplingMap: Record<string, 'linear' | 'nearest'> = {};
-      visibleNetCDFLayers.value.forEach((item) => {
+      MapStore.visibleNetCDFLayers.value.forEach((item) => {
         const found = props.netcdfLayers.find((layer) => layer.id === item.netCDFLayer);
         if (found) {
           const { opacity } = item;
@@ -123,7 +128,7 @@ export default defineComponent({
 
     const stepMapping = computed(() => {
       const mappedStepMapping: Record<string, Record<number, string | number>> = {};
-      visibleNetCDFLayers.value.forEach((item) => {
+      MapStore.visibleNetCDFLayers.value.forEach((item) => {
         const foundLayer = props.netcdfLayers.find((layer) => layer.id === item.netCDFLayer);
         mappedStepMapping[`netcdf_${foundLayer?.id}`] = {};
         const mapSlicer: Record<number, string | number> = {};
@@ -174,7 +179,7 @@ export default defineComponent({
         });
       }
       if (item.type === 'netcdf') {
-        const found = visibleNetCDFLayers.value.find((layer) => item.id === layer.netCDFLayer);
+        const found = MapStore.visibleNetCDFLayers.value.find((layer) => item.id === layer.netCDFLayer);
         if (found) {
           found.opacity = val;
           updateNetCDFLayer(item.id, { opacity: val });
@@ -194,13 +199,32 @@ export default defineComponent({
     };
 
     const toggleResampling = (id: number) => {
-      const found = visibleNetCDFLayers.value.find((layer) => id === layer.netCDFLayer);
+      const found = MapStore.visibleNetCDFLayers.value.find((layer) => id === layer.netCDFLayer);
       if (found) {
         const val = found.resampling === 'linear' ? 'nearest' : 'linear';
         found.resampling = val;
         updateNetCDFLayer(id, { resampling: val });
       }
     };
+
+    watch(MapStore.globalTime, (newVal) => {
+      if (!MapStore.timeLinked.value) {
+        return;
+      }
+      props.netcdfLayers.forEach((netcdfLayer) => {
+        const found = MapStore.visibleNetCDFLayers.value.find((layer) => layer.netCDFLayer === netcdfLayer.id);
+        if (found) {
+          // now we need to find the closest index to the current time
+          const { min } = found.sliding;
+          const stepSize = found.sliding.step;
+          const currentIndex = Math.round((newVal - min) / stepSize);
+          if (currentIndex >= 0 && currentIndex < found.images.length) {
+            found.currentIndex = currentIndex;
+            throttledUpdateNetCDFLayer(netcdfLayer.id, currentIndex);
+          }
+        }
+      });
+    });
     return {
       processedLayers,
       iconMapper,
@@ -214,6 +238,11 @@ export default defineComponent({
 </script>
 
 <template>
+  <v-card class="pa-0 ma-0 mb-2">
+    <v-card-text class="pa-0 ma-0">
+      <global-time />
+    </v-card-text>
+  </v-card>
   <v-card
     v-for="(item, index) in processedLayers"
     :key="`opacity_${index}`"
diff --git a/client/src/components/MapLegends/GlobalTime.vue b/client/src/components/MapLegends/GlobalTime.vue
index deb6ee3..d1d5795 100644
--- a/client/src/components/MapLegends/GlobalTime.vue
+++ b/client/src/components/MapLegends/GlobalTime.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MapStore from '../../MapStore';
+import { min } from 'd3';
 
 export default defineComponent({
   name: 'GlobalTime',
@@ -9,14 +10,13 @@ export default defineComponent({
   props: {
   },
   setup() {
-    const minMax = computed(() => MapStore.graphChartsMinMax.value);
-
+    const minMaxSteps = computed(() => MapStore.globalTimeRange.value);
     const updateGlobalTime = (time: number) => {
       let updateTime = time;
-      if (time > minMax.value.max) {
-        updateTime = minMax.value.max;
-      } else if (time < minMax.value.min) {
-        updateTime = minMax.value.min;
+      if (time > minMaxSteps.value.max) {
+        updateTime = minMaxSteps.value.max;
+      } else if (time < minMaxSteps.value.min) {
+        updateTime = minMaxSteps.value.min;
       }
       MapStore.globalTime.value = updateTime;
     };
@@ -25,18 +25,24 @@ export default defineComponent({
       return date.toISOString().split('T')[0];
     });
 
+    const toggleLink = () => {
+      MapStore.timeLinked.value = !MapStore.timeLinked.value;
+    };
+
     return {
-      minMax,
+      minMaxSteps,
       globalTime: MapStore.globalTime,
+      timeLinked: MapStore.timeLinked,
       updateGlobalTime,
       dateString,
+      toggleLink,
     };
   },
 });
 </script>
 
 <template>
-  <v-row>
+  <v-row align="center" justify="center" dense>
     <v-col cols="1">
       <v-tooltip text="Global Time">
         <template #activator="{ props }">
@@ -44,18 +50,21 @@ export default defineComponent({
             class="pl-3"
             v-bind="props"
             color="primary"
+            @click="toggleLink()"
           >
-            mdi-timer-outline
+            mdi-timer-lock-outline
           </v-icon>
         </template>
+        <span>Global Time Slider</span>
       </v-tooltip>
     </v-col>
     <v-col cols="6">
       <v-slider
         :model-value="globalTime"
-        :min="minMax.min"
-        :max="minMax.max"
-        step="1"
+        :min="minMaxSteps.min"
+        :max="minMaxSteps.max"
+        :step="minMaxSteps.stepSize"
+        :disabled="!timeLinked"
         hide-details
         thumb-size="12"
         track-size="4"
diff --git a/client/src/components/NetCDFLayerConfig.vue b/client/src/components/NetCDFLayerConfig.vue
index 85259fd..f96b503 100644
--- a/client/src/components/NetCDFLayerConfig.vue
+++ b/client/src/components/NetCDFLayerConfig.vue
@@ -5,7 +5,8 @@ import {
 } from 'vue';
 import { throttle } from 'lodash';
 import { NetCDFLayer } from '../types';
-import { updateNetCDFLayer, visibleNetCDFLayers } from '../map/mapNetCDFLayer';
+import MapStore from '../MapStore';
+import { updateNetCDFLayer } from '../map/mapNetCDFLayer';
 
 export default defineComponent({
   props: {
@@ -19,16 +20,16 @@ export default defineComponent({
     const layerOpacity = ref(0);
     const currentIndex = ref(0);
     onMounted(() => {
-      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
+      const found = MapStore.visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       layerOpacity.value = found?.opacity || 0.75;
       currentIndex.value = found?.currentIndex || 0;
     });
     const totalIndex = computed(() => {
-      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
+      const found = MapStore.visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       return found?.images.length ? found.images.length - 1 : 0;
     });
     const stepMapping = computed(() => {
-      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
+      const found = MapStore.visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       const mapSlicer: Record<number, string | number> = {};
       let unixTimeStamp = true;
       if (found) {
diff --git a/client/src/components/TabularData/MapLayerTableGraph.vue b/client/src/components/TabularData/MapLayerTableGraph.vue
index 9f1b610..025c3cc 100644
--- a/client/src/components/TabularData/MapLayerTableGraph.vue
+++ b/client/src/components/TabularData/MapLayerTableGraph.vue
@@ -116,13 +116,16 @@ export default defineComponent({
         graphData.value = data;
         let minGraph = Infinity;
         let maxGraph = -Infinity;
+        let steps = Infinity;
         Object.keys(data.graphs).forEach((key) => {
           const index = parseInt(key, 10);
           const [min, max] = data.graphs[index].xAxisRange;
           minGraph = Math.min(minGraph, min);
           maxGraph = Math.max(maxGraph, max);
+          const stepChartSize = (max - min) / data.graphs[index].data.length;
+          steps = Math.min(steps, stepChartSize);
         });
-        MapStore.updateChartsMinMax(minGraph, maxGraph);
+        MapStore.updateChartsMinMax(minGraph, maxGraph, steps);
         if (graphContainer.value) {
           const colorMapping = renderVectorFeatureGraph(
             data,
diff --git a/client/src/map/mapNetCDFLayer.ts b/client/src/map/mapNetCDFLayer.ts
index 13b72dc..f1324f8 100644
--- a/client/src/map/mapNetCDFLayer.ts
+++ b/client/src/map/mapNetCDFLayer.ts
@@ -4,7 +4,6 @@ import UVdatApi from '../api/UVDATApi';
 import MapStore from '../MapStore';
 import { MapLibreCoordinates, NetCDFImageWorking, NetCDFLayer } from '../types';
 
-const visibleNetCDFLayers: Ref<NetCDFImageWorking[]> = ref([]);
 const internalMap: Ref<maplibregl.Map | null> = ref(null);
 
 const setNetCDFInternalMap = (map: Ref<maplibregl.Map>) => {
@@ -20,14 +19,14 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
   });
   for (let i = 0; i < addLayers.length; i += 1) {
     const addLayer = addLayers[i];
-    const index = visibleNetCDFLayers.value.findIndex((item) => item.netCDFLayer === addLayer.id);
+    const index = MapStore.visibleNetCDFLayers.value.findIndex((item) => item.netCDFLayer === addLayer.id);
     if (index === -1) {
       // eslint-disable-next-line no-await-in-loop
       const newData = await UVdatApi.getNetCDFLayerImages(addLayer.id);
       const modifiedData: NetCDFImageWorking = {
         ...newData, currentIndex: 0, opacity: 0.75, name: addLayer.name, resampling: 'linear',
       };
-      visibleNetCDFLayers.value.push(modifiedData);
+      MapStore.visibleNetCDFLayers.value.push(modifiedData);
       // Coordinates need to be top-left then clockwise
       const baseCoordinates = modifiedData.parent_bounds[0].slice(0, 4);
       const coordinates = [baseCoordinates[3], baseCoordinates[2], baseCoordinates[1], baseCoordinates[0]] as MapLibreCoordinates;
@@ -48,11 +47,11 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
     }
   }
   // Remove any extra items that are no longer visible
-  for (let i = 0; i < visibleNetCDFLayers.value.length; i += 1) {
-    const visibleLayer = visibleNetCDFLayers.value[i];
+  for (let i = 0; i < MapStore.visibleNetCDFLayers.value.length; i += 1) {
+    const visibleLayer = MapStore.visibleNetCDFLayers.value[i];
     const index = addLayers.findIndex((item) => visibleLayer.netCDFLayer === item.id);
     if (index === -1) {
-      visibleNetCDFLayers.value.splice(i, 1);
+      MapStore.visibleNetCDFLayers.value.splice(i, 1);
       map.removeLayer(`NetCDFLayer_${visibleLayer.netCDFLayer}`);
       map.removeSource(`NetCDFSource_${visibleLayer.netCDFLayer}`);
     }
@@ -61,7 +60,7 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
 
 const updateNetCDFLayer = (layer: number, data: { index?: number, opacity?: number, resampling?: 'nearest' | 'linear' }) => {
   const { index, opacity, resampling } = data;
-  const foundLayer = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === layer);
+  const foundLayer = MapStore.visibleNetCDFLayers.value.find((item) => item.netCDFLayer === layer);
   if (foundLayer && internalMap.value) {
     if (index !== undefined) {
       const source = internalMap.value.getSource(`NetCDFSource_${layer}`);
@@ -83,9 +82,9 @@ const updateNetCDFLayer = (layer: number, data: { index?: number, opacity?: numb
       internalMap.value.setPaintProperty(`NetCDFLayer_${layer}`, 'raster-resampling', resampling);
     }
   }
-  visibleNetCDFLayers.value = visibleNetCDFLayers.value.map((item) => item);
+  MapStore.visibleNetCDFLayers.value = MapStore.visibleNetCDFLayers.value.map((item) => item);
 };
 
 export {
-  toggleNetCDFMapLayers, updateNetCDFLayer, setNetCDFInternalMap, visibleNetCDFLayers,
+  toggleNetCDFMapLayers, updateNetCDFLayer, setNetCDFInternalMap,
 };

From c115d31e972b376800d580bba804c4649cdb2b14 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 18 Apr 2025 13:31:39 -0400
Subject: [PATCH 4/8] add in stream temperature graphs and data

---
 .../TabularData/MapLayerTableGraph.vue        |   2 +-
 client/src/types.ts                           |   4 +-
 sample_data/stream_context.json               | 779 ++++++++++++++++++
 scripts/streamTemperature/csvToGeojson.py     |  53 ++
 scripts/streamTemperature/processFolder.py    | 142 ++++
 .../uploadStreamTemperature.py                | 158 ++++
 6 files changed, 1135 insertions(+), 3 deletions(-)
 create mode 100644 sample_data/stream_context.json
 create mode 100644 scripts/streamTemperature/csvToGeojson.py
 create mode 100644 scripts/streamTemperature/processFolder.py
 create mode 100644 scripts/streamTemperature/uploadStreamTemperature.py

diff --git a/client/src/components/TabularData/MapLayerTableGraph.vue b/client/src/components/TabularData/MapLayerTableGraph.vue
index 025c3cc..974181c 100644
--- a/client/src/components/TabularData/MapLayerTableGraph.vue
+++ b/client/src/components/TabularData/MapLayerTableGraph.vue
@@ -119,7 +119,7 @@ export default defineComponent({
         let steps = Infinity;
         Object.keys(data.graphs).forEach((key) => {
           const index = parseInt(key, 10);
-          const [min, max] = data.graphs[index].xAxisRange;
+          const [min, max] = data.xAxisRange;
           minGraph = Math.min(minGraph, min);
           maxGraph = Math.max(maxGraph, max);
           const stepChartSize = (max - min) / data.graphs[index].data.length;
diff --git a/client/src/types.ts b/client/src/types.ts
index d4fd4aa..ce3e3ee 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -802,9 +802,9 @@ export interface FeatureGraphData {
     trendLine?:[number, number][];
     confidenceIntervals?:[number, number, number][];
     movingAverage?:[number, number][];
-    xAxisRange:[number, number];
-    yAxisRange:[number, number];
   }>
+  xAxisRange:[number, number];
+  yAxisRange:[number, number];
 }
 
 export interface ColorFilterCategorical {
diff --git a/sample_data/stream_context.json b/sample_data/stream_context.json
new file mode 100644
index 0000000..3354860
--- /dev/null
+++ b/sample_data/stream_context.json
@@ -0,0 +1,779 @@
+[
+  {
+    "type": "Context",
+    "name": "StreamTemperature",
+    "default_map_center": [
+      37.5,
+      -95.5
+    ],
+    "default_map_zoom": 5,
+    "datasets": [
+      {
+        "name": "StreamTemperature Data",
+        "category": "stream_temperature",
+        "action": "replace",
+        "description": "Tabular and geojson stream temperature data",
+        "files": [
+          {
+            "name": "StreamTemperature",
+            "type": "geojson",
+            "path": "./data/StreamTemperature/stream_temperature.geojson",
+            "url": "https://data.kitware.com/api/v1/file/68028a5135301b4faa0432cd/download",
+            "metadata": {
+              "tabular": {
+                "name": "StreamTemperature_data",
+                "path": "./data/StreamTemperature/stream_temperature_tabular.json",
+                "url": "https://data.kitware.com/api/v1/file/68028a5235301b4faa0432d0/download",
+                "featurePropertyMatcher": "Site Number"
+              },
+              "default_style": {
+                "layers": {
+                  "fill": {
+                    "color": "#888888",
+                    "enabled": false
+                  },
+                  "line": {
+                    "size": 1,
+                    "color": "#000000",
+                    "enabled": false
+                  },
+                  "text": {
+                    "color": "#888888",
+                    "enabled": false
+                  },
+                  "circle": {
+                    "color": {
+                      "type": "ColorCategoricalString",
+                      "attribute": "Site Number",
+                      "colorPairs": {
+                        "02205522": "#ffe080",
+                        "02208130": "#ff0050",
+                        "02208150": "#86702d",
+                        "02217274": "#90ff00",
+                        "02218565": "#c7ff80",
+                        "02330450": "#ff00e0",
+                        "02334430": "#ffc200",
+                        "02334480": "#5f862d",
+                        "02334578": "#6f00ff",
+                        "02334885": "#ff80ef",
+                        "02335000": "#86442d",
+                        "02335350": "#ff80a7",
+                        "02336000": "#532d86",
+                        "02336030": "#862d7b",
+                        "02336120": "#862d49",
+                        "02336240": "#ffa180",
+                        "02336300": "#b780ff",
+                        "02336313": "#ff4400",
+                        "02336360": "#ffe080",
+                        "02336410": "#ff0050",
+                        "02336526": "#86702d",
+                        "02336728": "#90ff00",
+                        "02337170": "#c7ff80",
+                        "02397000": "#ff00e0",
+                        "02397530": "#ffc200",
+                        "02423130": "#5f862d",
+                        "02423397": "#6f00ff",
+                        "02423496": "#ff80ef",
+                        "02455980": "#86442d",
+                        "02457595": "#ff80a7",
+                        "02458450": "#532d86",
+                        "03306000": "#862d7b",
+                        "03307000": "#862d49",
+                        "03313000": "#ffa180",
+                        "03428200": "#b780ff",
+                        "03430200": "#ff4400",
+                        "03431083": "#ffe080",
+                        "03431091": "#ff0050",
+                        "03431514": "#86702d",
+                        "0351706800": "#90ff00"
+                      },
+                      "defaultColor": "#FFFFFF"
+                    },
+                    "legend": true,
+                    "enabled": true,
+                    "selectable": "singleSelect",
+                    "selectColor": "#00FFFF"
+                  },
+                  "fill-extrusion": {
+                    "color": "#888888",
+                    "enabled": false
+                  }
+                },
+                "properties": {
+                  "availableProperties": {
+                    "Site Number": {
+                      "key": "Site Number",
+                      "type": "string",
+                      "values": [
+                        "02205522",
+                        "02208130",
+                        "02208150",
+                        "02217274",
+                        "02218565",
+                        "02330450",
+                        "02334430",
+                        "02334480",
+                        "02334578",
+                        "02334885",
+                        "02335000",
+                        "02335350",
+                        "02336000",
+                        "02336030",
+                        "02336120",
+                        "02336240",
+                        "02336300",
+                        "02336313",
+                        "02336360",
+                        "02336410",
+                        "02336526",
+                        "02336728",
+                        "02337170",
+                        "02397000",
+                        "02397530",
+                        "02423130",
+                        "02423397",
+                        "02423496",
+                        "02455980",
+                        "02457595",
+                        "02458450",
+                        "03306000",
+                        "03307000",
+                        "03313000",
+                        "03428200",
+                        "03430200",
+                        "03431083",
+                        "03431091",
+                        "03431514",
+                        "0351706800"
+                      ],
+                      "display": false,
+                      "tooltip": false,
+                      "description": "",
+                      "displayName": "Site Number"
+                    }
+                  }
+                },
+                "vectorFeatureTableGraphs": [
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  }
+                ],
+                "mapLayerFeatureTableGraphs": [
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP245 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP245",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP585 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP585",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r4i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r4i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r4i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r10i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r10i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r10i1p1f1 Support Vector Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Linear Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Linear Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Linear Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Ridge Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Ridge Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Ridge Regression"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Random Forest",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Random Forest",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Random Forest"
+                  },
+                  {
+                    "name": "Predicted_SSP126 r11i1p1f1 Support Vector Regression",
+                    "type": "Predicted_SSP126",
+                    "xAxis": "unix_time",
+                    "yAxis": "r11i1p1f1 Support Vector Regression",
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": "r11i1p1f1 Support Vector Regression"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/scripts/streamTemperature/csvToGeojson.py b/scripts/streamTemperature/csvToGeojson.py
new file mode 100644
index 0000000..ddec56a
--- /dev/null
+++ b/scripts/streamTemperature/csvToGeojson.py
@@ -0,0 +1,53 @@
+import csv
+import json
+import click
+
+
+@click.command()
+@click.argument('csv_file', type=click.File('r'))
+@click.argument('output_file', type=click.File('w'))
+def csv_to_geojson(csv_file, output_file):
+    reader = csv.DictReader(csv_file)
+    fieldnames = reader.fieldnames
+
+    if 'Latitude' not in fieldnames or 'Longitude' not in fieldnames:
+        raise click.UsageError("CSV must contain 'Latitude' and 'Longitude' fields")
+
+    features = []
+
+    for row in reader:
+        try:
+            lat = float(row['Latitude'])
+            lon = float(row['Longitude'])
+        except ValueError:
+            click.echo(f"Skipping row with invalid Latitude/Longitude: {row}")
+            continue
+
+        properties = {
+            key: value
+            for key, value in row.items()
+            if key and key not in ['Latitude', 'Longitude']
+        }
+
+        feature = {
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [lon, lat]
+            },
+            "properties": properties
+        }
+
+        features.append(feature)
+
+    geojson = {
+        "type": "FeatureCollection",
+        "features": features
+    }
+
+    json.dump(geojson, output_file, indent=2)
+    click.echo(f"GeoJSON written to {output_file.name}")
+
+
+if __name__ == '__main__':
+    csv_to_geojson()
diff --git a/scripts/streamTemperature/processFolder.py b/scripts/streamTemperature/processFolder.py
new file mode 100644
index 0000000..282b24b
--- /dev/null
+++ b/scripts/streamTemperature/processFolder.py
@@ -0,0 +1,142 @@
+import os
+import csv
+import json
+import click
+from datetime import datetime
+from collections import defaultdict
+
+variable_mapper = {
+    "Gridded_1_linear": "r4i1p1f1 Linear Regression",
+    "Gridded_1_ridge": "r4i1p1f1 Ridge Regression",
+    "Gridded_1_rf": "r4i1p1f1 Random Forest",
+    "Gridded_1_svr": "r4i1p1f1 Support Vector Regression",
+    "Gridded_2_linear": "r10i1p1f1 Linear Regression",
+    "Gridded_2_ridge": "r10i1p1f1 Ridge Regression",
+    "Gridded_2_rf": "r10i1p1f1 Random Forest",
+    "Gridded_2_svr": "r10i1p1f1 Support Vector Regression",
+    "Gridded_3_linear": "r11i1p1f1 Linear Regression",
+    "Gridded_3_ridge": "r11i1p1f1 Ridge Regression",
+    "Gridded_3_rf": "r11i1p1f1 Random Forest",
+    "Gridded_3_svr": "r11i1p1f1 Support Vector Regression",
+}
+
+def detect_type(values):
+    is_number = True
+    numbers = []
+
+    for v in values:
+        try:
+            num = float(v)
+            numbers.append(num)
+        except (ValueError, TypeError):
+            is_number = False
+
+    if is_number:
+        return {
+            "type": "number",
+            "value_count": len(numbers),
+            "min": min(numbers),
+            "max": max(numbers)
+        }
+    else:
+        return {
+            "type": "string",
+            "value_count": len(values),
+            "searchable": True,
+            "unique": len(set(values))
+        }
+
+@click.command()
+@click.argument('main_folder', type=click.Path(exists=True))
+@click.argument('output_file', type=click.File('w'))
+def process_folder(main_folder, output_file):
+    result = defaultdict(list)
+
+    for folder_name in os.listdir(main_folder):
+        subfolder_path = os.path.join(main_folder, folder_name)
+        if not os.path.isdir(subfolder_path):
+            continue
+
+        for filename in os.listdir(subfolder_path):
+            if not filename.lower().endswith('.csv'):
+                continue
+
+            file_path = os.path.join(subfolder_path, filename)
+            with open(file_path, newline='', encoding='latin1') as csvfile:
+                reader = csv.DictReader(csvfile)
+                original_headers = reader.fieldnames
+                if 'site_no' not in original_headers or 'datetime' not in original_headers:
+                    click.echo(f"Skipping {file_path}: Missing 'site_no' or 'datetime'")
+                    continue
+
+                # Map headers if present in variable_mapper
+                mapped_headers = [variable_mapper.get(h, h) for h in original_headers]
+                header_map = dict(zip(original_headers, mapped_headers))
+
+                data_by_site = defaultdict(list)
+                column_values = defaultdict(list)
+                rows = []
+                min_date, max_date = None, None
+
+                for row in reader:
+                    site_no = str(row['site_no']).zfill(8)
+                    dt_str = row['datetime']
+                    try:
+                        dt_obj = datetime.strptime(dt_str, "%Y-%m-%d")
+                        unix_time = int(dt_obj.timestamp())
+                    except ValueError:
+                        click.echo(f"Skipping row with invalid datetime: {dt_str}")
+                        continue
+
+                    # Add unix_time
+                    row['unix_time'] = unix_time
+
+                    # Update date tracking
+                    if not min_date or dt_obj < min_date:
+                        min_date = dt_obj
+                    if not max_date or dt_obj > max_date:
+                        max_date = dt_obj
+
+                    processed_row = {}
+                    for key, value in row.items():
+                        mapped_key = header_map.get(key, key)
+                        try:
+                            if key != 'site_no':
+                                float_val = float(value)
+                                if value.strip() == "" or value.strip().lower() == "nan":
+                                    raise ValueError
+                                value = float_val
+                        except (ValueError, TypeError, AttributeError):
+                            pass
+                        processed_row[mapped_key] = value
+                        column_values[mapped_key].append(value)
+
+                    full_headers = [header_map.get(h, h) for h in original_headers] + ['unix_time']
+                    row_values = [processed_row.get(h, "") for h in full_headers]
+                    rows.append(row_values)
+                    data_by_site[site_no].append(processed_row)
+
+                # Summarize columns
+                summary = {}
+                for col, values in column_values.items():
+                    summary[col] = detect_type(values)
+
+                for site_no in data_by_site:
+                    name = f"{site_no}_{folder_name}"
+                    entry = {
+                        "name": name,
+                        "description": f"Site {site_no} from folder {folder_name}. "
+                                       f"Date range: {min_date.date()} to {max_date.date()}. "
+                                       f"Total records: {len(data_by_site[site_no])}.",
+                        "type": folder_name,
+                        "header": full_headers,
+                        "summary": summary,
+                        "rows": rows
+                    }
+                    result[site_no].append(entry)
+
+    json.dump(result, output_file, indent=2)
+    click.echo(f"JSON output written to {output_file.name}")
+
+if __name__ == '__main__':
+    process_folder()
diff --git a/scripts/streamTemperature/uploadStreamTemperature.py b/scripts/streamTemperature/uploadStreamTemperature.py
new file mode 100644
index 0000000..33f6137
--- /dev/null
+++ b/scripts/streamTemperature/uploadStreamTemperature.py
@@ -0,0 +1,158 @@
+import os
+import json
+import click
+from girder_client import GirderClient
+
+EXCLUDED_FIELDS = {'datetime', 'unix_time', 'site_no'}
+GIRDER_API_KEY = 'Replace with API Key'
+
+
+def authenticate(client: GirderClient):
+    client.authenticate(apiKey=GIRDER_API_KEY)
+
+
+def get_public_folder(gc: GirderClient):
+    user = gc.get('user/me')
+    user_id = user['_id']
+    folders = gc.get(f'folder?parentType=user&parentId={user_id}&text=Public')
+    if folders:
+        return folders[0]
+    raise RuntimeError('No Public folder found for the user.')
+
+
+def create_folder(client: GirderClient, parent_id, name: str):
+    folder = client.createFolder(parent_id, name, reuseExisting=True)
+    return folder['_id']
+
+
+def upload_file(client: GirderClient, folder_id: str, file_path: str):
+    file_name = os.path.basename(file_path)
+    existing = list(client.listItem(folder_id, name=file_name))
+    if existing:
+        file_id = existing[0]['_id']
+        return f'https://data.kitware.com/api/v1/file/{file_id}/download'
+    item = client.uploadFileToFolder(folder_id, file_path)
+    return f'https://data.kitware.com/api/v1/file/{item["_id"]}/download'
+
+
+def create_graph_metadata(tabular_data, geojson_url, tabular_url):
+    files = []
+
+    vectorFeatureTableGraphs = []
+    mapLayerFeatureTableGraphs = []
+
+    for entry in tabular_data:
+        table_name = entry["type"]
+        print(table_name)
+        headers = entry["header"]
+
+
+        for item in headers:
+            if item not in EXCLUDED_FIELDS:
+                vectorFeatureTableGraphs.append({
+                    "name": f"{table_name} {item}",
+                    "type": table_name,
+                    "xAxis": "unix_time",
+                    "yAxis": item,
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": item
+                })
+                mapLayerFeatureTableGraphs.append({
+                    "name": f"{table_name} {item}",
+                    "type": table_name,
+                    "xAxis": "unix_time",
+                    "yAxis": item,
+                    "indexer": "site_no",
+                    "xAxisLabel": "Date",
+                    "yAxisLabel": item
+                })
+
+
+    files.append({
+        "name": 'StreamTemperature',
+        "type": "geojson",
+        "path": './data/StreamTemperature/stream_temperature.geojson',
+        "url": geojson_url,
+        "metadata": {
+            "tabular": {
+                "name": "StreamTemperature_data",
+                "path": './data/StreamTemperature/stream_temperature_tabular.json',
+                "url": tabular_url,
+                "featurePropertyMatcher": "Site Number"
+            },
+            "default_style": {
+                "layers": {
+                    "fill": {"color": "#888888", "enabled": False},
+                    "line": {"size": 1, "color": "#000000", "enabled": False},
+                    "text": {"color": "#888888", "enabled": False},
+                    "circle": {
+                        "color": {"type": "ColorCategoricalString", "attribute": "Site Number", "colorPairs":
+                                  {"02205522": "#ffe080", "02208130": "#ff0050", "02208150": "#86702d", "02217274": "#90ff00", "02218565": "#c7ff80", "02330450": "#ff00e0", "02334430": "#ffc200", "02334480": "#5f862d", "02334578": "#6f00ff", "02334885": "#ff80ef", "02335000": "#86442d", "02335350": "#ff80a7", "02336000": "#532d86", "02336030": "#862d7b", "02336120": "#862d49", "02336240": "#ffa180", "02336300": "#b780ff", "02336313": "#ff4400", "02336360": "#ffe080", "02336410": "#ff0050", "02336526": "#86702d", "02336728": "#90ff00", "02337170": "#c7ff80", "02397000": "#ff00e0", "02397530": "#ffc200", "02423130": "#5f862d", "02423397": "#6f00ff", "02423496": "#ff80ef", "02455980": "#86442d", "02457595": "#ff80a7", "02458450": "#532d86", "03306000": "#862d7b", "03307000": "#862d49", "03313000": "#ffa180", "03428200": "#b780ff", "03430200": "#ff4400", "03431083": "#ffe080", "03431091": "#ff0050", "03431514": "#86702d", "0351706800": "#90ff00"},
+                                  "defaultColor": "#FFFFFF"}, "legend": True, "enabled": True, "selectable": "singleSelect", "selectColor": "#00FFFF"},
+                                  "fill-extrusion": {"color": "#888888", "enabled": False}},
+                                  "properties": {"availableProperties": {
+                                      "Site Number": {
+                                          "key": "Site Number", "type": "string", "values":
+                                                                                         ["02205522", "02208130", "02208150", "02217274", "02218565", "02330450", "02334430", "02334480", "02334578", "02334885", "02335000", "02335350", "02336000", "02336030", "02336120", "02336240", "02336300", "02336313", "02336360", "02336410", "02336526", "02336728", "02337170", "02397000", "02397530", "02423130", "02423397", "02423496", "02455980", "02457595", "02458450", "03306000", "03307000", "03313000", "03428200", "03430200", "03431083", "03431091", "03431514", "0351706800"], "display": False, "tooltip": False, "description": "", "displayName": "Site Number"}}},
+                "vectorFeatureTableGraphs": vectorFeatureTableGraphs,
+                "mapLayerFeatureTableGraphs": mapLayerFeatureTableGraphs
+            }
+        }
+    })
+    return files
+
+
+@click.command()
+@click.argument('tabular_json', type=click.Path(exists=True))
+@click.argument('geojson_file', type=click.Path(exists=True))
+@click.option('--save-path', default='stream_context.json', help='Path to save context JSON.')
+def main(tabular_json, geojson_file, save_path):
+    client = GirderClient(apiUrl='https://data.kitware.com/api/v1')
+    authenticate(client)
+
+    # Set up Girder folders
+    public_folder = get_public_folder(client)
+    stream_folder_id = create_folder(client, public_folder['_id'], 'StreamTemperature')
+
+    # Upload files
+    geojson_url = upload_file(client, stream_folder_id, geojson_file)
+    tabular_url = upload_file(client, stream_folder_id, tabular_json)
+
+    # Load tabular data
+    with open(tabular_json, 'r') as f:
+        tabular_data = json.load(f)
+        for key in tabular_data.keys():
+            base_tab_data = tabular_data[key]
+            break
+    # Create metadata entries
+    graph_style_files = create_graph_metadata(
+        tabular_data=base_tab_data,
+        geojson_url=geojson_url,
+        tabular_url=tabular_url,
+    )
+
+    # Build context
+    context = {
+        "type": "Context",
+        "name": "StreamTemperature",
+        "default_map_center": [37.5, -95.5],
+        "default_map_zoom": 5,
+        "datasets": [
+            {
+                "name": "StreamTemperature Data",
+                "category": "stream_temperature",
+                "description": "Tabular and geojson stream temperature data",
+                "files": graph_style_files
+            }
+        ]
+    }
+
+    # Save context
+    with open(save_path, 'w') as f:
+        json.dump([context], f, indent=2)
+
+    click.echo(f"Context saved to {save_path}")
+
+
+if __name__ == '__main__':
+    main()

From bfbce80080ac0dc945be4b0708907a8029b47bc8 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Sun, 20 Apr 2025 14:34:08 -0400
Subject: [PATCH 5/8] adding basckground for multiple graphs

---
 client/src/MapStore.ts                        |  20 ++
 client/src/api/UVDATApi.ts                    |  40 +++
 .../FeatureSelection/VectorFeatureChart.vue   |   9 +
 .../TabularData/VectorFeatureTableGraph.vue   | 340 ++++++++++++++++++
 client/src/types.ts                           |  22 +-
 client/src/views/HomePage.vue                 |  14 +-
 docker-compose.override.yml                   |   1 -
 docker-compose.prod.yml                       |   1 -
 docker-compose.yml                            |   1 -
 uvdat/core/rest/vector_feature_table_data.py  |  41 +++
 10 files changed, 484 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/TabularData/VectorFeatureTableGraph.vue

diff --git a/client/src/MapStore.ts b/client/src/MapStore.ts
index 495841b..f91ae79 100644
--- a/client/src/MapStore.ts
+++ b/client/src/MapStore.ts
@@ -178,6 +178,26 @@ export default class MapStore {
 
   public static mapLayerFeatureGraphsVisible = ref(false);
 
+  public static vectorFeatureTableGraphVisible = ref(false);
+
+  public static vectorFeatureTableData: Ref<{ layerId: number, vectorFeatureId: number } | null> = ref(null);
+
+  public static setVectorFeatureTableData = (layerId: number, vectorFeatureId: number) => {
+    if (MapStore.mapLayerFeatureGraphsVisible.value) {
+      MapStore.mapLayerFeatureGraphsVisible.value = false;
+    }
+    MapStore.vectorFeatureTableData.value = {
+      layerId,
+      vectorFeatureId,
+    };
+    MapStore.vectorFeatureTableGraphVisible.value = true;
+  };
+
+  public static clearVectorFeatureTableData = () => {
+    MapStore.vectorFeatureTableData.value = null;
+    MapStore.vectorFeatureTableGraphVisible.value = false;
+  };
+
   // Graph color mapping implementation
   public static enabledMapLayerFeatureColorMapping = ref(false);
 
diff --git a/client/src/api/UVDATApi.ts b/client/src/api/UVDATApi.ts
index 58143b7..7825bb7 100644
--- a/client/src/api/UVDATApi.ts
+++ b/client/src/api/UVDATApi.ts
@@ -11,6 +11,8 @@ import {
   DerivedRegion,
   DisplayConfiguration,
   FeatureGraphData,
+  FeatureGraphs,
+  FeatureGraphsRequest,
   FileItem,
   LayerCollection,
   LayerCollectionLayer,
@@ -538,6 +540,44 @@ export default class UVdatApi {
     return response.data;
   }
 
+  public static async getFeatureGraphsData(
+    payload: FeatureGraphsRequest,
+  ): Promise<FeatureGraphs[]> {
+    const {
+      tableTypes,
+      vectorFeatureId,
+      xAxes = ['index'],
+      yAxes = ['mean_va'],
+      indexers = [],
+      display = ['data', 'trendLine'],
+      confidenceLevel = 95,
+      aggregate = false,
+      movingAverage,
+    } = payload;
+
+    const params = new URLSearchParams();
+
+    tableTypes.forEach((type) => params.append('tableType', type));
+    xAxes.forEach((x) => params.append('xAxis', x));
+    yAxes.forEach((y) => params.append('yAxis', y));
+    indexers.forEach((indexer) => params.append('indexer', indexer));
+    display.forEach((d) => params.append('display', d));
+
+    params.append('vectorFeatureId', vectorFeatureId.toString());
+    params.append('confidenceLevel', confidenceLevel.toString());
+    params.append('aggregate', aggregate.toString());
+    if (movingAverage !== undefined) {
+      params.append('movingAverage', movingAverage.toString());
+    }
+
+    const response = await UVdatApi.apiClient.get<FeatureGraphs[]>(
+      '/vectorfeature/tabledata/feature-graphs/',
+      { params },
+    );
+
+    return response.data;
+  }
+
   public static async getMapLayerFeatureGraphData(
     tableType: string,
     mapLayerId: number,
diff --git a/client/src/components/FeatureSelection/VectorFeatureChart.vue b/client/src/components/FeatureSelection/VectorFeatureChart.vue
index 330cf97..5381c23 100644
--- a/client/src/components/FeatureSelection/VectorFeatureChart.vue
+++ b/client/src/components/FeatureSelection/VectorFeatureChart.vue
@@ -6,6 +6,7 @@ import { throttle } from 'lodash';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, VectorFeatureTableGraph } from '../../types';
 import { renderVectorFeatureGraph } from './vectorFeatureGraphUtils';
+import MapStore from '../../MapStore';
 
 export default defineComponent({
   name: 'FeatureGraph',
@@ -156,6 +157,10 @@ export default defineComponent({
       movingAverageValue,
     ], throttledUpateDialogGraph);
 
+    const openBottomGraph = () => {
+      MapStore.setVectorFeatureTableData(props.mapLayerId, props.vectorFeatureId);
+    };
+
     return {
       graphContainer,
       graphDialogContainer,
@@ -170,6 +175,7 @@ export default defineComponent({
       movingAverageEnabled,
       movingAverageValue,
       maxMovingAverage,
+      openBottomGraph,
     };
   },
 });
@@ -186,6 +192,9 @@ export default defineComponent({
       <v-btn color="primary" size="x-small" @click="openDialog">
         View Larger Graph
       </v-btn>
+      <v-btn color="primary" size="x-small" @click="openBottomGraph">
+        Bottom Graph
+      </v-btn>
     </div>
     <svg ref="graphContainer" width="100%" :height="graphData ? 400 : 0" class="selectedFeatureSVG" />
     <v-dialog v-model="dialogVisible" max-width="1200px">
diff --git a/client/src/components/TabularData/VectorFeatureTableGraph.vue b/client/src/components/TabularData/VectorFeatureTableGraph.vue
new file mode 100644
index 0000000..db7b712
--- /dev/null
+++ b/client/src/components/TabularData/VectorFeatureTableGraph.vue
@@ -0,0 +1,340 @@
+<script lang="ts">
+import * as d3 from 'd3';
+import {
+  PropType,
+  Ref,
+  computed,
+  defineComponent,
+  ref,
+  watch,
+} from 'vue';
+import { throttle } from 'lodash';
+import UVdatApi from '../../api/UVDATApi';
+import { FeatureGraphData, FeatureGraphs, FeatureGraphsRequest } from '../../types';
+import MapStore from '../../MapStore';
+import { renderVectorFeatureGraph } from '../FeatureSelection/vectorFeatureGraphUtils';
+
+export default defineComponent({
+  name: 'VectorFeatureTableGraph',
+  props: {
+    vectorFeatureId: {
+      type: Number as PropType<number>,
+      required: true,
+    },
+    mapLayerId: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const selectedGraphs: Ref<string[]> = ref([]);
+    const graphColorMap = ref<Record<string, string>>({});
+    const graphContainer = ref<SVGSVGElement | null>(null);
+    const graphData = ref<FeatureGraphs[]>([]);
+    const loading = ref<boolean>(false);
+    const hideBaseData = ref(false);
+    const trendLine = ref(false);
+    const confidenceIntervalEnabled = ref(false);
+    const confidenceLevel = ref(95);
+    const aggregate = ref(true);
+    const movingAverageEnabled = ref(false);
+    const movingAverageValue = ref(12);
+    // eslint-disable-next-line vue/max-len
+
+    const maxMovingAverage = computed(() => {
+      if (graphData.value) {
+        let max = -Infinity;
+        graphData.value.forEach((graphFeature) => {
+          if (graphFeature.graph.graphs) {
+            Object.values(graphFeature.graph.graphs).forEach((graph) => {
+              const { data } = graph;
+              for (let i = 0; i < data.length; i += 1) {
+                max = Math.max(max, Math.floor(data[i].length / 4));
+              }
+            });
+          }
+        });
+        return max;
+      }
+      return 50;
+    });
+
+    const availableVectorGraphs = computed(() => {
+      const found = MapStore.selectedVectorMapLayers.value.find((item) => item.id === props.mapLayerId);
+      if (found?.default_style.vectorFeatureTableGraphs) {
+        return found.default_style.vectorFeatureTableGraphs;
+      }
+      return [];
+    });
+    const assignGraphColors = () => {
+      graphColorMap.value = {};
+      const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+      availableVectorGraphs.value.forEach((graph) => {
+        if (!graphColorMap.value[graph.name]) {
+          graphColorMap.value[graph.name] = colorScale(graph.name);
+        }
+      });
+    };
+    watch(availableVectorGraphs, () => assignGraphColors());
+
+    // Fetch chart data based on selected layer and chart
+    const fetchMapLayerFeatureGraphData = async () => {
+      const display: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[] = ['data'];
+      if (aggregate.value) {
+        if (trendLine.value) {
+          display.push('trendLine');
+        }
+        if (confidenceIntervalEnabled.value) {
+          display.push('confidenceInterval');
+        }
+        if (movingAverageEnabled.value) {
+          display.push('movingAverage');
+        }
+      } else {
+        hideBaseData.value = false;
+      }
+
+      const baseRequestPayload: FeatureGraphsRequest = {
+        tableTypes: [],
+        vectorFeatureId: props.vectorFeatureId,
+        xAxes: [],
+        yAxes: [],
+        indexers: [],
+        display,
+        confidenceLevel: confidenceLevel.value,
+        aggregate: aggregate.value,
+        movingAverage: movingAverageValue.value,
+
+      };
+      selectedGraphs.value.forEach((name) => {
+        const data = availableVectorGraphs.value.find((graph) => graph.name === name);
+        if (data) {
+          baseRequestPayload.xAxes?.push(data.xAxis);
+          baseRequestPayload.yAxes?.push(data.yAxis);
+          if (data.indexer) {
+            baseRequestPayload.indexers?.push(data.indexer);
+          }
+          baseRequestPayload.tableTypes.push(data.type);
+        }
+      });
+
+      try {
+        loading.value = true;
+        const data = await UVdatApi.getFeatureGraphsData(baseRequestPayload);
+        graphData.value = data;
+        let minGraph = Infinity;
+        let maxGraph = -Infinity;
+        let minGraphY = Infinity;
+        let maxGraphY = -Infinity;
+
+        let steps = Infinity;
+        data.forEach((featureGraph) => {
+          Object.keys(featureGraph.graph).forEach((key) => {
+            const index = parseInt(key, 10);
+            const [min, max] = featureGraph.graph.xAxisRange;
+            const [minY, maxY] = featureGraph.graph.xAxisRange;
+
+            minGraph = Math.min(minGraph, min);
+            maxGraph = Math.max(maxGraph, max);
+            minGraphY = Math.min(minGraphY, minY);
+            maxGraphY = Math.max(maxGraphY, maxY);
+            const stepChartSize = (max - min) / featureGraph.graph.graphs[index].data.length;
+            steps = Math.min(steps, stepChartSize);
+          });
+        });
+        MapStore.updateChartsMinMax(minGraph, maxGraph, steps);
+        const graphRenderData: FeatureGraphData = {
+          table_name: 'Multiple Graphs',
+          xAxisRange: [minGraph, maxGraph],
+          yAxisRange: [minGraphY, maxGraphY],
+          graphs: {},
+        };
+        let xAxisLabel = '';
+        let yAxisLabel = '';
+        data.forEach((featureGraph, index) => {
+          const firstGraph = Object.values(featureGraph.graph.graphs)[0];
+          graphRenderData.graphs[index] = firstGraph;
+          xAxisLabel = featureGraph.xAxis;
+          yAxisLabel = featureGraph.yAxis;
+        });
+        if (graphContainer.value) {
+          const colorMapping = renderVectorFeatureGraph(
+            graphRenderData,
+            graphContainer.value,
+            {
+              xAxisIsTime: xAxisLabel === 'unix_time',
+              xAxisLabel,
+              yAxisLabel,
+              hideBaseData: hideBaseData.value,
+              showTrendline: trendLine.value,
+              showConfidenceInterval: confidenceIntervalEnabled.value,
+              showMovingAverage: movingAverageEnabled.value,
+            },
+            300,
+          );
+          MapStore.mapLayerFeatureColorMapping.value = colorMapping;
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching feature graph data:', error);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // Watch for chart selection change and fetch data automatically
+
+    watch(selectedGraphs, () => {
+      fetchMapLayerFeatureGraphData();
+    });
+
+    const throttledUpateGraph = throttle(fetchMapLayerFeatureGraphData, 500);
+    watch([
+      aggregate,
+      hideBaseData,
+      trendLine,
+      confidenceIntervalEnabled,
+      confidenceLevel,
+      movingAverageEnabled,
+      movingAverageValue,
+    ], throttledUpateGraph);
+
+    return {
+      selectedGraphs,
+      availableVectorGraphs,
+      graphColorMap,
+      graphContainer,
+      fetchMapLayerFeatureGraphData,
+      loading,
+      enabledColorMapping: MapStore.enabledMapLayerFeatureColorMapping,
+      hideBaseData,
+      trendLine,
+      confidenceIntervalEnabled,
+      confidenceLevel,
+      movingAverageEnabled,
+      movingAverageValue,
+      aggregate,
+      maxMovingAverage,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="full-width-card">
+    <v-card-text class="pa-0">
+      <v-container fluid class="pa-0">
+        <v-row no-gutters dense align="center">
+          <v-col cols="3">
+            <v-select
+              v-model="selectedGraphs"
+              :items="availableVectorGraphs"
+              item-value="name"
+              item-title="name"
+              label="Select Graphs"
+              multiple
+              chips
+              closable-chips
+              dense
+              outlined
+              :menu-props="{ maxHeight: 400 }"
+            >
+              <template #chip="{ item }">
+                <v-chip
+                  :style="{ backgroundColor: graphColorMap[item.raw.name], color: 'white' }"
+                  size="small"
+                  label
+                >
+                  {{ item.raw.name }}
+                </v-chip>
+              </template>
+            </v-select>
+          </v-col>
+        </v-row>
+        <v-row v-if="aggregate" dense>
+          <v-col>
+            <v-checkbox v-model="hideBaseData" density="compact" hide-details label="Hide Data" />
+          </v-col>
+          <v-col>
+            <v-checkbox v-model="trendLine" density="compact" hide-details label="TrendLine" />
+          </v-col>
+          <v-col>
+            <v-checkbox v-model="confidenceIntervalEnabled" density="compact" hide-details label="Confidence" />
+            <v-slider
+              v-if="confidenceIntervalEnabled"
+              v-model="confidenceLevel"
+              color="primary"
+              :min="50"
+              step="1"
+              :max="99"
+              :label="`${confidenceLevel.toFixed(1)}%`"
+              hide-details
+            />
+          </v-col>
+          <v-col>
+            <v-checkbox v-model="movingAverageEnabled" density="compact" hide-details label="Moving Average" />
+            <v-slider
+              v-if="movingAverageEnabled"
+              v-model="movingAverageValue"
+              color="primary"
+              :min="2"
+              step="1"
+              :max="maxMovingAverage"
+              :label="movingAverageValue.toFixed(0)"
+              hide-details
+            />
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters justify="center">
+          <v-spacer />
+          <v-progress-circular
+            v-if="loading"
+            indeterminate
+            color="primary"
+            size="256"
+            width="32"
+            style="position:absolute"
+          />
+          <v-spacer />
+        </v-row>
+
+        <v-row no-gutters>
+          <v-col>
+            <svg
+              ref="graphContainer"
+              height="300px"
+              class="selectedFeatureSVG"
+              :style="loading ? 'opacity: 0.2;' : 'opacity: 1.0' "
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.selectedFeatureSVG {
+  width: 100%;
+  height: auto;
+}
+
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  shape-rendering: crispEdges;
+}
+
+.x.axis text,
+.y.axis text {
+  font-size: 12px;
+}
+</style>
diff --git a/client/src/types.ts b/client/src/types.ts
index ce3e3ee..cc2827c 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -792,10 +792,30 @@ export interface VectorFeatureTableGraph {
 
 export type VectorFeatureTableGraphSelected = VectorFeatureTableGraph & { expanded: boolean };
 
+export interface FeatureGraphs {
+  tableType: string;
+  xAxis: string;
+  yAxis: string;
+  indexer: string;
+  graph: FeatureGraphData; // You can replace `any` with your actual graph structure interface
+}
+
+export interface FeatureGraphsRequest {
+  tableTypes: string[];
+  vectorFeatureId: number;
+  xAxes?: string[];
+  yAxes?: string[];
+  indexers?: string[];
+  display?: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[];
+  confidenceLevel?: number;
+  aggregate?: boolean;
+  movingAverage?: number;
+}
+
 export interface FeatureGraphData {
   table_name: string;
   graphs:
-  Record<number | 'all', {
+  Record<number | string | 'all', {
     data:[number, number][];
     vectorFeatureId: number;
     indexer: string | number;
diff --git a/client/src/views/HomePage.vue b/client/src/views/HomePage.vue
index a304e5f..9b882cf 100644
--- a/client/src/views/HomePage.vue
+++ b/client/src/views/HomePage.vue
@@ -13,6 +13,7 @@ import MapTypePicker from '../components/MapTypePicker.vue';
 import SelectedFeatureList from '../components/FeatureSelection/SelectedFeatureList.vue';
 import Charts from '../components/Charts/Charts.vue';
 import MapLayerTableGraph from '../components/TabularData/MapLayerTableGraph.vue';
+import VectorFeatureTableGraph from '../components/TabularData/VectorFeatureTableGraph.vue';
 import UVdatApi from '../api/UVDATApi';
 import VectorFeatureSearch from '../components/VectorFeatureSearch/VectorFeatureSearch.vue';
 // eslint-disable-next-line import/no-cycle
@@ -28,6 +29,7 @@ export default defineComponent({
     SelectedFeatureList,
     Charts,
     MapLayerTableGraph,
+    VectorFeatureTableGraph,
     VectorFeatureSearch,
   },
   setup() {
@@ -81,6 +83,9 @@ export default defineComponent({
     const toggleMapLayerVectorGraphs = () => {
       if (MapStore.mapLayerFeatureGraphs.value.length) {
         MapStore.mapLayerFeatureGraphsVisible.value = !MapStore.mapLayerFeatureGraphsVisible.value;
+        if (MapStore.mapLayerFeatureGraphsVisible.value) {
+          MapStore.vectorFeatureTableGraphVisible.value = false;
+        }
       }
     };
 
@@ -143,6 +148,8 @@ export default defineComponent({
       hasMapLayerVectorGraphs,
       toggleMapLayerVectorGraphs,
       mapLayerVectorGraphsVisible: MapStore.mapLayerFeatureGraphsVisible,
+      vectorFeatureTableGraphVisible: MapStore.vectorFeatureTableGraphVisible,
+      vectorFeatureTableData: MapStore.vectorFeatureTableData,
       mapLayerFeatureGraphs: MapStore.mapLayerFeatureGraphs,
       mapLayerVectorSearch: MapStore.mapLayerVectorSearchable,
       hasVectorFeatureSearch,
@@ -320,7 +327,12 @@ export default defineComponent({
     <v-row v-if="!loading" dense class="fill-height">
       <v-col class="d-flex flex-column fill-height" style="min-height: 90vh">
         <MapVue />
-        <MapLayerTableGraph v-if="mapLayerVectorGraphsVisible && mapLayerFeatureGraphs.length" />
+        <MapLayerTableGraph
+          v-if="mapLayerVectorGraphsVisible && mapLayerFeatureGraphs.length" />
+        <VectorFeatureTableGraph
+          v-else-if="vectorFeatureTableGraphVisible && vectorFeatureTableData"
+          :map-layer-id="vectorFeatureTableData.layerId"
+          :vector-feature-id="vectorFeatureTableData.vectorFeatureId" />
       </v-col>
     </v-row>
     <selected-feature-list />
diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index a13b5e3..0e09f3f 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -1,4 +1,3 @@
-version: '3'
 services:
   django:
     build:
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index a236dde..a6ca49b 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -1,4 +1,3 @@
-version: '3'
 services:
   django:
     build:
diff --git a/docker-compose.yml b/docker-compose.yml
index 250857f..aebe9a8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3'
 services:
   postgres:
     image: postgis/postgis:14-3.3
diff --git a/uvdat/core/rest/vector_feature_table_data.py b/uvdat/core/rest/vector_feature_table_data.py
index 28723da..a4033dd 100644
--- a/uvdat/core/rest/vector_feature_table_data.py
+++ b/uvdat/core/rest/vector_feature_table_data.py
@@ -320,6 +320,47 @@ def feature_graph(self, request, *args, **kwargs):
         )
         return Response(graphs, status=status.HTTP_200_OK)
 
+@action(detail=False, methods=['get'], url_path='feature-graphs')
+def feature_graphs(self, request, *args, **kwargs):
+    table_types = request.query_params.getlist('tableType')  # List of table types
+    vector_feature = request.query_params.get('vectorFeatureId')
+    x_axes = request.query_params.getlist('xAxis') or ['index']
+    y_axes = request.query_params.getlist('yAxis') or ['00060']
+    indexers = request.query_params.getlist('indexer') or ['vectorFeatureId']
+    moving_average_window = request.query_params.get('movingAverage', None)
+    confidence_interval = request.query_params.get('confidenceLevel', 95)
+    display = request.query_params.getlist('display', ['data'])
+
+    if not table_types:
+        return Response({'error': 'tableType is required'}, status=status.HTTP_400_BAD_REQUEST)
+
+    # Pad indexers if not all provided
+    while len(indexers) < len(table_types):
+        indexers.append('vectorFeatureId')
+
+    result = []
+
+    for i, (table_type, x_axis, y_axis, indexer) in enumerate(zip(table_types, x_axes, y_axes, indexers)):
+        graphs = self.get_graphs(
+            table_type=table_type,
+            vector_ids=[vector_feature],
+            x_axis=x_axis,
+            y_axis=y_axis,
+            indexer=indexer,
+            moving_avg_window=moving_average_window,
+            confidence_level=confidence_interval,
+            data_types=display,
+        )
+        result.append({
+            'tableType': table_type,
+            'xAxis': x_axis,
+            'yAxis': y_axis,
+            'indexer': indexer,
+            'graphs': graphs,
+        })
+
+    return Response(result, status=status.HTTP_200_OK)
+
     @action(detail=False, methods=['get'], url_path='map-layer-feature-graph')
     def map_layer_feature_graph(self, request, *args, **kwargs):
         table_type = request.query_params.get('tableType')  # Required

From e641ab996879b6cd8f5954dcd213bf9988a21194 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 21 Apr 2025 10:48:51 -0400
Subject: [PATCH 6/8] multi-graph tool

---
 client/src/MapStore.ts                        |  7 +-
 .../FeatureSelection/VectorFeatureChart.vue   |  7 +-
 .../vectorFeatureGraphUtils.ts                | 14 ++-
 .../src/components/MapLegends/ControlsKey.vue | 14 ++-
 .../TabularData/VectorFeatureTableGraph.vue   | 90 ++++++++++++++++---
 client/src/types.ts                           |  2 +-
 client/src/views/HomePage.vue                 |  7 +-
 uvdat/core/rest/vector_feature_table_data.py  | 80 ++++++++---------
 8 files changed, 152 insertions(+), 69 deletions(-)

diff --git a/client/src/MapStore.ts b/client/src/MapStore.ts
index f91ae79..90de437 100644
--- a/client/src/MapStore.ts
+++ b/client/src/MapStore.ts
@@ -180,15 +180,16 @@ export default class MapStore {
 
   public static vectorFeatureTableGraphVisible = ref(false);
 
-  public static vectorFeatureTableData: Ref<{ layerId: number, vectorFeatureId: number } | null> = ref(null);
+  public static vectorFeatureTableData: Ref<{ layerId: number, vectorFeatureId: number, defaultGraphs?: string[] } | null> = ref(null);
 
-  public static setVectorFeatureTableData = (layerId: number, vectorFeatureId: number) => {
+  public static setVectorFeatureTableData = (layerId: number, vectorFeatureId: number, defaultGraphs?: string[]) => {
     if (MapStore.mapLayerFeatureGraphsVisible.value) {
       MapStore.mapLayerFeatureGraphsVisible.value = false;
     }
     MapStore.vectorFeatureTableData.value = {
       layerId,
       vectorFeatureId,
+      defaultGraphs,
     };
     MapStore.vectorFeatureTableGraphVisible.value = true;
   };
@@ -408,7 +409,7 @@ export default class MapStore {
         globalMax = Math.max(globalMax, max);
       }
     });
-    if (MapStore.mapLayerFeatureGraphsVisible.value && MapStore.mapLayerFeatureGraphs.value.length) {
+    if ((MapStore.mapLayerFeatureGraphsVisible.value && MapStore.mapLayerFeatureGraphs.value.length) || MapStore.vectorFeatureTableGraphVisible.value) {
       globalMin = Math.min(globalMin, MapStore.graphChartsMinMax.value.min);
       globalMax = Math.max(globalMax, MapStore.graphChartsMinMax.value.max);
       stepSize = Math.min(stepSize, MapStore.graphChartsMinMax.value.stepSize);
diff --git a/client/src/components/FeatureSelection/VectorFeatureChart.vue b/client/src/components/FeatureSelection/VectorFeatureChart.vue
index 5381c23..453219f 100644
--- a/client/src/components/FeatureSelection/VectorFeatureChart.vue
+++ b/client/src/components/FeatureSelection/VectorFeatureChart.vue
@@ -158,7 +158,7 @@ export default defineComponent({
     ], throttledUpateDialogGraph);
 
     const openBottomGraph = () => {
-      MapStore.setVectorFeatureTableData(props.mapLayerId, props.vectorFeatureId);
+      MapStore.setVectorFeatureTableData(props.mapLayerId, props.vectorFeatureId, [props.graphInfo.name]);
     };
 
     return {
@@ -189,11 +189,8 @@ export default defineComponent({
       </v-alert>
     </div>
     <div v-if="graphData">
-      <v-btn color="primary" size="x-small" @click="openDialog">
-        View Larger Graph
-      </v-btn>
       <v-btn color="primary" size="x-small" @click="openBottomGraph">
-        Bottom Graph
+        View Larger Graph
       </v-btn>
     </div>
     <svg ref="graphContainer" width="100%" :height="graphData ? 400 : 0" class="selectedFeatureSVG" />
diff --git a/client/src/components/FeatureSelection/vectorFeatureGraphUtils.ts b/client/src/components/FeatureSelection/vectorFeatureGraphUtils.ts
index 4194b20..71c9cad 100644
--- a/client/src/components/FeatureSelection/vectorFeatureGraphUtils.ts
+++ b/client/src/components/FeatureSelection/vectorFeatureGraphUtils.ts
@@ -7,7 +7,7 @@ const renderVectorFeatureGraph = (
   container: SVGSVGElement,
   options?: {
     specificGraphKey?: number;
-    colors?: Record<number, string>;
+    colors?: Record<number | string, string>;
     xAxisLabel?: string;
     yAxisLabel?: string;
     showXYValuesOnHover?: boolean;
@@ -21,10 +21,11 @@ const renderVectorFeatureGraph = (
     showTrendline?: boolean;
     showMovingAverage?: boolean;
     showConfidenceInterval?: boolean;
+    useKeyTooltip?: boolean;
   },
   baseHeight = 400,
 ) => {
-  const outputColorMapping: Record<number, string> = {};
+  const outputColorMapping: Record<number | string, string> = {};
   const localContainer = container;
   if (!localContainer || !data) return outputColorMapping;
 
@@ -94,7 +95,12 @@ const renderVectorFeatureGraph = (
   const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
 
   const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
-  const graphKeys = Object.keys(graphsToRender).map(Number);
+  const graphKeys = Object.keys(graphsToRender).map((item) => {
+    if (!Number.isNaN(parseInt(item, 10))) {
+      return parseInt(item, 10);
+    }
+    return item;
+  });
   const tooltipGroup = g.append('g')
     .attr('opacity', 0)
     .attr('pointer-events', 'none');
@@ -148,7 +154,7 @@ const renderVectorFeatureGraph = (
         .on('mousemove', (event) => {
           const [mouseX, mouseY] = d3.pointer(event);
 
-          const tooltipTextContent = graph.indexer.toString();
+          const tooltipTextContent = options?.useKeyTooltip ? key.toString() : graph.indexer.toString();
           tooltipText.text(tooltipTextContent)
             .call((text) => {
               // Adjust the background size based on text width
diff --git a/client/src/components/MapLegends/ControlsKey.vue b/client/src/components/MapLegends/ControlsKey.vue
index ac686d9..ca11a34 100644
--- a/client/src/components/MapLegends/ControlsKey.vue
+++ b/client/src/components/MapLegends/ControlsKey.vue
@@ -225,6 +225,17 @@ export default defineComponent({
         }
       });
     });
+
+    const globalTimeEnabled = computed(() => {
+      let enabled = false;
+      if (props.netcdfLayers.length > 0) {
+        enabled = props.netcdfLayers.some((layer) => layer.sliding !== undefined && layer.sliding.variable === 'time');
+      }
+      if (MapStore.vectorFeatureTableGraphVisible.value || MapStore.mapLayerFeatureGraphsVisible.value) {
+        enabled = true;
+      }
+      return enabled;
+    });
     return {
       processedLayers,
       iconMapper,
@@ -232,13 +243,14 @@ export default defineComponent({
       throttledUpdateNetCDFLayer,
       stepMapping,
       toggleResampling,
+      globalTimeEnabled,
     };
   },
 });
 </script>
 
 <template>
-  <v-card class="pa-0 ma-0 mb-2">
+  <v-card v-if="globalTimeEnabled" class="pa-0 ma-0 mb-2">
     <v-card-text class="pa-0 ma-0">
       <global-time />
     </v-card-text>
diff --git a/client/src/components/TabularData/VectorFeatureTableGraph.vue b/client/src/components/TabularData/VectorFeatureTableGraph.vue
index db7b712..5896f74 100644
--- a/client/src/components/TabularData/VectorFeatureTableGraph.vue
+++ b/client/src/components/TabularData/VectorFeatureTableGraph.vue
@@ -5,15 +5,17 @@ import {
   Ref,
   computed,
   defineComponent,
+  onMounted,
   ref,
   watch,
 } from 'vue';
-import { throttle } from 'lodash';
+import { first, throttle } from 'lodash';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, FeatureGraphs, FeatureGraphsRequest } from '../../types';
 import MapStore from '../../MapStore';
 import { renderVectorFeatureGraph } from '../FeatureSelection/vectorFeatureGraphUtils';
 
+const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 export default defineComponent({
   name: 'VectorFeatureTableGraph',
   props: {
@@ -25,6 +27,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    defaultGraphs: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
   },
 
   setup(props) {
@@ -46,8 +52,8 @@ export default defineComponent({
       if (graphData.value) {
         let max = -Infinity;
         graphData.value.forEach((graphFeature) => {
-          if (graphFeature.graph.graphs) {
-            Object.values(graphFeature.graph.graphs).forEach((graph) => {
+          if (graphFeature.graphs.graphs) {
+            Object.values(graphFeature.graphs.graphs).forEach((graph) => {
               const { data } = graph;
               for (let i = 0; i < data.length; i += 1) {
                 max = Math.max(max, Math.floor(data[i].length / 4));
@@ -69,15 +75,13 @@ export default defineComponent({
     });
     const assignGraphColors = () => {
       graphColorMap.value = {};
-      const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
       availableVectorGraphs.value.forEach((graph) => {
         if (!graphColorMap.value[graph.name]) {
           graphColorMap.value[graph.name] = colorScale(graph.name);
         }
       });
     };
-    watch(availableVectorGraphs, () => assignGraphColors());
-
+    watch(availableVectorGraphs, () => assignGraphColors(), { immediate: true });
     // Fetch chart data based on selected layer and chart
     const fetchMapLayerFeatureGraphData = async () => {
       const display: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[] = ['data'];
@@ -107,6 +111,13 @@ export default defineComponent({
         movingAverage: movingAverageValue.value,
 
       };
+      const graphNames: { name: string, type: string, xAxis: string, yAxis: string }[] = [];
+      if (selectedGraphs.value.length === 0) {
+        graphContainer.value?.setAttribute('style', 'display: none;');
+        return;
+      }
+      graphContainer.value?.setAttribute('style', 'display: inline;');
+
       selectedGraphs.value.forEach((name) => {
         const data = availableVectorGraphs.value.find((graph) => graph.name === name);
         if (data) {
@@ -116,6 +127,12 @@ export default defineComponent({
             baseRequestPayload.indexers?.push(data.indexer);
           }
           baseRequestPayload.tableTypes.push(data.type);
+          graphNames.push({
+            name: data.name,
+            type: data.type,
+            xAxis: data.xAxis,
+            yAxis: data.yAxis,
+          });
         }
       });
 
@@ -130,19 +147,20 @@ export default defineComponent({
 
         let steps = Infinity;
         data.forEach((featureGraph) => {
-          Object.keys(featureGraph.graph).forEach((key) => {
+          Object.keys(featureGraph.graphs.graphs).forEach((key) => {
             const index = parseInt(key, 10);
-            const [min, max] = featureGraph.graph.xAxisRange;
-            const [minY, maxY] = featureGraph.graph.xAxisRange;
+            const [min, max] = featureGraph.graphs.xAxisRange;
+            const [minY, maxY] = featureGraph.graphs.xAxisRange;
 
             minGraph = Math.min(minGraph, min);
             maxGraph = Math.max(maxGraph, max);
             minGraphY = Math.min(minGraphY, minY);
             maxGraphY = Math.max(maxGraphY, maxY);
-            const stepChartSize = (max - min) / featureGraph.graph.graphs[index].data.length;
+            const stepChartSize = (max - min) / featureGraph.graphs.graphs[index].data.length;
             steps = Math.min(steps, stepChartSize);
           });
         });
+        console.log('minGraph', minGraph, 'maxGraph', maxGraph, 'steps', steps);
         MapStore.updateChartsMinMax(minGraph, maxGraph, steps);
         const graphRenderData: FeatureGraphData = {
           table_name: 'Multiple Graphs',
@@ -153,8 +171,14 @@ export default defineComponent({
         let xAxisLabel = '';
         let yAxisLabel = '';
         data.forEach((featureGraph, index) => {
-          const firstGraph = Object.values(featureGraph.graph.graphs)[0];
-          graphRenderData.graphs[index] = firstGraph;
+          const firstGraph = Object.values(featureGraph.graphs.graphs)[0];
+          const { xAxis, yAxis, tableType } = featureGraph;
+          const foundName = graphNames.find((name) => name.xAxis === xAxis && name.yAxis === yAxis && name.type === tableType);
+          let name: string | number = index;
+          if (foundName) {
+            name = foundName.name;
+          }
+          graphRenderData.graphs[name] = firstGraph;
           xAxisLabel = featureGraph.xAxis;
           yAxisLabel = featureGraph.yAxis;
         });
@@ -166,10 +190,12 @@ export default defineComponent({
               xAxisIsTime: xAxisLabel === 'unix_time',
               xAxisLabel,
               yAxisLabel,
+              colors: graphColorMap.value,
               hideBaseData: hideBaseData.value,
               showTrendline: trendLine.value,
               showConfidenceInterval: confidenceIntervalEnabled.value,
               showMovingAverage: movingAverageEnabled.value,
+              useKeyTooltip: true,
             },
             300,
           );
@@ -183,11 +209,26 @@ export default defineComponent({
       }
     };
 
+    onMounted(() => {
+      assignGraphColors();
+      if (availableVectorGraphs.value.length > 0 && props.defaultGraphs.length > 0) {
+        selectedGraphs.value = props.defaultGraphs;
+      }
+      fetchMapLayerFeatureGraphData();
+    });
+
+    watch(() => props.defaultGraphs, (newValue) => {
+      if (newValue.length > 0) {
+        selectedGraphs.value = newValue;
+      }
+      fetchMapLayerFeatureGraphData();
+    }, { immediate: true });
+
     // Watch for chart selection change and fetch data automatically
 
     watch(selectedGraphs, () => {
       fetchMapLayerFeatureGraphData();
-    });
+    }, { deep: true });
 
     const throttledUpateGraph = throttle(fetchMapLayerFeatureGraphData, 500);
     watch([
@@ -200,6 +241,18 @@ export default defineComponent({
       movingAverageValue,
     ], throttledUpateGraph);
 
+    const removeChip = (item: { raw: { name: string } }) => {
+      const index = selectedGraphs.value.indexOf(item.raw.name);
+      if (index > -1) {
+        selectedGraphs.value.splice(index, 1);
+      }
+      fetchMapLayerFeatureGraphData();
+    };
+
+    const closeVectorFeatureGraph = () => {
+      MapStore.clearVectorFeatureTableData();
+    };
+
     return {
       selectedGraphs,
       availableVectorGraphs,
@@ -216,6 +269,8 @@ export default defineComponent({
       movingAverageValue,
       aggregate,
       maxMovingAverage,
+      removeChip,
+      closeVectorFeatureGraph,
     };
   },
 });
@@ -236,6 +291,7 @@ export default defineComponent({
               multiple
               chips
               closable-chips
+              clearable
               dense
               outlined
               :menu-props="{ maxHeight: 400 }"
@@ -245,12 +301,20 @@ export default defineComponent({
                   :style="{ backgroundColor: graphColorMap[item.raw.name], color: 'white' }"
                   size="small"
                   label
+                  @click:close="removeChip(item)"
                 >
                   {{ item.raw.name }}
                 </v-chip>
               </template>
             </v-select>
           </v-col>
+          <v-spacer />
+          <v-icon
+            size="x-large"
+            @click="closeVectorFeatureGraph()"
+          >
+            mdi-close
+          </v-icon>
         </v-row>
         <v-row v-if="aggregate" dense>
           <v-col>
diff --git a/client/src/types.ts b/client/src/types.ts
index cc2827c..5c3f1eb 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -797,7 +797,7 @@ export interface FeatureGraphs {
   xAxis: string;
   yAxis: string;
   indexer: string;
-  graph: FeatureGraphData; // You can replace `any` with your actual graph structure interface
+  graphs: FeatureGraphData; // You can replace `any` with your actual graph structure interface
 }
 
 export interface FeatureGraphsRequest {
diff --git a/client/src/views/HomePage.vue b/client/src/views/HomePage.vue
index 9b882cf..90b52ce 100644
--- a/client/src/views/HomePage.vue
+++ b/client/src/views/HomePage.vue
@@ -328,11 +328,14 @@ export default defineComponent({
       <v-col class="d-flex flex-column fill-height" style="min-height: 90vh">
         <MapVue />
         <MapLayerTableGraph
-          v-if="mapLayerVectorGraphsVisible && mapLayerFeatureGraphs.length" />
+          v-if="mapLayerVectorGraphsVisible && mapLayerFeatureGraphs.length"
+        />
         <VectorFeatureTableGraph
           v-else-if="vectorFeatureTableGraphVisible && vectorFeatureTableData"
           :map-layer-id="vectorFeatureTableData.layerId"
-          :vector-feature-id="vectorFeatureTableData.vectorFeatureId" />
+          :vector-feature-id="vectorFeatureTableData.vectorFeatureId"
+          :default-graphs="vectorFeatureTableData.defaultGraphs"
+        />
       </v-col>
     </v-row>
     <selected-feature-list />
diff --git a/uvdat/core/rest/vector_feature_table_data.py b/uvdat/core/rest/vector_feature_table_data.py
index a4033dd..268a014 100644
--- a/uvdat/core/rest/vector_feature_table_data.py
+++ b/uvdat/core/rest/vector_feature_table_data.py
@@ -320,46 +320,46 @@ def feature_graph(self, request, *args, **kwargs):
         )
         return Response(graphs, status=status.HTTP_200_OK)
 
-@action(detail=False, methods=['get'], url_path='feature-graphs')
-def feature_graphs(self, request, *args, **kwargs):
-    table_types = request.query_params.getlist('tableType')  # List of table types
-    vector_feature = request.query_params.get('vectorFeatureId')
-    x_axes = request.query_params.getlist('xAxis') or ['index']
-    y_axes = request.query_params.getlist('yAxis') or ['00060']
-    indexers = request.query_params.getlist('indexer') or ['vectorFeatureId']
-    moving_average_window = request.query_params.get('movingAverage', None)
-    confidence_interval = request.query_params.get('confidenceLevel', 95)
-    display = request.query_params.getlist('display', ['data'])
-
-    if not table_types:
-        return Response({'error': 'tableType is required'}, status=status.HTTP_400_BAD_REQUEST)
-
-    # Pad indexers if not all provided
-    while len(indexers) < len(table_types):
-        indexers.append('vectorFeatureId')
-
-    result = []
-
-    for i, (table_type, x_axis, y_axis, indexer) in enumerate(zip(table_types, x_axes, y_axes, indexers)):
-        graphs = self.get_graphs(
-            table_type=table_type,
-            vector_ids=[vector_feature],
-            x_axis=x_axis,
-            y_axis=y_axis,
-            indexer=indexer,
-            moving_avg_window=moving_average_window,
-            confidence_level=confidence_interval,
-            data_types=display,
-        )
-        result.append({
-            'tableType': table_type,
-            'xAxis': x_axis,
-            'yAxis': y_axis,
-            'indexer': indexer,
-            'graphs': graphs,
-        })
-
-    return Response(result, status=status.HTTP_200_OK)
+    @action(detail=False, methods=['get'], url_path='feature-graphs')
+    def feature_graphs(self, request, *args, **kwargs):
+        table_types = request.query_params.getlist('tableType')  # List of table types
+        vector_feature = request.query_params.get('vectorFeatureId')
+        x_axes = request.query_params.getlist('xAxis') or ['index']
+        y_axes = request.query_params.getlist('yAxis') or ['00060']
+        indexers = request.query_params.getlist('indexer') or ['vectorFeatureId']
+        moving_average_window = request.query_params.get('movingAverage', None)
+        confidence_interval = request.query_params.get('confidenceLevel', 95)
+        display = request.query_params.getlist('display', ['data'])
+
+        if not table_types:
+            return Response({'error': 'tableType is required'}, status=status.HTTP_400_BAD_REQUEST)
+
+        # Pad indexers if not all provided
+        while len(indexers) < len(table_types):
+            indexers.append('vectorFeatureId')
+
+        result = []
+
+        for i, (table_type, x_axis, y_axis, indexer) in enumerate(zip(table_types, x_axes, y_axes, indexers)):
+            graphs = self.get_graphs(
+                table_type=table_type,
+                vector_ids=[vector_feature],
+                x_axis=x_axis,
+                y_axis=y_axis,
+                indexer=indexer,
+                moving_avg_window=moving_average_window,
+                confidence_level=confidence_interval,
+                data_types=display,
+            )
+            result.append({
+                'tableType': table_type,
+                'xAxis': x_axis,
+                'yAxis': y_axis,
+                'indexer': indexer,
+                'graphs': graphs,
+            })
+
+        return Response(result, status=status.HTTP_200_OK)
 
     @action(detail=False, methods=['get'], url_path='map-layer-feature-graph')
     def map_layer_feature_graph(self, request, *args, **kwargs):

From d0e7c53968dc0301f14f60c43234f887b1d217be Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 21 Apr 2025 10:56:06 -0400
Subject: [PATCH 7/8] multi-graph tool

---
 .../src/components/MapLegends/GlobalTime.vue  |  1 -
 .../TabularData/VectorFeatureTableGraph.vue   |  3 +--
 uvdat/core/rest/vector_feature_table_data.py  | 20 +++++++++++--------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/src/components/MapLegends/GlobalTime.vue b/client/src/components/MapLegends/GlobalTime.vue
index d1d5795..149431f 100644
--- a/client/src/components/MapLegends/GlobalTime.vue
+++ b/client/src/components/MapLegends/GlobalTime.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MapStore from '../../MapStore';
-import { min } from 'd3';
 
 export default defineComponent({
   name: 'GlobalTime',
diff --git a/client/src/components/TabularData/VectorFeatureTableGraph.vue b/client/src/components/TabularData/VectorFeatureTableGraph.vue
index 5896f74..cb860fd 100644
--- a/client/src/components/TabularData/VectorFeatureTableGraph.vue
+++ b/client/src/components/TabularData/VectorFeatureTableGraph.vue
@@ -9,7 +9,7 @@ import {
   ref,
   watch,
 } from 'vue';
-import { first, throttle } from 'lodash';
+import { throttle } from 'lodash';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, FeatureGraphs, FeatureGraphsRequest } from '../../types';
 import MapStore from '../../MapStore';
@@ -160,7 +160,6 @@ export default defineComponent({
             steps = Math.min(steps, stepChartSize);
           });
         });
-        console.log('minGraph', minGraph, 'maxGraph', maxGraph, 'steps', steps);
         MapStore.updateChartsMinMax(minGraph, maxGraph, steps);
         const graphRenderData: FeatureGraphData = {
           table_name: 'Multiple Graphs',
diff --git a/uvdat/core/rest/vector_feature_table_data.py b/uvdat/core/rest/vector_feature_table_data.py
index 268a014..c789c7b 100644
--- a/uvdat/core/rest/vector_feature_table_data.py
+++ b/uvdat/core/rest/vector_feature_table_data.py
@@ -340,7 +340,9 @@ def feature_graphs(self, request, *args, **kwargs):
 
         result = []
 
-        for i, (table_type, x_axis, y_axis, indexer) in enumerate(zip(table_types, x_axes, y_axes, indexers)):
+        for _i, (table_type, x_axis, y_axis, indexer) in enumerate(
+            zip(table_types, x_axes, y_axes, indexers)
+        ):
             graphs = self.get_graphs(
                 table_type=table_type,
                 vector_ids=[vector_feature],
@@ -351,13 +353,15 @@ def feature_graphs(self, request, *args, **kwargs):
                 confidence_level=confidence_interval,
                 data_types=display,
             )
-            result.append({
-                'tableType': table_type,
-                'xAxis': x_axis,
-                'yAxis': y_axis,
-                'indexer': indexer,
-                'graphs': graphs,
-            })
+            result.append(
+                {
+                    'tableType': table_type,
+                    'xAxis': x_axis,
+                    'yAxis': y_axis,
+                    'indexer': indexer,
+                    'graphs': graphs,
+                }
+            )
 
         return Response(result, status=status.HTTP_200_OK)
 

From 5dcbbf1ff7b0334cd69cdac381f1951de88b9cac Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 22 Apr 2025 08:16:18 -0400
Subject: [PATCH 8/8] enable time for netcdf only

---
 client/src/components/MapLegends/ControlsKey.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/MapLegends/ControlsKey.vue b/client/src/components/MapLegends/ControlsKey.vue
index ca11a34..d15b2bc 100644
--- a/client/src/components/MapLegends/ControlsKey.vue
+++ b/client/src/components/MapLegends/ControlsKey.vue
@@ -229,9 +229,6 @@ export default defineComponent({
     const globalTimeEnabled = computed(() => {
       let enabled = false;
       if (props.netcdfLayers.length > 0) {
-        enabled = props.netcdfLayers.some((layer) => layer.sliding !== undefined && layer.sliding.variable === 'time');
-      }
-      if (MapStore.vectorFeatureTableGraphVisible.value || MapStore.mapLayerFeatureGraphsVisible.value) {
         enabled = true;
       }
       return enabled;