From 9ac601aaef7923fa0918b4e90a1a1008fbc764d2 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 12 Feb 2025 13:04:40 -0500
Subject: [PATCH] initial vector feature table rendering

---
 client/src/api/UVDATApi.ts                    |  27 ++
 ...tureChart.vue => PropertyFeatureChart.vue} |   2 +-
 .../FeatureSelection/SelectedFeature.vue      |  37 ++-
 .../FeatureSelection/VectorFeatureChart.vue   | 200 ++++++++++++++
 .../Metadata/FeatureChartEditor.vue           |   6 +-
 client/src/components/PropertiesConfig.vue    |  19 +-
 .../components/TabularData/TableSummary.vue   | 253 ++++++++++++++++++
 client/src/types.ts                           |  66 +++++
 sample_data/fire.json                         |  64 +++++
 uvdat/core/rest/map_layers.py                 |   2 +-
 uvdat/core/rest/netcdf.py                     |  12 +-
 uvdat/core/rest/vector_feature_table_data.py  | 224 +++++++++++++---
 uvdat/core/tasks/netcdf.py                    |  36 ++-
 13 files changed, 887 insertions(+), 61 deletions(-)
 rename client/src/components/FeatureSelection/{RenderFeatureChart.vue => PropertyFeatureChart.vue} (98%)
 create mode 100644 client/src/components/FeatureSelection/VectorFeatureChart.vue
 create mode 100644 client/src/components/TabularData/TableSummary.vue
 create mode 100644 sample_data/fire.json

diff --git a/client/src/api/UVDATApi.ts b/client/src/api/UVDATApi.ts
index 197eeda..e511268 100644
--- a/client/src/api/UVDATApi.ts
+++ b/client/src/api/UVDATApi.ts
@@ -8,6 +8,7 @@ import {
   ContextWithIds,
   Dataset,
   DerivedRegion,
+  FeatureGraphData,
   FileItem,
   LayerCollection,
   LayerCollectionLayer,
@@ -21,6 +22,7 @@ import {
   RasterData,
   RasterMapLayer,
   SimulationType,
+  TableSummary,
   VectorMapLayer,
 } from '../types';
 
@@ -494,4 +496,29 @@ export default class UVdatApi {
   public static async deleteContext(contextId: number): Promise<{ detail: string }> {
     return (await UVdatApi.apiClient.delete(`/contexts/${contextId}/`)).data;
   }
+
+  public static async getVectorTableSummary(layerId: number): Promise<TableSummary> {
+    return (await UVdatApi.apiClient.get('/vectorfeature/tabledata/table-summary/', { params: { layerId } })).data;
+  }
+
+  public static async getFeatureGraphData(
+    tableType: string,
+    vectorFeatureId: number,
+    xAxis: string = 'index',
+    yAxis: string = 'mean_va',
+    filter?: string,
+    filterVal?: string,
+  ): Promise<FeatureGraphData> {
+    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/feature-graph/', {
+      params: {
+        tableType,
+        vectorFeatureId,
+        xAxis,
+        yAxis,
+        filter,
+        filterVal,
+      },
+    });
+    return response.data;
+  }
 }
diff --git a/client/src/components/FeatureSelection/RenderFeatureChart.vue b/client/src/components/FeatureSelection/PropertyFeatureChart.vue
similarity index 98%
rename from client/src/components/FeatureSelection/RenderFeatureChart.vue
rename to client/src/components/FeatureSelection/PropertyFeatureChart.vue
index 5fd08b3..80e285e 100644
--- a/client/src/components/FeatureSelection/RenderFeatureChart.vue
+++ b/client/src/components/FeatureSelection/PropertyFeatureChart.vue
@@ -7,7 +7,7 @@ import { drawBarChart } from '../Metadata/drawChart';
 
 // FeatureChart TypeScript interface (as provided)
 export default defineComponent({
-  name: 'RenderFeatureChart',
+  name: 'PropertyFeatureChart',
   props: {
     featureChart: {
       type: Object as PropType<FeatureChartWithData>,
diff --git a/client/src/components/FeatureSelection/SelectedFeature.vue b/client/src/components/FeatureSelection/SelectedFeature.vue
index 1838195..6b30e08 100644
--- a/client/src/components/FeatureSelection/SelectedFeature.vue
+++ b/client/src/components/FeatureSelection/SelectedFeature.vue
@@ -3,13 +3,15 @@ import {
   PropType, Ref, computed, defineComponent, onMounted, ref,
 } from 'vue';
 import MapStore from '../../MapStore';
-import { ClickedProps, FeatureChartWithData } from '../../types';
+import { ClickedProps, FeatureChartWithData, VectorFeatureTableGraph } from '../../types';
 import { colorGenerator } from '../../map/mapColors';
-import RenderFeatureChart from './RenderFeatureChart.vue';
+import PropertyFeatureChart from './PropertyFeatureChart.vue';
+import VectorFeatureChart from './VectorFeatureChart.vue';
 
 export default defineComponent({
   components: {
-    RenderFeatureChart,
+    PropertyFeatureChart,
+    VectorFeatureChart,
   },
   props: {
     data: {
@@ -28,6 +30,8 @@ export default defineComponent({
     const mapLayerId = ref(props.data.layerId);
     const featureId = ref(props.data.id as number);
     const enabledChartPanels: Ref<number[]> = ref([]);
+    const enabledVectorChartPanel: Ref<number[]> = ref([]);
+    const vectorGraphs: Ref<VectorFeatureTableGraph[]> = ref([]);
     const processLayerProps = () => {
       const found = MapStore.selectedVectorMapLayers.value.find((item) => item.id === props.data.layerId);
       if (found?.default_style.properties) {
@@ -65,6 +69,9 @@ export default defineComponent({
           });
         }
       }
+      if (found?.default_style.vectorFeatureTableGraphs) {
+        vectorGraphs.value = found.default_style.vectorFeatureTableGraphs;
+      }
     };
     onMounted(() => processLayerProps());
 
@@ -81,8 +88,10 @@ export default defineComponent({
       featureId,
       featureCharts,
       enabledChartPanels,
+      enabledVectorChartPanel,
       selectedFeatureExpanded,
       toggleFeatureExpaned,
+      vectorGraphs,
     };
   },
 });
@@ -137,7 +146,24 @@ export default defineComponent({
             </v-icon> {{ featureChart.name }}
           </v-expansion-panel-title>
           <v-expansion-panel-text>
-            <render-feature-chart :feature-chart="featureChart" />
+            <property-feature-chart :feature-chart="featureChart" />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+      <v-expansion-panels v-if="vectorGraphs.length" v-model="enabledVectorChartPanel" multiple>
+        <v-expansion-panel
+          v-for="vectorGraph, index in vectorGraphs"
+          :key="`${vectorGraph.name}_${index}`"
+          :value="index"
+          class="ma-0 pa-0"
+        >
+          <v-expansion-panel-title>
+            <v-icon class="pr-2">
+              mdi-chart-line
+            </v-icon> {{ vectorGraph.name }}
+          </v-expansion-panel-title>
+          <v-expansion-panel-text class="ma-0">
+            <vector-feature-chart :graph-info="vectorGraph" :vector-feature-id="featureId" />
           </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>
@@ -146,4 +172,7 @@ export default defineComponent({
 </template>
 
 <style scoped>
+.v-expansion-panel-text>>> .v-expansion-panel-text__wrapper {
+  padding: 8px !important;
+}
 </style>
diff --git a/client/src/components/FeatureSelection/VectorFeatureChart.vue b/client/src/components/FeatureSelection/VectorFeatureChart.vue
new file mode 100644
index 0000000..a33f7ab
--- /dev/null
+++ b/client/src/components/FeatureSelection/VectorFeatureChart.vue
@@ -0,0 +1,200 @@
+<script lang="ts">
+import {
+  PropType, defineComponent, nextTick, ref, watch,
+} from 'vue';
+import * as d3 from 'd3';
+import UVdatApi from '../../api/UVDATApi';
+import { FeatureGraphData, VectorFeatureTableGraph } from '../../types';
+
+type ParameterGraph = Record<string, {
+  data: [number, number][];
+  filterVal: string;
+}>;
+
+export default defineComponent({
+  name: 'FeatureGraph',
+  props: {
+    graphInfo: {
+      type: Object as PropType<VectorFeatureTableGraph>,
+      required: true,
+    },
+    vectorFeatureId: {
+      type: Number as PropType<number>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const graphContainer = ref<SVGSVGElement | null>(null);
+    const graphDialogContainer = ref<SVGSVGElement | null>(null);
+    const graphData = ref<FeatureGraphData | null>(null);
+    const dialogVisible = ref(false);
+
+    // Fetch feature graph data when component is mounted or props change
+    const fetchFeatureGraphData = async () => {
+      try {
+        const data = await UVdatApi.getFeatureGraphData(
+          props.graphInfo.type, // Use graphInfo.type (tableType) instead of mapLayerId
+          props.vectorFeatureId,
+          props.graphInfo.xAxis,
+          props.graphInfo.yAxis,
+          props.graphInfo.filterColumn,
+          props.graphInfo.filterValue,
+        );
+        graphData.value = data;
+        renderGraph(data);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching feature graph data:', error);
+      }
+    };
+
+    // Render graph using D3
+    const renderGraph = (data: FeatureGraphData, container = 'graphContainer') => {
+      const localContainer = container === 'graphContainer' ? graphContainer : graphDialogContainer;
+      if (!localContainer.value || !data) return;
+
+      const svg = d3.select(localContainer.value);
+      svg.selectAll('*').remove(); // Clear any existing content in the SVG
+
+      const margin = {
+        top: 20, right: container === 'graphContainer' ? 0 : 20, bottom: 40, left: 40,
+      };
+
+      // Set the maximum width to 250px
+      const width = localContainer.value?.clientWidth || 250 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+
+      const x = d3.scaleLinear().range([0, width]);
+      const y = d3.scaleLinear().range([height, 0]);
+
+      const line = d3.line()
+        .x((d: [number, number]) => x(d[0]))
+        .y((d: [number, number]) => y(d[1]));
+
+      let dataForGraph: { data: [number, number][], filterVal?: string } | undefined;
+
+      // Check for default data or apply filter if necessary
+      if (data.graphs.default) {
+        dataForGraph = data.graphs.default; // Use default data if no filter
+      } else if (props.graphInfo.filterValue && props.graphInfo.filterColumn) {
+        const filteredData = data.graphs as ParameterGraph;
+        dataForGraph = filteredData[props.graphInfo.filterValue]; // Apply filter by value
+      }
+
+      if (!dataForGraph) {
+        return; // Return if no data is available
+      }
+
+      // Set the domain for the axes, ensuring we handle empty arrays correctly
+      const xExtent = d3.extent(dataForGraph.data.map((item) => item[0]));
+      const yExtent = d3.extent(dataForGraph.data.map((item) => item[1]));
+
+      // Fallback to zero if data is empty
+      x.domain(xExtent[0] !== undefined ? xExtent : [0, 1]);
+      y.domain(yExtent[0] !== undefined ? yExtent : [0, 1]);
+
+      // Create the graph container
+      const g = svg.append('g')
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      // Add the line path to the graph
+      svg.append('path')
+        .attr('fill', 'none')
+        .attr('stroke', 'steelblue')
+        .attr('stroke-width', 1.5)
+        .attr('d', line(dataForGraph.data.sort((a, b) => a[0] - b[0])))
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      // Add the X-axis
+      g.append('g')
+        .attr('class', 'x axis')
+        .attr('transform', `translate(0,${height})`)
+        .call(d3.axisBottom(x).ticks(5));
+
+      // Add the Y-axis
+      g.append('g')
+        .attr('class', 'y axis')
+        .call(d3.axisLeft(y));
+    };
+
+    // Watch for prop changes and refetch data
+    watch(
+      () => [props.graphInfo, props.vectorFeatureId],
+      () => fetchFeatureGraphData(),
+      { immediate: true },
+    );
+
+    // Open the dialog to display a larger graph
+    const openDialog = () => {
+      dialogVisible.value = true;
+      nextTick(() => {
+        if (graphData.value) {
+          renderGraph(graphData.value, 'graphDialogContainer');
+        }
+      });
+    };
+
+    return {
+      graphContainer,
+      graphDialogContainer,
+      graphData,
+      dialogVisible,
+      openDialog,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <!-- Button to open dialog -->
+    <v-btn color="primary" @click="openDialog">
+      View Larger Graph
+    </v-btn>
+
+    <!-- Graph container -->
+    <svg ref="graphContainer" width="100%" height="400" class="selectedFeatureSVG" />
+
+    <!-- Dialog for larger chart -->
+    <v-dialog v-model="dialogVisible" max-width="800px">
+      <v-card>
+        <v-card-title>
+          <span class="headline">Feature Graph</span>
+        </v-card-title>
+        <v-card-text>
+          <svg ref="graphDialogContainer" width="100%" height="500" />
+        </v-card-text>
+        <v-card-actions>
+          <v-btn @click="dialogVisible = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<style scoped>
+  .selectedFeatureSVG {
+    max-width: 250px;
+    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/components/Metadata/FeatureChartEditor.vue b/client/src/components/Metadata/FeatureChartEditor.vue
index 03045ac..b160a4f 100644
--- a/client/src/components/Metadata/FeatureChartEditor.vue
+++ b/client/src/components/Metadata/FeatureChartEditor.vue
@@ -7,13 +7,13 @@ import { FeatureChart } from '../../types';
 import MapStore from '../../MapStore';
 import { drawBarChart } from './drawChart'; // Separate drawChart function
 import { colorGenerator } from '../../map/mapColors';
-import RenderFeatureChart from '../FeatureSelection/RenderFeatureChart.vue';
+import PropertyFeatureChart from '../FeatureSelection/PropertyFeatureChart.vue';
 
 export default defineComponent({
   name: 'FeatureChartEditor',
   components: {
     draggable,
-    RenderFeatureChart,
+    PropertyFeatureChart,
   },
   props: {
     layerId: {
@@ -278,7 +278,7 @@ export default defineComponent({
           </v-icon> {{ chart.name }}
         </v-expansion-panel-title>
         <v-expansion-panel-text>
-          <render-feature-chart :feature-chart="{ ...chart, data: generatedData }" :max-width="500" />
+          <property-feature-chart :feature-chart="{ ...chart, data: generatedData }" :max-width="500" />
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
diff --git a/client/src/components/PropertiesConfig.vue b/client/src/components/PropertiesConfig.vue
index 9bf2540..149707b 100644
--- a/client/src/components/PropertiesConfig.vue
+++ b/client/src/components/PropertiesConfig.vue
@@ -5,12 +5,14 @@ import {
 import AvailableProperties from './Metadata/AvailableProperties.vue';
 import MetadataSettings from './Metadata/MetadataSettings.vue';
 import SelectedFeatureChartCard from './Metadata/SelectedFeatureChartCard.vue';
+import TableSummary from './TabularData/TableSummary.vue';
 
 export default defineComponent({
   components: {
     AvailableProperties,
     MetadataSettings,
     SelectedFeatureChartCard,
+    TableSummary,
   },
   props: {
     layerId: {
@@ -19,7 +21,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const tab: Ref<'availableProperties' | 'settings' | 'charts'> = ref('availableProperties');
+    const tab: Ref<'availableProperties' | 'settings' | 'charts' | 'tabularData'> = ref('availableProperties');
 
     return {
       tab,
@@ -72,12 +74,27 @@ export default defineComponent({
         </v-icon>
       </template>
     </v-tooltip>
+    <v-tooltip text="Tabular Data">
+      <template #activator="{ props }">
+        <v-icon
+          class="icon-center"
+          :class="{ 'selected-tab': tab === 'tabularData' }"
+          v-bind="props"
+          color="primary"
+          size="x-small"
+          @click="tab = 'tabularData'"
+        >
+          mdi-table
+        </v-icon>
+      </template>
+    </v-tooltip>
 
     <v-spacer />
   </v-row>
   <AvailableProperties v-if="tab === 'availableProperties'" :layer-id="layerId" />
   <MetadataSettings v-else-if="tab === 'settings'" :layer-id="layerId" />
   <SelectedFeatureChartCard v-else-if="tab === 'charts'" :layer-id="layerId" />
+  <TableSummary v-else-if="tab === 'tabularData'" :layer-id="layerId" />
 </template>
 
 <style scoped>
diff --git a/client/src/components/TabularData/TableSummary.vue b/client/src/components/TabularData/TableSummary.vue
new file mode 100644
index 0000000..4a66b47
--- /dev/null
+++ b/client/src/components/TabularData/TableSummary.vue
@@ -0,0 +1,253 @@
+<script lang="ts">
+import {
+  Ref, defineComponent, onMounted, ref,
+} from 'vue';
+import { TableSummary, VectorFeatureTableGraph } from '../../types';
+import UVdatApi from '../../api/UVDATApi';
+import MapStore from '../../MapStore';
+
+export default defineComponent({
+  name: 'VectorTableSummary',
+  props: {
+    layerId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const summaryData = ref<TableSummary | null>(null);
+    const loading = ref(true);
+    const error = ref<string | null>(null);
+    const tableChartDialog = ref(false);
+    const activeTab: Ref<'summary' | 'graphs'> = ref('summary'); // Track active tab (0 for summary, 1 for graphing)
+    const selectedTableName = ref<string>('Table Name');
+    const selectedTableType = ref<string | null>(null);
+    const selectedXColumn = ref<string | null>(null);
+    const selectedYColumn = ref<string | null>(null);
+    const selectedFilterColumn = ref<string>('');
+    const filterValue = ref<string>('');
+    const graphs = ref<VectorFeatureTableGraph[]>([]);
+
+    const getStyleVectorFeatureGraphs = () => {
+      const found = MapStore.selectedVectorMapLayers.value.find((item) => item.id === props.layerId);
+      if (found && found.default_style.vectorFeatureTableGraphs) {
+        graphs.value = found.default_style.vectorFeatureTableGraphs;
+      }
+    };
+
+    const updateStyleGraphs = (updatedGraphs: VectorFeatureTableGraph[]) => {
+      const found = MapStore.selectedVectorMapLayers.value.find((item) => item.id === props.layerId);
+      if (found && found.default_style) {
+        found.default_style.vectorFeatureTableGraphs = updatedGraphs;
+      }
+    };
+
+    const editingGraphIndex = ref<number | null>(null); // Track the index of the graph being edited
+
+    const vectorTableSummary = async (layerId: number) => {
+      try {
+        loading.value = true;
+        summaryData.value = await UVdatApi.getVectorTableSummary(layerId);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (err: any) {
+        error.value = err.response?.data?.error || 'Failed to fetch data';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    const resetGraphForm = () => {
+      selectedXColumn.value = null;
+      selectedYColumn.value = null;
+      selectedFilterColumn.value = '';
+      filterValue.value = '';
+    };
+
+    const addSaveGraph = () => {
+      if (selectedTableType.value && selectedXColumn.value && selectedYColumn.value) {
+        const graph: VectorFeatureTableGraph = {
+          name: selectedTableName.value,
+          type: selectedTableType.value,
+          xAxis: selectedXColumn.value,
+          yAxis: selectedYColumn.value,
+          filterColumn: selectedFilterColumn.value ? selectedFilterColumn.value : undefined,
+          filterValue: filterValue.value ? filterValue.value : undefined,
+        };
+
+        if (editingGraphIndex.value !== null) {
+          // If editing, update the existing graph
+          graphs.value[editingGraphIndex.value] = graph;
+          editingGraphIndex.value = null;
+        } else {
+          // Otherwise, add a new graph
+          graphs.value.push(graph);
+        }
+
+        updateStyleGraphs(graphs.value);
+        // Clear the form after adding/updating the graph
+        resetGraphForm();
+      }
+    };
+
+    const editGraph = (index: number) => {
+      const graph = graphs.value[index];
+      // eslint-disable-next-line prefer-destructuring
+      selectedTableType.value = graph.type; // Assuming the table name is part of the graph name
+      selectedTableName.value = graph.name;
+      selectedXColumn.value = graph.xAxis;
+      selectedYColumn.value = graph.yAxis;
+      selectedFilterColumn.value = graph.filterColumn || '';
+      filterValue.value = graph.filterValue || ' ';
+      editingGraphIndex.value = index;
+    };
+
+    const deleteGraph = (index: number) => {
+      graphs.value.splice(index, 1);
+    };
+
+    onMounted(() => {
+      vectorTableSummary(props.layerId);
+      getStyleVectorFeatureGraphs();
+    });
+
+    return {
+      summaryData,
+      loading,
+      error,
+      tableChartDialog,
+      activeTab,
+      selectedTableName,
+      selectedTableType,
+      selectedXColumn,
+      selectedYColumn,
+      selectedFilterColumn,
+      editingGraphIndex,
+      filterValue,
+      graphs,
+      addSaveGraph,
+      editGraph,
+      deleteGraph,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-row dense align="center" justify="center">
+    <h3>Tabular Data/Graphs</h3>
+    <v-spacer />
+    <v-icon @click="tableChartDialog = true">
+      mdi-cog
+    </v-icon>
+  </v-row>
+  <v-row v-for="(graph, index) in graphs" :key="index">
+    <v-col>
+      {{ graph.name }}
+    </v-col>
+    <v-col>
+      {{ `${graph.xAxis} vs ${graph.yAxis}` }}
+    </v-col>
+  </v-row>
+
+  <v-dialog v-model="tableChartDialog" max-width="800px">
+    <v-card>
+      <v-card-title>Vector Table Summary</v-card-title>
+      <v-tabs v-model="activeTab">
+        <v-tab value="summary">
+          Summary
+        </v-tab>
+        <v-tab value="graphs">
+          Graphs
+        </v-tab>
+      </v-tabs>
+      <v-card-text v-if="activeTab === 'summary'">
+        <div v-if="loading">
+          Loading...
+        </div>
+        <div v-else-if="error" class="error-text">
+          {{ error }}
+        </div>
+        <div v-else-if="summaryData">
+          <p><strong>Vector Feature Count:</strong> {{ summaryData.vectorFeatureCount }}</p>
+          <v-expansion-panels>
+            <v-expansion-panel v-for="(table, type) in summaryData.tables" :key="type">
+              <v-expansion-panel-title>
+                {{ type }} ({{ table.tableCount }} tables)
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-expansion-panels>
+                  <v-expansion-panel v-for="column in table.columns" :key="column">
+                    <v-expansion-panel-title>{{ column }}</v-expansion-panel-title>
+                    <v-expansion-panel-text>
+                      <p>{{ table.summary[column] }}</p>
+                    </v-expansion-panel-text>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </div>
+      </v-card-text>
+
+      <v-card-text v-if="activeTab === 'graphs'">
+        <v-card-text>
+          <v-form>
+            <v-text-field
+              v-model="selectedTableName"
+              label="Table Name"
+            />
+            <v-select
+              v-model="selectedTableType"
+              :items="Object.keys(summaryData?.tables || {})"
+              label="Select Table"
+            />
+            <v-select
+              v-model="selectedXColumn"
+              :items="selectedTableType ? summaryData?.tables[selectedTableType]?.columns : []"
+              label="Select X Axis"
+            />
+            <v-select
+              v-model="selectedYColumn"
+              :items="selectedTableType ? summaryData?.tables[selectedTableType]?.columns : []"
+              label="Select Y Axis"
+            />
+            <v-select
+              v-model="selectedFilterColumn"
+              :items="selectedTableType ? summaryData?.tables[selectedTableType]?.columns : []"
+              label="Select Filter Column"
+            />
+            <v-text-field
+              v-model="filterValue"
+              label="Filter Value"
+              :disabled="!selectedFilterColumn"
+            />
+            <v-btn :disabled="!selectedTableType || !selectedXColumn || !selectedYColumn" color="primary" @click="addSaveGraph">
+              {{ editingGraphIndex !== null ? 'Update' : 'Add' }} Graph
+            </v-btn>
+          </v-form>
+          <v-divider />
+          <v-list>
+            <v-list-item v-for="(graph, index) in graphs" :key="index">
+              <v-list-item-title>{{ graph.name }}</v-list-item-title>
+              <v-list-item-subtitle>
+                <div>{{ graph.type }}</div>
+                <div>{{ graph.xAxis }} vs {{ graph.yAxis }} {{ graph.filterValue ? `(Filter - ${graph.filterValue}` : '' }})</div>
+              </v-list-item-subtitle>
+              <v-list-item-subtitle v-if="graph.filterColumn">
+                Filter: {{ graph.filterColumn }} = {{ graph.filterValue }}
+              </v-list-item-subtitle>
+              <v-list-item-action>
+                <v-icon color="warning" @click="editGraph(index)">
+                  mdi-pencil
+                </v-icon>
+                <v-icon color="error" @click="deleteGraph(index)">
+                  mdi-delete
+                </v-icon>
+              </v-list-item-action>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/client/src/types.ts b/client/src/types.ts
index 63d8dda..20587c4 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -394,6 +394,7 @@ export interface VectorMapLayer extends AbstractMapLayer {
     filters?: Filter[];
     charts?: CustomChart[];
     selectedFeatureCharts?: FeatureChart[];
+    vectorFeatureTableGraphs?: VectorFeatureTableGraph[];
 
   }
 }
@@ -734,3 +735,68 @@ export interface VectorTimeSeries {
 }
 
 export type FeatureChartWithData = FeatureChart & { data: { key: string, value: number; color: string }[] };
+
+export interface TableSummary {
+  vectorFeatureCount: number;
+  tables: Record<string, TableInfo>;
+}
+
+interface TableInfo {
+  tableCount: number;
+  columns: string[];
+  summary: Record<string, ColumnSummary>;
+}
+
+type ColumnSummary =
+  | NumberColumnSummary
+  | StringColumnSummary
+  | ParameterColumnSummary;
+
+interface NumberColumnSummary {
+  type: 'number';
+  min: number;
+  max: number;
+  value_count: number;
+}
+
+interface StringColumnSummary {
+  type: 'string';
+  values: string[];
+  value_count: number;
+}
+
+interface ParameterColumnSummary {
+  type: 'parameter_cd';
+  parameters: Record<string, ParameterStats>;
+}
+
+interface ParameterStats {
+  parameter_cd: string;
+  parameter_name: string;
+  min: number;
+  max: number;
+  mean: number;
+}
+
+export interface VectorFeatureTableGraph {
+  name: string;
+  type: string;
+  xAxis: string;
+  yAxis: string;
+  filterColumn?: string;
+  filterValue?: string;
+}
+
+export interface FeatureGraphData {
+  table_name: string;
+  graphs:
+  Record<string, {
+    data:[number, number][];
+    filterVal: string;
+  }>
+  | {
+    default: {
+      data: [number, number][];
+    };
+  };
+}
diff --git a/sample_data/fire.json b/sample_data/fire.json
new file mode 100644
index 0000000..583d456
--- /dev/null
+++ b/sample_data/fire.json
@@ -0,0 +1,64 @@
+[
+    {
+        "type": "Context",
+        "name": "WildFire Data",
+        "default_map_center": [
+            34.8019,
+            -86.1794
+        ],
+        "default_map_zoom": 6,
+        "datasets": [
+            {
+                "name": "WildFire Data",
+                "description": "MODIS 1km USA (Conterminous) + Hawaii 48h shapefile. From: https://firms.modaps.eosdis.nasa.gov/active_fire/",
+                "category": "region",
+                "metadata": {},
+                "files": [
+                    {
+                        "path": "./data/la-fire-2025/modis-1-48.zip",
+                        "url": "https://data.kitware.com/api/v1/item/67aa368b091a514e82eec908/download",
+                        "name": "MODIS 1km 48h USA + Hawaii",
+                        "type": "zip",
+                        "metadata": {}
+                    },
+                    {
+
+                        "path": "./data/la-fire-2025/current_fire_perimeters.geojson",
+                        "url": "https://data.kitware.com/api/v1/item/67aa368c091a514e82eec90b/download",
+                        "name": "USA Palisades + Eaton Wildfire Perimeters",
+                        "type": "geojson",
+                        "metadata": {}
+                    },
+                    {
+                        "path": "./data/la-fire-2025/current_fire_incidents.geojson",
+                        "url": "https://data.kitware.com/api/v1/item/67aa368c091a514e82eec90e/download",
+                        "name": "USA Palisades + Eaton Wildfire Incidents",
+                        "type": "geojson",
+                        "metadata": {}
+                    },
+                    {
+                        "path": "./data/la-fire-2025/ca_perimeters_nifc_firis.geojson",
+                        "url": "https://data.kitware.com/api/v1/item/67aa33ed091a514e82eec8ff/download",
+                        "name": "California Fire Perimeters",
+                        "type": "geojson",
+                        "metadata": {}
+                    },
+                    {
+                        "path": "./data/la-fire-2025/palidades-2025-01-14.tif",
+                        "url": "https://data.kitware.com/api/v1/item/67aa368a091a514e82eec905/download",
+                        "name": "Palisades Satellite Imagery",
+                        "type": "tif",
+                        "metadata": {}
+                    },
+                    {
+                        "path": "./data/la-fire-2025/eaton-2025-01-14_to_19.tif",
+                        "url": "https://data.kitware.com/api/v1/item/67aa353a091a514e82eec902/download",
+                        "name": "Eaton/Altadena Satellite Imagery",
+                        "type": "tif",
+                        "metadata": {}
+                    }
+                ]
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/uvdat/core/rest/map_layers.py b/uvdat/core/rest/map_layers.py
index 15f78a0..f66cc2f 100644
--- a/uvdat/core/rest/map_layers.py
+++ b/uvdat/core/rest/map_layers.py
@@ -13,8 +13,8 @@
 
 from uvdat.core.models import (
     LayerRepresentation,
-    NetCDFLayer,
     NetCDFData,
+    NetCDFLayer,
     RasterMapLayer,
     VectorFeature,
     VectorMapLayer,
diff --git a/uvdat/core/rest/netcdf.py b/uvdat/core/rest/netcdf.py
index 8bfa982..095cb0d 100644
--- a/uvdat/core/rest/netcdf.py
+++ b/uvdat/core/rest/netcdf.py
@@ -84,15 +84,17 @@ def images(self, request, *args, **kwargs):
             step_count = netcdf_layer.parameters.get('stepCount', None)
             if sliding_dim and step_count:
                 sliding_data = {
-                    "min": sliding_dim.get('min', 0),
-                    "max": sliding_dim.get('max', step_count),
-                    "variable": sliding_dim.get('variable', 'time'),
+                    'min': sliding_dim.get('min', 0),
+                    'max': sliding_dim.get('max', step_count),
+                    'variable': sliding_dim.get('variable', 'time'),
                 }
-                sliding_data['step'] = (sliding_data['max'] - sliding_data['min']) / (step_count - 1)
+                sliding_data['step'] = (sliding_data['max'] - sliding_data['min']) / (
+                    step_count - 1
+                )
             response_data = {
                 'netCDFLayer': int(netcdf_layer_id),
                 'parent_bounds': netcdf_layer.bounds.envelope.coords,  # 4-tuple for the parent layer bounds
-                "sliding": sliding_data,
+                'sliding': sliding_data,
                 'images': [image.image.url for image in netcdf_images],  # Only return the image URL
             }
 
diff --git a/uvdat/core/rest/vector_feature_table_data.py b/uvdat/core/rest/vector_feature_table_data.py
index e653274..5bba118 100644
--- a/uvdat/core/rest/vector_feature_table_data.py
+++ b/uvdat/core/rest/vector_feature_table_data.py
@@ -1,16 +1,18 @@
 from collections import defaultdict
+import logging
 
+from django.contrib.gis.geos import Polygon
 from django.db import connection
 from django.http import HttpResponse
 from rest_framework import mixins, status, viewsets
-from rest_framework.decorators import action, permission_classes
+from rest_framework.decorators import action
 from rest_framework.exceptions import ValidationError
-from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 
 from uvdat.core.models import VectorFeature, VectorFeatureRowData, VectorFeatureTableData
 from uvdat.core.rest.serializers import VectorFeatureTableDataSerializer
 
+logger = logging.getLogger(__name__)
 # TODO THIS IS INCOMPLETE
 VECTOR_TILE_DYNAMIC_SQL = """
     WITH tile_bounds AS (
@@ -82,27 +84,92 @@ def table_summary(self, request, *args, **kwargs):
 
         tables = VectorFeatureTableData.objects.filter(map_layer=layer_id)
         feature_count = VectorFeature.objects.filter(map_layer=layer_id).count()
-        # Create a defaultdict to store types and their corresponding columns
+
         type_columns_map = defaultdict(set)
         table_count_map = defaultdict(int)
+        column_summaries = defaultdict(lambda: defaultdict(dict))
 
-        # Iterate over the tables and collect the types and columns
+        # Iterate over tables to collect type-based column definitions and summary stats
         for table in tables:
-            if len(type_columns_map[table.type]) == 0:
-                type_columns_map[table.type] = set(table.columns)
-            elif type_columns_map[table.type] != set(table.columns):
+            table_type = table.type
+            table_summary = table.summary or {}
+
+            # Ensure all tables of the same type have consistent columns
+            if len(type_columns_map[table_type]) == 0:
+                type_columns_map[table_type] = set(table.columns)
+            elif type_columns_map[table_type] != set(table.columns):
                 raise ValidationError(
-                    f"Table Columns don't match for all tables: {type_columns_map[table.type]} vs { set(table.columns)}"
+                    f'Table Columns do not match for all tables: {type_columns_map[table_type]} vs {set(table.columns)}'
                 )
-            table_count_map[table.type] += 1
 
-        # Convert the defaultdict to a normal dict (optional)
-        type_columns_map = dict(type_columns_map)
+            table_count_map[table_type] += 1
+
+            # Aggregate summary statistics per column
+            for column, stats in table_summary.items():
+                if 'type' not in column_summaries[table_type][column]:
+                    column_summaries[table_type][column]['type'] = stats.get('type')
+
+                if stats.get('type') == 'number':
+                    column_summaries[table_type][column]['min'] = min(
+                        column_summaries[table_type][column].get('min', float('inf')),
+                        stats.get('min', float('inf')),
+                    )
+                    column_summaries[table_type][column]['max'] = max(
+                        column_summaries[table_type][column].get('max', float('-inf')),
+                        stats.get('max', float('-inf')),
+                    )
+                    column_summaries[table_type][column]['value_count'] = column_summaries[
+                        table_type
+                    ][column].get('value_count', 0) + stats.get('value_count', 0)
+
+                elif stats.get('type') == 'string':
+                    existing_values = set(column_summaries[table_type][column].get('values', []))
+                    new_values = set(stats.get('values', []))
+                    column_summaries[table_type][column]['values'] = list(
+                        existing_values.union(new_values)
+                    )
+                    column_summaries[table_type][column]['value_count'] = column_summaries[
+                        table_type
+                    ][column].get('value_count', 0) + stats.get('value_count', 0)
+
+                # Special USGS Parameter Type
+                elif stats.get('type') == 'parameter_cd':
+                    if 'parameters' not in column_summaries[table_type][column]:
+                        column_summaries[table_type][column]['parameters'] = {}
+
+                    for param_cd, param_stats in stats.items():
+                        if param_cd == 'type':
+                            continue
+                        if param_cd not in column_summaries[table_type][column]['parameters']:
+                            column_summaries[table_type][column]['parameters'][
+                                param_cd
+                            ] = param_stats
+                        else:
+                            column_summaries[table_type][column]['parameters'][param_cd]['min'] = (
+                                min(
+                                    column_summaries[table_type][column]['parameters'][param_cd][
+                                        'min'
+                                    ],
+                                    param_stats['min'],
+                                )
+                            )
+                            column_summaries[table_type][column]['parameters'][param_cd]['max'] = (
+                                max(
+                                    column_summaries[table_type][column]['parameters'][param_cd][
+                                        'max'
+                                    ],
+                                    param_stats['max'],
+                                )
+                            )
+
+        # Construct the response
         output = {'vectorFeatureCount': feature_count, 'tables': {}}
-        for key in type_columns_map:
-            output['tables'][key] = {
-                'tableCount': table_count_map[key],
-                'columns': type_columns_map[key],
+        for table_type in type_columns_map:
+            output['tables'][table_type] = {
+                'type': table_type,
+                'tableCount': table_count_map[table_type],
+                'columns': list(type_columns_map[table_type]),
+                'summary': column_summaries[table_type],
             }
 
         return Response(output, status=status.HTTP_200_OK)
@@ -114,10 +181,8 @@ def feature_graph(self, request, *args, **kwargs):
         x_axis = request.query_params.get('xAxis', 'index')
         y_axis = request.query_params.get('yAxis', 'mean_va')
         filter_param = request.query_params.get('filter', 'parameter_cd')
-        filter_vals = request.query_params.getlist(
-            'filterVals', ['00060', '00065']
-        )  # ['00060', '00065']
-
+        filter_val = request.query_params.get('filterVal', '00065')
+        logger.info(f'filter_vals: {filter_val}')
         if not table_type:
             return Response({'error': 'tableType is required'}, status=status.HTTP_400_BAD_REQUEST)
 
@@ -125,42 +190,123 @@ def feature_graph(self, request, *args, **kwargs):
             table = VectorFeatureTableData.objects.get(
                 type=table_type, vector_feature=vector_feature
             )
-            table_data = {'table_name': table.name, 'tables': []}
+            table_data = {'table_name': table.name}
             x_axis_index = table.columns.index(x_axis)
             y_axis_index = table.columns.index(y_axis)
-            if filter_param and len(filter_vals):
+            if filter_param and filter_val:
                 filter_param_index = table.columns.index(filter_param)
-            if filter_param and len(filter_vals):
-                table_data['data'] = {}
-                for filter_val in filter_vals:
-                    table_data['data'][filter_val] = {
-                        'x_data': [],
-                        'y_data': [],
-                        'filterVal': filter_val,
-                    }
+            if filter_param and filter_val:
+                table_data['graphs'] = {}
+                table_data['graphs'][filter_val] = {
+                    'data': [],
+                    'filterVal': filter_val,
+                }
             else:
-                table_data['data'] = {'default': {'x_data': [], 'y_data': []}}
+                table_data['graphs'] = {'default': {'data': []}}
             rows = VectorFeatureRowData.objects.filter(vector_feature_table=table)
             for row in rows:
                 row_data = row.row_data
                 filter_row = row_data[filter_param_index]
                 x_val = row_data[x_axis_index]
                 y_val = row_data[y_axis_index]
-                if filter_param and len(filter_vals):
-                    for filter_val in filter_vals:
-                        if filter_row == filter_val:
-                            table_data['data'][filter_val]['x_data'].append(x_val)
-                            table_data['data'][filter_val]['y_data'].append(y_val)
+                if filter_param and filter_val:
+                    if filter_row == filter_val:
+                        table_data['graphs'][filter_val]['data'].append([x_val, y_val])
                 else:
-                    table_data['data']['default']['x_data'].append(x_val)
-                    table_data['data']['default']['y_data'].append(y_val)
-            print(table_data)
+                    table_data['graphs']['default']['data'].append([x_val, y_val])
             return Response(table_data, status=status.HTTP_200_OK)
         except VectorFeatureTableData.DoesNotExist:
             return Response({'error': 'Table not found'}, status=status.HTTP_404_NOT_FOUND)
 
+    @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
+        map_layer_id = request.query_params.get('mapLayerId')  # Required
+        x_axis = request.query_params.get('xAxis', 'index')
+        y_axis = request.query_params.get('yAxis', 'mean_va')
+        filter_param = request.query_params.get('filter', 'parameter_cd')
+        filter_vals = request.query_params.getlist('filterVals', ['00060', '00065'])
+        bounds = request.query_params.getlist(
+            'bounds', None
+        )  # Optional: [min_x, min_y, max_x, max_y]
+
+        if not table_type or not map_layer_id:
+            return Response(
+                {'error': 'tableType and mapLayerId are required'},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        try:
+            # Filter tables by map layer and table type
+            tables = VectorFeatureTableData.objects.filter(
+                type=table_type, map_layer_id=map_layer_id
+            )
+
+            if not tables.exists():
+                return Response(
+                    {'error': 'No tables found for the given parameters'},
+                    status=status.HTTP_404_NOT_FOUND,
+                )
+
+            table_data = {'map_layer_id': map_layer_id, 'graphs': {}}
+            all_x_values = set()
+
+            for table in tables:
+                table_entry = {'table_name': table.name}
+
+                x_axis_index = table.columns.index(x_axis)
+                y_axis_index = table.columns.index(y_axis)
+
+                # Prepare graph data for each filter value
+                if filter_param and len(filter_vals):
+                    filter_param_index = table.columns.index(filter_param)
+                    for filter_val in filter_vals:
+                        table_data['graphs'][filter_val] = {
+                            'data': [],
+                            'filterVal': filter_val,
+                        }
+                else:
+                    table_data['graphs']['default'] = {
+                        'data': [],
+                    }
+
+                rows = VectorFeatureRowData.objects.filter(vector_feature_table=table)
+
+                # If bounds are provided, filter VectorFeatures inside bounds
+                if bounds and len(bounds) == 4:
+                    min_x, min_y, max_x, max_y = map(float, bounds)
+                    bounds_polygon = Polygon.from_bbox((min_x, min_y, max_x, max_y))
+                    rows = rows.filter(
+                        vector_feature_table__vector_feature__geometry__intersects=bounds_polygon
+                    )
+
+                for row in rows:
+                    row_data = row.row_data
+                    x_val = row_data[x_axis_index]
+                    y_val = row_data[y_axis_index]
+                    all_x_values.add(x_val)
+
+                    # Handle filter logic for specific filter values
+                    if filter_param and len(filter_vals):
+                        filter_row = row_data[filter_param_index]
+                        for filter_val in filter_vals:
+                            if filter_row == filter_val:
+                                table_data['graphs'][filter_val]['data'].append([x_val, y_val])
+                    else:
+                        table_data['graphs']['default']['data'].append([x_val, y_val])
+
+                # Add the table data to the main response structure
+                table_data['tables'] = table_entry
+
+            # Sort and condense x-axis values into a single list
+            table_data['all_x_values'] = sorted(all_x_values)
+
+            return Response(table_data, status=status.HTTP_200_OK)
+
+        except Exception as e:
+            return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
     @action(detail=False, methods=['post'], url_path='generate-layer')
-    @permission_classes([IsAuthenticated])
     def generate_layer(self, request, *args, **kwargs):
         table_id = request.data.get('table_id')
         filter_value = request.data.get('filter_value')
diff --git a/uvdat/core/tasks/netcdf.py b/uvdat/core/tasks/netcdf.py
index 0c35c27..1f2e4c9 100644
--- a/uvdat/core/tasks/netcdf.py
+++ b/uvdat/core/tasks/netcdf.py
@@ -1,20 +1,20 @@
 import base64
 from datetime import datetime
-import cftime
 from io import BytesIO
 import logging
 from pathlib import Path
 import re
 import tempfile
-import pandas as pd
 
 from PIL import Image
 from celery import current_task, shared_task
+import cftime
 from django.contrib.gis.geos import Polygon
 from django.contrib.gis.geos.error import GEOSException
 from django.core.files.base import ContentFile
 from matplotlib import cm
 import numpy as np
+import pandas as pd
 import xarray as xr
 
 from uvdat.core.models import NetCDFData, NetCDFImage, NetCDFLayer, ProcessingTask
@@ -29,7 +29,15 @@ def convert_time(obj, output='compact'):
         dt_obj = pd.Timestamp(obj).to_pydatetime()
     elif isinstance(obj, datetime):  # Handle Python datetime objects
         dt_obj = obj
-    elif isinstance(obj, (cftime.DatetimeNoLeap, cftime.DatetimeAllLeap, cftime.Datetime360Day, cftime.DatetimeJulian)):
+    elif isinstance(
+        obj,
+        (
+            cftime.DatetimeNoLeap,
+            cftime.DatetimeAllLeap,
+            cftime.Datetime360Day,
+            cftime.DatetimeJulian,
+        ),
+    ):
         dt_obj = datetime(obj.year, obj.month, obj.day, obj.hour, obj.minute, obj.second)
     elif isinstance(obj, (int, float)):
         if obj > 1e10:  # Assume milliseconds timestamp
@@ -57,7 +65,15 @@ def convert_to_timestamp(obj):
         return (obj - np.datetime64('1970-01-01T00:00:00')) / np.timedelta64(1, 's')
     elif isinstance(obj, datetime):  # Handle Python datetime objects
         return obj.timestamp()
-    elif isinstance(obj, (cftime.DatetimeNoLeap, cftime.DatetimeAllLeap, cftime.Datetime360Day, cftime.DatetimeJulian)):
+    elif isinstance(
+        obj,
+        (
+            cftime.DatetimeNoLeap,
+            cftime.DatetimeAllLeap,
+            cftime.Datetime360Day,
+            cftime.DatetimeJulian,
+        ),
+    ):
         dt = obj
         dt_obj = datetime(dt.year, dt.month, dt.day, dt.hour, dt.minute, dt.second)
         unix_timestamp = pd.Timestamp(dt_obj).timestamp()
@@ -65,6 +81,7 @@ def convert_to_timestamp(obj):
     else:
         return obj
 
+
 def create_netcdf_data_layer(file_item, metadata):
     with tempfile.TemporaryDirectory() as temp_dir:
         raw_data_path = Path(temp_dir, 'netcdf.nc')
@@ -92,7 +109,13 @@ def create_netcdf_data_layer(file_item, metadata):
             }
 
             # Calculate min and max values if the variable has numeric data
-            if isinstance(variable.values[0], (cftime.DatetimeNoLeap, cftime.DatetimeAllLeap, cftime.Datetime360Day, cftime.DatetimeJulian)):
+            cftime_types = (
+                cftime.DatetimeNoLeap,
+                cftime.DatetimeAllLeap,
+                cftime.Datetime360Day,
+                cftime.DatetimeJulian,
+            )
+            if isinstance(variable.values[0], cftime_types):
                 vals = []
                 for item in variable.values:
                     print(item)
@@ -115,7 +138,6 @@ def create_netcdf_data_layer(file_item, metadata):
                     if 'datetime' in str(variable.dtype):
                         var_info['startDate'] = str(variable.min().values)
                         var_info['endDate'] = str(variable.max().values)
-              
                     if 'time' in var_name:
                         var_info['min'] = convert_time(var_min, 'unix')
                         var_info['max'] = convert_time(var_max, 'unix')
@@ -141,7 +163,7 @@ def create_netcdf_data_layer(file_item, metadata):
                 except Exception:
                     var_info['min'] = 0
                     var_info['max'] = variable.size
-                    var_info["steps"] = variable.size
+                    var_info['steps'] = variable.size
 
             description['variables'][var_name] = var_info