initial netcdfMerge layer scripting

Author: BryonLewis

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/vectorFeatureGraphUtils.ts

@@ -28,7 +28,7 @@ const renderVectorFeatureGraph = (
   svg.selectAll('*').remove(); // Clear previous content
 
   const defaultMargin = {
-    top: 20, right: 20, bottom: options?.xAxisVerticalLabels ? 70 : 15, left: 50,
+    top: 20, right: 20, bottom: options?.xAxisVerticalLabels ? 70 : 35, left: 50,
   }; // Base left margin
   const width = (localContainer.clientWidth || 250) - defaultMargin.left - defaultMargin.right;
   const height = baseHeight - defaultMargin.top - defaultMargin.bottom;
@@ -244,7 +244,7 @@ const renderVectorFeatureGraph = (
   if (options?.xAxisLabel) {
     xaxis.append('text')
       .attr('x', width / 2)
-      .attr('y', 40)
+      .attr('y', 25)
       .attr('fill', 'black')
       .attr('text-anchor', 'middle')
       .text(options?.xAxisLabel);

client/src/components/LayerConfig.vue

@@ -167,7 +167,7 @@ export default defineComponent({
         </v-icon>
       </v-col>
     </v-row>
-    <v-card v-if="expanded">
+    <v-card v-if="visibility && expanded">
       <layer-representation-vue
         v-if="['raster', 'vector'].includes(layer.type)"
         :layer-id="layer.id"

client/src/components/NetCDFLayerConfig.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     });
     const totalIndex = computed(() => {
       const found = visibleNetCDFLayers.find((item) => item.netCDFLayer === props.layer.id);
-      return found?.images.length || 0;
+      return found?.images.length ? found.images.length - 1 : 0;
     });
     const stepMapping = computed(() => {
       const found = visibleNetCDFLayers.find((item) => item.netCDFLayer === props.layer.id);

client/src/components/TabularData/MapLayerTableGraph.vue

@@ -83,6 +83,8 @@ export default defineComponent({
               xAxisIsTime: graph.xAxis === 'unix_time',
               onLineHover,
               onLineExit,
+              xAxisLabel: graph.xAxisLabel,
+              yAxisLabel: graph.yAxisLabel,
             },
             300,
           );

client/src/map/mouseEvents.ts

@@ -233,7 +233,7 @@ const setPopupEvents = (localMap: Map) => {
                 clickFunc = annotationDisplayType.selectable === 'singleSelect' ? singleClick : click;
                 localMap.on('click', `Layer_${id}_${annotationType}`, clickFunc);
               }
-              if (annotationDisplayType.hoverable) {
+              if (annotationDisplayType.hoverable || MapStore.mapLayerFeatureGraphsVisible) {
                 localMap.on('mouseenter', `Layer_${id}_${annotationType}`, mouseenter);
                 localMap.on('mouseleave', `Layer_${id}_${annotationType}`, mouseleave);
               }

client/src/views/HomePage.vue

@@ -106,6 +106,7 @@ export default defineComponent({
       hasMapLayerVectorGraphs,
       toggleMapLayerVectorGraphs,
       mapLayerVectorGraphsVisible: MapStore.mapLayerFeatureGraphsVisible,
+      mapLayerFeatureGraphs: MapStore.mapLayerFeatureGraphs,
       sideBarWidth: MapStore.currentSideBarWidth,
       sideBarOpen: MapStore.sideBarOpen,
       activeSideBar: MapStore.activeSideBarCard,
@@ -259,7 +260,7 @@ export default defineComponent({
     <v-row dense class="fill-height">
       <v-col class="d-flex flex-column fill-height" style="min-height: 90vh">
         <MapVue />
-        <MapLayerTableGraph v-if="mapLayerVectorGraphsVisible" />
+        <MapLayerTableGraph v-if="mapLayerVectorGraphsVisible && mapLayerFeatureGraphs.length" />
       </v-col>
     </v-row>
     <selected-feature-list />