Merge pull request #714 from SlideRuleEarth/carlos-dev4

cugarteblair · web-flow · commit dbcd3a0bcd37 · 2025-10-03T15:16:25.000-04:00
When updating the plot some errors do not alert the user, they only s…
diff --git a/web-client/src/components/SrRasterParams.vue b/web-client/src/components/SrRasterParams.vue
@@ -15,9 +15,10 @@
                     @click="addRasterParams()">Add New Raster Params
                 </Button>
             </div>
-            <SrTextInput 
+            <SrSqlFieldInput 
                 label="Key" 
                 v-model="rasterParamsStore.key" 
+                tooltipText="user supplied name used to identify results returned from sampling this raster, must be SQL compliant and unique for each raster param set"
             />
             <Select 
                 v-model="rasterParamsStore.asset"
@@ -39,15 +40,18 @@
             />
             <SrSliderInput 
                 label="Radius" 
-                v-model="rasterParamsStore.radius" 
+                v-model="rasterParamsStore.radius"
+                tooltipText="the size of the kernel in meters when sampling a raster; the size of the region in meters for zonal statistics" 
             />
             <SrCheckbox 
                 label="Zonal Stats" 
-                v-model="rasterParamsStore.zonalStats" 
+                v-model="rasterParamsStore.zonalStats"
+                tooltipText="boolean whether to calculate and return zonal statistics for the region around the location being sampled" 
             />
             <SrCheckbox 
                 label="With Flags" 
-                v-model="rasterParamsStore.withFlags" 
+                v-model="rasterParamsStore.withFlags"
+                tooltipText="boolean whether to include auxiliary information about the sampled pixel in the form of a 32-bit flag" 
             />
             <Sr32BitFlag   
                 :disabled="!rasterParamsStore.withFlags"
@@ -74,13 +78,15 @@
                     :setValue="rasterParamsStore.setT1"
                 />
             </div>
-            <SrTextInput 
+            <SrTextInput
                 label="Substring" 
-                v-model="rasterParamsStore.substring" 
+                v-model="rasterParamsStore.substring"
+                tooltipText="substring filter for rasters to be sampled; the raster will only be sampled if the name of the raster includes the provided substring (useful for datasets that have multiple rasters for a given geolocation to be sampled)" 
             />
             <SrCheckbox
                 label="Use Closest Time"
                 v-model="rasterParamsStore.useClosetTime"
+                tooltipText="time used to filter rasters to be sampled; only the raster that is closest in time to the provided time will be sampled - can be multiple rasters if they all share the same time (format %Y-%m-%dT%H:%M:%SZ, e.g. 2018-10-13T00:00:00Z)"
             />     
             <SrCalendar 
                 label="Closest" 
@@ -93,6 +99,7 @@
             <SrCheckbox 
                 label="Use POI Time"
                 v-model="rasterParamsStore.use_poi_time"
+                tooltipText="overrides the “closest_time” setting (or provides one if not set) with the time associated with the point of interest being sampled"
             />
             <div class="sr-raster-params-catalog">
                 <SrLabelInfoIconButton 
@@ -142,6 +149,7 @@
     import SrLabelInfoIconButton from './SrLabelInfoIconButton.vue';
     import Sr32BitFlag from './Sr32BitFlag.vue';
     import { onMounted } from 'vue';
+    import SrSqlFieldInput from './SrSqlFieldInput.vue';
 
     const rasterParamsStore = useRasterParamsStore();
 
diff --git a/web-client/src/components/SrSqlFieldInput.vue b/web-client/src/components/SrSqlFieldInput.vue
@@ -0,0 +1,170 @@
+<template>
+    <div class="sr-sql-field-input-wrapper">
+      <div class="sr-text-row">
+            <SrLabelInfoIconButton :label="label" :tooltipText="tooltipText" :tooltipUrl="tooltipUrl" :insensitive="insensitive" :labelFontSize="labelFontSize"/>
+            <InputText v-model="modelValueComputed" class="input-text" :id="`${label}_text`" :disabled="insensitive" @blur="handleBlur"/>
+            <span v-if="showWarning" class="warning-icon" :title="warningMessage">⚠️</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+    import { computed, ref } from 'vue';
+    import InputText from 'primevue/inputtext';
+    import SrLabelInfoIconButton from './SrLabelInfoIconButton.vue';
+
+    const props = defineProps({
+        modelValue: {
+            type: String,
+            required: true
+        },
+        label: {
+            type: String,
+            default: 'Label'
+        },
+        insensitive: {
+            type: Boolean,
+            default: false
+        },
+        tooltipText: {
+            type: String,
+            default: 'tooltip text'
+        },
+        tooltipUrl: {
+            type: String,
+            default: ''
+        },
+        labelFontSize: {
+            type: String,
+            default: 'small' // default font size if not passed
+        },
+    });
+
+    const emit = defineEmits(['update:modelValue']);
+
+    const showWarning = ref(false);
+    const warningMessage = ref('');
+
+    /**
+     * Sanitize input for SQL field names
+     * - Allow only alphanumeric characters and underscores
+     * - Convert dashes to underscores
+     * - Remove other special characters
+     * - Ensure it starts with a letter or underscore
+     */
+    function sanitizeSqlFieldName(value: string): string {
+        if (!value) return value;
+
+        // Replace dashes with underscores
+        let sanitized = value.replace(/-/g, '_');
+
+        // Remove any characters that are not alphanumeric or underscore
+        sanitized = sanitized.replace(/[^a-zA-Z0-9_]/g, '');
+
+        // If it starts with a number, prepend an underscore
+        if (/^\d/.test(sanitized)) {
+            sanitized = '_' + sanitized;
+        }
+
+        return sanitized;
+    }
+
+    /**
+     * Check if the value needs sanitization
+     */
+    function needsSanitization(value: string): boolean {
+        if (!value) return false;
+
+        // Check for invalid characters for SQL field names
+        if (/[^a-zA-Z0-9_]/.test(value)) {
+            return true;
+        }
+
+        // Check if starts with a number
+        if (/^\d/.test(value)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    // Create a computed with both getter and setter for modelValue
+    const modelValueComputed = computed({
+        get: () => props.modelValue, // Getter simply returns the current prop value
+        set: (newValue) => {
+            // Check if sanitization is needed
+            if (needsSanitization(newValue)) {
+                showWarning.value = true;
+                warningMessage.value = 'Field name contains invalid characters for SQL. Will be sanitized on blur.';
+            } else {
+                showWarning.value = false;
+                warningMessage.value = '';
+            }
+            emit('update:modelValue', newValue); // Emit the update event with the new value
+        }
+    });
+
+    // Handle blur event to sanitize the input
+    function handleBlur() {
+        if (needsSanitization(props.modelValue)) {
+            const sanitized = sanitizeSqlFieldName(props.modelValue);
+            emit('update:modelValue', sanitized);
+            showWarning.value = false;
+            warningMessage.value = '';
+        }
+    }
+</script>
+
+<style scoped>
+.sr-sql-field-input-wrapper {
+    border: 1px solid transparent;
+    border-top: 0.125rem solid transparent;
+    border-radius: var(--p-border-radius);
+    margin-top: 0.125rem;
+    font-size: small;
+}
+
+.sr-text-row  {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.125rem;
+    gap: 0.5rem;
+}
+
+.sr-text-input-label {
+    margin-right: 0.5rem;
+    font-size: small;
+    white-space: nowrap;
+}
+
+.sr-text-input-label-insensitive {
+    margin-right: 0.5rem;
+    font-size: small;
+    white-space: nowrap;
+    color: #888; /*  grey color */
+}
+
+.input-text {
+    width: 15em; /* Adjust as needed for 5 digits */
+    text-align: right;
+    padding: 0.25rem;
+}
+
+.warning-icon {
+    font-size: 1.2rem;
+    color: #ff9800;
+    cursor: help;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+</style>
diff --git a/web-client/src/stores/srToastStore.ts b/web-client/src/stores/srToastStore.ts
@@ -14,10 +14,10 @@ export const useSrToastStore = defineStore('srToast', {
         },
         error(title: string = 'I am title', body: string = 'I am body', life?: number): void {
             app.config.globalProperties.$toast.add({
-                severity: 'error', 
-                summary: title, 
-                detail: body, 
-                life: life ?? this.life // Use provided life or default to this.life
+                severity: 'error',
+                summary: title,
+                detail: body,
+                life: life ?? 0 // Error toasts stay until user closes them (life: 0 means no auto-close)
             });
         },
         success(title: string = 'I am title', body: string = 'I am body', life?: number): void {
diff --git a/web-client/src/utils/SrMapUtils.ts b/web-client/src/utils/SrMapUtils.ts
@@ -73,8 +73,6 @@ import Overlay from 'ol/Overlay';
 import { extractSrRegionFromGeometry, processConvexHull } from '@/utils/geojsonUploader';
  
 
-// This grabs the constructor’s first parameter type
-type ScatterplotLayerProps = ConstructorParameters<typeof ScatterplotLayer>[0];
 
 export const polyCoordsExist = computed(() => {
     let exist = false;
@@ -1462,23 +1460,26 @@ export const updateElevationMap = async (req_id: number) => {
                     analysisMapStore.analysisMapInitialized = true;
                 } else {
                     console.error(`updateElevationMap Failed to get firstRec for req_id:${req_id}`);
-                    useSrToastStore().warn('No points in file', 'The request produced no points');
+                    useSrToastStore().error('Failed to update map', 'Unable to retrieve first record from the request data');
                 }
             } else {
                 console.warn(`updateElevationMap No points in file for req_id:${req_id}`);
-                useSrToastStore().warn('No points in file', 'The request produced no points');
+                useSrToastStore().error('Failed to update map', 'The request produced no elevation points');
             }
         } else {
             console.error(`updateElevationMap Failed to get parms for req_id:${req_id}`);
+            useSrToastStore().error('Failed to update map', `Unable to retrieve parameters for request ID ${req_id}`);
         }
     } catch (error) {
-        console.warn('Failed to update selected request:', error);
+        console.error('Failed to update selected request:', error);
+        useSrToastStore().error('Failed to update map', `Error updating elevation data: ${error}`);
     }
     try {
         await router.push(`/analyze/${useRecTreeStore().selectedReqId}`);
         console.log('Successfully navigated to analyze:', useRecTreeStore().selectedReqId);
     } catch (error) {
         console.error('Failed to navigate to analyze:', error);
+        useSrToastStore().error('Navigation Error', `Failed to navigate to analyze: ${error}`); 
     }
     const endTime = performance.now();
     console.log(`updateElevationMap took ${endTime - startTime} milliseconds.`);
@@ -1496,12 +1497,15 @@ export async function updateMapAndPlot(reason:string): Promise<void> {
             await callPlotUpdateDebounced(`updateMapAndPlot: ${reason}`);
         } else {
             console.error(`updateMapAndPlot Invalid req_id:${req_id}`);
+            useSrToastStore().error('Failed to update map and plot', `Invalid request ID: ${req_id}`);
         }
     } catch (error) {
         if (error instanceof Error) {
             console.error('updateMapAndPlot Failed:', error.message);
+            useSrToastStore().error('Failed to update map and plot', `${error.message}`);
         } else {
             console.error('updateMapAndPlot Unknown error occurred:', error);
+            useSrToastStore().error('Failed to update map and plot', `An unknown error occurred: ${error}`);
         }
     } finally {
         const endTime = performance.now();
