@smartnet360/svelte-components 0.0.125 → 0.0.126

package/dist/map-v3/features/cells/custom/components/CustomCellSetManager.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	/**
+	 * Custom Cell Set Manager
+	 * 
+	 * Upload CSV files, view import results, and manage custom cell sets.
+	 * Acts as the main control panel for the custom cells feature.
+	 * Includes filter controls for each loaded set.
+	 */
+	import { MapControl } from '../../../../shared';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellImportResult } from '../types';
+	import CustomCellFilterControl from './CustomCellFilterControl.svelte';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { 
+		setsStore, 
+		position = 'top-left' 
+	}: Props = $props();
+
+	// Derived for reactivity
+	let setsArray = $derived(setsStore.sets);
+
+	// State
+	let showImportModal = $state(false);
+	let importResult = $state<CustomCellImportResult | null>(null);
+	let importFileName = $state('');
+	let importError = $state('');
+	let fileInput: HTMLInputElement;
+
+	/**
+	 * Handle file selection
+	 */
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		
+		if (!file) return;
+		
+		importFileName = file.name.replace(/\.csv$/i, '');
+		importError = '';
+
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			try {
+				const content = e.target?.result as string;
+				importResult = setsStore.importFromCsv(content, file.name);
+				showImportModal = true;
+			} catch (err) {
+				importError = err instanceof Error ? err.message : 'Failed to parse CSV';
+				importResult = null;
+			}
+		};
+		reader.onerror = () => {
+			importError = 'Failed to read file';
+			importResult = null;
+		};
+		reader.readAsText(file);
+
+		// Reset input so same file can be selected again
+		input.value = '';
+	}
+
+	/**
+	 * Confirm import and create set
+	 */
+	function confirmImport() {
+		if (!importResult) return;
+
+		setsStore.createSet(importFileName, importResult);
+		closeModal();
+	}
+
+	/**
+	 * Close the modal
+	 */
+	function closeModal() {
+		showImportModal = false;
+		importResult = null;
+		importFileName = '';
+		importError = '';
+	}
+
+	/**
+	 * Trigger file input click
+	 */
+	function triggerFileInput() {
+		fileInput?.click();
+	}
+
+	/**
+	 * Remove a set
+	 */
+	function removeSet(setId: string) {
+		if (confirm('Remove this custom cell set?')) {
+			setsStore.removeSet(setId);
+		}
+	}
+</script>
+
+<MapControl {position} title="Custom Cells" icon="plus-circle" controlWidth="300px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+			title="Import CSV"
+			onclick={triggerFileInput}
+		>
+			<i class="bi bi-upload"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-cell-manager">
+		<!-- Hidden file input -->
+		<input
+			type="file"
+			accept=".csv"
+			class="d-none"
+			bind:this={fileInput}
+			onchange={handleFileSelect}
+		/>
+
+		<!-- Error message -->
+		{#if importError}
+			<div class="alert alert-danger py-1 px-2 mb-2 small">
+				<i class="bi bi-exclamation-triangle me-1"></i>
+				{importError}
+			</div>
+		{/if}
+
+		<!-- Empty state -->
+		{#if setsStore.sets.length === 0}
+			<div class="text-center p-3">
+				<i class="bi bi-layers fs-1 text-muted"></i>
+				<p class="text-muted small mt-2 mb-0">
+					No custom cell sets loaded.
+				</p>
+				<button 
+					class="btn btn-sm btn-outline-primary mt-2"
+					onclick={triggerFileInput}
+				>
+					<i class="bi bi-upload me-1"></i> Import CSV
+				</button>
+			</div>
+		{:else}
+			<!-- List of sets -->
+			<ul class="list-group list-group-flush">
+				{#each setsStore.sets as set (set.id)}
+					<li class="list-group-item d-flex justify-content-between align-items-center py-2 px-2">
+						<div class="d-flex align-items-center">
+							<button
+								class="btn btn-sm p-0 me-2"
+								title={set.visible ? 'Hide' : 'Show'}
+								onclick={() => setsStore.toggleSetVisibility(set.id)}
+							>
+								<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
+							</button>
+							<div>
+								<div class="fw-medium small">{set.name}</div>
+								<small class="text-muted">
+									{set.cells.length} cells · {set.groups.length} groups
+								</small>
+							</div>
+						</div>
+						<button
+							class="btn btn-sm btn-outline-danger border-0 p-1"
+							title="Remove"
+							onclick={() => removeSet(set.id)}
+						>
+							<i class="bi bi-trash"></i>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</MapControl>
+
+<!-- Import Result Modal -->
+{#if showImportModal && importResult}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-file-earmark-spreadsheet me-2"></i>
+						Import: {importFileName}
+					</h6>
+					<button type="button" class="btn-close" onclick={closeModal}></button>
+				</div>
+				<div class="modal-body">
+					<!-- Import Summary -->
+					<div class="mb-3">
+						<div class="d-flex justify-content-between align-items-center mb-2">
+							<span class="text-success">
+								<i class="bi bi-check-circle me-1"></i>
+								{importResult.cells.length} cells matched
+							</span>
+							<span class="badge bg-success">{importResult.totalRows} rows</span>
+						</div>
+
+						{#if importResult.unmatchedTxIds.length > 0}
+							<div class="text-warning small mb-2">
+								<i class="bi bi-exclamation-triangle me-1"></i>
+								{importResult.unmatchedTxIds.length} cells not found
+								<button 
+									class="btn btn-link btn-sm p-0 ms-1"
+									type="button"
+									data-bs-toggle="collapse"
+									data-bs-target="#unmatchedList"
+								>
+									(show)
+								</button>
+							</div>
+							<div class="collapse" id="unmatchedList">
+								<div class="small bg-light p-2 rounded" style="max-height: 100px; overflow-y: auto;">
+									{importResult.unmatchedTxIds.slice(0, 20).join(', ')}
+									{#if importResult.unmatchedTxIds.length > 20}
+										<span class="text-muted">... and {importResult.unmatchedTxIds.length - 20} more</span>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Groups found -->
+					<div class="mb-3">
+						<label class="form-label small fw-medium">Groups Found ({importResult.groups.length})</label>
+						<div class="d-flex flex-wrap gap-1">
+							{#each importResult.groups as group}
+								<span class="badge bg-secondary">{group}</span>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Extra columns -->
+					{#if importResult.extraColumns.length > 0}
+						<div class="mb-3">
+							<label class="form-label small fw-medium">Extra Columns (for tooltips)</label>
+							<div class="d-flex flex-wrap gap-1">
+								{#each importResult.extraColumns as col}
+									<span class="badge bg-info">{col}</span>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Set Name -->
+					<div class="mb-2">
+						<label for="setName" class="form-label small fw-medium">Set Name</label>
+						<input 
+							type="text" 
+							class="form-control form-control-sm" 
+							id="setName"
+							bind:value={importFileName}
+						/>
+					</div>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={closeModal}>
+						Cancel
+					</button>
+					<button 
+						type="button" 
+						class="btn btn-primary btn-sm"
+						onclick={confirmImport}
+						disabled={importResult.cells.length === 0}
+					>
+						<i class="bi bi-check-lg me-1"></i>
+						Import {importResult.cells.length} cells
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.custom-cell-manager {
+		font-size: 0.875rem;
+	}
+
+	.list-group-item {
+		background: transparent;
+	}
+
+	.modal {
+		z-index: 2000;
+	}
+</style>
+
+<!-- Filter Controls for each set (rendered outside the manager control) -->
+{#each setsArray as set (set.id)}
+	{#key set.id}
+		<CustomCellFilterControl
+			{position}
+			{setsStore}
+			{set}
+			onremove={(id) => setsStore.removeSet(id)}
+		/>
+	{/key}
+{/each}

package/dist/map-v3/features/cells/custom/components/CustomCellSetManager.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const CustomCellSetManager: import("svelte").Component<Props, {}, "">;
+type CustomCellSetManager = ReturnType<typeof CustomCellSetManager>;
+export default CustomCellSetManager;

package/dist/map-v3/features/cells/custom/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Components - Barrel Export
+ */
+export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
+export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';

package/dist/map-v3/features/cells/custom/components/index.js

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Components - Barrel Export
+ */
+export { default as CustomCellFilterControl } from './CustomCellFilterControl.svelte';
+export { default as CustomCellSetManager } from './CustomCellSetManager.svelte';

package/dist/map-v3/features/cells/custom/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Custom Cells Feature - Main Barrel Export
+ *
+ * Ad-hoc cell layers loaded from CSV files.
+ * Reference existing cells by txId with custom grouping and sizing.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     CustomCellsLayer,
+ *     CustomCellSetManager,
+ *     CustomCellFilterControl,
+ *     createCustomCellSetsStore
+ *   } from './';
+ *
+ *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
+ * </script>
+ *
+ * <CustomCellSetManager setsStore={customSetsStore} position="top-left" />
+ * <CustomCellsLayer setsStore={customSetsStore} />
+ * {#each customSetsStore.sets as set (set.id)}
+ *   <CustomCellFilterControl setsStore={customSetsStore} {set} position="top-left" />
+ * {/each}
+ * ```
+ */
+export type { CustomCell, CustomCellSet, CustomCellSetConfig, CustomCellImportResult } from './types';
+export { CUSTOM_CELL_PALETTE } from './types';
+export { CustomCellSetsStore, createCustomCellSetsStore } from './stores';
+export { CustomCellFilterControl, CustomCellSetManager } from './components';
+export { CustomCellsLayer } from './layers';
+export { parseCustomCellsCsv, buildCellLookup, buildCustomCellTree, getGroupCounts } from './logic';

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

@@ -0,0 +1,35 @@
+/**
+ * Custom Cells Feature - Main Barrel Export
+ *
+ * Ad-hoc cell layers loaded from CSV files.
+ * Reference existing cells by txId with custom grouping and sizing.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     CustomCellsLayer,
+ *     CustomCellSetManager,
+ *     CustomCellFilterControl,
+ *     createCustomCellSetsStore
+ *   } from './';
+ *
+ *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
+ * </script>
+ *
+ * <CustomCellSetManager setsStore={customSetsStore} position="top-left" />
+ * <CustomCellsLayer setsStore={customSetsStore} />
+ * {#each customSetsStore.sets as set (set.id)}
+ *   <CustomCellFilterControl setsStore={customSetsStore} {set} position="top-left" />
+ * {/each}
+ * ```
+ */
+export { CUSTOM_CELL_PALETTE } from './types';
+// Stores
+export { CustomCellSetsStore, createCustomCellSetsStore } from './stores';
+// Components
+export { CustomCellFilterControl, CustomCellSetManager } from './components';
+// Layers
+export { CustomCellsLayer } from './layers';
+// Logic (for advanced usage)
+export { parseCustomCellsCsv, buildCellLookup, buildCustomCellTree, getGroupCounts } from './logic';

package/dist/map-v3/features/cells/custom/layers/CustomCellsLayer.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+	/**
+	 * Custom Cells Layer
+	 * 
+	 * Renders custom cell sets on the map with sizeFactor support.
+	 * Each set is rendered as a separate layer for independent styling.
+	 */
+	import { getContext, onMount, onDestroy } from 'svelte';
+	import type { MapStore } from '../../../../core/stores/map.store.svelte';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellSet, CustomCell } from '../types';
+	import { generateCellArc, calculateRadiusInMeters } from '../../logic/geometry';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** Optional: specific set ID to render (if not provided, renders all) */
+		setId?: string;
+	}
+
+	let { setsStore, setId }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	
+	// Track active layer/source IDs for cleanup
+	let activeSources = new Set<string>();
+	let activeLayers = new Set<string>();
+
+	// Debounce timer
+	let updateTimeout: ReturnType<typeof setTimeout>;
+
+	/**
+	 * Get source ID for a set
+	 */
+	function getSourceId(setId: string): string {
+		return `custom-cells-${setId}`;
+	}
+
+	/**
+	 * Get layer IDs for a set
+	 */
+	function getLayerIds(setId: string): { fill: string; line: string } {
+		return {
+			fill: `custom-cells-fill-${setId}`,
+			line: `custom-cells-line-${setId}`
+		};
+	}
+
+	/**
+	 * Add source and layers for a set
+	 */
+	function addSetLayers(map: mapboxgl.Map, set: CustomCellSet) {
+		const sourceId = getSourceId(set.id);
+		const { fill, line } = getLayerIds(set.id);
+
+		// Add source if not exists
+		if (!map.getSource(sourceId)) {
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+			activeSources.add(sourceId);
+		}
+
+		// Add fill layer
+		if (!map.getLayer(fill)) {
+			map.addLayer({
+				id: fill,
+				type: 'fill',
+				source: sourceId,
+				paint: {
+					'fill-color': ['get', 'color'],
+					'fill-opacity': set.opacity
+				}
+			});
+			activeLayers.add(fill);
+		}
+
+		// Add line layer
+		if (!map.getLayer(line)) {
+			map.addLayer({
+				id: line,
+				type: 'line',
+				source: sourceId,
+				paint: {
+					'line-color': ['get', 'lineColor'],
+					'line-width': ['get', 'lineWidth'],
+					'line-opacity': ['get', 'lineOpacity']
+				}
+			});
+			activeLayers.add(line);
+		}
+	}
+
+	/**
+	 * Remove layers and source for a set
+	 */
+	function removeSetLayers(map: mapboxgl.Map, setIdToRemove: string) {
+		const sourceId = getSourceId(setIdToRemove);
+		const { fill, line } = getLayerIds(setIdToRemove);
+
+		if (map.getLayer(line)) {
+			map.removeLayer(line);
+			activeLayers.delete(line);
+		}
+		if (map.getLayer(fill)) {
+			map.removeLayer(fill);
+			activeLayers.delete(fill);
+		}
+		if (map.getSource(sourceId)) {
+			map.removeSource(sourceId);
+			activeSources.delete(sourceId);
+		}
+	}
+
+	/**
+	 * Render cells for a specific set
+	 */
+	function renderSet(map: mapboxgl.Map, set: CustomCellSet) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		const zoom = map.getZoom();
+		const centerLat = map.getCenter().lat;
+
+		// Calculate base radius from pixel size
+		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, set.baseSize);
+
+		const features: GeoJSON.Feature[] = [];
+
+		for (const customCell of set.cells) {
+			const cell = customCell.resolvedCell;
+			if (!cell) continue;
+
+			// Check group visibility
+			if (!set.visibleGroups.has(customCell.customGroup)) continue;
+
+			// Viewport filter
+			if (!bounds.contains([cell.longitude, cell.latitude])) continue;
+
+			// Get color for this group
+			const color = set.groupColors[customCell.customGroup] || set.defaultColor;
+
+			// Apply size factor
+			const radiusMeters = baseRadiusMeters * customCell.sizeFactor;
+
+			// Generate arc feature
+			const feature = generateCellArc(cell, radiusMeters, 50, color);
+
+			// Add custom properties for tooltips
+			if (feature.properties) {
+				feature.properties.customGroup = customCell.customGroup;
+				feature.properties.sizeFactor = customCell.sizeFactor;
+				feature.properties.setName = set.name;
+				
+				// Add extra fields
+				for (const [key, value] of Object.entries(customCell.extraFields)) {
+					feature.properties[`extra_${key}`] = value;
+				}
+			}
+
+			features.push(feature);
+		}
+
+		// Update source
+		const sourceId = getSourceId(set.id);
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData({
+				type: 'FeatureCollection',
+				features: features as any
+			});
+		}
+
+		// Update layer opacity
+		const { fill } = getLayerIds(set.id);
+		if (map.getLayer(fill)) {
+			map.setPaintProperty(fill, 'fill-opacity', set.opacity);
+		}
+
+		console.log(`[CustomCellsLayer] Rendered ${features.length} features for set "${set.name}"`);
+	}
+
+	/**
+	 * Main update function
+	 */
+	function updateLayers() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			const setsToRender = setId 
+				? setsStore.sets.filter(s => s.id === setId)
+				: setsStore.sets;
+
+			// Track which sets we're rendering
+			const activeSetIds = new Set(setsToRender.map(s => s.id));
+
+			// Remove layers for sets that no longer exist
+			for (const sourceId of activeSources) {
+				const setIdFromSource = sourceId.replace('custom-cells-', '');
+				if (!activeSetIds.has(setIdFromSource)) {
+					removeSetLayers(map, setIdFromSource);
+				}
+			}
+
+			// Render each set
+			for (const set of setsToRender) {
+				if (set.visible) {
+					addSetLayers(map, set);
+					renderSet(map, set);
+				} else {
+					// Hide by clearing data
+					const sourceId = getSourceId(set.id);
+					const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+					if (source) {
+						source.setData({ type: 'FeatureCollection', features: [] });
+					}
+				}
+			}
+		}, 100);
+	}
+
+	// Setup and reactive updates
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const onMapEvent = () => updateLayers();
+
+		// Initial render
+		updateLayers();
+
+		// Listen to map events
+		map.on('moveend', onMapEvent);
+		map.on('zoomend', onMapEvent);
+		map.on('style.load', onMapEvent);
+
+		return () => {
+			map.off('moveend', onMapEvent);
+			map.off('zoomend', onMapEvent);
+			map.off('style.load', onMapEvent);
+
+			// Cleanup all layers
+			for (const sourceId of activeSources) {
+				const setIdFromSource = sourceId.replace('custom-cells-', '');
+				removeSetLayers(map, setIdFromSource);
+			}
+		};
+	});
+
+	// React to store changes
+	$effect(() => {
+		// Read version to trigger on changes
+		const _version = setsStore.version;
+		const _sets = setsStore.sets;
+		
+		updateLayers();
+	});
+</script>

package/dist/map-v3/features/cells/custom/layers/CustomCellsLayer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** Optional: specific set ID to render (if not provided, renders all) */
+    setId?: string;
+}
+declare const CustomCellsLayer: import("svelte").Component<Props, {}, "">;
+type CustomCellsLayer = ReturnType<typeof CustomCellsLayer>;
+export default CustomCellsLayer;

package/dist/map-v3/features/cells/custom/layers/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Layers - Barrel Export
+ */
+export { default as CustomCellsLayer } from './CustomCellsLayer.svelte';

package/dist/map-v3/features/cells/custom/layers/index.js

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Layers - Barrel Export
+ */
+export { default as CustomCellsLayer } from './CustomCellsLayer.svelte';