@smartnet360/svelte-components 0.0.126 → 0.0.128

package/dist/map-v3/features/sites/custom/index.js

@@ -0,0 +1,16 @@
+/**
+ * Custom Sites Feature
+ *
+ * Allows users to upload CSV files with custom site locations
+ * and display them as styled circle markers on the map.
+ */
+// Store
+export { CustomSiteSetsStore } from './stores/custom-site-sets.svelte';
+// Logic
+export { parseCustomSitesCsv } from './logic/csv-parser';
+export { buildCustomSiteTree, getGroupCounts } from './logic/tree-adapter';
+// Components
+export { default as CustomSiteSetManager } from './components/CustomSiteSetManager.svelte';
+export { default as CustomSiteFilterControl } from './components/CustomSiteFilterControl.svelte';
+// Layers
+export { default as CustomSitesLayer } from './layers/CustomSitesLayer.svelte';

package/dist/map-v3/features/sites/custom/layers/CustomSitesLayer.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	/**
+	 * Custom Sites Layer
+	 * 
+	 * Renders custom site points on the map as circle markers.
+	 * Supports per-site sizing via sizeFactor and per-group coloring.
+	 */
+	import { getContext, onDestroy } from 'svelte';
+	import mapboxgl, { type Map as MapboxMap } from 'mapbox-gl';
+	import type { MapStore } from '../../../../core/stores/map.store.svelte';
+	import type { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+	import type { CustomSiteSet } from '../types';
+
+	interface Props {
+		/** The custom site sets store */
+		setsStore: CustomSiteSetsStore;
+	}
+
+	let { setsStore }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	const SOURCE_PREFIX = 'custom-sites-source-';
+	const LAYER_PREFIX = 'custom-sites-layer-';
+
+	// Track which layers we've added
+	let addedLayers = new Set<string>();
+
+	// Update layers when data changes
+	$effect(() => {
+		const map = mapStore?.map;
+		const _version = setsStore.version;
+		const sets = setsStore.sets;
+
+		if (!map) return;
+
+		// Remove layers for deleted sets
+		const currentSetIds = new Set(sets.map(s => s.id));
+		for (const layerId of addedLayers) {
+			const setId = layerId.replace(LAYER_PREFIX, '');
+			if (!currentSetIds.has(setId)) {
+				removeLayer(map, setId);
+			}
+		}
+
+		// Update or create layers for each set
+		for (const set of sets) {
+			updateSetLayer(map, set);
+		}
+	});
+
+	onDestroy(() => {
+		const map = mapStore?.map;
+		if (map) {
+			for (const layerId of addedLayers) {
+				const setId = layerId.replace(LAYER_PREFIX, '');
+				removeLayer(map, setId);
+			}
+		}
+	});
+
+	function updateSetLayer(map: MapboxMap, set: CustomSiteSet) {
+		const sourceId = SOURCE_PREFIX + set.id;
+		const layerId = LAYER_PREFIX + set.id;
+
+		// Build GeoJSON features for visible sites
+		const features = buildFeatures(set);
+
+		// Check if source exists
+		const existingSource = map.getSource(sourceId);
+
+		if (existingSource) {
+			// Update existing source data
+			(existingSource as mapboxgl.GeoJSONSource).setData({
+				type: 'FeatureCollection',
+				features
+			});
+
+			// Update layer paint properties
+			if (map.getLayer(layerId)) {
+				map.setPaintProperty(layerId, 'circle-opacity', set.visible ? set.opacity : 0);
+				map.setPaintProperty(layerId, 'circle-stroke-opacity', set.visible ? set.opacity : 0);
+			}
+		} else {
+			// Create new source and layer
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: {
+					type: 'FeatureCollection',
+					features
+				}
+			});
+
+			map.addLayer({
+				id: layerId,
+				type: 'circle',
+				source: sourceId,
+				paint: {
+					'circle-radius': ['get', 'radius'],
+					'circle-color': ['get', 'color'],
+					'circle-opacity': set.visible ? set.opacity : 0,
+					'circle-stroke-width': 1,
+					'circle-stroke-color': '#ffffff',
+					'circle-stroke-opacity': set.visible ? set.opacity : 0
+				}
+			});
+
+			addedLayers.add(layerId);
+
+			// Add popup on click
+			map.on('click', layerId, (e) => {
+				if (!e.features || e.features.length === 0) return;
+
+				const feature = e.features[0];
+				const props = feature.properties;
+				if (!props) return;
+
+				// Build popup content
+				let html = `<div class="custom-site-popup">`;
+				html += `<strong>${props.id}</strong>`;
+				html += `<div class="small text-muted">${props.group}</div>`;
+				
+				// Add extra fields
+				if (props.extraFields) {
+					try {
+						const extras = JSON.parse(props.extraFields);
+						for (const [key, value] of Object.entries(extras)) {
+							html += `<div class="small"><strong>${key}:</strong> ${value}</div>`;
+						}
+					} catch (e) {
+						// Ignore parse errors
+					}
+				}
+				
+				html += `</div>`;
+
+				new mapboxgl.Popup()
+					.setLngLat(e.lngLat)
+					.setHTML(html)
+					.addTo(map);
+			});
+
+			// Change cursor on hover
+			map.on('mouseenter', layerId, () => {
+				map.getCanvas().style.cursor = 'pointer';
+			});
+
+			map.on('mouseleave', layerId, () => {
+				map.getCanvas().style.cursor = '';
+			});
+		}
+	}
+
+	function removeLayer(map: MapboxMap, setId: string) {
+		const sourceId = SOURCE_PREFIX + setId;
+		const layerId = LAYER_PREFIX + setId;
+
+		try {
+			if (map.getLayer(layerId)) {
+				map.removeLayer(layerId);
+			}
+			if (map.getSource(sourceId)) {
+				map.removeSource(sourceId);
+			}
+			addedLayers.delete(layerId);
+		} catch (e) {
+			console.warn(`[CustomSitesLayer] Error removing layer ${layerId}:`, e);
+		}
+	}
+
+	function buildFeatures(set: CustomSiteSet): GeoJSON.Feature[] {
+		const features: GeoJSON.Feature[] = [];
+
+		for (const site of set.sites) {
+			// Skip if group is not visible
+			if (!set.visibleGroups.has(site.customGroup)) continue;
+
+			const color = set.groupColors.get(site.customGroup) || '#666666';
+			const radius = set.baseSize * site.sizeFactor;
+
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [site.lon, site.lat]
+				},
+				properties: {
+					id: site.id,
+					group: site.customGroup,
+					radius,
+					color,
+					sizeFactor: site.sizeFactor,
+					extraFields: JSON.stringify(site.extraFields)
+				}
+			});
+		}
+
+		return features;
+	}
+</script>
+
+<!-- This component only manages map layers, no DOM output -->

package/dist/map-v3/features/sites/custom/layers/CustomSitesLayer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+interface Props {
+    /** The custom site sets store */
+    setsStore: CustomSiteSetsStore;
+}
+declare const CustomSitesLayer: import("svelte").Component<Props, {}, "">;
+type CustomSitesLayer = ReturnType<typeof CustomSitesLayer>;
+export default CustomSitesLayer;

package/dist/map-v3/features/sites/custom/logic/csv-parser.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Custom Sites CSV Parser
+ *
+ * Parses CSV files with site coordinates and grouping information.
+ * Required columns: id, lat, lon
+ * Optional columns: customGroup/subgroup/group, sizeFactor, any extras
+ */
+import type { CustomSiteImportResult } from '../types';
+/**
+ * Parse a CSV string into CustomSite objects
+ */
+export declare function parseCustomSitesCsv(csvContent: string): CustomSiteImportResult;

package/dist/map-v3/features/sites/custom/logic/csv-parser.js

@@ -0,0 +1,182 @@
+/**
+ * Custom Sites CSV Parser
+ *
+ * Parses CSV files with site coordinates and grouping information.
+ * Required columns: id, lat, lon
+ * Optional columns: customGroup/subgroup/group, sizeFactor, any extras
+ */
+/** Column name variations we accept */
+const ID_COLUMNS = ['id', 'site_id', 'siteid', 'site'];
+const LAT_COLUMNS = ['lat', 'latitude', 'y'];
+const LON_COLUMNS = ['lon', 'lng', 'longitude', 'long', 'x'];
+const GROUP_COLUMNS = ['customgroup', 'custom_group', 'subgroup', 'sub_group', 'group'];
+const SIZE_COLUMNS = ['sizefactor', 'size_factor', 'size'];
+/**
+ * Parse a CSV string into CustomSite objects
+ */
+export function parseCustomSitesCsv(csvContent) {
+    const lines = csvContent.trim().split(/\r?\n/);
+    if (lines.length < 2) {
+        return {
+            sites: [],
+            groups: [],
+            invalidRows: 0,
+            errors: ['CSV must have a header row and at least one data row']
+        };
+    }
+    // Parse header
+    const headerLine = lines[0];
+    const headers = parseCSVLine(headerLine).map(h => h.toLowerCase().trim());
+    // Find required column indices
+    const idIndex = findColumnIndex(headers, ID_COLUMNS);
+    const latIndex = findColumnIndex(headers, LAT_COLUMNS);
+    const lonIndex = findColumnIndex(headers, LON_COLUMNS);
+    // Validate required columns
+    const missingColumns = [];
+    if (idIndex === -1)
+        missingColumns.push('id');
+    if (latIndex === -1)
+        missingColumns.push('lat/latitude');
+    if (lonIndex === -1)
+        missingColumns.push('lon/longitude');
+    if (missingColumns.length > 0) {
+        return {
+            sites: [],
+            groups: [],
+            invalidRows: 0,
+            errors: [`Missing required columns: ${missingColumns.join(', ')}`]
+        };
+    }
+    // Find optional column indices
+    const groupIndex = findColumnIndex(headers, GROUP_COLUMNS);
+    const sizeIndex = findColumnIndex(headers, SIZE_COLUMNS);
+    // Identify extra columns (not id, lat, lon, group, size)
+    const usedIndices = new Set([idIndex, latIndex, lonIndex]);
+    if (groupIndex !== -1)
+        usedIndices.add(groupIndex);
+    if (sizeIndex !== -1)
+        usedIndices.add(sizeIndex);
+    const extraColumnIndices = [];
+    headers.forEach((header, idx) => {
+        if (!usedIndices.has(idx) && header) {
+            extraColumnIndices.push({ index: idx, name: header });
+        }
+    });
+    // Parse data rows
+    const sites = [];
+    const groupsSet = new Set();
+    const errors = [];
+    let invalidRows = 0;
+    for (let i = 1; i < lines.length; i++) {
+        const line = lines[i].trim();
+        if (!line)
+            continue;
+        const values = parseCSVLine(line);
+        // Extract required fields
+        const id = values[idIndex]?.trim();
+        const latStr = values[latIndex]?.trim();
+        const lonStr = values[lonIndex]?.trim();
+        if (!id) {
+            errors.push(`Row ${i + 1}: Missing id`);
+            invalidRows++;
+            continue;
+        }
+        const lat = parseFloat(latStr);
+        const lon = parseFloat(lonStr);
+        if (isNaN(lat) || isNaN(lon)) {
+            errors.push(`Row ${i + 1}: Invalid coordinates (lat: ${latStr}, lon: ${lonStr})`);
+            invalidRows++;
+            continue;
+        }
+        // Validate coordinate ranges
+        if (lat < -90 || lat > 90) {
+            errors.push(`Row ${i + 1}: Latitude out of range: ${lat}`);
+            invalidRows++;
+            continue;
+        }
+        if (lon < -180 || lon > 180) {
+            errors.push(`Row ${i + 1}: Longitude out of range: ${lon}`);
+            invalidRows++;
+            continue;
+        }
+        // Extract optional fields
+        const customGroup = groupIndex !== -1
+            ? (values[groupIndex]?.trim() || 'Ungrouped')
+            : 'Ungrouped';
+        const sizeFactorStr = sizeIndex !== -1 ? values[sizeIndex]?.trim() : '';
+        const sizeFactor = sizeFactorStr ? parseFloat(sizeFactorStr) : 1.0;
+        const finalSizeFactor = isNaN(sizeFactor) || sizeFactor <= 0 ? 1.0 : sizeFactor;
+        // Extract extra fields
+        const extraFields = {};
+        for (const { index, name } of extraColumnIndices) {
+            const value = values[index]?.trim();
+            if (value) {
+                extraFields[name] = value;
+            }
+        }
+        sites.push({
+            id,
+            lat,
+            lon,
+            customGroup,
+            sizeFactor: finalSizeFactor,
+            extraFields
+        });
+        groupsSet.add(customGroup);
+    }
+    return {
+        sites,
+        groups: Array.from(groupsSet).sort(),
+        invalidRows,
+        errors: errors.slice(0, 10) // Limit error messages
+    };
+}
+/**
+ * Find the index of a column by checking multiple possible names
+ */
+function findColumnIndex(headers, possibleNames) {
+    for (const name of possibleNames) {
+        const index = headers.indexOf(name);
+        if (index !== -1)
+            return index;
+    }
+    return -1;
+}
+/**
+ * Parse a single CSV line, handling quoted values
+ */
+function parseCSVLine(line) {
+    const result = [];
+    let current = '';
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        const nextChar = line[i + 1];
+        if (inQuotes) {
+            if (char === '"' && nextChar === '"') {
+                current += '"';
+                i++;
+            }
+            else if (char === '"') {
+                inQuotes = false;
+            }
+            else {
+                current += char;
+            }
+        }
+        else {
+            if (char === '"') {
+                inQuotes = true;
+            }
+            else if (char === ',') {
+                result.push(current);
+                current = '';
+            }
+            else {
+                current += char;
+            }
+        }
+    }
+    result.push(current);
+    return result;
+}

package/dist/map-v3/features/sites/custom/logic/tree-adapter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Custom Sites Tree Adapter
+ *
+ * Builds TreeView nodes from a CustomSiteSet for hierarchical display.
+ * Structure: Root -> Groups -> Sites
+ */
+import type { TreeNode } from '../../../../../core/TreeView';
+import type { CustomSiteSet } from '../types';
+/**
+ * Build a tree structure from a CustomSiteSet
+ */
+export declare function buildCustomSiteTree(set: CustomSiteSet): TreeNode[];
+/**
+ * Get site counts per group
+ */
+export declare function getGroupCounts(set: CustomSiteSet): Map<string, number>;

package/dist/map-v3/features/sites/custom/logic/tree-adapter.js

@@ -0,0 +1,59 @@
+/**
+ * Custom Sites Tree Adapter
+ *
+ * Builds TreeView nodes from a CustomSiteSet for hierarchical display.
+ * Structure: Root -> Groups -> Sites
+ */
+/**
+ * Build a tree structure from a CustomSiteSet
+ */
+export function buildCustomSiteTree(set) {
+    const rootId = `root-${set.id}`;
+    // Group sites by customGroup
+    const groupedSites = new Map();
+    for (const site of set.sites) {
+        const existing = groupedSites.get(site.customGroup) || [];
+        existing.push(site);
+        groupedSites.set(site.customGroup, existing);
+    }
+    // Build group nodes
+    const groupNodes = [];
+    for (const group of set.groups) {
+        const sites = groupedSites.get(group) || [];
+        const groupId = `group-${set.id}-${group}`;
+        groupNodes.push({
+            id: groupId,
+            label: `${group} (${sites.length})`,
+            metadata: {
+                type: 'group',
+                groupId: group,
+                setId: set.id,
+                count: sites.length
+            }
+        });
+    }
+    // Create root node
+    const rootNode = {
+        id: rootId,
+        label: set.name,
+        children: groupNodes,
+        metadata: {
+            type: 'root',
+            setId: set.id,
+            totalSites: set.sites.length,
+            groupCount: set.groups.length
+        }
+    };
+    return [rootNode];
+}
+/**
+ * Get site counts per group
+ */
+export function getGroupCounts(set) {
+    const counts = new Map();
+    for (const site of set.sites) {
+        const current = counts.get(site.customGroup) || 0;
+        counts.set(site.customGroup, current + 1);
+    }
+    return counts;
+}

package/dist/map-v3/features/sites/custom/stores/custom-site-sets.svelte.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Custom Site Sets Store
+ *
+ * Manages multiple custom site sets with CRUD operations,
+ * localStorage persistence, and group visibility/color controls.
+ */
+import type { CustomSite, CustomSiteSet, CustomSiteImportResult } from '../types';
+/**
+ * Store for managing custom site sets
+ */
+export declare class CustomSiteSetsStore {
+    /** All custom site sets */
+    private _sets;
+    /** Version counter for reactivity triggers */
+    private _version;
+    constructor();
+    get sets(): CustomSiteSet[];
+    get version(): number;
+    /**
+     * Import sites from CSV content
+     */
+    importFromCsv(csvContent: string, fileName: string): CustomSiteImportResult & {
+        setId?: string;
+    };
+    /**
+     * Create a new custom site set
+     */
+    createSet(name: string, sites: CustomSite[], groups: string[]): string;
+    /**
+     * Toggle visibility of entire set
+     */
+    toggleSetVisibility(setId: string): void;
+    /**
+     * Toggle visibility of a specific group within a set
+     */
+    toggleGroupVisibility(setId: string, groupId: string): void;
+    /**
+     * Set color for a group
+     */
+    setGroupColor(setId: string, groupId: string, color: string): void;
+    /**
+     * Update base size for a set
+     */
+    setBaseSize(setId: string, size: number): void;
+    /**
+     * Update opacity for a set
+     */
+    setOpacity(setId: string, opacity: number): void;
+    /**
+     * Rename a set
+     */
+    renameSet(setId: string, newName: string): void;
+    /**
+     * Remove a set
+     */
+    removeSet(setId: string): void;
+    /**
+     * Clear all sets
+     */
+    clearAll(): void;
+    private saveToStorage;
+    private loadFromStorage;
+    /**
+     * Get a specific set by ID
+     */
+    getSet(setId: string): CustomSiteSet | undefined;
+    /**
+     * Get visible sites for a set (filtered by visible groups)
+     */
+    getVisibleSites(setId: string): CustomSite[];
+    /**
+     * Get all visible sites across all sets
+     */
+    getAllVisibleSites(): Array<{
+        site: CustomSite;
+        set: CustomSiteSet;
+    }>;
+}