Merge pull request #19 from OpenGeoscience/tabular-chart-updates

Tabular Chart Updates

Author: BryonLewis

client/src/MapStore.ts

@@ -9,6 +9,7 @@ import {
   NetCDFData,
   NetCDFLayer,
   RasterMapLayer,
+  VectorFeatureTableGraph,
   VectorMapLayer,
 } from './types';
 import UVdatApi from './api/UVDATApi';
@@ -99,6 +100,31 @@ export default class MapStore {
     MapStore.mapLayersByDataset[datasetId] = await UVdatApi.getDatasetLayers(datasetId);
   }
 
+  public static mapLayerFeatureGraphs = computed(() => {
+    const foundMapLayerFeatureGraphs: { name: string, id: number; graphs: VectorFeatureTableGraph[] }[] = [];
+    MapStore.selectedVectorMapLayers.value.forEach((item) => {
+      if (item.default_style.mapLayerFeatureTableGraphs && item.default_style.mapLayerFeatureTableGraphs.length) {
+        foundMapLayerFeatureGraphs.push({
+          name: item.name,
+          id: item.id,
+          graphs: item.default_style.mapLayerFeatureTableGraphs,
+        });
+      }
+    });
+    return foundMapLayerFeatureGraphs;
+  });
+
+  public static mapLayerFeatureGraphsVisible = ref(false);
+
+  // Graph color mapping implementation
+  public static enabledMapLayerFeatureColorMapping = ref(false);
+
+  public static mapLayerFeatureColorMapping: Ref<Record<number, string>> = ref({});
+
+  public static clearMapLayerFeatureColorMapping = () => {
+    MapStore.mapLayerFeatureColorMapping.value = {};
+  };
+
   // ToolTips
   public static toolTipMenuOpen = ref(false);
 
@@ -131,6 +157,27 @@ export default class MapStore {
 
   public static selectedIds = computed(() => MapStore.selectedFeatures.value.map((item) => item.properties.vectorfeatureid));
 
+  public static hoveredFeatures: Ref<number[]> = ref([]);
+
+  public static setHoveredFeature = (feature: number) => {
+    MapStore.hoveredFeatures.value = [feature];
+  };
+
+  public static removeHoveredFeature = (feature: number) => {
+    const foundIndex = MapStore.hoveredFeatures.value.findIndex((item) => item === feature);
+    if (foundIndex !== -1) {
+      MapStore.hoveredFeatures.value.splice(foundIndex, 1);
+    }
+  };
+
+  public static removeHoveredFeatures = (features: number[]) => {
+    MapStore.hoveredFeatures.value = MapStore.hoveredFeatures.value.filter((item) => !features.includes(item));
+  };
+
+  public static clearHoveredFeatures = () => {
+    MapStore.hoveredFeatures.value = [];
+  };
+
   public static pollForVectorBasemap = (pollInterval: number = 5000) => {
     let cancelled = false;
 

client/src/api/UVDATApi.ts

@@ -506,17 +506,34 @@ export default class UVdatApi {
     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;
+  }
+
+  public static async getMapLayerFeatureGraphData(
+    tableType: string,
+    mapLayerId: number,
+    xAxis: string = 'index',
+    yAxis: string = 'mean_va',
+    indexer: string = 'vectorFeatureId',
+    bbox?: string,
+  ): Promise<FeatureGraphData> {
+    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/map-layer-feature-graph/', {
+      params: {
+        tableType,
+        mapLayerId,
+        xAxis,
+        yAxis,
+        indexer,
+        bbox,
       },
     });
     return response.data;

client/src/components/DataSelection/Datasets.vue

@@ -175,17 +175,18 @@ export default defineComponent({
         </template>
       </v-tooltip>
     </div>
-    <v-list>
+    <v-list class="pa-0">
       <v-list-group
         v-for="dataset in datasets"
         :key="`${dataset.id}_${dataset.modified}`"
         :value="`dataset:${dataset.id}`"
-        class="list-group"
+        class="list-group pa-0"
       >
         <template #activator="{ props, isOpen }">
           <v-list-item
             v-bind="props"
             :title="dataset.name"
+            class="pa-0"
             @click="!isOpen && loadDataset(dataset)"
           >
             <v-tooltip
@@ -242,6 +243,7 @@ export default defineComponent({
         <v-list-item
           v-for="layer in layersByDataset[dataset.id]"
           :key="layer.id"
+          class="pa-0"
         >
           <DatasetItem :layer="layer" @netcdf-deleted="updateNetCDFLayer(dataset.id)" />
         </v-list-item>
@@ -291,7 +293,7 @@ export default defineComponent({
 .list-group {
   /* reduce padding of nested groups */
   --list-indent-size: 0px;
-  --prepend-width: 24px;
+  --prepend-width: 8px;
 }
 
 .layer-selection {

client/src/components/DataSelection/NetCDFDataConfigurator.vue

@@ -377,7 +377,7 @@ export default defineComponent({
 
 <template>
   <v-list dense>
-    <v-row dense align="center" justify="center" class="mx-1">
+    <v-row dense align="center" justify="center" class="mx-1 pa-0">
       <v-icon v-tooltip="'NetCDF Layer'">
         mdi-grid
       </v-icon>
@@ -764,6 +764,7 @@ export default defineComponent({
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width:210px;
   }
 .select-variable {
     border: 1px solid gray;

client/src/components/FeatureSelection/SelectedFeature.vue

@@ -112,9 +112,9 @@ export default defineComponent({
       </v-row>
     </v-card-title>
     <v-card-text>
-      <v-expansion-panels :model-value="selectedFeatureExpanded" @click="toggleFeatureExpaned()">
+      <v-expansion-panels :model-value="selectedFeatureExpanded">
         <v-expansion-panel value="expanded">
-          <v-expansion-panel-title>
+          <v-expansion-panel-title @click="toggleFeatureExpaned()">
             <v-icon class="pr-2">
               mdi-list-box-outline
             </v-icon> Data
@@ -163,7 +163,7 @@ export default defineComponent({
             </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" />
+            <vector-feature-chart :graph-info="vectorGraph" :vector-feature-id="featureId" :map-layer-id="mapLayerId" />
           </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>

client/src/components/FeatureSelection/VectorFeatureChart.vue

@@ -2,9 +2,9 @@
 import {
   PropType, defineComponent, nextTick, ref, watch,
 } from 'vue';
-import * as d3 from 'd3';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, VectorFeatureTableGraph } from '../../types';
+import { renderVectorFeatureGraph } from './vectorFeatureGraphUtils';
 
 export default defineComponent({
   name: 'FeatureGraph',
@@ -17,91 +17,48 @@ export default defineComponent({
       type: Number as PropType<number>,
       required: true,
     },
+    mapLayerId: {
+      type: 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);
-
-    // 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[props.vectorFeatureId]) {
-        dataForGraph = data.graphs[props.vectorFeatureId];
-      }
-
-      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));
-    };
+    const noGraphData = ref(false);
 
     // Fetch feature graph data when component is mounted or props change
     const fetchFeatureGraphData = async () => {
+      noGraphData.value = false;
       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.indexer,
         );
+        if (data.graphs && Object.keys(data.graphs).length === 0) {
+          noGraphData.value = true;
+          return;
+        }
         graphData.value = data;
-        renderGraph(data);
+        if (graphContainer.value) {
+          nextTick(() => {
+            if (graphContainer.value) {
+              renderVectorFeatureGraph(
+                data,
+                graphContainer.value,
+                {
+                  specificGraphKey: props.vectorFeatureId,
+                  xAxisIsTime: props.graphInfo.xAxis === 'unix_time',
+                  xAxisVerticalLabels: true,
+                },
+              );
+            }
+          });
+        }
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('Error fetching feature graph data:', error);
@@ -112,15 +69,27 @@ export default defineComponent({
     watch(
       () => [props.graphInfo, props.vectorFeatureId],
       () => fetchFeatureGraphData(),
-      { immediate: true },
     );
+    watch(graphContainer, () => {
+      fetchFeatureGraphData();
+    });
 
     // Open the dialog to display a larger graph
     const openDialog = () => {
       dialogVisible.value = true;
       nextTick(() => {
-        if (graphData.value) {
-          renderGraph(graphData.value, 'graphDialogContainer');
+        if (graphData.value && graphDialogContainer.value) {
+          renderVectorFeatureGraph(
+            graphData.value,
+            graphDialogContainer.value,
+            {
+              specificGraphKey: props.vectorFeatureId,
+              xAxisIsTime: props.graphInfo.xAxis === 'unix_time',
+              showXYValuesOnHover: true,
+              xAxisLabel: props.graphInfo.xAxisLabel,
+              yAxisLabel: props.graphInfo.yAxisLabel,
+            },
+          );
         }
       });
     };
@@ -131,29 +100,36 @@ export default defineComponent({
       graphData,
       dialogVisible,
       openDialog,
+      noGraphData,
     };
   },
 });
 </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 -->
+    <div v-if="noGraphData">
+      <v-alert type="warning">
+        No Data to Graph
+      </v-alert>
+    </div>
+    <div v-if="graphData">
+      <v-btn color="primary" size="x-small" @click="openDialog">
+        View Larger Graph
+      </v-btn>
+    </div>
+    <svg ref="graphContainer" width="100%" :height="graphData ? 400 : 0" class="selectedFeatureSVG" />
     <v-dialog v-model="dialogVisible" max-width="800px">
       <v-card>
         <v-card-title>
-          <span class="headline">Feature Graph</span>
+          <v-row>
+            <v-spacer />
+            <span class="headline">{{ graphInfo.name }}</span>
+            <v-spacer />
+          </v-row>
         </v-card-title>
         <v-card-text>
-          <svg ref="graphDialogContainer" width="100%" height="500" />
+          <svg ref="graphDialogContainer" width="100%" height="400" />
         </v-card-text>
         <v-card-actions>
           <v-btn @click="dialogVisible = false">