@smartnet360/svelte-components 0.0.100 → 0.0.102

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

@@ -7,7 +7,9 @@
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
-	import { checkHealth, getMessage } from '../../core/FeatureRegistry';
+	import { checkHealth } from '../../core/FeatureRegistry';
+	import SiteCheckControls from './SiteCheckControls.svelte';
+	import ResizableSplitPanel from '../../shared/ResizableSplitPanel.svelte';
 
 	interface Props {
 		rawData: CellTrafficRecord[];
@@ -31,28 +33,6 @@
 		cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, 
 		showGroupingSelector = true, useSectorLineStyles = false, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
 
-	// Search state
-	let searchTerm = $state('');
-	
-	// Controls visibility state (starts expanded)
-	let controlsExpanded = $state(true);
-
-	// Handlers
-	function handleSearch() {
-		if (onSearch) {
-			onSearch(searchTerm);
-			log('🔍 Search triggered:', searchTerm);
-		}
-	}
-
-	function handleClearSearch() {
-		searchTerm = '';
-		if (onSearch) {
-			onSearch('');
-			log('🧹 Search cleared');
-		}
-	}
-
 	// Check feature health
 	let isHealthy = $state(checkHealth('sitecheck'));
 
@@ -68,37 +48,7 @@
 	// 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: 'cellName', label: 'Cell Name' }
-	];
-
-	// Handlers for level changes
-	function handleLevel0Change(value: TreeGroupField) {
-		// Clear level1 if it conflicts with new level0
-		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
-		treeGrouping = {
-			level0: value,
-			level1: newLevel1
-		};
-	}
-
-	function handleLevel1Change(value: TreeGroupField | 'none') {
-		const newLevel1 = value === 'none' ? null : value;
-		treeGrouping = {
-			level0: treeGrouping.level0,
-			level1: newLevel1
-		};
-	}
-
-	// Get available options for level1 (exclude level0)
-	let availableLevel1Options = $derived.by(() => {
-		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
-	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
+	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	// Rebuild tree whenever treeGrouping, singleRootSelect, or singleLevel1Select changes
 	$effect(() => {
@@ -106,10 +56,11 @@
 		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect, singleLevel1Select });
 
 		// Clear any existing localStorage data to prevent stale state
-		const storageKey = 'site-check:treeState';
+		// This includes both tree state AND chart settings to avoid cell mismatches
 		if (typeof window !== 'undefined') {
-			localStorage.removeItem(storageKey);
-			log('🧹 Cleared localStorage:', storageKey);
+			localStorage.removeItem('site-check:treeState');
+			localStorage.removeItem('charts:globalControls');
+			log('🧹 Cleared localStorage: tree state and chart settings');
 		}
 
 		// Build tree nodes from raw data with custom grouping
@@ -250,227 +201,58 @@
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">
-	<!-- Main Content -->
-	<div class="row flex-grow-1" style="min-height: 0;">
-		<!-- Left: Tree View -->
-		<div class="col-lg-3 col-md-4 border-end bg-white d-flex flex-column" style="min-height: 0; height: 100%;">
-			<!-- Collapsible Controls Toggle -->
-			{#if onSearch || showGroupingSelector}
-				<button 
-					class="controls-toggle w-100 text-start p-2 bg-light border-bottom d-flex align-items-center flex-shrink-0"
-					onclick={() => controlsExpanded = !controlsExpanded}
-					aria-expanded={controlsExpanded}
-					aria-label="Toggle controls"
-				>
-					<i class="bi bi-sliders me-2"></i>
-					<span class="fw-semibold small">Controls</span>
-					<i class="bi ms-auto" 
-					   class:bi-chevron-down={controlsExpanded} 
-					   class:bi-chevron-right={!controlsExpanded}>
-					</i>
-				</button>
-			{/if}
-
-			<!-- Collapsible Controls Content -->
-			{#if controlsExpanded}
-				<!-- Search Box -->
-				{#if onSearch}
-					<div class="p-3 border-bottom flex-shrink-0">
-						<label for="searchInput" class="form-label small fw-semibold mb-2">
-							Search
-						</label>
-						<div class="input-group input-group-sm">
-							<input 
-								type="text" 
-								id="searchInput"
-								class="form-control" 
-								placeholder={searchPlaceholder}
-								bind:value={searchTerm}
-								onkeydown={(e) => {
-									if (e.key === 'Enter') {
-										handleSearch();
-									}
-								}}
-							/>
-							{#if searchTerm}
-								<button 
-									class="btn btn-outline-secondary" 
-									type="button"
-									onclick={handleClearSearch}
-									title="Clear search"
-									aria-label="Clear search"
-								>
-									<i class="bi bi-x-lg"></i>
-								</button>
-							{/if}
-							<button 
-								class="btn btn-primary" 
-								type="button"
-								onclick={handleSearch}
-								title="Search"
-								aria-label="Search"
-							>
-								<i class="bi bi-search"></i>
-							</button>
-						</div>
-			</div>
-		{/if}
+	<ResizableSplitPanel namespace="site-check" defaultLeftWidth={25}>
+		{#snippet left()}
+			<div class="bg-white d-flex flex-column" style="height: 100%;">
+				<!-- Controls -->
+				<SiteCheckControls
+					{treeGrouping}
+					{colorDimension}
+					{singleRootSelect}
+					{singleLevel1Select}
+					treeStore={$treeStore}
+					{showGroupingSelector}
+					{onSearch}
+					{searchPlaceholder}
+					onGroupingChange={(g) => (treeGrouping = g)}
+					onColorDimensionChange={(d) => (colorDimension = d)}
+					onSingleRootSelectChange={(e) => (singleRootSelect = e)}
+					onSingleLevel1SelectChange={(e) => (singleLevel1Select = e)}
+				/>
 
-		<!-- Grouping Selector -->
-		{#if showGroupingSelector}
-			<div class="p-3 border-bottom flex-shrink-0">
-				<div class="small fw-semibold mb-2">Tree Grouping</div>
-				
-				<div class="row g-2 mb-2">
-					<!-- Level 0 (Mandatory) -->
-					<div class="col-4">
-						<label for="level0Select" class="form-label small mb-1">Level 0</label>
-						<select 
-							id="level0Select"
-							class="form-select form-select-sm"
-							value={treeGrouping.level0}
-							onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
-						>
-							{#each fieldOptions as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-					
-					<!-- Level 1 (Optional) -->
-					<div class="col-4">
-						<label for="level1Select" class="form-label small mb-1">Level 1</label>
-						<select 
-							id="level1Select"
-							class="form-select form-select-sm"
-							value={treeGrouping.level1 ?? 'none'}
-							onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
-						>
-							<option value="none">None</option>
-							{#each availableLevel1Options as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-					
-					<!-- Color By -->
-					<div class="col-4">
-						<label for="colorDimensionSelect" class="form-label small mb-1">Color By</label>
-						<select 
-							id="colorDimensionSelect"
-							class="form-select form-select-sm"
-							value={colorDimension}
-							onchange={(e) => {
-								colorDimension = e.currentTarget.value as ColorDimension;
-								log('🎨 Color dimension changed:', colorDimension);
-							}}
-						>
-							<option value="band">Band</option>
-							<option value="site">Site</option>
-							<option value="sector">Sector</option>
-							<option value="cellName">Cell Name</option>
-						</select>
-					</div>
-				</div>
-				
-				<!-- Single Root Select Toggle -->
-				<div class="form-check mt-2">
-					<input 
-						class="form-check-input" 
-						type="checkbox" 
-						id="singleRootSelectCheck"
-						checked={singleRootSelect}
-						onchange={(e) => {
-							singleRootSelect = e.currentTarget.checked;
-							log('🔘 Single root select mode:', singleRootSelect);
-							
-							// When enabling single root mode, uncheck all roots except the first one
-							if (singleRootSelect && treeStore) {
-								const store = $treeStore;
-								if (store) {
-									const checkedRoots = store.state.rootPaths.filter(path => 
-										store.state.checkedPaths.has(path)
-									);
-									if (checkedRoots.length > 1) {
-										log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
-										// Uncheck all except the first
-										for (let i = 1; i < checkedRoots.length; i++) {
-											store.toggle(checkedRoots[i]);
-										}
-									}
-								}
-							}
-						}}
-					/>
-					<label class="form-check-label small" for="singleRootSelectCheck">
-						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>
+				<!-- Tree View -->
+				<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
+					{#if treeStore}
+						<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
+					{/if}
 				</div>
 			</div>
-		{/if}
-	{/if}			<!-- Tree View -->
-			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
-				{#if treeStore}
-					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
+		{/snippet}
+
+		{#snippet right()}
+			<div class="bg-light d-flex flex-column" style="height: 100%;">
+				{#if chartData.length > 0}
+					<ChartComponent
+						layout={chartLayout}
+						data={chartData}
+						{mode}
+						{markers}
+						showGlobalControls={true}
+						enableAdaptation={true}
+						{plotlyLayout}
+						persistSettings={true}
+					/>
+				{:else}
+					<div class="d-flex align-items-center justify-content-center h-100">
+						<div class="text-center text-muted">
+							<h5>No Data Selected</h5>
+						</div>
+					</div>
 				{/if}
 			</div>
-		</div>
-
-		<!-- Right: Charts -->
-		<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}
-					data={chartData}
-					mode={mode}
-					markers={markers}
-					showGlobalControls={true}
-					enableAdaptation={true}
-					plotlyLayout={plotlyLayout}
-					persistSettings={true}
-				/>
-			{:else}
-				<div class="d-flex align-items-center justify-content-center h-100">
-					<div class="text-center text-muted">
-						<h5>No Data Selected</h5>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
+		{/snippet}
+	</ResizableSplitPanel>
 </div>
 
-<style>
-	.controls-toggle {
-		cursor: pointer;
-		border: none;
-		transition: background-color 0.2s;
-	}
-
-	.controls-toggle:hover {
-		background-color: #e9ecef !important;
-	}
 
-	.controls-toggle:focus {
-		outline: 2px solid #0d6efd;
-		outline-offset: -2px;
-	}
-</style>
 

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

@@ -0,0 +1,294 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { log } from '../../core/logger';
+	import type { TreeGroupingConfig, TreeGroupField, ColorDimension } from './index';
+
+	interface Props {
+		/** Current tree grouping configuration */
+		treeGrouping: TreeGroupingConfig;
+		/** Current color dimension */
+		colorDimension: ColorDimension;
+		/** Single root select mode */
+		singleRootSelect: boolean;
+		/** Single level 1 select mode */
+		singleLevel1Select: boolean;
+		/** Tree store for enforcing single root selection */
+		treeStore?: any;
+		/** Show grouping selector controls */
+		showGroupingSelector?: boolean;
+		/** Optional search callback */
+		onSearch?: (searchTerm: string) => void;
+		/** Search placeholder text */
+		searchPlaceholder?: string;
+		/** Callback when grouping changes */
+		onGroupingChange?: (grouping: TreeGroupingConfig) => void;
+		/** Callback when color dimension changes */
+		onColorDimensionChange?: (dimension: ColorDimension) => void;
+		/** Callback when single root select changes */
+		onSingleRootSelectChange?: (enabled: boolean) => void;
+		/** Callback when single level 1 select changes */
+		onSingleLevel1SelectChange?: (enabled: boolean) => void;
+	}
+
+	let {
+		treeGrouping,
+		colorDimension,
+		singleRootSelect,
+		singleLevel1Select,
+		treeStore,
+		showGroupingSelector = true,
+		onSearch,
+		searchPlaceholder = 'Search...',
+		onGroupingChange,
+		onColorDimensionChange,
+		onSingleRootSelectChange,
+		onSingleLevel1SelectChange
+	}: Props = $props();
+
+	// Local state
+	let searchTerm = $state('');
+	let controlsExpanded = $state(true);
+
+	// 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: 'cellName', label: 'Cell Name' }
+	];
+
+	// Get available options for level1 (exclude level0)
+	let availableLevel1Options = $derived.by(() => {
+		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
+	});
+
+	// Handlers
+	function handleSearch() {
+		if (onSearch) {
+			onSearch(searchTerm);
+			log('🔍 Search triggered:', searchTerm);
+		}
+	}
+
+	function handleClearSearch() {
+		searchTerm = '';
+		if (onSearch) {
+			onSearch('');
+			log('🧹 Search cleared');
+		}
+	}
+
+	function handleLevel0Change(value: TreeGroupField) {
+		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
+		const newGrouping = {
+			level0: value,
+			level1: newLevel1
+		};
+		onGroupingChange?.(newGrouping);
+	}
+
+	function handleLevel1Change(value: TreeGroupField | 'none') {
+		const newLevel1 = value === 'none' ? null : value;
+		const newGrouping = {
+			level0: treeGrouping.level0,
+			level1: newLevel1
+		};
+		onGroupingChange?.(newGrouping);
+	}
+
+	function handleColorDimensionChange(dimension: ColorDimension) {
+		onColorDimensionChange?.(dimension);
+		log('🎨 Color dimension changed:', dimension);
+	}
+
+	function handleSingleRootSelectChange(enabled: boolean) {
+		onSingleRootSelectChange?.(enabled);
+		log('🔘 Single root select mode:', enabled);
+
+		// When enabling single root mode, uncheck all roots except the first one
+		if (enabled && treeStore) {
+			const store = treeStore;
+			if (store) {
+				const checkedRoots = store.state.rootPaths.filter((path: string) =>
+					store.state.checkedPaths.has(path)
+				);
+				if (checkedRoots.length > 1) {
+					log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
+					for (let i = 1; i < checkedRoots.length; i++) {
+						store.toggle(checkedRoots[i]);
+					}
+				}
+			}
+		}
+	}
+
+	function handleSingleLevel1SelectChange(enabled: boolean) {
+		onSingleLevel1SelectChange?.(enabled);
+		log('🔘 Single Level 1 select mode:', enabled);
+	}
+</script>
+
+{#if onSearch || showGroupingSelector}
+	<!-- Collapsible Controls Toggle -->
+	<button
+		class="controls-toggle w-100 text-start p-2 bg-light border-bottom d-flex align-items-center flex-shrink-0"
+		onclick={() => (controlsExpanded = !controlsExpanded)}
+		aria-expanded={controlsExpanded}
+		aria-label="Toggle controls"
+	>
+		<i class="bi bi-sliders me-2"></i>
+		<span class="fw-semibold small">Controls</span>
+		<i
+			class="bi ms-auto"
+			class:bi-chevron-down={controlsExpanded}
+			class:bi-chevron-right={!controlsExpanded}
+		></i>
+	</button>
+
+	<!-- Collapsible Controls Content -->
+	{#if controlsExpanded}
+		<!-- Search Box -->
+		{#if onSearch}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<label for="searchInput" class="form-label small fw-semibold mb-2"> Search </label>
+				<div class="input-group input-group-sm">
+					<input
+						type="text"
+						id="searchInput"
+						class="form-control"
+						placeholder={searchPlaceholder}
+						bind:value={searchTerm}
+						onkeydown={(e) => {
+							if (e.key === 'Enter') {
+								handleSearch();
+							}
+						}}
+					/>
+					{#if searchTerm}
+						<button
+							class="btn btn-outline-secondary"
+							type="button"
+							onclick={handleClearSearch}
+							title="Clear search"
+							aria-label="Clear search"
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					{/if}
+					<button
+						class="btn btn-primary"
+						type="button"
+						onclick={handleSearch}
+						title="Search"
+						aria-label="Search"
+					>
+						<i class="bi bi-search"></i>
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Grouping Selector -->
+		{#if showGroupingSelector}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<div class="small fw-semibold mb-2">Tree Grouping</div>
+
+				<div class="row g-2 mb-2">
+					<!-- Level 0 (Mandatory) -->
+					<div class="col-4">
+						<label for="level0Select" class="form-label small mb-1">Level 0</label>
+						<select
+							id="level0Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level0}
+							onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
+						>
+							{#each fieldOptions as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Level 1 (Optional) -->
+					<div class="col-4">
+						<label for="level1Select" class="form-label small mb-1">Level 1</label>
+						<select
+							id="level1Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level1 ?? 'none'}
+							onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
+						>
+							<option value="none">None</option>
+							{#each availableLevel1Options as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Color By -->
+					<div class="col-4">
+						<label for="colorDimensionSelect" class="form-label small mb-1">Color By</label>
+						<select
+							id="colorDimensionSelect"
+							class="form-select form-select-sm"
+							value={colorDimension}
+							onchange={(e) => handleColorDimensionChange(e.currentTarget.value as ColorDimension)}
+						>
+							<option value="band">Band</option>
+							<option value="site">Site</option>
+							<option value="sector">Sector</option>
+							<option value="cellName">Cell Name</option>
+						</select>
+					</div>
+				</div>
+
+				<!-- Single Root Select Toggle -->
+				<div class="form-check mt-2">
+					<input
+						class="form-check-input"
+						type="checkbox"
+						id="singleRootSelectCheck"
+						checked={singleRootSelect}
+						onchange={(e) => handleSingleRootSelectChange(e.currentTarget.checked)}
+					/>
+					<label class="form-check-label small" for="singleRootSelectCheck">
+						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) => handleSingleLevel1SelectChange(e.currentTarget.checked)}
+					/>
+					<label class="form-check-label small" for="singleLevel1SelectCheck">
+						Single selection on level 1
+					</label>
+				</div>
+			</div>
+		{/if}
+	{/if}
+{/if}
+
+<style>
+	.controls-toggle {
+		cursor: pointer;
+		border: none;
+		transition: background-color 0.2s;
+	}
+
+	.controls-toggle:hover {
+		background-color: #e9ecef !important;
+	}
+
+	.controls-toggle:focus {
+		outline: 2px solid #0d6efd;
+		outline-offset: -2px;
+	}
+</style>

package/dist/apps/site-check/SiteCheckControls.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { TreeGroupingConfig, ColorDimension } from './index';
+interface Props {
+    /** Current tree grouping configuration */
+    treeGrouping: TreeGroupingConfig;
+    /** Current color dimension */
+    colorDimension: ColorDimension;
+    /** Single root select mode */
+    singleRootSelect: boolean;
+    /** Single level 1 select mode */
+    singleLevel1Select: boolean;
+    /** Tree store for enforcing single root selection */
+    treeStore?: any;
+    /** Show grouping selector controls */
+    showGroupingSelector?: boolean;
+    /** Optional search callback */
+    onSearch?: (searchTerm: string) => void;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Callback when grouping changes */
+    onGroupingChange?: (grouping: TreeGroupingConfig) => void;
+    /** Callback when color dimension changes */
+    onColorDimensionChange?: (dimension: ColorDimension) => void;
+    /** Callback when single root select changes */
+    onSingleRootSelectChange?: (enabled: boolean) => void;
+    /** Callback when single level 1 select changes */
+    onSingleLevel1SelectChange?: (enabled: boolean) => void;
+}
+declare const SiteCheckControls: import("svelte").Component<Props, {}, "">;
+type SiteCheckControls = ReturnType<typeof SiteCheckControls>;
+export default SiteCheckControls;