@smartnet360/svelte-components 0.0.61 → 0.0.63

package/dist/map-v2/core/providers/MapboxProvider.svelte

@@ -16,8 +16,10 @@
 	import 'mapbox-gl/dist/mapbox-gl.css';
 
 	interface Props {
+		/** External Mapbox map instance (if provided, no new map will be created) */
+		externalMap?: MapboxMap;
 		/** Mapbox access token */
-		accessToken: string;
+		accessToken?: string;
 		/** Map style URL or style object (default: streets-v12) */
 		style?: string | StyleSpecification;
 		/** Initial map center [lng, lat] */
@@ -45,6 +47,7 @@
 	}
 
 	let {
+		externalMap,
 		accessToken,
 		style = 'mapbox://styles/mapbox/streets-v12',
 		center = [0, 0],
@@ -64,10 +67,30 @@
 	const mapStore = createMapStore();
 	setContext(MAP_CONTEXT_KEY, mapStore);
 
-	let mapContainer: HTMLDivElement;
+	let mapContainer = $state<HTMLDivElement>();
 	let map: MapboxMap | null = null;
+	let isExternalMap = false;
 
 	onMount(() => {
+		// If external map is provided, use it instead of creating a new one
+		if (externalMap) {
+			map = externalMap;
+			isExternalMap = true;
+			
+			// Set the map in store immediately
+			mapStore.set(map);
+			return;
+		}
+
+		// Otherwise, create a new map instance
+		if (!accessToken) {
+			throw new Error('MapboxProvider: accessToken is required when not using externalMap');
+		}
+
+		if (!mapContainer) {
+			throw new Error('MapboxProvider: map container not found');
+		}
+
 		// Set access token
 		mapboxgl.accessToken = accessToken;
 
@@ -117,7 +140,8 @@
 	});
 
 	onDestroy(() => {
-		if (map) {
+		// Only remove the map if we created it (not an external map)
+		if (map && !isExternalMap) {
 			map.remove();
 			map = null;
 		}
@@ -125,7 +149,9 @@
 	});
 </script>
 
-<div bind:this={mapContainer} class="mapbox-container {className}"></div>
+{#if !externalMap}
+	<div bind:this={mapContainer} class="mapbox-container {className}"></div>
+{/if}
 
 {#if children}
 	{@render children()}

package/dist/map-v2/core/providers/MapboxProvider.svelte.d.ts

@@ -1,8 +1,10 @@
-import { type StyleSpecification } from 'mapbox-gl';
+import { type Map as MapboxMap, type StyleSpecification } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 interface Props {
+    /** External Mapbox map instance (if provided, no new map will be created) */
+    externalMap?: MapboxMap;
     /** Mapbox access token */
-    accessToken: string;
+    accessToken?: string;
     /** Map style URL or style object (default: streets-v12) */
     style?: string | StyleSpecification;
     /** Initial map center [lng, lat] */

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

@@ -10,7 +10,7 @@
 const BASE_LAT = 37.7749;
 const BASE_LNG = -122.4194;
 // Grid parameters for distributing sites
-const NUM_SITES = 1;
+const NUM_SITES = 10;
 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)

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte

@@ -64,13 +64,9 @@
 	 */
 	function validateStoredConfig() {
 		const storedConfigStr = localStorage.getItem(STORAGE_CONFIG_KEY);
-		const currentConfig = `${level1}:${level2}`;
+		const currentConfig = `${level1}:${level2}:${store.includePlannedCells}`;
 		
 		if (storedConfigStr !== currentConfig) {
-			console.log('CellFilterControl: Config changed, clearing tree state', {
-				stored: storedConfigStr,
-				current: currentConfig
-			});
 			// Clear tree state from localStorage
 			localStorage.removeItem('cellular-cell-filter:checked');
 			localStorage.removeItem('cellular-cell-filter:expanded');
@@ -81,15 +77,13 @@
 	
 	// Rebuild tree when grouping config or cells change
 	function rebuildTree() {
-		if (store.cells.length === 0) return;
+		if (store.cellsFilteredByStatus.length === 0) return;
 		
 		// Validate and clear stale localStorage
 		validateStoredConfig();
 		
-		console.log('CellFilterControl: Building tree with config:', { level1, level2 });
-		
 		const treeNodes = buildCellTree(
-			store.cells,
+			store.cellsFilteredByStatus, // Use filtered cells, not all cells
 			{ level1, level2 },
 			store.groupColorMap
 		);
@@ -102,18 +96,14 @@
 			defaultExpandAll: false
 		});
 		
-		console.log('CellFilterControl: Tree store created');
-		
 		// Subscribe to tree changes and update filtered cells
 		if (treeStore) {
 			const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
 				const checkedPaths = treeValue.getCheckedPaths();
-				console.log('TreeStore updated, checked paths:', checkedPaths.length);
 				
 				// Convert string[] to Set<string>
 				const checkedPathsSet = new Set(checkedPaths);
-				const newFilteredCells = getFilteredCells(checkedPathsSet, store.cells);
-				console.log('Filtered cells count:', newFilteredCells.length, 'of', store.cells.length);
+				const newFilteredCells = getFilteredCells(checkedPathsSet, store.cellsFilteredByStatus); // Use filtered cells
 				
 				// Update the cell store directly
 				store.setFilteredCells(newFilteredCells);
@@ -124,10 +114,17 @@
 	}
 	
 	onMount(() => {
-		console.log('CellFilterControl: Mounted with', store.cells.length, 'cells');
 		rebuildTree();
 	});
 	
+	// Handle includePlannedCells checkbox change
+	function handleIncludePlannedChange(event: Event) {
+		const target = event.currentTarget as HTMLInputElement;
+		store.setIncludePlannedCells(target.checked);
+		// Rebuild tree with new filtered cells
+		rebuildTree();
+	}
+	
 	// Handle grouping config changes
 	function handleLevel1Change(event: Event) {
 		const target = event.currentTarget as HTMLSelectElement;
@@ -170,34 +167,57 @@
 
 <MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
 	<div class="cell-filter-control">
+		<!-- Status Filter Checkbox -->
+		<div class="mb-3">
+			<div class="form-check">
+				<input 
+					type="checkbox" 
+					class="form-check-input" 
+					id="includePlanned"
+					checked={store.includePlannedCells}
+					onchange={handleIncludePlannedChange}
+				/>
+				<label class="form-check-label small" for="includePlanned">
+					Include Planned Cells
+					<span class="text-muted ms-1">
+						({store.includePlannedCells ? 'All cells' : 'On Air only'})
+					</span>
+				</label>
+			</div>
+		</div>
+		
 		<!-- Grouping Configuration -->
 		<div class="grouping-config">
-			<div class="mb-2">
-				<label for="level1-select" class="form-label small mb-1">Level 1 Grouping</label>
-				<select 
-					id="level1-select"
-					class="form-select form-select-sm"
-					value={level1}
-					onchange={handleLevel1Change}
-				>
-					{#each GROUPING_OPTIONS as option}
-						<option value={option}>{FIELD_LABELS[option]}</option>
-					{/each}
-				</select>
-			</div>
-			
-			<div class="mb-3">
-				<label for="level2-select" class="form-label small mb-1">Level 2 Grouping</label>
-				<select 
-					id="level2-select"
-					class="form-select form-select-sm"
-					value={level2}
-					onchange={handleLevel2Change}
-				>
-					{#each LEVEL2_OPTIONS as option}
-						<option value={option}>{FIELD_LABELS[option]}</option>
-					{/each}
-				</select>
+			<div class="row g-2 mb-3">
+				<!-- Level 1 Grouping -->
+				<div class="col-6">
+					<label for="level1-select" class="form-label small mb-1">Level 1</label>
+					<select 
+						id="level1-select"
+						class="form-select form-select-sm"
+						value={level1}
+						onchange={handleLevel1Change}
+					>
+						{#each GROUPING_OPTIONS as option}
+							<option value={option}>{FIELD_LABELS[option]}</option>
+						{/each}
+					</select>
+				</div>
+				
+				<!-- Level 2 Grouping -->
+				<div class="col-6">
+					<label for="level2-select" class="form-label small mb-1">Level 2</label>
+					<select 
+						id="level2-select"
+						class="form-select form-select-sm"
+						value={level2}
+						onchange={handleLevel2Change}
+					>
+						{#each LEVEL2_OPTIONS as option}
+							<option value={option}>{FIELD_LABELS[option]}</option>
+						{/each}
+					</select>
+				</div>
 			</div>
 		</div>
 		
@@ -234,8 +254,7 @@
 
 <style>
 	.cell-filter-control {
-		min-width: 280px;
-		max-width: 320px;
+		width: 100%;
 	}
 	
 	.grouping-config {

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.d.ts

@@ -8,6 +8,7 @@ import type { Cell, CellStatus, CellStatusStyle, CellTreeConfig } from '../types
 export interface CellStoreValue {
     cells: Cell[];
     filteredCells: Cell[];
+    includePlannedCells: boolean;
     showCells: boolean;
     lineWidth: number;
     fillOpacity: number;
@@ -19,8 +20,10 @@ export interface CellStoreValue {
 }
 export interface CellStoreContext {
     readonly cells: Cell[];
+    readonly cellsFilteredByStatus: Cell[];
     readonly filteredCells: Cell[];
     readonly showCells: boolean;
+    readonly includePlannedCells: boolean;
     readonly lineWidth: number;
     readonly fillOpacity: number;
     readonly baseRadius: number;
@@ -28,6 +31,7 @@ export interface CellStoreContext {
     readonly groupingConfig: CellTreeConfig;
     readonly groupColorMap: Map<string, string>;
     setFilteredCells(cells: Cell[]): void;
+    setIncludePlannedCells(value: boolean): void;
     setShowCells(value: boolean): void;
     setLineWidth(value: number): void;
     setFillOpacity(value: number): void;

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js

@@ -48,6 +48,7 @@ export function createCellStoreContext(cells) {
     let state = $state({
         cells,
         filteredCells: cells,
+        includePlannedCells: persistedSettings.includePlannedCells ?? false, // Default: On Air only
         showCells: persistedSettings.showCells ?? true,
         lineWidth: persistedSettings.lineWidth ?? 2,
         fillOpacity: persistedSettings.fillOpacity ?? 0.6,
@@ -57,6 +58,12 @@ export function createCellStoreContext(cells) {
         groupColorMap: initialColorMap,
         currentZoom: 12 // Default zoom
     });
+    // Derived: Filter cells by status based on includePlannedCells flag
+    // IMPORTANT: This is a pure $derived - it only READS from state, never writes
+    let cellsFilteredByStatus = $derived(state.includePlannedCells
+        ? state.cells // Include all cells
+        : state.cells.filter(cell => cell.status.startsWith('On_Air')) // Only On Air cells
+    );
     // Auto-save settings when they change
     $effect(() => {
         // Convert Map to plain object for serialization
@@ -66,6 +73,7 @@ export function createCellStoreContext(cells) {
         });
         const settings = {
             showCells: state.showCells,
+            includePlannedCells: state.includePlannedCells,
             lineWidth: state.lineWidth,
             fillOpacity: state.fillOpacity,
             baseRadius: state.baseRadius,
@@ -79,8 +87,12 @@ export function createCellStoreContext(cells) {
         // Bindable properties with getters/setters
         get cells() { return state.cells; },
         set cells(value) { state.cells = value; },
+        // Derived readonly property - filtered by status
+        get cellsFilteredByStatus() { return cellsFilteredByStatus; },
         get filteredCells() { return state.filteredCells; },
         set filteredCells(value) { state.filteredCells = value; },
+        get includePlannedCells() { return state.includePlannedCells; },
+        set includePlannedCells(value) { state.includePlannedCells = value; },
         get showCells() { return state.showCells; },
         set showCells(value) { state.showCells = value; },
         get lineWidth() { return state.lineWidth; },
@@ -97,6 +109,9 @@ export function createCellStoreContext(cells) {
         setFilteredCells(cells) {
             state.filteredCells = cells;
         },
+        setIncludePlannedCells(value) {
+            state.includePlannedCells = value;
+        },
         setShowCells(value) {
             state.showCells = value;
         },

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

@@ -71,22 +71,12 @@ function generateNodeId(field, value, parentId) {
  */
 export function buildCellTree(cells, config, colorMap) {
     const { level1, level2 } = config;
-    console.log('=== buildCellTree START ===');
-    console.log('Config:', { level1, level2 });
-    console.log('Total cells:', cells.length);
     // If level2 is 'none', create flat 2-level tree
     if (level2 === 'none') {
-        console.log('Building flat tree (2-level)');
-        const tree = buildFlatTree(cells, level1, colorMap);
-        console.log('Flat tree built, root children:', tree.children?.length);
-        return tree;
+        return buildFlatTree(cells, level1, colorMap);
     }
     // Otherwise, create nested 3-level tree
-    console.log('Building nested tree (3-level)');
-    const tree = buildNestedTree(cells, level1, level2, colorMap);
-    console.log('Nested tree built, root children:', tree.children?.length);
-    console.log('=== buildCellTree END ===');
-    return tree;
+    return buildNestedTree(cells, level1, level2, colorMap);
 }
 /**
  * Build flat 2-level tree (Root → Level1 groups)
@@ -162,7 +152,6 @@ function buildNestedTree(cells, level1, level2, colorMap) {
             const nodeId = generateNodeId(level2, value2, parentId);
             const color = colorMap?.get(nodeId);
             const cellIds = groupCells.map((c) => c.id);
-            console.log(`    Nested tree leaf: id="${nodeId}", cells=${cellIds.length}, cellIds sample:`, cellIds.slice(0, 3));
             return {
                 id: nodeId,
                 label: getGroupLabel(level2, value2, groupCells.length),
@@ -181,7 +170,6 @@ function buildNestedTree(cells, level1, level2, colorMap) {
         });
         // Calculate total cells in this level1 group
         const totalCells = Array.from(level2Groups.values()).flat().length;
-        console.log(`  Nested tree parent: id="${parentId}", totalCells=${totalCells}, children=${level2Children.length}`);
         return {
             id: parentId,
             label: getGroupLabel(level1, value1, totalCells),

package/package.json

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