Merge pull request #720 from SlideRuleEarth/carlos-dev4

Use geo parquet as the primary format for the files as opposed to pla…

Author: cugarteblair

web-client/.eslintrc.cjs

@@ -3,13 +3,27 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    project: './tsconfig.app.json',
+    tsconfigRootDir: __dirname,
+    extraFileExtensions: ['.vue']
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    // Catch async functions called without await
+    '@typescript-eslint/no-floating-promises': 'error',
+    // Warn about async functions that don't use await
+    'require-await': 'warn',
+    // Require functions that return promises to be marked async
+    '@typescript-eslint/promise-function-async': 'warn'
   }
 }

web-client/package.json

@@ -14,7 +14,7 @@
     "dev": "vite",
     "build-only": "vite build",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json",
-    "lint": "eslint .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
     "preview": "vite preview",
     "build": "run-p \"build-only {@}\" --",
     "build_with_maps": "VITE_BUILD_SOURCEMAP=true run-p \"build-only {@}\" --",

web-client/src/components/SrAnalysisMap.vue

@@ -35,7 +35,6 @@
     import { OL_DECK_LAYER_NAME } from '@/types/SrTypes';
     import { useAnalysisMapStore } from "@/stores/analysisMapStore";
     import { useGlobalChartStore } from "@/stores/globalChartStore";
-    import { useDeck3DConfigStore } from "@/stores/deck3DConfigStore";
     import { callPlotUpdateDebounced } from '@/utils/plotUtils';
     import { setCyclesGtsSpotsFromFileUsingRgtYatc,updateSrViewName } from "@/utils/SrMapUtils";
     import Checkbox from 'primevue/checkbox';
@@ -68,10 +67,10 @@
     const srParquetCfgStore = useSrParquetCfgStore();
     const analysisMapStore = useAnalysisMapStore();
     const globalChartStore = useGlobalChartStore();
-    //const autoReqParamsStore = useAutoReqParamsStore();
     const fncs = useFieldNameStore();
     const atlChartFilterStore = useAtlChartFilterStore();
     const activeTabStore = useActiveTabStore();
+    const fieldNameStore = useFieldNameStore();
     const controls = ref([]);
     const tooltipRef = ref<InstanceType<typeof SrCustomTooltip> | null>(null);
     // true whenever the active tab is _not_ “3‑D View”
@@ -152,6 +151,7 @@
         console.log(msg);
         if(newReqId !== oldReqId){
             if(newReqId > 0){
+                await fieldNameStore.loadMetaForReqId(newReqId); // async but don't await
                 globalChartStore.setAllColumnMinMaxValues({}); // reset all min/max values
                 await updateAnalysisMapView('watch selectedReqId');
             } else {
@@ -175,6 +175,7 @@
 
     onMounted(async () => {
         console.log("SrAnalysisMap onMounted using selectedReqId:",props.selectedReqId);
+        await fieldNameStore.loadMetaForReqId(props.selectedReqId); // async but don't await
         // Bind the tooltipRef to the store
         if (tooltipRef.value) {
             analysisMapStore.tooltipRef = tooltipRef.value;

web-client/src/components/SrAtl03Classification.vue

@@ -19,7 +19,6 @@ const reqParamsStore = useReqParamsStore();
                 tooltipText="A set of photon classification values that are designed to identify signal photons for different surface types with specified confidence" 
                 tooltipUrl="https://slideruleearth.io/web/rtd/user_guide/icesat2.html#native-atl03-photon-classification"
                 v-model="reqParamsStore.enableAtl03Classification"
-                :defaultValue="reqParamsStore.enableAtl03Classification"
             />
         </div>
         <div class="sr-atl03-cnf-body">

web-client/src/components/SrCheckbox.vue

@@ -67,7 +67,7 @@ const props = withDefaults(
     tooltipText: '',
     tooltipUrl: '',
     labelFontSize: 'small',
-    defaultValue: false,
+    defaultValue: undefined,
     labelOnLeft: false,
   }
 );
@@ -96,7 +96,10 @@ watch(localChecked, (newValue) => {
 });
 
 onMounted(() => {
-  setValue(props.modelValue, props.defaultValue);
+  // Only override modelValue with defaultValue if defaultValue was explicitly provided
+  if (props.defaultValue !== undefined) {
+    setValue(props.modelValue, props.defaultValue);
+  }
 });
 
 const emitChange = () => {

web-client/src/components/SrExportDialog.vue

@@ -6,7 +6,14 @@
 
         <div v-if="!exporting" class="dialog-body">
             <div class="dropdown-wrapper">
-                <label for="formatSelect">Select Format</label>
+                <label for="currentFormat">Current Format</label>
+                <div class="current-format-value">
+                    {{ currentFormat }}
+                </div>
+            </div>
+
+            <div class="dropdown-wrapper">
+                <label for="formatSelect">Select Exported Format</label>
                 <Select
                     id="formatSelect"
                     v-model="selectedFormat"
@@ -53,6 +60,7 @@ import { createDuckDbClient } from '@/utils/SrDuckDb';
 import { useSrParquetCfgStore } from '@/stores/srParquetCfgStore';
 import {getArrowFetchUrlAndOptions} from "@/utils/fetchUtils";
 import { exportCsvStreamed, getWritableFileStream } from "@/utils/SrParquetUtils";
+import { useFieldNameStore } from '@/stores/fieldNameStore';
 
 
 const props = defineProps<{
@@ -65,17 +73,34 @@ const emit = defineEmits<{
 }>();
 
 const toast = useToast();
+const fieldNameStore = useFieldNameStore();
 const visible = ref(props.modelValue);
 const exporting = ref(false);
 const selectedFormat = ref<'csv' | 'parquet' | 'geoparquet' | null>(null);
 const headerCols = ref<string[]>([]);
 const rowCount = ref<number | null>(null);
 
-const formats = [
-    { label: 'CSV', value: 'csv' },
-    { label: 'Parquet', value: 'parquet' },
-    { label: 'GeoParquet', value: 'geoparquet' },
-];
+const currentFormat = computed(() => {
+    const isGeo = fieldNameStore.isGeoParquet(props.reqId);
+    console.log(`[ExportDialog] currentFormat computed - reqId: ${props.reqId}, isGeo: ${isGeo}, asGeoCache:`, fieldNameStore.asGeoCache);
+    return isGeo ? 'GeoParquet' : 'Parquet';
+});
+
+const formats = computed(() => {
+    const isGeo = fieldNameStore.isGeoParquet(props.reqId);
+    if (isGeo) {
+        return [
+            { label: 'GeoParquet', value: 'geoparquet' },
+            { label: 'CSV', value: 'csv' },
+        ];
+    } else {
+        return [
+            { label: 'CSV', value: 'csv' },
+            { label: 'Parquet', value: 'parquet' },
+            { label: 'GeoParquet', value: 'geoparquet' },
+        ];
+    }
+});
 
 const estimatedSizeMB = computed(() => {
     if (rowCount.value !== null && headerCols.value.length > 0) {
@@ -103,6 +128,12 @@ onMounted(() => {
 watch(visible, async (val) => {
     if (val && props.reqId > 0) {
         try {
+            //console.log(`[ExportDialog] Dialog opened for reqId: ${props.reqId}`);
+
+            // Load field name metadata including as_geo flag
+            await fieldNameStore.loadMetaForReqId(props.reqId);
+            //console.log(`[ExportDialog] After loadMetaForReqId, asGeoCache:`, fieldNameStore.asGeoCache);
+
             const fileName = await db.getFilename(props.reqId);
             if (!fileName) return;
             const duck = await createDuckDbClient();
@@ -217,7 +248,7 @@ async function exportGeoParquet(fileName: string) : Promise<boolean>  {
     const metadata = await duckDbClient.getAllParquetMetadata(fileName);
 
     const hasGeoMetadata = metadata && 'geo' in metadata;
-
+    //console.log('exportGeoParquet - hasGeoMetadata:', hasGeoMetadata, metadata);
     if (hasGeoMetadata) {
         // File already has geo metadata, export as-is using exportParquet pattern
         console.log('File already has geo metadata, exporting as-is');
@@ -326,6 +357,13 @@ async function exportGeoParquet(fileName: string) : Promise<boolean>  {
     color: var(--label-color, #374151);
 }
 
+.current-format-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-color, #3b82f6);
+    padding: 0.25rem 0;
+}
+
 .size-info {
     font-size: 0.875rem;
     color: var(--info-color, #6b7280);
@@ -366,6 +404,10 @@ async function exportGeoParquet(fileName: string) : Promise<boolean>  {
         color: #cbd5e1;
     }
 
+    .current-format-value {
+        color: #60a5fa;
+    }
+
     .size-info {
         color: #94a3b8;
     }

web-client/src/components/SrGenUserOptions.vue

@@ -76,12 +76,19 @@ onMounted(async () => {
 
 <template>
     <div class="sr-gen-user-options-container">
+        <SrCheckbox
+            label="as GeoParquet"
+            v-model="reqParamsStore.isGeoParquet"
+            tooltipText="When you check this the server will return the data in GeoParquet format"
+            tooltipUrl="https://geoparquet.org/"
+        />
         <SrCheckbox
             label="Specify Resources (no CMR polygon search)"
             v-model="reqParamsStore.ignorePolygon"
             tooltipText="When you check this the server skips the CMR polygon search and uses the resources you specify below"
             tooltipUrl="https://slideruleearth.io/web/rtd/api_reference/earthdata.html#cmr"
         />
+
         <SrResources v-if="reqParamsStore.ignorePolygon"/>
         <Fieldset class="sr-timeouts-fieldset" legend="Timeouts" :toggleable="true" :collapsed="false">
             <SrSwitchedSliderInput

web-client/src/components/SrImportParquetFile.vue

@@ -5,7 +5,7 @@ import ProgressBar from 'primevue/progressbar';
 import Button from 'primevue/button';
 import SrToast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
-import { duckDbLoadOpfsParquetFile, readOrCacheSummary } from '@/utils/SrDuckDbUtils';
+import { duckDbLoadOpfsParquetFile, readOrCacheSummary, getGeoMetadataFromFile } from '@/utils/SrDuckDbUtils';
 import { useRequestsStore } from '@/stores/requestsStore';
 import { useRecTreeStore } from '@/stores/recTreeStore';
 import { db as indexedDb } from '@/db/SlideRuleDb';
@@ -166,11 +166,6 @@ const customUploader = async (event: any) => {
       await directoryHandle.removeEntry(opfsFile.name);
       return;
     }
-    if ('geo' in metadata) {
-      toast.add({ severity: 'error', summary: 'Unsupported File Format', detail: `SlideRule "geo" parquet not supported.`, life: 5000 });
-      await directoryHandle.removeEntry(opfsFile.name);
-      return;
-    }
 
     upload_progress.value = 90;
 
@@ -205,10 +200,12 @@ const customUploader = async (event: any) => {
 
     upload_progress.value = 95;
 
-    // If any of the following throws, we’ll delete the OPFS file to avoid orphans
+    // If any of the following throws, we'll delete the OPFS file to avoid orphans
     try {
       const svr_parms_str = await duckDbLoadOpfsParquetFile(newFilename);
       srReqRec.svr_parms = svr_parms_str;
+      const geoMetadata = await getGeoMetadataFromFile(newFilename);
+      srReqRec.geo_metadata = geoMetadata;
 
       await indexedDb.updateRequestRecord(srReqRec, true);
       await recTreeStore.updateRecMenu('From customUploader', srReqRec.req_id);

web-client/src/components/SrLocationFinder.vue

@@ -43,16 +43,21 @@ function updatePosition(lat: number, lon: number) {
     highlightEl.style.top = `${globalY}px`;
 
     highlightEl.classList.add('active');
-    setTimeout(() => highlightEl?.classList.remove('active'), 1000);
+    setTimeout(() => {
+        if (highlightEl) {
+            highlightEl.classList.remove('active');
+        }
+    }, 1000);
 
     //console.log('Highlight marker fixed position (body):', { globalX, globalY });
 }
 
 function hideMarker() {
-    if (highlightEl) {
-        highlightEl.style.left = '-9999px';
-        highlightEl.style.top = '-9999px';
-    }
+    if (!highlightEl) return;
+
+    highlightEl.style.left = '-9999px';
+    highlightEl.style.top = '-9999px';
+    highlightEl.classList.remove('active');
 }
 
 const handleScroll = () => {

web-client/src/components/SrPlotConfig.vue

@@ -94,18 +94,26 @@ async function enableLocationFinder() {
     if(selectedElRec){
         // initialize to selected point on map then update later from plot tooltip formatter
         globalChartStore.locationFinderLat = selectedElRec[latField];
-        globalChartStore.locationFinderLon = selectedElRec[lonField];    
+        globalChartStore.locationFinderLon = selectedElRec[lonField];
     }
     const reqIdStr = props.reqId.toString();
     const currentYData = chartStore.getYDataOptions(reqIdStr);
 
+    // Get the actual columns available in the file (elevationDataOptions contains the actual file columns)
+    const availableColumns = chartStore.getElevationDataOptions(reqIdStr);
+
+    // Only add lat/lon if they exist as actual columns in the file (regular parquet)
+    // For geoparquet, they're extracted from geometry column and don't need to be in yDataOptions
     const newFields = [latField, lonField].filter(
-        field => !currentYData.includes(field)
+        field => !currentYData.includes(field) && availableColumns.includes(field)
     );
 
     if (newFields.length > 0) {
+        console.log(`enableLocationFinder: Adding ${newFields.join(', ')} to yDataOptions (they exist as separate columns in file)`);
         chartStore.setYDataOptions(reqIdStr, [...currentYData, ...newFields]);
         await refreshScatterPlot('enabled Link to Elevation Plot');
+    } else if ([latField, lonField].some(field => !availableColumns.includes(field))) {
+        console.log(`enableLocationFinder: Skipping lat/lon - they don't exist as separate columns (likely geoparquet with geometry column)`);
     }
 
     if (await requestsStore.needAdvice()) {
@@ -134,7 +142,7 @@ onMounted(() => {
 
 watch(() => globalChartStore.enableLocationFinder, async (newVal, oldValue) => {
     if (!oldValue && newVal) {
-        console.log('SrPlotConfig watch enableLocationFinder:', newVal);
+        //console.log('SrPlotConfig watch enableLocationFinder:', newVal);
         enableLocationFinder();
     }
 });