@smartnet360/svelte-components 0.0.51 → 0.0.54

package/dist/core/TreeView/tree-utils.js

@@ -76,21 +76,45 @@ export function flattenTree(nodes, config, parentPath = '', level = 0) {
 }
 /**
  * Calculate which nodes should be indeterminate
+ * A node is indeterminate if:
+ * - It has children AND
+ * - Some (but not all) of its direct children are checked OR indeterminate
  */
 export function calculateIndeterminateStates(nodes, checkedPaths) {
     const indeterminate = new Set();
-    // For each node with children
-    nodes.forEach((nodeState, path) => {
+    // For each node with children, check from deepest to shallowest
+    // This ensures we calculate indeterminate state correctly
+    const nodesArray = Array.from(nodes.entries());
+    // Sort by level (deepest first) to ensure we process children before parents
+    nodesArray.sort((a, b) => b[1].level - a[1].level);
+    for (const [path, nodeState] of nodesArray) {
+        // Skip leaf nodes - they can't be indeterminate
         if (nodeState.childPaths.length === 0)
-            return; // Leaf nodes can't be indeterminate
-        const checkedChildren = nodeState.childPaths.filter(childPath => checkedPaths.has(childPath));
-        const allChecked = checkedChildren.length === nodeState.childPaths.length;
-        const noneChecked = checkedChildren.length === 0;
-        // Indeterminate if some (but not all) children are checked
-        if (!allChecked && !noneChecked) {
+            continue;
+        // Count direct children that are either checked or indeterminate
+        let checkedCount = 0;
+        let indeterminateCount = 0;
+        for (const childPath of nodeState.childPaths) {
+            if (checkedPaths.has(childPath)) {
+                checkedCount++;
+            }
+            else if (indeterminate.has(childPath)) {
+                indeterminateCount++;
+            }
+        }
+        const totalChildren = nodeState.childPaths.length;
+        const affectedChildren = checkedCount + indeterminateCount;
+        // Node is indeterminate if:
+        // 1. Some children are checked/indeterminate, but not all
+        // 2. At least one child is indeterminate (even if all are checked/indeterminate)
+        if (affectedChildren > 0 && affectedChildren < totalChildren) {
             indeterminate.add(path);
         }
-    });
+        else if (indeterminateCount > 0) {
+            // If any child is indeterminate, parent is indeterminate
+            indeterminate.add(path);
+        }
+    }
     return indeterminate;
 }
 /**

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

@@ -3,7 +3,7 @@
  * Svelte writable store for managing tree state with persistence
  */
 import { writable } from 'svelte/store';
-import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
+import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, getAncestorPaths, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
 import { log } from '../logger';
 /**
  * Create a tree store with state management and persistence
@@ -70,6 +70,11 @@ export function createTreeStore(config) {
     }
     /**
      * Toggle a node's checked state (with cascading)
+     *
+     * Logic:
+     * 1. Toggle the clicked node
+     * 2. Cascade DOWN to all descendants (check/uncheck all children)
+     * 3. Propagate UP to all ancestors (update based on their children's states)
      */
     function toggle(path) {
         log('🔄 Toggling node', { path });
@@ -81,16 +86,17 @@ export function createTreeStore(config) {
             }
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
-            // Update this node
+            log('📌 Toggle action', { path, newChecked });
+            // STEP 1: Update this node
             if (newChecked) {
                 newCheckedPaths.add(path);
             }
             else {
                 newCheckedPaths.delete(path);
             }
-            // Cascade to all descendants
+            // STEP 2: CASCADE DOWN - Update all descendants to match
             const descendants = getDescendantPaths(path, state.nodes, separator);
-            log('📦 Cascading to descendants', {
+            log('⬇️ Cascading to descendants', {
                 path,
                 descendantCount: descendants.length,
                 newChecked
@@ -103,29 +109,48 @@ export function createTreeStore(config) {
                     newCheckedPaths.delete(descendantPath);
                 }
             });
-            // Update ancestors (check for indeterminate states)
-            let currentPath = path;
-            while (true) {
-                const parentPath = getParentPath(currentPath, separator);
-                if (!parentPath)
-                    break;
-                const parent = state.nodes.get(parentPath);
-                if (!parent)
-                    break;
-                // Count checked children
-                const checkedChildren = parent.childPaths.filter(childPath => newCheckedPaths.has(childPath));
-                // If all children checked, check parent; if none checked, uncheck parent
-                if (checkedChildren.length === parent.childPaths.length) {
-                    newCheckedPaths.add(parentPath);
+            // STEP 3: PROPAGATE UP - Update all ancestors based on their children
+            // We need to update from the deepest ancestor up to the root
+            const ancestorPaths = getAncestorPaths(path, separator);
+            log('⬆️ Propagating to ancestors', {
+                path,
+                ancestorCount: ancestorPaths.length,
+                ancestors: ancestorPaths
+            });
+            // Process ancestors from deepest to shallowest (reverse order)
+            // This ensures we calculate states correctly as we go up
+            for (let i = ancestorPaths.length - 1; i >= 0; i--) {
+                const ancestorPath = ancestorPaths[i];
+                const ancestor = state.nodes.get(ancestorPath);
+                if (!ancestor)
+                    continue;
+                // Count how many direct children are checked
+                const checkedChildrenCount = ancestor.childPaths.filter(childPath => newCheckedPaths.has(childPath)).length;
+                const totalChildren = ancestor.childPaths.length;
+                log('👨‍👧‍👦 Checking ancestor children', {
+                    ancestorPath,
+                    checkedChildrenCount,
+                    totalChildren
+                });
+                // Update ancestor based on children states:
+                // - All children checked → check parent
+                // - No children checked → uncheck parent
+                // - Some children checked → uncheck parent (will show indeterminate)
+                if (checkedChildrenCount === totalChildren) {
+                    newCheckedPaths.add(ancestorPath);
+                    log('✅ All children checked, checking parent', { ancestorPath });
                 }
-                else if (checkedChildren.length === 0) {
-                    newCheckedPaths.delete(parentPath);
+                else {
+                    newCheckedPaths.delete(ancestorPath);
+                    if (checkedChildrenCount > 0) {
+                        log('➖ Some children checked, parent will be indeterminate', { ancestorPath });
+                    }
+                    else {
+                        log('❌ No children checked, unchecking parent', { ancestorPath });
+                    }
                 }
-                // If some checked, parent state depends on whether we're checking or unchecking
-                // For better UX: leave parent as-is (will show indeterminate)
-                currentPath = parentPath;
             }
-            // Recalculate indeterminate states
+            // STEP 4: Recalculate indeterminate states
             const newIndeterminatePaths = calculateIndeterminateStates(state.nodes, newCheckedPaths);
             log('✅ Toggle complete', {
                 path,

package/dist/core/index.d.ts

@@ -3,5 +3,4 @@ export * from './Charts/index.js';
 export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
-export * from './Map/index.js';
 export * from './FeatureRegistry/index.js';

package/dist/core/index.js

@@ -11,6 +11,7 @@ export * from './Settings/index.js';
 // Logger utility for debugging and monitoring
 export * from './logger/index.js';
 // Map component - Mapbox GL + Deck.GL integration
-export * from './Map/index.js';
+// TODO: Moved to top-level src/lib/map module
+// export * from './Map/index.js';
 // FeatureRegistry - Component access management
 export * from './FeatureRegistry/index.js';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './core/index.js';
+export * from './map/index.js';
 export * from './apps/index.js';

package/dist/index.js

@@ -2,5 +2,7 @@
 // This approach keeps the main index clean and allows for easy expansion
 // Core components (Desktop orchestration + Charts + TreeView)
 export * from './core/index.js';
+// Map components (Mapbox cellular visualization)
+export * from './map/index.js';
 // Complete applications
 export * from './apps/index.js';

package/dist/map/controls/MapControl.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	/**
+	 * MapControl - Reusable wrapper for Mapbox custom controls
+	 *
+	 * Creates a custom control that can be positioned anywhere on the map
+	 * and contain any content via slots.
+	 *
+	 * Usage:
+	 * <MapControl position="top-left" title="My Control">
+	 *   <div>Custom content here</div>
+	 * </MapControl>
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { tryUseMapbox } from '../hooks/useMapbox';
+
+	interface Props {
+		/** Position on the map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title (shown in header) */
+		title?: string;
+		/** Is the control collapsible? */
+		collapsible?: boolean;
+		/** Initial collapsed state */
+		initiallyCollapsed?: boolean;
+		/** Custom CSS class for the container */
+		className?: string;
+		/** Child content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		position = 'top-left',
+		title,
+		collapsible = true,
+		initiallyCollapsed = false,
+		className = '',
+		children
+	}: Props = $props();
+
+	const mapStore = tryUseMapbox();
+	
+	if (!mapStore) {
+		console.error('MapControl: No map context available. Make sure MapControl is used inside MapboxProvider.');
+	}
+
+	let map: mapboxgl.Map | null = null;
+	let controlElement: HTMLDivElement;
+	let collapsed = $state(initiallyCollapsed);
+	let control: mapboxgl.IControl | null = null;
+
+	onMount(() => {
+		if (!mapStore) {
+			console.error('MapControl: Cannot mount - no map store available');
+			return;
+		}
+		
+		const unsub = mapStore.subscribe((m) => {
+			if (!m) return;
+			map = m;
+			addControl();
+		});
+
+		return () => {
+			unsub();
+			removeControl();
+		};
+	});
+
+	onDestroy(() => {
+		removeControl();
+	});
+
+	function addControl() {
+		if (!map || control) return;
+
+		// Create a custom Mapbox control
+		control = {
+			onAdd: () => {
+				return controlElement;
+			},
+			onRemove: () => {
+				// Cleanup handled in onDestroy
+			}
+		};
+
+		map.addControl(control, position);
+	}
+
+	function removeControl() {
+		if (map && control) {
+			try {
+				map.removeControl(control);
+			} catch (e) {
+				// Control may already be removed
+			}
+			control = null;
+		}
+	}
+
+	function toggleCollapse() {
+		collapsed = !collapsed;
+	}
+</script>
+
+<div
+	bind:this={controlElement}
+	class="mapboxgl-ctrl mapboxgl-ctrl-group map-control-container {className}"
+>
+	{#if title}
+		<div class="map-control-header">
+			<span class="map-control-title">{title}</span>
+			{#if collapsible}
+				<button
+					class="map-control-toggle"
+					onclick={toggleCollapse}
+					aria-label={collapsed ? 'Expand' : 'Collapse'}
+					title={collapsed ? 'Expand' : 'Collapse'}
+				>
+					<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if !collapsed}
+		<div class="map-control-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.map-control-container {
+		background: white;
+		border-radius: 4px;
+		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		max-width: 300px;
+		font-family: system-ui, -apple-system, sans-serif;
+	}
+
+	.map-control-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 8px 12px;
+		background: #f8f9fa;
+		border-bottom: 1px solid #dee2e6;
+		font-weight: 600;
+		font-size: 13px;
+		color: #212529;
+	}
+
+	.map-control-title {
+		flex: 1;
+		user-select: none;
+	}
+
+	.map-control-toggle {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: #6c757d;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 3px;
+		transition: all 0.2s;
+	}
+
+	.map-control-toggle:hover {
+		background: rgba(0, 0, 0, 0.05);
+		color: #212529;
+	}
+
+	.map-control-content {
+		padding: 12px;
+		max-height: 400px;
+		overflow-y: auto;
+		font-size: 13px;
+	}
+
+	/* Custom scrollbar */
+	.map-control-content::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.map-control-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 4px;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

package/dist/map/controls/MapControl.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Position on the map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title (shown in header) */
+    title?: string;
+    /** Is the control collapsible? */
+    collapsible?: boolean;
+    /** Initial collapsed state */
+    initiallyCollapsed?: boolean;
+    /** Custom CSS class for the container */
+    className?: string;
+    /** Child content */
+    children?: import('svelte').Snippet;
+}
+declare const MapControl: import("svelte").Component<Props, {}, "">;
+type MapControl = ReturnType<typeof MapControl>;
+export default MapControl;

package/dist/map/controls/SiteFilterControl.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	/**
+	 * SiteFilterControl - TreeView-based site filtering control for Mapbox
+	 *
+	 * Displays a hierarchical tree: All Sites -> Provider -> Feature Group
+	 * Filters sites based on checked state and persists to localStorage
+	 *
+	 * Usage:
+	 * <SiteFilterControl 
+	 *   {sites} 
+	 *   bind:filteredSites 
+	 *   position="top-left"
+	 * />
+	 */
+	import { onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import MapControl from './MapControl.svelte';
+	import TreeView from '../../core/TreeView/TreeView.svelte';
+	import { createTreeStore } from '../../core/TreeView/tree.store';
+	import { buildSiteTree, getFilteredSites, saveTreeState } from '../utils/siteTreeUtils';
+	import type { Site } from '../types';
+	import type { TreeStoreValue } from '../../core/TreeView/tree.model';
+
+	interface Props {
+		/** All sites to filter */
+		sites: Site[];
+		/** Filtered sites output */
+		filteredSites?: Site[];
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		sites,
+		filteredSites = $bindable([]),
+		position = 'top-left',
+		title = 'Site Filter',
+		initiallyCollapsed = false
+	}: Props = $props();
+
+	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	
+	// Initialize filteredSites with all sites immediately
+	if (filteredSites.length === 0 && sites.length > 0) {
+		filteredSites = [...sites];
+	}
+
+	// Build tree and create store when sites change (run only once on mount)
+	onMount(() => {
+		console.log('SiteFilterControl: Mounted with', sites.length, 'sites');
+		
+		if (sites.length > 0) {
+			console.log('SiteFilterControl: Building tree...');
+			const treeNodes = buildSiteTree(sites);
+
+			treeStore = createTreeStore({
+				nodes: [treeNodes],
+				namespace: 'cellular-site-filter',
+				persistState: true,
+				defaultExpandAll: false
+			});
+			
+			console.log('SiteFilterControl: Tree store created');
+
+			// Subscribe to tree changes and update filtered sites
+			if (treeStore) {
+				const unsub = treeStore.subscribe((store: TreeStoreValue) => {
+					const checkedPaths = store.getCheckedPaths();
+					console.log('TreeStore updated, checked paths:', checkedPaths);
+					
+					const newFilteredSites = getFilteredSites(checkedPaths, sites);
+					console.log('Filtered sites count:', newFilteredSites.length, 'of', sites.length);
+					
+					filteredSites = newFilteredSites;
+					
+					// Save state to our custom storage
+					saveTreeState(checkedPaths);
+				});
+
+				return () => unsub();
+			}
+		}
+	});
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	{#if treeStore && $treeStore}
+		<div class="site-filter-tree">
+			<TreeView store={$treeStore} showControls={false} />
+			
+			<!-- <div class="site-filter-stats">
+				<small class="text-muted">
+					Showing {filteredSites.length} of {sites.length} sites
+				</small>
+			</div> -->
+		</div>
+	{:else}
+		<div class="text-muted small">Loading sites...</div>
+	{/if}
+</MapControl>
+
+<style>
+	.site-filter-tree {
+		min-width: 250px;
+		max-width: 300px;
+	}
+
+	.site-filter-stats {
+		margin-top: 8px;
+		padding-top: 8px;
+		border-top: 1px solid #dee2e6;
+		text-align: center;
+	}
+
+	:global(.site-filter-tree .tree-node-label) {
+		font-size: 13px;
+	}
+
+	:global(.site-filter-tree .tree-node-checkbox) {
+		margin-right: 6px;
+	}
+</style>

package/dist/map/controls/SiteFilterControl.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Site } from '../types';
+interface Props {
+    /** All sites to filter */
+    sites: Site[];
+    /** Filtered sites output */
+    filteredSites?: Site[];
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+}
+declare const SiteFilterControl: import("svelte").Component<Props, {}, "filteredSites">;
+type SiteFilterControl = ReturnType<typeof SiteFilterControl>;
+export default SiteFilterControl;

package/dist/map/demo/DemoMap.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * DemoMap - Complete demo component with map initialization and sample data
+	 */
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import 'mapbox-gl/dist/mapbox-gl.css';
+	
+	import MapboxProvider from '../providers/MapboxProvider.svelte';
+	import CellDataProvider from '../providers/CellDataProvider.svelte';
+	import SitesLayer from '../layers/SitesLayer.svelte';
+	import CellsLayer from '../layers/CellsLayer.svelte';
+	import SiteFilterControl from '../controls/SiteFilterControl.svelte';
+	import { demoSites, demoCells } from './demo-data';
+	import type { Site, Cell } from '../types';
+
+	interface Props {
+		/** Mapbox access token */
+		accessToken?: string;
+		/** Initial center coordinates [lng, lat] */
+		center?: [number, number];
+		/** Initial zoom level */
+		zoom?: number;
+	}
+
+	let { 
+		accessToken = '',
+		center = [-122.4194, 37.7749], // San Francisco
+		zoom = 12
+	}: Props = $props();
+
+	let mapContainer: HTMLDivElement;
+	let map = $state<mapboxgl.Map | null>(null);
+	let mapReady = $state(false);
+	
+	// Data
+	let sites = $state<Site[]>(demoSites);
+	let cells = $state<Cell[]>(demoCells);
+	let filteredSites = $state<Site[]>(sites);
+
+	onMount(() => {
+		// Initialize Mapbox map
+		map = new mapboxgl.Map({
+			container: mapContainer,
+			style: 'mapbox://styles/mapbox/streets-v12',
+			center,
+			zoom,
+			accessToken
+		});
+
+		// Add navigation controls
+		map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+
+		// Wait for map to load
+		map.on('load', () => {
+			mapReady = true;
+		});
+
+		return () => {
+			map?.remove();
+		};
+	});
+</script>
+
+<div class="demo-map-container">
+	<div bind:this={mapContainer} class="w-100 h-100"></div>
+
+	{#if !mapReady}
+		<div class="position-absolute top-50 start-50 translate-middle bg-white p-4 rounded shadow">
+			<div class="spinner-border text-primary me-2" role="status">
+				<span class="visually-hidden">Loading...</span>
+			</div>
+			<span>Loading map...</span>
+		</div>
+	{/if}
+
+	{#if mapReady && map}
+		<MapboxProvider mapInstance={map}>
+			<CellDataProvider sites={filteredSites} {cells}>
+				<SitesLayer />
+				<!-- <CellsLayer /> -->
+				<SiteFilterControl {sites} bind:filteredSites position="top-left" />
+			</CellDataProvider>
+		</MapboxProvider>
+	{/if}
+</div>
+
+<style>
+	.demo-map-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/map/demo/DemoMap.svelte.d.ts

@@ -0,0 +1,12 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+interface Props {
+    /** Mapbox access token */
+    accessToken?: string;
+    /** Initial center coordinates [lng, lat] */
+    center?: [number, number];
+    /** Initial zoom level */
+    zoom?: number;
+}
+declare const DemoMap: import("svelte").Component<Props, {}, "">;
+type DemoMap = ReturnType<typeof DemoMap>;
+export default DemoMap;

package/dist/map/demo/demo-data.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Demo cellular data for testing and examples
+ */
+import type { Site, Cell } from '../types';
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export declare const demoSites: Site[];
+/**
+ * Sample cellular cells/sectors
+ */
+export declare const demoCells: Cell[];