Make it easier to get to the "upload polygon" option #618 WIP refactor

Author: cugarteblair

web-client/package-lock.json

@@ -47,8 +47,8 @@
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.2",
-    "shapefile": "^0.6.6",
     "sharp": "^0.34.3",
+    "shpjs": "^6.1.0",
     "vue": "^3.5.6",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",
@@ -65,6 +65,7 @@
     "@types/node": "^22.5.5",
     "@types/proj4": "^2.5.5",
     "@types/shapefile": "^0.6.4",
+    "@types/shpjs": "^3.4.7",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vue/eslint-config-prettier": "^9.0.0",

web-client/package.json

@@ -6,7 +6,6 @@ import Button from 'primevue/button';
 import SrToast from 'primevue/toast';
 import { useGeoJsonUploader } from '@/composables/useGeoJsonUploader';
 import { drawGeoJson, zoomOutToFullMap } from '@/utils/SrMapUtils';
-import { load } from 'ol/Image';
 
 const props = defineProps({
     reportUploadProgress: {
@@ -76,6 +75,7 @@ const onClear = () => {
                     :maxFileSize="10000000000" 
                     customUpload 
                     :chooseLabel="label"
+                    :chooseIcon="'pi pi-upload'"
                     @uploader="handleReqUpload"
                     @select="onSelect"
                     @error="onError"
@@ -89,11 +89,13 @@ const onClear = () => {
                     :maxFileSize="10000000000" 
                     customUpload 
                     :chooseLabel="label"
+                    :chooseIcon="'pi pi-upload'"
                     @uploader="handleFeaturesUpload"
                     @select="onSelect"
                     @error="onError"
                     @clear="onClear"
-            />    </div>
+            />    
+        </div>
     </div>
 </template>
 

web-client/src/components/SrGeoJsonFileUpload.vue

@@ -51,7 +51,7 @@
     import SrCustomTooltip from "@/components//SrCustomTooltip.vue";
     import SrDropPinControl from "@/components//SrDropPinControl.vue";
     import Point from 'ol/geom/Point';
-    import { readShapefileToOlFeatures,ShapefileInputs } from "@/composables/useReadShapeFile";
+    import { readShapefileToOlFeatures } from "@/composables/useReadShapefile";
     
     const defaultBathymetryFeatures: Ref<Feature<Geometry>[] | null> = ref(null);
     const showBathymetryFeatures = computed(() => {
@@ -561,22 +561,18 @@
     }
 
     async function loadDefaultBathymetryFeatures() {
-        const shpUrl = '/shapefiles/ATL24_Mask_v5.shp';
-        const dbfUrl = '/shapefiles/ATL24_Mask_v5.dbf';
-        const shxUrl = '/shapefiles/ATL24_Mask_v5.shx';
-
-        const bathyInputs: ShapefileInputs = {
-            shp: shpUrl,
-            dbf: dbfUrl,
-            shx: shxUrl
+        const bathyFiles = {
+            shp: '/shapefiles/ATL24_Mask_v5.shp',
+            dbf: '/shapefiles/ATL24_Mask_v5.dbf',
+            shx: '/shapefiles/ATL24_Mask_v5.shx'
         };
-        defaultBathymetryFeatures.value = await readShapefileToOlFeatures(bathyInputs);
-        if(defaultBathymetryFeatures.value && defaultBathymetryFeatures.value.length > 0){
+
+        defaultBathymetryFeatures.value = await readShapefileToOlFeatures(bathyFiles);
+        if (defaultBathymetryFeatures.value?.length) {
             loadBathymetryFeatures(defaultBathymetryFeatures.value);
         } else {
-            console.warn("SrMap onMounted no features to load from bathy assets shapefile");
+            console.warn("No bathymetry features loaded from static shapefile");
         }
-        //console.log("loadDefaultBathymetryFeatures defaultBathymetryFeaturesLoaded:",defaultBathymetryFeaturesLoaded.value);
     }
 
     onMounted(async () => {

web-client/src/components/SrMap.vue

@@ -43,35 +43,22 @@ import type { Feature as OLFeature } from "ol";
 import type { Geometry } from "ol/geom";
 import { readShapefileToOlFeatures } from "@/composables/useReadShapefile";
 
-// Emit the features array to the parent
 const emit = defineEmits<{
     (e: "features", features: OLFeature<Geometry>[]): void;
 }>();
 
 const showDialog = ref(false);
 
-
 async function onFilesSelected(event: Event) {
     const files = (event.target as HTMLInputElement).files;
     if (!files) return;
 
-    const shp = Array.from(files).find(f => f.name.endsWith('.shp'));
-    const dbf = Array.from(files).find(f => f.name.endsWith('.dbf'));
-    const shx = Array.from(files).find(f => f.name.endsWith('.shx'));
-
-    if (!shp || !dbf) {
-        alert('Please provide at least .shp and .dbf files');
-        return;
-    }
-
     try {
-        const olFeatures = await readShapefileToOlFeatures({ shp, dbf, shx });
+        const olFeatures = await readShapefileToOlFeatures(files);
         emit("features", olFeatures);
         showDialog.value = false;
     } catch (err) {
-        // You can use a toast, modal, etc.
         alert((err instanceof Error ? err.message : String(err)));
     }
 }
-
 </script>

web-client/src/components/SrShapefileUpload.vue

@@ -1,78 +1,41 @@
+// useReadShapefile.ts
 import { GeoJSON } from 'ol/format';
 import type { Feature as OLFeature } from 'ol';
 import type { Geometry } from 'ol/geom';
-import * as shapefile from 'shapefile';
+import shp from 'shpjs';
 
-// Supports both File and URL string
-export type ShapefileInputSource = File | string;
+export type FileListInput = FileList;
+export type UrlInput = Record<string, string>; // { shp: url, dbf: url, shx?: url }
 
-export interface ShapefileInputs {
-    shp: ShapefileInputSource;
-    dbf: ShapefileInputSource;
-    shx?: ShapefileInputSource;
-}
-
-/**
- * Reads shapefile components and returns OpenLayers features.
- * Accepts File or asset URL string for each part.
- */
-export async function readShapefileToOlFeatures({
-    shp,
-    dbf,
-    shx,
-}: ShapefileInputs): Promise<OLFeature<Geometry>[]> {
-    try {
-        const [shpBuf, dbfBuf, shxBuf] = await Promise.all([
-            loadAsArrayBuffer(shp),
-            loadAsArrayBuffer(dbf),
-            shx ? loadAsArrayBuffer(shx) : Promise.resolve(undefined),
-        ]);
-
-        const source = await shapefile.open(shpBuf, dbfBuf, shxBuf as any);
-        const features: any[] = [];
-        let result: { done: boolean; value: any };
-        do {
-            result = await source.read();
-            if (!result.done) features.push(result.value);
-        } while (!result.done);
-
-        const geojson = {
-            type: 'FeatureCollection',
-            features
-        };
-
-        const geojsonFormat = new GeoJSON();
-        const olFeatures = geojsonFormat.readFeatures(geojson, {
-            featureProjection: 'EPSG:3857',
-        }) as OLFeature<Geometry>[];
+export async function readShapefileToOlFeatures(
+    input: FileListInput | UrlInput
+): Promise<OLFeature<Geometry>[]> {
+    let fileMap: Record<string, ArrayBuffer> = {};
 
-        return olFeatures;
-    } catch (err) {
-        throw new Error("Failed to read shapefile: " + (err instanceof Error ? err.message : String(err)));
+    if (input instanceof FileList) {
+        for (const file of Array.from(input)) {
+            const ext = file.name.split('.').pop()?.toLowerCase();
+            if (ext) fileMap[ext] = await file.arrayBuffer();
+        }
+    } else {
+        const fetches = await Promise.all(
+            Object.entries(input).map(([ext, url]) =>
+                fetch(url).then(resp => {
+                    if (!resp.ok) throw new Error(`Failed to fetch ${url}`);
+                    return resp.arrayBuffer();
+                })
+            )
+        );
+        fileMap = Object.fromEntries(Object.keys(input).map((k, i) => [k, fetches[i]]));
     }
-}
 
-/**
- * Helper to load File or asset URL string as ArrayBuffer
- */
-async function loadAsArrayBuffer(input: ShapefileInputSource): Promise<ArrayBuffer> {
-    if (input instanceof File) {
-        return readFileAsync(input);
-    } else if (typeof input === "string") {
-        const resp = await fetch(input);
-        if (!resp.ok) throw new Error(`Failed to fetch asset: ${input}`);
-        return await resp.arrayBuffer();
-    } else {
-        throw new Error('Invalid input type (expected File or URL string)');
+    if (!fileMap.shp || !fileMap.dbf) {
+        throw new Error("Missing required .shp or .dbf file");
     }
-}
 
-// Helper for reading File as ArrayBuffer
-async function readFileAsync(file: File): Promise<ArrayBuffer> {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result as ArrayBuffer);
-        reader.onerror = () => reject(reader.error || new Error('Failed to read file'));
-        reader.readAsArrayBuffer(file);
-    });
+    const geojson = await shp(fileMap);
+    const geojsonFormat = new GeoJSON();
+    return geojsonFormat.readFeatures(geojson, {
+        featureProjection: 'EPSG:3857',
+    }) as OLFeature<Geometry>[];
 }

web-client/src/composables/useReadShapeFile.ts

@@ -578,9 +578,9 @@ const createReqParamsStore = (id: string) =>
             req.yapc = yapc;
             //console.log('using req.yapc:',req.yapc)
           }
-          if (this.convexHull?.length) {
-            req.cmr = { polygon: this.convexHull };
-          }
+          // if (this.convexHull?.length) {
+          //   req.cmr = { polygon: this.convexHull };
+          // }
 
           if(this.distanceIn.value === 'segments') {
             req.dist_in_seg = true;

web-client/src/composables/useShapefileUpload.ts

@@ -0,0 +1,7 @@
+declare module 'shpjs' {
+    export default function shp(
+        input: Record<string, ArrayBuffer> | ArrayBuffer | string
+    ): Promise<GeoJSON.FeatureCollection>;
+
+    // Optional: Add other types if needed
+}