@smartnet360/svelte-components 0.0.98 → 0.0.100

package/dist/apps/site-check/SiteCheck.svelte

@@ -65,12 +65,16 @@
 	// Single root select mode - only one Level 0 node at a time (radio behavior)
 	let singleRootSelect = $state(false);
 
+	// Single Level 1 select mode - only one Level 1 node per parent at a time (radio behavior)
+	let singleLevel1Select = $state(false);
+
 	// Available field options for grouping levels
 	const fieldOptions: { value: TreeGroupField; label: string }[] = [
 		{ value: 'site', label: 'Site' },
 		{ value: 'band', label: 'Band' },
 		{ value: 'azimuth', label: 'Azimuth' },
-		{ value: 'sector', label: 'Sector' }
+		{ value: 'sector', label: 'Sector' },
+		{ value: 'cellName', label: 'Cell Name' }
 	];
 
 	// Handlers for level changes
@@ -96,10 +100,10 @@
 		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
 	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
-	// Rebuild tree whenever treeGrouping or singleRootSelect changes
+	// Rebuild tree whenever treeGrouping, singleRootSelect, or singleLevel1Select changes
 	$effect(() => {
 
-		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect });
+		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect, singleLevel1Select });
 
 		// Clear any existing localStorage data to prevent stale state
 		const storageKey = 'site-check:treeState';
@@ -124,12 +128,14 @@
 			namespace: 'site-check',
 			persistState: false,  // Don't persist when grouping changes dynamically
 			defaultExpandAll: false,
-			singleRootSelect // Pass single root select mode
+			singleRootSelect, // Pass single root select mode
+			singleLevel1Select // Pass single Level 1 select mode
 		});
 		log('✅ Tree Store Created', { 
 			namespace: 'site-check',
 			grouping: treeGrouping,
-			singleRootSelect
+			singleRootSelect,
+			singleLevel1Select
 		});
 	});
 
@@ -361,6 +367,8 @@
 						>
 							<option value="band">Band</option>
 							<option value="site">Site</option>
+							<option value="sector">Sector</option>
+							<option value="cellName">Cell Name</option>
 						</select>
 					</div>
 				</div>
@@ -398,6 +406,23 @@
 						Single selection on level 0
 					</label>
 				</div>
+				
+				<!-- Single Level 1 Select Toggle -->
+				<div class="form-check mt-2">
+					<input 
+						class="form-check-input" 
+						type="checkbox" 
+						id="singleLevel1SelectCheck"
+						checked={singleLevel1Select}
+						onchange={(e) => {
+							singleLevel1Select = e.currentTarget.checked;
+							log('🔘 Single Level 1 select mode:', singleLevel1Select);
+						}}
+					/>
+					<label class="form-check-label small" for="singleLevel1SelectCheck">
+						Single selection on level 1 
+					</label>
+				</div>
 			</div>
 		{/if}
 	{/if}			<!-- Tree View -->
@@ -409,7 +434,7 @@
 		</div>
 
 		<!-- Right: Charts -->
-		<div class="col-lg-9 col-md-8 bg-light overflow-auto">
+		<div class="col-lg-9 col-md-8 bg-light d-flex flex-column" style="min-height: 0; height: 100%; overflow: hidden;">
 			{#if chartData.length > 0}
 				<ChartComponent
 					layout={chartLayout}

package/dist/apps/site-check/data-loader.d.ts

@@ -14,11 +14,11 @@ export interface CellTrafficRecord {
 /**
  * Tree grouping field types
  */
-export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector' | 'cellName';
 /**
  * Color dimension types - determines which field is used for chart coloring
  */
-export type ColorDimension = 'site' | 'band';
+export type ColorDimension = 'site' | 'azimuth' | 'band' | 'sector' | 'cellName';
 /**
  * Configuration for tree hierarchy grouping
  * Defines which fields appear at each level of the tree

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

@@ -76,6 +76,8 @@ export interface TreeConfig<T = any> {
     showIndeterminate?: boolean;
     /** Single root selection mode - only one root node can be checked at a time (radio behavior) */
     singleRootSelect?: boolean;
+    /** Single Level 1 selection mode - only one Level 1 node per parent can be checked at a time (radio behavior) */
+    singleLevel1Select?: boolean;
 }
 /**
  * Store value exposed to consumers

package/dist/core/TreeView/tree.store.js

@@ -102,6 +102,24 @@ export function createTreeStore(config) {
                     }
                 });
             }
+            // STEP 0.5: If singleLevel1Select mode and this is a Level 1 node being checked, uncheck sibling Level 1 nodes
+            if (config.singleLevel1Select && newChecked && nodeState.level === 1) {
+                log('🔘 Single Level 1 select mode: unchecking sibling Level 1 nodes', { path });
+                const parentPath = nodeState.parentPath;
+                // Find and uncheck all Level 1 siblings (same parent, same level, different path)
+                state.nodes.forEach((node, nodePath) => {
+                    if (node.level === 1 &&
+                        node.parentPath === parentPath &&
+                        nodePath !== path) {
+                        newCheckedPaths.delete(nodePath);
+                        // Also uncheck all descendants of this sibling
+                        const siblingDescendants = getDescendantPaths(nodePath, state.nodes, separator);
+                        siblingDescendants.forEach(descendantPath => {
+                            newCheckedPaths.delete(descendantPath);
+                        });
+                    }
+                });
+            }
             // STEP 1: Update this node
             if (newChecked) {
                 newCheckedPaths.add(path);

package/dist/map-v2/demo/demo-cells.d.ts

@@ -8,6 +8,7 @@
  */
 import type { Cell } from '../features/cells/types';
 /**
- * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ * Generate demo cells with varied density patterns in circular distribution
+ * Creates density zones radiating from center with random placement
  */
 export declare const demoCells: Cell[];

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

@@ -6,14 +6,68 @@
  * Each sector has 12 cells (all tech-band combinations)
  * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
-// Base location: San Francisco
-const BASE_LAT = 37.7749;
-const BASE_LNG = -122.4194;
-// Grid parameters for distributing sites
-const NUM_SITES = 1700;
-const GRID_SIZE = 10; // 10×10 grid
-const LAT_SPACING = 0.01; // ~1.1 km spacing
-const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Generate sites in a circular pattern with varying density
+const NUM_SITES = 2000;
+const RADIUS_KM = 15; // 15km radius circle
+const RADIUS_DEGREES = RADIUS_KM / 111; // Approximate conversion
+// Density zones (distance from center)
+const DENSITY_ZONES = [
+    { maxRadius: 0.3, minSpacing: 0.0008, maxSpacing: 0.0015, name: 'Very Dense Core' }, // 0-3km: 80-150m spacing
+    { maxRadius: 0.5, minSpacing: 0.0015, maxSpacing: 0.003, name: 'Dense Inner' }, // 3-5km: 150-300m spacing
+    { maxRadius: 0.7, minSpacing: 0.003, maxSpacing: 0.006, name: 'Medium' }, // 5-7km: 300-600m spacing
+    { maxRadius: 0.85, minSpacing: 0.006, maxSpacing: 0.012, name: 'Sparse Suburban' }, // 7-12km: 600m-1.2km spacing
+    { maxRadius: 1.0, minSpacing: 0.012, maxSpacing: 0.025, name: 'Very Sparse Rural' } // 12-15km: 1.2-2.5km spacing
+];
+/**
+ * Get density zone for a given normalized radius
+ */
+function getDensityZone(normalizedRadius) {
+    for (const zone of DENSITY_ZONES) {
+        if (normalizedRadius <= zone.maxRadius) {
+            return zone;
+        }
+    }
+    return DENSITY_ZONES[DENSITY_ZONES.length - 1];
+}
+/**
+ * Generate random point within circle using polar coordinates
+ */
+function generateRandomPointInCircle() {
+    // Use square root for uniform distribution in circle
+    const r = Math.sqrt(Math.random()) * RADIUS_DEGREES;
+    const theta = Math.random() * 2 * Math.PI;
+    const lat = BASE_LAT + r * Math.cos(theta);
+    const lng = BASE_LNG + r * Math.sin(theta);
+    const normalizedRadius = r / RADIUS_DEGREES;
+    return { lat, lng, normalizedRadius };
+}
+// Cluster configuration for varied density
+// (kept for backward compatibility but not used with circular generation)
+const CLUSTERS = [
+    // Dense urban cluster (top-left) - very tight spacing
+    { startRow: 0, endRow: 3, startCol: 0, endCol: 3, spacing: 0.3 },
+    // Medium density cluster (center) - normal spacing
+    { startRow: 3, endRow: 7, startCol: 3, endCol: 7, spacing: 1.0 },
+    // Sparse rural cluster (bottom-right) - wide spacing
+    { startRow: 7, endRow: 10, startCol: 7, endCol: 10, spacing: 2.5 },
+    // Random outliers scattered around
+    { startRow: 0, endRow: 10, startCol: 0, endCol: 10, spacing: 1.5 }
+];
+/**
+ * Add random jitter to coordinates for natural variation
+ */
+function addJitter(value, maxJitter) {
+    return value + (Math.random() - 0.5) * 2 * maxJitter;
+}
+/**
+ * Determine if site should be skipped (for creating gaps)
+ */
+function shouldSkipSite(row, col) {
+    // Skip some sites randomly to create density variation (20% skip rate)
+    return Math.random() < 0.2;
+}
 // Standard beamwidth for sectors
 const BEAMWIDTH = 65;
 // Cell tech-band definitions with proper fband format
@@ -51,20 +105,51 @@ const STATUSES = [
     'On_Air'
 ];
 /**
- * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ * Generate demo cells with varied density patterns in circular distribution
+ * Creates density zones radiating from center with random placement
  */
 export const demoCells = [];
 let cellCounter = 1;
-// Generate sites in a grid pattern
-for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
-    const row = Math.floor(siteIndex / GRID_SIZE);
-    const col = siteIndex % GRID_SIZE;
-    // Calculate site position (centered grid around base location)
-    const siteLat = BASE_LAT + (row - GRID_SIZE / 2) * LAT_SPACING;
-    const siteLng = BASE_LNG + (col - GRID_SIZE / 2) * LNG_SPACING;
-    const siteId = `DEMO-SITE-${String(siteIndex + 1).padStart(3, '0')}`;
-    // Generate 3 sectors per site
-    AZIMUTHS.forEach((azimuth, sectorIndex) => {
+let actualSiteIndex = 0;
+// Track used positions to maintain minimum spacing
+const usedPositions = [];
+/**
+ * Check if position is too close to existing sites
+ */
+function isTooClose(lat, lng, minSpacing) {
+    for (const pos of usedPositions) {
+        const distance = Math.sqrt(Math.pow(lat - pos.lat, 2) + Math.pow(lng - pos.lng, 2));
+        const requiredSpacing = (minSpacing + pos.minSpacing) / 2;
+        if (distance < requiredSpacing) {
+            return true;
+        }
+    }
+    return false;
+}
+// Generate sites in a circular pattern with density-based placement
+for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; attempt++) {
+    // Generate random point in circle
+    const { lat, lng, normalizedRadius } = generateRandomPointInCircle();
+    // Get density zone for this radius
+    const zone = getDensityZone(normalizedRadius);
+    // Random spacing within zone range
+    const minSpacing = zone.minSpacing + Math.random() * (zone.maxSpacing - zone.minSpacing);
+    // Check if too close to existing sites
+    if (isTooClose(lat, lng, minSpacing)) {
+        continue; // Try another position
+    }
+    // Add random jitter for natural variation
+    const jitterAmount = minSpacing * 0.3; // 30% of spacing
+    const siteLat = addJitter(lat, jitterAmount);
+    const siteLng = addJitter(lng, jitterAmount);
+    // Record position
+    usedPositions.push({ lat: siteLat, lng: siteLng, minSpacing });
+    const siteId = `DEMO-SITE-${String(actualSiteIndex + 1).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')}`;
@@ -118,10 +203,11 @@ for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
                 // Other
                 other: {
                     demoCell: true,
-                    siteNumber: siteIndex + 1,
+                    siteNumber: actualSiteIndex,
                     sector: sectorIndex + 1,
                     techBandKey: `${techBand.tech}_${techBand.band}`,
-                    gridPosition: { row, col }
+                    radius: normalizedRadius,
+                    densityZone: zone.name
                 },
                 customSubgroup: `Sector-${sectorIndex + 1}`
             });

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

@@ -48,8 +48,8 @@
 		onAction,
 		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
-		idPropertyOptions = ['siteId','sectorId', 'cellName','id'],
-		defaultIdProperty = 'siteId'
+		idPropertyOptions = ['none','siteId','sectorId', 'cellName','id'],
+		defaultIdProperty = 'none'
 	}: Props = $props();
 	
 	// Get map from context
@@ -114,33 +114,73 @@
 		const map = get(mapStore);
 		if (!map) return;
 		
-		// Remove markers that are no longer in the selection
-		const currentIds = new Set(features.map(f => f.id));
-		for (const [id, marker] of markers.entries()) {
-			if (!currentIds.has(id)) {
+		// Group features by coordinates
+		const featuresByLocation = new Map<string, SelectedFeature[]>();
+		
+		for (const feature of features) {
+			const lat = feature.properties?.latitude || feature.properties?.lat;
+			const lon = feature.properties?.longitude || feature.properties?.lon || feature.properties?.lng;
+			
+			if (lat && lon) {
+				const key = `${lon.toFixed(6)},${lat.toFixed(6)}`; // Round to avoid floating point issues
+				if (!featuresByLocation.has(key)) {
+					featuresByLocation.set(key, []);
+				}
+				featuresByLocation.get(key)!.push(feature);
+			} else {
+				console.warn('[FeatureSelectionControl] No coordinates found for feature', feature.id);
+			}
+		}
+		
+		// Track which location keys are currently active
+		const activeLocationKeys = new Set(featuresByLocation.keys());
+		
+		// Remove markers that are no longer needed
+		for (const [key, marker] of markers.entries()) {
+			if (!activeLocationKeys.has(key)) {
 				marker.remove();
-				markers.delete(id);
-				console.log('[FeatureSelectionControl] Removed marker for', id);
+				markers.delete(key);
+				console.log('[FeatureSelectionControl] Removed marker at', key);
 			}
 		}
 		
-		// Add markers for new selections
-		for (const feature of features) {
-			if (!markers.has(feature.id)) {
-				// Try to extract coordinates from properties
-				const lat = feature.properties?.latitude || feature.properties?.lat;
-				const lon = feature.properties?.longitude || feature.properties?.lon || feature.properties?.lng;
-				
-				if (lat && lon) {
-					const marker = new mapboxgl.Marker({ color: '#FF6B35' })
-						.setLngLat([lon, lat])
-						.addTo(map);
-					
-					markers.set(feature.id, marker);
-					console.log('[FeatureSelectionControl] Added marker for', feature.id, 'at', [lon, lat]);
-				} else {
-					console.warn('[FeatureSelectionControl] No coordinates found for feature', feature.id);
+		// Create or update markers for each unique location
+		for (const [locationKey, featuresAtLocation] of featuresByLocation) {
+			const [lon, lat] = locationKey.split(',').map(Number);
+			
+			// Build multi-line label HTML
+			const labelHTML = featuresAtLocation
+				.map(f => `<div style="padding: 2px 0;">${f.id}</div>`)
+				.join('');
+			
+			// Check if marker already exists at this location
+			if (markers.has(locationKey)) {
+				// Update existing marker's popup
+				const marker = markers.get(locationKey)!;
+				const popup = marker.getPopup();
+				if (popup) {
+					popup.setHTML(`<div class="marker-label" style="font-size: 12px; line-height: 1.4;">${labelHTML}</div>`);
 				}
+			} else {
+				// Create new marker with popup
+				const popup = new mapboxgl.Popup({
+					closeButton: false,
+					closeOnClick: false,
+					offset: 45,
+					className: 'selection-marker-popup',
+					anchor: 'bottom'
+				}).setHTML(`<div class="marker-label" style="font-size: 12px; line-height: 1.4;">${labelHTML}</div>`);
+				
+				const marker = new mapboxgl.Marker({ color: '#FF6B35' })
+					.setLngLat([lon, lat])
+					.setPopup(popup)
+					.addTo(map);
+				
+				// Show popup immediately
+				marker.togglePopup();
+				
+				markers.set(locationKey, marker);
+				console.log('[FeatureSelectionControl] Added marker at', locationKey, 'with', featuresAtLocation.length, 'items');
 			}
 		}
 	}
@@ -416,4 +456,17 @@
 		color: var(--bs-btn-disabled-color, var(--bs-btn-color, var(--bs-body-color)));
 		opacity: var(--bs-btn-disabled-opacity, 0.65);
 	}
+	
+	/* Style for marker popup labels */
+	:global(.selection-marker-popup .mapboxgl-popup-content) {
+		padding: 8px 12px;
+		background: rgba(255, 255, 255, 0.95);
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+	
+	:global(.selection-marker-popup .mapboxgl-popup-tip) {
+		border-top-color: rgba(255, 255, 255, 0.95);
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.98",
+	"version": "0.0.100",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",