@smartnet360/svelte-components 0.0.100 → 0.0.102

package/dist/map-v2/demo/DemoMap.svelte

@@ -87,9 +87,19 @@
 		alert(`Selected ${siteIds.length} sites:\n${siteIds.join(', ')}`);
 	}
 	
-	// Handler for generic feature selection action button
-	function handleProcessFeatures(featureIds: string[]) {
-		alert(`Selected ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	// Handler for cluster processing
+	function handleProcessCluster(featureIds: string[]) {
+		alert(`Processing cluster with ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	}
+	
+	// Handler for data export
+	function handleExportData(featureIds: string[]) {
+		alert(`Exporting ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	}
+	
+	// Handler for feature analysis
+	function handleAnalyzeFeatures(featureIds: string[]) {
+		alert(`Analyzing ${featureIds.length} features:\n${featureIds.join(', ')}`);
 	}
 	
 	// Cell filter grouping configuration
@@ -231,12 +241,34 @@
 		<FeatureSelectionControl
 			position="bottom-left"
 			title="Cluster Tool"
-			icon="speedometer2"
+			icon="bi bi-graph-up"
 			iconOnlyWhenCollapsed={useIconHeaders}
-			onAction={handleProcessFeatures}
-			actionButtonLabel="Process Cluster"
 			featureIcon="pin-map-fill"
-		/>
+		>
+			{#snippet children(selectedIds)}
+				<button 
+					class="btn btn-primary"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleProcessCluster(selectedIds)}
+				>
+					<i class="bi bi-lightning-charge-fill"></i> Process Cluster
+				</button>
+				<button 
+					class="btn btn-success"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleExportData(selectedIds)}
+				>
+					<i class="bi bi-download"></i> Export Data
+				</button>
+				<button 
+					class="btn btn-info"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleAnalyzeFeatures(selectedIds)}
+				>
+					<i class="bi bi-graph-up"></i> Analyze
+				</button>
+			{/snippet}
+		</FeatureSelectionControl>
 
 		<!-- Unified feature settings control - Sites, Cells, and Repeaters -->
 		<FeatureSettingsControl

package/dist/map-v2/features/cells/utils/cellGeoJSON.js

@@ -42,6 +42,7 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
         // Build feature with styling properties
         return {
             type: 'Feature',
+            id: Number(cell.cellName), // Numeric ID for feature-state (cellName is numeric string)
             geometry: arc.geometry,
             properties: {
                 // Cell identification

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -28,16 +28,14 @@
 		icon?: string;
 		/** Show icon when collapsed (default: true) */
 		iconOnlyWhenCollapsed?: boolean;
-		/** Callback when action button clicked */
-		onAction?: (featureIds: string[]) => void;
-		/** Action button label */
-		actionButtonLabel?: string;
 		/** Feature icon (default: geo-alt-fill) */
 		featureIcon?: string;
 		/** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
 		idPropertyOptions?: string[];
 		/** Default property to use as ID (default: 'id') */
 		defaultIdProperty?: string;
+		/** Slot for custom action buttons that receive selected feature IDs */
+		children?: import('svelte').Snippet<[string[]]>;
 	}
 	
 	let {
@@ -45,11 +43,10 @@
 		title = 'Cluster Tool',
 		icon = 'speedometer2',
 		iconOnlyWhenCollapsed = true,
-		onAction,
-		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
 		idPropertyOptions = ['none','siteId','sectorId', 'cellName','id'],
-		defaultIdProperty = 'none'
+		defaultIdProperty = 'none',
+		children
 	}: Props = $props();
 	
 	// Get map from context
@@ -228,13 +225,6 @@
 			console.error('Failed to copy:', err);
 		}
 	}
-	
-	function handleAction() {
-		if (onAction && hasSelection) {
-			const ids = store.getSelectedIds();
-			onAction(ids);
-		}
-	}
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} onCollapseToggle={handleCollapseToggle}>
@@ -316,17 +306,10 @@
 			</div>
 		{/if}
 		
-		<!-- Action Button -->
-		{#if onAction}
-			<div class="mt-3">
-				<button
-					type="button"
-					class="btn btn-primary w-100"
-					disabled={!hasSelection}
-					onclick={handleAction}
-				>
-					<i class="bi bi-lightning-charge-fill"></i> {actionButtonLabel}
-				</button>
+		<!-- Custom Action Buttons Slot -->
+		{#if children}
+			<div class="mt-3 action-slot">
+				{@render children(store.getSelectedIds())}
 			</div>
 		{/if}
 	</div>
@@ -435,6 +418,18 @@
 		background-color: #ffcccc;
 	}
 
+	/* Action slot styles */
+	.action-slot {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	/* Ensure action slot buttons maintain Bootstrap styling */
+	.action-slot :global(.btn) {
+		width: 100%;
+	}
+
 	/* Ensure primary action button keeps Bootstrap styling inside Mapbox control */
 	.feature-selection-control .btn-primary {
 		background-color: var(--bs-btn-bg, var(--bs-primary));

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte.d.ts

@@ -7,16 +7,14 @@ interface Props {
     icon?: string;
     /** Show icon when collapsed (default: true) */
     iconOnlyWhenCollapsed?: boolean;
-    /** Callback when action button clicked */
-    onAction?: (featureIds: string[]) => void;
-    /** Action button label */
-    actionButtonLabel?: string;
     /** Feature icon (default: geo-alt-fill) */
     featureIcon?: string;
     /** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
     idPropertyOptions?: string[];
     /** Default property to use as ID (default: 'id') */
     defaultIdProperty?: string;
+    /** Slot for custom action buttons that receive selected feature IDs */
+    children?: import('svelte').Snippet<[string[]]>;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

package/dist/map-v3/demo/DemoMap.svelte

@@ -102,11 +102,37 @@
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}
-			cellDisplayStore={cellDisplay}
-			title="Feature Selection"
-			actionButtonLabel="Export Selected"
-			onAction={(ids) => console.log('Selected features:', ids)}
-		/>
+			title="Cell Selection"
+			featureIcon="📡"
+			defaultSelectionMode="site"
+		>
+			{#snippet children(selectedIds)}
+				<button
+					type="button"
+					class="btn btn-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Process Selected:', selectedIds)}
+				>
+					<i class="bi bi-gear-fill"></i> Process ({selectedIds.length})
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Export Selected:', selectedIds)}
+				>
+					<i class="bi bi-download"></i> Export Data
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-secondary w-100"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Analyze Selected:', selectedIds)}
+				>
+					<i class="bi bi-graph-up"></i> Analyze
+				</button>
+			{/snippet}
+		</FeatureSelectionControl>
 	</Map>
 </div>
 

package/dist/map-v3/demo/demo-cells.js

@@ -87,8 +87,13 @@ const TECH_BANDS = [
     { tech: '5G', band: '2100', fband: '5G-2100' },
     { tech: '5G', band: '3500', fband: '5G-3500' }
 ];
-// Three sector azimuths
-const AZIMUTHS = [0, 120, 240];
+// Three sector azimuths with sector numbers
+// Sector 1 = 0°, Sector 2 = 120°, Sector 3 = 240°
+const SECTORS = [
+    { azimuth: 0, sectorNum: 1 },
+    { azimuth: 120, sectorNum: 2 },
+    { azimuth: 240, sectorNum: 3 }
+];
 // Status rotation for variety
 const STATUSES = [
     'On_Air',
@@ -104,6 +109,18 @@ const STATUSES = [
     'On_Air',
     'On_Air'
 ];
+/**
+ * Generate 7-digit cellName from site and sector and band index
+ * Format: SSSS S BB
+ *   SSSS = 4-digit site ID
+ *   S = 1-digit sector number (1, 2, or 3)
+ *   BB = 2-digit band/cell index (41-52 for 11 tech-bands)
+ */
+function generateCellName(siteNum, sectorNum, bandIndex) {
+    const siteId = String(siteNum + 1000).padStart(4, '0'); // Start sites from 1000
+    const cellSuffix = String(41 + bandIndex).padStart(2, '0'); // Bands: 41-52
+    return `${siteId}${sectorNum}${cellSuffix}`;
+}
 /**
  * Generate demo cells with varied density patterns in circular distribution
  * Creates density zones radiating from center with random placement
@@ -144,23 +161,26 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
     const siteLng = addJitter(lng, jitterAmount);
     // Record position
     usedPositions.push({ lat: siteLat, lng: siteLng, minSpacing });
-    const siteId = `DEMO-SITE-${String(actualSiteIndex + 1).padStart(4, '0')}`;
+    // 4-digit site ID (starting from 1000)
+    const siteNum = actualSiteIndex;
+    const siteId = String(siteNum + 1000).padStart(4, '0');
     actualSiteIndex++;
     // Generate 3 sectors per site (with some random 1 or 2 sector sites)
     const numSectors = Math.random() < 0.1 ? (Math.random() < 0.5 ? 1 : 2) : 3; // 10% chance of 1-2 sectors
-    const sectorsToGenerate = AZIMUTHS.slice(0, numSectors);
-    sectorsToGenerate.forEach((azimuth, sectorIndex) => {
-        // Generate 12 tech-bands per sector
-        TECH_BANDS.forEach((techBand, techIndex) => {
-            const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
-            const status = STATUSES[techIndex];
+    const sectorsToGenerate = SECTORS.slice(0, numSectors);
+    sectorsToGenerate.forEach((sector) => {
+        // Generate 11 tech-bands per sector (indexes 0-10)
+        TECH_BANDS.forEach((techBand, bandIndex) => {
+            // Generate 7-digit cellName: SSSS + S + BB (e.g., "1000141")
+            const cellName = generateCellName(siteNum, sector.sectorNum, bandIndex);
+            const status = STATUSES[bandIndex];
             demoCells.push({
                 // Core properties
-                id: cellId,
-                txId: `TX-${String(cellCounter).padStart(4, '0')}`,
-                cellID: cellId,
-                cellID2G: techBand.tech === '2G' ? cellId : '',
-                cellName: `${siteId} ${techBand.tech}${techBand.band} S${sectorIndex + 1}`,
+                id: cellName,
+                txId: cellName,
+                cellID: cellName,
+                cellID2G: techBand.tech === '2G' ? cellName : '',
+                cellName: cellName,
                 siteId: siteId,
                 tech: techBand.tech,
                 fband: techBand.fband,
@@ -169,13 +189,13 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 status: status,
                 onAirDate: '2024-01-15',
                 // 2G specific
-                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
-                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                bcch: techBand.tech === '2G' ? 100 + bandIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellName}` : '',
                 // 4G specific
-                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                dlEarfn: techBand.tech === '4G' ? 6200 + bandIndex * 100 : 0,
                 // Physical properties
                 antenna: 'DEMO-ANTENNA-MODEL',
-                azimuth: azimuth,
+                azimuth: sector.azimuth,
                 height: 30, // 30 meters antenna height
                 electricalTilt: '3',
                 beamwidth: BEAMWIDTH,
@@ -186,7 +206,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 siteLatitude: siteLat,
                 siteLongitude: siteLng,
                 // Planning
-                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${sector.azimuth}°`,
                 planner: 'Demo User',
                 // Atoll properties
                 atollETP: 43.0,
@@ -194,7 +214,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
                 atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
                 // Network properties
-                cellId3: `${cellId}-3G`,
+                cellId3: `${cellName}-3G`,
                 nwtP1: 20,
                 nwtP2: 40,
                 pci1: (cellCounter % 504), // Physical Cell ID for LTE
@@ -204,14 +224,23 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 other: {
                     demoCell: true,
                     siteNumber: actualSiteIndex,
-                    sector: sectorIndex + 1,
+                    sector: sector.sectorNum,
                     techBandKey: `${techBand.tech}_${techBand.band}`,
                     radius: normalizedRadius,
                     densityZone: zone.name
                 },
-                customSubgroup: `Sector-${sectorIndex + 1}`
+                customSubgroup: `Sector-${sector.sectorNum}`
             });
             cellCounter++;
         });
     });
 }
+// Summary of generated data structure
+console.log(`[Demo Data] Generated ${demoCells.length} cells across ${actualSiteIndex} sites`);
+console.log(`[Demo Data] CellName format: 7-digit numeric (e.g., "1000141")`);
+console.log(`[Demo Data] Structure: SSSS (site) + S (sector 1-3) + BB (band 41-51)`);
+console.log(`[Demo Data] Site ID range: 1000-${1000 + actualSiteIndex - 1}`);
+console.log(`[Demo Data] Example Site 1000:`);
+console.log(`  - Sector 1 (0°):   1000141-1000151 (11 bands)`);
+console.log(`  - Sector 2 (120°): 1000241-1000251 (11 bands)`);
+console.log(`  - Sector 3 (240°): 1000341-1000351 (11 bands)`);

package/dist/map-v3/features/cells/layers/CellsLayer.svelte

@@ -66,24 +66,44 @@
 			}
 
 			if (!map.getLayer(lineLayerId)) {
-				// Line Layer (Border) - Status-based styling
+				// Line Layer (Border) - Status-based styling with feature-state support
 				map.addLayer({
 					id: lineLayerId,
 					type: 'line',
 					source: sourceId,
 					paint: {
-						'line-color': ['get', 'lineColor'],
+						'line-color': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							'#FF6B00', // Selected: orange
+							['get', 'lineColor'] // Default: status color
+						],
 						'line-width': [
-							'*',
-							['get', 'lineWidth'],
-							displayStore.lineWidth
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							4, // Selected: thick
+							[
+								'*',
+								['get', 'lineWidth'],
+								displayStore.lineWidth
+							] // Default: scaled by display setting
+						],
+						'line-opacity': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							1, // Selected: full opacity
+							['get', 'lineOpacity'] // Default: status opacity
 						],
-						'line-opacity': ['get', 'lineOpacity'],
 						'line-dasharray': [
 							'case',
-							['>', ['length', ['get', 'dashArray']], 0],
-							['get', 'dashArray'],
-							['literal', []]
+							['boolean', ['feature-state', 'selected'], false],
+							['literal', []], // Selected: solid line
+							[
+								'case',
+								['>', ['length', ['get', 'dashArray']], 0],
+								['get', 'dashArray'],
+								['literal', []]
+							] // Default: status dash
 						]
 					},
 					layout: {

package/dist/map-v3/features/cells/logic/geometry.js

@@ -79,6 +79,9 @@ export function generateCellArc(cell, radiusMeters, zIndex, color, beamwidthOver
     const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
         steps: 10 // Low steps for performance, increase if jagged
     });
+    // Set numeric ID at feature level for Mapbox feature-state support
+    // cellName is a numeric string (e.g., "4080141"), convert to number
+    sector.id = Number(cell.cellName);
     // Get status style
     const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
     // Attach properties for styling and interaction

package/dist/map-v3/features/cells/stores/cell.data.svelte.d.ts

@@ -4,8 +4,35 @@ export declare class CellDataStore {
     rawCells: Cell[];
     filterOnAir: boolean;
     siteDistanceStore: SiteDistanceStore;
+    private _siteToCellsMap;
+    private _sectorToCellsMap;
+    private _cellNameToIdMap;
     constructor();
     setCells(cells: Cell[]): void;
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    private rebuildLookupMaps;
     get filteredCells(): Cell[];
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId: string): string[];
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId: string): string[];
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName: string): number | undefined;
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName: string): string;
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName: string): string;
 }
 export declare function createCellDataStore(): CellDataStore;

package/dist/map-v3/features/cells/stores/cell.data.svelte.js

@@ -4,6 +4,10 @@ export class CellDataStore {
     filterOnAir = $state(false);
     // Internal site distance store for auto-sizing
     siteDistanceStore;
+    // Cached lookup maps (rebuilt when cells change)
+    _siteToCellsMap = $state(new Map());
+    _sectorToCellsMap = $state(new Map());
+    _cellNameToIdMap = $state(new Map());
     constructor() {
         this.siteDistanceStore = new SiteDistanceStore();
     }
@@ -11,12 +15,73 @@ export class CellDataStore {
         this.rawCells = cells;
         // Automatically update site distances when cells are loaded
         this.siteDistanceStore.updateDistances(cells);
+        // Rebuild lookup maps
+        this.rebuildLookupMaps();
+    }
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    rebuildLookupMaps() {
+        console.log('[CellDataStore] Rebuilding lookup maps for', this.rawCells.length, 'cells');
+        // Clear existing maps
+        this._siteToCellsMap.clear();
+        this._sectorToCellsMap.clear();
+        this._cellNameToIdMap.clear();
+        // Build all maps in one pass
+        for (const cell of this.rawCells) {
+            const siteId = cell.cellName.substring(0, 4);
+            const sectorId = cell.cellName.substring(0, 5);
+            const numericId = Number(cell.cellName);
+            // Site map
+            if (!this._siteToCellsMap.has(siteId)) {
+                this._siteToCellsMap.set(siteId, []);
+            }
+            this._siteToCellsMap.get(siteId).push(cell.cellName);
+            // Sector map
+            if (!this._sectorToCellsMap.has(sectorId)) {
+                this._sectorToCellsMap.set(sectorId, []);
+            }
+            this._sectorToCellsMap.get(sectorId).push(cell.cellName);
+            // Cell name to ID map
+            this._cellNameToIdMap.set(cell.cellName, numericId);
+        }
+        console.log('[CellDataStore] Lookup maps built:', this._siteToCellsMap.size, 'sites,', this._sectorToCellsMap.size, 'sectors,', this._cellNameToIdMap.size, 'cells');
     }
     get filteredCells() {
         if (!this.filterOnAir)
             return this.rawCells;
         return this.rawCells.filter(c => c.status === 'On_Air');
     }
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId) {
+        return this._siteToCellsMap.get(siteId) || [];
+    }
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId) {
+        return this._sectorToCellsMap.get(sectorId) || [];
+    }
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName) {
+        return this._cellNameToIdMap.get(cellName);
+    }
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName) {
+        return cellName.substring(0, 4);
+    }
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName) {
+        return cellName.substring(0, 5);
+    }
 }
 export function createCellDataStore() {
     return new CellDataStore();