@smartnet360/svelte-components 0.0.101 → 0.0.103

package/dist/map-v3/features/selection/stores/selection.store.svelte.js

@@ -2,12 +2,15 @@
  * Feature Selection Store - Svelte 5 Runes Implementation
  *
  * Manages selection of map features (cells, sites) with click detection.
+ * Supports multi-cell selection based on site/sector hierarchy.
  */
 export class FeatureSelectionStore {
     selectedFeatures = $state([]);
+    selectedCellNames = $state(new Set()); // Track all selected cell names
     map = $state(null);
+    cellDataStore = null;
     selectionMode = $state(false);
-    idProperty = $state('siteId');
+    idProperty = $state('site'); // 'cell', 'sector', or 'site'
     queryLayers = $state([
         'cells-layer',
         'sites-layer'
@@ -22,7 +25,13 @@ export class FeatureSelectionStore {
         this.setupClickHandler();
     }
     /**
-     * Set which property to use as the ID
+     * Set the cell data store for lookup maps
+     */
+    setCellDataStore(dataStore) {
+        this.cellDataStore = dataStore;
+    }
+    /**
+     * Set which property to use as the ID (selection mode)
      */
     setIdProperty(property) {
         this.idProperty = property;
@@ -55,13 +64,16 @@ export class FeatureSelectionStore {
             if (features && features.length > 0) {
                 // Get the topmost feature with an id
                 for (const feature of features) {
-                    // Use the configured property as the ID
-                    const featureId = feature.properties?.[this.idProperty] || feature.id;
-                    const siteId = feature.properties?.siteId;
                     const cellName = feature.properties?.cellName;
-                    if (featureId) {
-                        this.toggleFeatureSelection(String(featureId), feature.layer?.id, feature.properties || undefined, siteId, cellName);
-                        break; // Only select the topmost feature
+                    const siteId = feature.properties?.siteId;
+                    if (cellName && this.cellDataStore) {
+                        this.handleCellClick(cellName, feature.layer?.id, feature.properties || undefined);
+                        break;
+                    }
+                    else if (siteId) {
+                        // Fallback for site clicks (if sites layer exists)
+                        this.handleSiteClick(siteId, feature.layer?.id, feature.properties || undefined);
+                        break;
                     }
                 }
             }
@@ -69,64 +81,156 @@ export class FeatureSelectionStore {
         this.map.on('click', this.clickHandler);
     }
     /**
-     * Enable selection mode
+     * Handle click on a cell - expand to site/sector based on mode
      */
-    enableSelectionMode() {
-        this.selectionMode = true;
+    handleCellClick(cellName, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        console.log('[Selection] Clicked cell:', cellName, 'Mode:', this.idProperty);
+        let cellNamesToSelect = [];
+        let selectionId;
+        switch (this.idProperty) {
+            case 'site': {
+                // Select all cells in the site (first 4 digits)
+                const siteId = this.cellDataStore.getSiteIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+                selectionId = siteId;
+                console.log('[Selection] Site mode - selecting', cellNamesToSelect.length, 'cells for site', siteId);
+                break;
+            }
+            case 'sector': {
+                // Select all cells in the sector (first 5 digits)
+                const sectorId = this.cellDataStore.getSectorIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySectorId(sectorId);
+                selectionId = sectorId;
+                console.log('[Selection] Sector mode - selecting', cellNamesToSelect.length, 'cells for sector', sectorId);
+                break;
+            }
+            case 'cell':
+            default: {
+                // Select just this cell
+                cellNamesToSelect = [cellName];
+                selectionId = cellName;
+                console.log('[Selection] Cell mode - selecting 1 cell');
+                break;
+            }
+        }
+        // Toggle the selection group
+        this.toggleGroupSelection(selectionId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Disable selection mode
+     * Handle click on a site marker (if sites layer exists)
      */
-    disableSelectionMode() {
-        this.selectionMode = false;
+    handleSiteClick(siteId, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        // Always select all cells in the site when clicking site marker
+        const cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+        this.toggleGroupSelection(siteId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Toggle a feature in the selection
+     * Toggle a group of cells (site or sector)
      */
-    toggleFeatureSelection(id, layerId, properties, siteId, cellName) {
-        const index = this.selectedFeatures.findIndex(f => f.id === id);
-        if (index >= 0) {
-            // Remove if already selected
-            this.selectedFeatures.splice(index, 1);
+    toggleGroupSelection(groupId, cellNames, layerId, properties) {
+        // Check if this group is already selected
+        const isSelected = this.selectedFeatures.some(f => f.id === groupId);
+        if (isSelected) {
+            // Remove the group
+            this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== groupId);
+            // Remove all cell names from the set
+            cellNames.forEach(name => this.selectedCellNames.delete(name));
         }
         else {
-            // Add if not selected
-            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
+            // Add the group
+            this.selectedFeatures.push({
+                id: groupId,
+                layerId,
+                properties,
+                cellNames // Store which cells belong to this group
+            });
+            // Add all cell names to the set
+            cellNames.forEach(name => this.selectedCellNames.add(name));
         }
+        // Update feature-state for all affected cells
+        this.updateFeatureStates(cellNames, !isSelected);
         // Trigger callback
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
     }
     /**
-     * Add a feature to the selection
+     * Update Mapbox feature-state for cells
      */
-    addFeatureSelection(id, layerId, properties, siteId, cellName) {
-        const exists = this.selectedFeatures.some(f => f.id === id);
-        if (!exists) {
-            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
-            if (this.onSelectionChange) {
-                this.onSelectionChange(this.selectedFeatures);
+    updateFeatureStates(cellNames, selected) {
+        if (!this.map || !this.cellDataStore)
+            return;
+        console.log('[Selection] Updating feature-state for', cellNames.length, 'cells, selected:', selected);
+        const startTime = performance.now();
+        let successCount = 0;
+        let failCount = 0;
+        for (const cellName of cellNames) {
+            const numericId = this.cellDataStore.getNumericId(cellName);
+            if (numericId !== undefined) {
+                try {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected });
+                    successCount++;
+                }
+                catch (error) {
+                    console.error('[Selection] Failed to set feature-state for', cellName, numericId, error);
+                    failCount++;
+                }
+            }
+            else {
+                console.warn('[Selection] No numeric ID found for cell:', cellName);
+                failCount++;
             }
         }
+        const endTime = performance.now();
+        console.log('[Selection] Feature-state update complete:', successCount, 'success,', failCount, 'failed in', (endTime - startTime).toFixed(2), 'ms');
     }
     /**
-     * Remove a feature from the selection
+     * Enable selection mode
      */
-    removeFeatureSelection(id) {
-        const index = this.selectedFeatures.findIndex(f => f.id === id);
-        if (index >= 0) {
-            this.selectedFeatures.splice(index, 1);
-            if (this.onSelectionChange) {
-                this.onSelectionChange(this.selectedFeatures);
-            }
-        }
+    enableSelectionMode() {
+        this.selectionMode = true;
+    }
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode() {
+        this.selectionMode = false;
     }
     /**
      * Clear all selections
      */
     clearSelection() {
+        // Clear feature-state for all currently selected cells
+        if (this.map && this.cellDataStore) {
+            for (const cellName of this.selectedCellNames) {
+                const numericId = this.cellDataStore.getNumericId(cellName);
+                if (numericId !== undefined) {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected: false });
+                }
+            }
+        }
         this.selectedFeatures = [];
+        this.selectedCellNames.clear();
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.selectedFeatures);
+        }
+    }
+    /**
+     * Remove a selection group by ID
+     */
+    removeFeatureSelection(id) {
+        const feature = this.selectedFeatures.find(f => f.id === id);
+        if (feature && feature.cellNames) {
+            // Clear feature-state for cells in this group
+            this.updateFeatureStates(feature.cellNames, false);
+            // Remove cell names from set
+            feature.cellNames.forEach(name => this.selectedCellNames.delete(name));
+        }
+        this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== id);
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
@@ -138,11 +242,17 @@ export class FeatureSelectionStore {
         return this.selectedFeatures;
     }
     /**
-     * Get selected feature IDs only
+     * Get selected group IDs (site/sector/cell IDs)
      */
     getSelectedIds() {
         return this.selectedFeatures.map(f => f.id);
     }
+    /**
+     * Get all selected cell names (flattened from all groups)
+     */
+    getSelectedCellNames() {
+        return Array.from(this.selectedCellNames);
+    }
     /**
      * Check if a feature is selected
      */
@@ -150,11 +260,23 @@ export class FeatureSelectionStore {
         return this.selectedFeatures.some(f => f.id === id);
     }
     /**
-     * Get selection count
+     * Check if a specific cell is selected
+     */
+    isCellSelected(cellName) {
+        return this.selectedCellNames.has(cellName);
+    }
+    /**
+     * Get selection count (number of groups, not individual cells)
      */
     get count() {
         return this.selectedFeatures.length;
     }
+    /**
+     * Get total number of selected cells
+     */
+    get cellCount() {
+        return this.selectedCellNames.size;
+    }
     /**
      * Cleanup - remove event handlers
      */
@@ -164,6 +286,7 @@ export class FeatureSelectionStore {
         }
         this.clearSelection();
         this.map = null;
+        this.cellDataStore = null;
     }
 }
 /**

package/dist/map-v3/features/selection/types.d.ts

@@ -2,12 +2,14 @@
  * Feature Selection - Type Definitions
  */
 export interface SelectedFeature {
-    /** Feature identifier */
+    /** Feature identifier (can be site ID, sector ID, or cell name) */
     id: string;
     /** Optional site ID */
     siteId?: string;
-    /** Optional cell name */
+    /** Optional cell name (for single cell selections) */
     cellName?: string;
+    /** Array of cell names (for site/sector selections) */
+    cellNames?: string[];
     /** Layer ID where feature was selected from */
     layerId?: string;
     /** Feature properties */

package/dist/map-v3/features/sites/components/SiteFilterControl.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { MapControl } from '../../../shared';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import { createTreeStore, TreeView } from '../../../../core/TreeView';
 	import type { SiteDataStore } from '../stores/site.data.svelte';
 	import type { SiteRegistry } from '../stores/site.registry.svelte';
 	import type { SiteDisplayStore } from '../stores/site.display.svelte';
@@ -34,40 +33,31 @@
 
 	// Sync Tree Selection -> Site Registry Visibility
 	$effect(() => {
-		const unsubscribe = treeStore.subscribe((val) => {
-			// Iterate all leaf nodes to sync visibility
-			
-			// Collect all site IDs from the tree
-			const allSiteIds: string[] = [];
-			const visibleSiteIds: string[] = [];
-
-			val.state.nodes.forEach((nodeState) => {
-				// Check if it's a leaf node (Level 2 group)
-				if (nodeState.node.children && nodeState.node.children.length > 0) return; 
-				
-				// It's a leaf (Level 2 group)
-				const siteIds = nodeState.node.metadata?.siteIds || [];
-				allSiteIds.push(...siteIds);
+		const val = treeStore;
+		// Iterate all leaf nodes to sync visibility
+		
+		// Collect all site IDs from the tree
+		const allSiteIds: string[] = [];
+		const visibleSiteIds: string[] = [];
 
-				if (val.state.checkedPaths.has(nodeState.path)) {
-					visibleSiteIds.push(...siteIds);
-				}
-			});
-
-			// Update registry
-			const hiddenIds = allSiteIds.filter(id => !visibleSiteIds.includes(id));
+		val.state.nodes.forEach((nodeState) => {
+			// Check if it's a leaf node (Level 2 group)
+			if (nodeState.node.children && nodeState.node.children.length > 0) return; 
 			
-			// Optimization: Check if anything actually changed
-			let needsUpdate = false;
-			// Simple check: if counts match, assume mostly correct, but better to check content
-			// For now, just update. Registry handles diffing somewhat.
-			registry.setVisible(visibleSiteIds, true);
-			registry.setVisible(hiddenIds, false);
+			// It's a leaf (Level 2 group)
+			const siteIds = nodeState.node.metadata?.siteIds || [];
+			allSiteIds.push(...siteIds);
+
+			if (val.state.checkedPaths.has(nodeState.path)) {
+				visibleSiteIds.push(...siteIds);
+			}
 		});
 
-		return () => {
-			unsubscribe();
-		};
+		// Update registry
+		const hiddenIds = allSiteIds.filter(id => !visibleSiteIds.includes(id));
+		
+		registry.setVisible(visibleSiteIds, true);
+		registry.setVisible(hiddenIds, false);
 	});
 
 	function handleColorChange(node: any, event: Event) {
@@ -106,7 +96,7 @@
 			{dataStore.sites.length} Sites
 		</div> -->
 		<div class="border rounded bg-white" style="max-height: 400px; overflow-y: auto;">
-			<TreeView showControls={false} store={$treeStore}>
+			<TreeView showControls={false} store={treeStore}>
 				{#snippet children({ node, state })}
 					<!-- Color Picker (Only for leaves / Level 2) -->
 					{#if !node.children || node.children.length === 0}

package/dist/map-v3/index.d.ts

@@ -25,6 +25,10 @@ export * from './features/sites/stores/site.data.svelte';
 export * from './features/sites/stores/site.display.svelte';
 export * from './features/sites/stores/site.registry.svelte';
 export * from './features/selection';
+export * from './features/coverage/types';
+export { default as CoverageLayer } from './features/coverage/layers/CoverageLayer.svelte';
+export * from './features/coverage/stores/coverage.data.svelte';
+export * from './features/coverage/stores/coverage.display.svelte';
 export { default as DemoMap } from './demo/DemoMap.svelte';
 export { demoCells } from './demo/demo-cells';
 export { demoRepeaters } from './demo/demo-repeaters';

package/dist/map-v3/index.js

@@ -31,6 +31,11 @@ export * from './features/sites/stores/site.display.svelte';
 export * from './features/sites/stores/site.registry.svelte';
 // Features - Selection
 export * from './features/selection';
+// Features - Coverage
+export * from './features/coverage/types';
+export { default as CoverageLayer } from './features/coverage/layers/CoverageLayer.svelte';
+export * from './features/coverage/stores/coverage.data.svelte';
+export * from './features/coverage/stores/coverage.display.svelte';
 // Demo
 export { default as DemoMap } from './demo/DemoMap.svelte';
 export { demoCells } from './demo/demo-cells';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.101",
+	"version": "0.0.103",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,10 +32,10 @@
 		}
 	},
 	"peerDependencies": {
+		"@deck.gl/mapbox": "^9.2.2",
 		"@turf/turf": "^7.2.0",
 		"bootstrap": "^5.2.3",
 		"deck.gl": "^9.1.0",
-		"@deck.gl/mapbox": "^9.2.2",
 		"dexie": "^4.0.11",
 		"mapbox-gl": "^3.0.0",
 		"plotly.js-dist-min": "^3.1.0",

package/dist/core/TreeView/tree.store.d.ts

@@ -1,10 +0,0 @@
-/**
- * Tree Store
- * Svelte writable store for managing tree state with persistence
- */
-import { type Writable } from 'svelte/store';
-import type { TreeConfig, TreeStoreValue } from './tree.model';
-/**
- * Create a tree store with state management and persistence
- */
-export declare function createTreeStore<T = any>(config: TreeConfig<T>): Writable<TreeStoreValue>;