@smartnet360/svelte-components 0.0.43 → 0.0.45

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

@@ -20,9 +20,33 @@
 		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
 		initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
 		showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
+		onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
+		searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
 	}
 
-	let { rawData, multiCellLayout, singleLteLayout, singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, showGroupingSelector = true }: Props = $props();
+	let { rawData, multiCellLayout, singleLteLayout, singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, showGroupingSelector = true, onSearch, searchPlaceholder = "Search..." }: 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'));
@@ -63,8 +87,7 @@
 			firstNode: treeNodes[0],
 			grouping: treeGrouping
 		});
-		if(isHealthy === false) {
-			console.log('Configuration Required');
+		if(!isHealthy) {
 			return;
 		}
 		// Create tree store
@@ -191,30 +214,90 @@
 	<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%;">
-			<!-- Grouping Selector -->
-			{#if showGroupingSelector}
-				<div class="p-3 border-bottom flex-shrink-0">
-					<label for="groupingSelect" class="form-label small fw-semibold mb-2">
-						Tree Grouping
-					</label>
-					<select 
-						id="groupingSelect"
-						class="form-select form-select-sm"
-						onchange={(e) => {
-							const index = parseInt(e.currentTarget.value);
-							treeGrouping = groupingPresets[index].value;
-						}}
-					>
-						{#each groupingPresets as preset, i}
-							<option value={i} selected={JSON.stringify(preset.value) === JSON.stringify(treeGrouping)}>
-								{preset.label}
-							</option>
-						{/each}
-					</select>
-					<!-- <div class="text-muted small mt-1">
-						{treeGrouping.level0}{treeGrouping.level1 ? ` → ${treeGrouping.level1}` : ''} → {treeGrouping.level2}
-					</div> -->
-				</div>
+			<!-- 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}
+
+				<!-- Grouping Selector -->
+				{#if showGroupingSelector}
+					<div class="p-3 border-bottom flex-shrink-0">
+						<label for="groupingSelect" class="form-label small fw-semibold mb-2">
+							Tree Grouping
+						</label>
+						<select 
+							id="groupingSelect"
+							class="form-select form-select-sm"
+							onchange={(e) => {
+								const index = parseInt(e.currentTarget.value);
+								treeGrouping = groupingPresets[index].value;
+							}}
+						>
+							{#each groupingPresets as preset, i}
+								<option value={i} selected={JSON.stringify(preset.value) === JSON.stringify(treeGrouping)}>
+									{preset.label}
+								</option>
+							{/each}
+						</select>
+					</div>
+				{/if}
 			{/if}
 
 			<!-- Tree View -->
@@ -247,3 +330,20 @@
 	</div>
 </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/SiteCheck.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props {
     cellStyling?: CellStylingConfig;
     initialGrouping?: TreeGroupingConfig;
     showGroupingSelector?: boolean;
+    onSearch?: (searchTerm: string) => void;
+    searchPlaceholder?: string;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/core/Charts/ChartCard.svelte

@@ -24,6 +24,7 @@
 		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
 		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
+		runtimeHoverMode?: HoverMode; // Runtime override for hover mode from global controls
 		onchartcontextmenu?: (detail: {
 			chart: ChartModel;
 			sectionId?: string;
@@ -32,7 +33,7 @@
 		}) => void;
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true, onchartcontextmenu }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true, runtimeHoverMode, onchartcontextmenu }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -174,8 +175,11 @@
 			colorIndex++;
 		});
 
+		// Determine effective hover mode: runtime override takes precedence over layout config
+		const effectiveHoverMode = runtimeHoverMode !== undefined ? runtimeHoverMode : layoutHoverMode;
+
 		// Create default modern layout using the centralized function
-		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, layoutHoverMode, layoutColoredHover);
+		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, effectiveHoverMode, layoutColoredHover);
 		
 		// Override specific properties for this chart
 		defaultLayout.yaxis.title = {
@@ -235,7 +239,11 @@
 		// Use Plotly.react() for updates (preserves zoom/pan) or newPlot for initial render
 		if (chartInitialized) {
 			// Update existing chart - much faster, preserves user interactions
-			log('🔄 Updating chart with Plotly.react', { chartTitle: chart.title });
+			log('🔄 Updating chart with Plotly.react', { 
+				chartTitle: chart.title,
+				hoverMode: effectiveHoverMode,
+				layoutHoverMode: finalLayout.hovermode
+			});
 			Plotly.react(chartDiv, traces, finalLayout, config);
 		} else {
 			// Initial chart creation
@@ -243,7 +251,9 @@
 				chartTitle: chart.title,
 				traces: traces.length,
 				leftKPIs: chart.yLeft.length,
-				rightKPIs: chart.yRight.length
+				rightKPIs: chart.yRight.length,
+				hoverMode: effectiveHoverMode,
+				layoutHoverMode: finalLayout.hovermode
 			});
 			Plotly.newPlot(chartDiv, traces, finalLayout, config);
 			chartInitialized = true;
@@ -340,6 +350,7 @@
 		const currentShowOriginal = runtimeShowOriginal;
 		const currentShowMarkers = runtimeShowMarkers;
 		const currentShowLegend = runtimeShowLegend;
+		const currentHoverMode = runtimeHoverMode;
 		
 		// Only re-render if chartDiv is already initialized
 		if (chartDiv && chartDiv.children.length > 0) {

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     runtimeShowOriginal?: boolean;
     runtimeShowMarkers?: boolean;
     runtimeShowLegend?: boolean;
+    runtimeHoverMode?: HoverMode;
     onchartcontextmenu?: (detail: {
         chart: ChartModel;
         sectionId?: string;

package/dist/core/Charts/ChartComponent.svelte

@@ -85,6 +85,9 @@
 		},
 		legend: {
 			enabled: true // Default to showing legend
+		},
+		hoverMode: {
+			mode: layout.hoverMode ?? 'x' // Default to 'x' if not specified
 		}
 	});
 	
@@ -94,7 +97,8 @@
 			movingAverageEnabled: updatedControls.movingAverage?.enabled,
 			windowOverride: updatedControls.movingAverage?.windowOverride,
 			markersEnabled: updatedControls.markers?.enabled,
-			legendEnabled: updatedControls.legend?.enabled
+			legendEnabled: updatedControls.legend?.enabled,
+			hoverMode: updatedControls.hoverMode?.mode
 		});
 		globalControls = updatedControls;
 	}
@@ -333,6 +337,7 @@
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					runtimeShowMarkers={globalControls.markers?.enabled}
 					runtimeShowLegend={globalControls.legend?.enabled}
+					runtimeHoverMode={globalControls.hoverMode?.mode}
 					onchartcontextmenu={(detail) => handleChartContextMenu(detail, section)}
 				/>
 			</div>
@@ -341,16 +346,21 @@
 {/snippet}
 
 <div class="chart-component" bind:this={componentElement}>
-	<!-- Global Controls Section (appears above tabs/scrollspy) -->
-	{#if showGlobalControls && showControlsPanel}
-		<GlobalControls controls={globalControls} onUpdate={handleControlsUpdate} />
+	<!-- Floating Global Controls (renders as fixed position overlay) -->
+	{#if showGlobalControls}
+		<GlobalControls 
+			controls={globalControls} 
+			onUpdate={handleControlsUpdate}
+			isExpanded={showControlsPanel}
+			onToggle={() => showControlsPanel = !showControlsPanel}
+		/>
 	{/if}
 	
 	<!-- Always render the main content (tabs or scrollspy) -->
 	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
-			<!-- Tab Navigation with Controls Toggle -->
+			<!-- Tab Navigation -->
 			<div class="nav-tabs-wrapper">
 				<ul class="nav nav-tabs" role="tablist">
 					{#each layout.sections as section, index}
@@ -369,21 +379,6 @@
 						</li>
 					{/each}
 				</ul>
-				
-				<!-- Controls Toggle Button -->
-				{#if showGlobalControls}
-					<button
-						class="btn btn-sm btn-outline-secondary controls-toggle"
-						onclick={() => showControlsPanel = !showControlsPanel}
-						title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-						type="button"
-					>
-						<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-						</svg>
-						<span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span>
-					</button>
-				{/if}
 			</div>
 
 			<!-- Tab Content -->
@@ -402,7 +397,7 @@
 	{:else if mode === 'scrollspy'}
 		<!-- ScrollSpy Mode with Navigation -->
 		<div class="scrollspy-container">
-			<!-- ScrollSpy Navigation with Controls Toggle -->
+			<!-- ScrollSpy Navigation -->
 			<nav class="scrollspy-nav">
 				<div class="nav-wrapper">
 					<ul class="nav nav-pills">
@@ -418,21 +413,6 @@
 							</li>
 						{/each}
 					</ul>
-					
-					<!-- Controls Toggle Button -->
-					{#if showGlobalControls}
-						<button
-							class="btn btn-sm btn-outline-secondary controls-toggle"
-							onclick={() => showControlsPanel = !showControlsPanel}
-							title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-							type="button"
-						>
-							<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-								<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-							</svg>
-							<!-- <span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span> -->
-						</button>
-					{/if}
 				</div>
 			</nav>
 
@@ -722,11 +702,10 @@
 		max-height: 100%; /* Constrain to slot */
 	}
 
-	/* Tab navigation wrapper with toggle button */
+	/* Tab navigation wrapper */
 	.nav-tabs-wrapper {
 		display: flex;
 		align-items: center;
-		gap: 1rem;
 		border-bottom: 1px solid #dee2e6;
 	}
 
@@ -736,25 +715,7 @@
 		margin-bottom: 0;
 	}
 
-	.controls-toggle {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		white-space: nowrap;
-		border-radius: 0.25rem;
-		transition: all 0.2s ease;
-	}
-
-	.controls-toggle:hover {
-		background-color: #f8f9fa;
-		border-color: #6c757d;
-	}
-
-	.controls-toggle svg {
-		flex-shrink: 0;
-	}
-
-	/* ScrollSpy navigation wrapper with toggle button */
+	/* ScrollSpy navigation wrapper */
 	.scrollspy-nav .nav-wrapper {
 		display: flex;
 		align-items: center;

package/dist/core/Charts/GlobalControls.svelte

@@ -1,14 +1,16 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { GlobalChartControls } from './charts.model.js';
+	import type { GlobalChartControls, HoverMode } from './charts.model.js';
 
 	interface Props {
 		controls: GlobalChartControls;
 		onUpdate: (controls: GlobalChartControls) => void;
+		isExpanded?: boolean;
+		onToggle?: () => void;
 	}
 
-	let { controls, onUpdate }: Props = $props();
+	let { controls, onUpdate, isExpanded = false, onToggle }: Props = $props();
 
 	function updateControls(updates: Partial<GlobalChartControls>) {
 		onUpdate({
@@ -46,180 +48,457 @@
 			}
 		});
 	}
+
+	function updateHoverMode(updates: Partial<NonNullable<GlobalChartControls['hoverMode']>>) {
+		onUpdate({
+			...controls,
+			hoverMode: {
+				...controls.hoverMode!,
+				...updates
+			}
+		});
+	}
 </script>
 
-<div class="global-controls">
-	<div class="controls-section">
-		<!-- <span class="controls-label">Display Controls:</span> -->
-		
-		<!-- Moving Average Controls -->
-		{#if controls.movingAverage}
-			<div class="control-group">
-				<!-- MA Enable Toggle Button -->
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="maToggle"
-					checked={controls.movingAverage.enabled}
-					onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
-				/>
-				<label class="btn btn-outline-primary btn-sm" for="maToggle">
-					Moving Average
-				</label>
-				
-				{#if controls.movingAverage.enabled}
-					<div class="control-subgroup">
-						<!-- MA Window Size -->
-						<div class="btn-group btn-group-sm" role="group" aria-label="MA Window">
+<!-- Floating Controls Container -->
+<div class="floating-controls-wrapper">
+	<!-- Toggle Button (always visible) -->
+	<button
+		class="floating-toggle-btn"
+		onclick={onToggle}
+		title={isExpanded ? "Hide Controls" : "Show Controls"}
+		type="button"
+		aria-expanded={isExpanded}
+		aria-label="Toggle chart controls"
+	>
+		<svg width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+			<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+		</svg>
+		<svg 
+			class="chevron" 
+			class:expanded={isExpanded}
+			width="12" 
+			height="12" 
+			fill="currentColor" 
+			viewBox="0 0 16 16"
+		>
+			<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+		</svg>
+	</button>
+
+	<!-- Controls Panel (expandable) -->
+	{#if isExpanded}
+		<div class="floating-controls-panel">
+			<div class="controls-section">
+				<!-- Top Row: Markers and Legend side by side -->
+				<div class="controls-row">
+					<!-- Markers Toggle -->
+					{#if controls.markers}
+						<div class="control-group-inline">
 							<input
-								type="radio"
+								type="checkbox"
+								class="btn-check"
+								id="markersToggle"
+								checked={controls.markers.enabled}
+								onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
+							/>
+							<label class="btn btn-outline-primary btn-sm" for="markersToggle">
+								Markers
+							</label>
+						</div>
+					{/if}
+
+					<!-- Legend Toggle -->
+					{#if controls.legend}
+						<div class="control-group-inline">
+							<input
+								type="checkbox"
 								class="btn-check"
-								name="maWindow"
-								id="maWindowAuto"
-								checked={controls.movingAverage.windowOverride === undefined}
-								onchange={() => updateMovingAverage({ windowOverride: undefined })}
+								id="legendToggle"
+								checked={controls.legend.enabled}
+								onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+							<label class="btn btn-outline-primary btn-sm" for="legendToggle">
+								Legend
+							</label>
+						</div>
+					{/if}
+				</div>
 
+				<!-- Hover Mode Controls -->
+				{#if controls.hoverMode}
+					<div class="control-group">
+						<div class="control-label">Hover Mode</div>
+						<div class="btn-group btn-group-sm" role="group" aria-label="Hover Mode">
 							<input
 								type="radio"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow7"
-								checked={controls.movingAverage.windowOverride === 7}
-								onchange={() => updateMovingAverage({ windowOverride: 7 })}
+								name="hoverMode"
+								id="hoverModeX"
+								checked={controls.hoverMode.mode === 'x'}
+								onchange={() => updateHoverMode({ mode: 'x' })}
+							/>
+							<label class="btn btn-outline-primary" for="hoverModeX">X-Axis</label>
+
+							<!-- <input
+								type="radio"
+								class="btn-check"
+								name="hoverMode"
+								id="hoverModeY"
+								checked={controls.hoverMode.mode === 'y'}
+								onchange={() => updateHoverMode({ mode: 'y' })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow7">7</label>
+							<label class="btn btn-outline-primary" for="hoverModeY">Y-Axis</label> -->
 
 							<input
 								type="radio"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow14"
-								checked={controls.movingAverage.windowOverride === 14}
-								onchange={() => updateMovingAverage({ windowOverride: 14 })}
+								name="hoverMode"
+								id="hoverModeClosest"
+								checked={controls.hoverMode.mode === 'closest'}
+								onchange={() => updateHoverMode({ mode: 'closest' })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow14">14</label>
+							<label class="btn btn-outline-primary" for="hoverModeClosest">Closest</label>
 
 							<input
 								type="radio"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow24"
-								checked={controls.movingAverage.windowOverride === 24}
-								onchange={() => updateMovingAverage({ windowOverride: 24 })}
+								name="hoverMode"
+								id="hoverModeXUnified"
+								checked={controls.hoverMode.mode === 'x unified'}
+								onchange={() => updateHoverMode({ mode: 'x unified' })}
+							/>
+							<label class="btn btn-outline-primary" for="hoverModeXUnified">X-Unified</label>
+
+							<!-- <input
+								type="radio"
+								class="btn-check"
+								name="hoverMode"
+								id="hoverModeYUnified"
+								checked={controls.hoverMode.mode === 'y unified'}
+								onchange={() => updateHoverMode({ mode: 'y unified' })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow24">24</label>
+							<label class="btn btn-outline-primary" for="hoverModeYUnified">Y-Unified</label> -->
 
 							<input
 								type="radio"
 								class="btn-check"
-								name="maWindow"
-								id="maWindow30"
-								checked={controls.movingAverage.windowOverride === 30}
-								onchange={() => updateMovingAverage({ windowOverride: 30 })}
+								name="hoverMode"
+								id="hoverModeFalse"
+								checked={controls.hoverMode.mode === false}
+								onchange={() => updateHoverMode({ mode: false })}
 							/>
-							<label class="btn btn-outline-primary" for="maWindow30">30</label>
+							<label class="btn btn-outline-primary" for="hoverModeFalse">Off</label>
 						</div>
+					</div>
+				{/if}
 
-						<!-- Show Original Toggle Button -->
+				<!-- Bottom: Moving Average Controls -->
+				{#if controls.movingAverage}
+					<div class="control-group">
+						<!-- MA Enable Toggle Button -->
 						<input
 							type="checkbox"
 							class="btn-check"
-							id="showOriginal"
-							checked={controls.movingAverage.showOriginal}
-							onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
+							id="maToggle"
+							checked={controls.movingAverage.enabled}
+							onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
 						/>
-						<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
-							Show Original
+						<label class="btn btn-outline-primary btn-sm" for="maToggle">
+							Moving Average
 						</label>
+						
+						{#if controls.movingAverage.enabled}
+							<div class="control-subgroup">
+								<!-- MA Window Size -->
+								<div class="btn-group btn-group-sm" role="group" aria-label="MA Window">
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindowAuto"
+										checked={controls.movingAverage.windowOverride === undefined}
+										onchange={() => updateMovingAverage({ windowOverride: undefined })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow7"
+										checked={controls.movingAverage.windowOverride === 7}
+										onchange={() => updateMovingAverage({ windowOverride: 7 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow7">7</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow14"
+										checked={controls.movingAverage.windowOverride === 14}
+										onchange={() => updateMovingAverage({ windowOverride: 14 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow14">14</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow24"
+										checked={controls.movingAverage.windowOverride === 24}
+										onchange={() => updateMovingAverage({ windowOverride: 24 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow24">24</label>
+
+									<input
+										type="radio"
+										class="btn-check"
+										name="maWindow"
+										id="maWindow30"
+										checked={controls.movingAverage.windowOverride === 30}
+										onchange={() => updateMovingAverage({ windowOverride: 30 })}
+									/>
+									<label class="btn btn-outline-primary" for="maWindow30">30</label>
+								</div>
+
+								<!-- Show Original Toggle Button -->
+								<input
+									type="checkbox"
+									class="btn-check"
+									id="showOriginal"
+									checked={controls.movingAverage.showOriginal}
+									onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
+								/>
+								<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
+									Show Original
+								</label>
+							</div>
+						{/if}
 					</div>
 				{/if}
 			</div>
-		{/if}
-
-		<!-- Markers Toggle -->
-		{#if controls.markers}
-			<div class="control-group">
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="markersToggle"
-					checked={controls.markers.enabled}
-					onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
-				/>
-				<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
-					Markers
-				</label>
-			</div>
-		{/if}
-
-		<!-- Legend Toggle -->
-		{#if controls.legend}
-			<div class="control-group">
-				<input
-					type="checkbox"
-					class="btn-check"
-					id="legendToggle"
-					checked={controls.legend.enabled}
-					onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
-				/>
-				<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
-					Legend
-				</label>
-			</div>
-		{/if}
-		
-	</div>
+		</div>
+	{/if}
 </div>
 
 <style>
-	/* Global Controls Section */
-	.global-controls {
-		flex-shrink: 0;
-		background-color: #f8f9fa;
-		border-bottom: 1px solid #dee2e6;
-		padding: 0.5rem 1rem;
+	/* Floating Controls Wrapper - positioned in top-right */
+	.floating-controls-wrapper {
+		position: fixed;
+		top: 0.3rem;
+		right: 0.3rem;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 0.5rem;
+	}
+
+	/* Toggle Button - Always visible */
+	.floating-toggle-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		border-radius: 8px;
+		box-shadow: 
+			0 2px 8px rgba(0, 0, 0, 0.08),
+			0 4px 16px rgba(0, 0, 0, 0.04);
+		cursor: pointer;
+		transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 		font-size: 0.875rem;
+		font-weight: 500;
+		color: #495057;
+		opacity: 0.5;
+	}
+
+	.floating-toggle-btn:hover {
+		background: rgba(255, 255, 255, 1);
+		border-color: rgba(0, 0, 0, 0.12);
+		box-shadow: 
+			0 4px 12px rgba(0, 0, 0, 0.12),
+			0 8px 24px rgba(0, 0, 0, 0.08);
+		transform: translateY(-1px);
+		opacity: 1;
+	}
+
+	.floating-toggle-btn:active {
+		transform: translateY(0);
+		box-shadow: 
+			0 1px 4px rgba(0, 0, 0, 0.08),
+			0 2px 8px rgba(0, 0, 0, 0.04);
+	}
+
+	.floating-toggle-btn .chevron {
+		transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+		opacity: 0.6;
+	}
+
+	.floating-toggle-btn .chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Floating Controls Panel - Glass-morphism style */
+	.floating-controls-panel {
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		border-radius: 12px;
+		box-shadow: 
+			0 4px 16px rgba(0, 0, 0, 0.1),
+			0 8px 32px rgba(0, 0, 0, 0.08);
+		padding: 1rem;
+		min-width: 320px;
+		max-width: 480px;
+		opacity: 1;
+		animation: slideIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.floating-controls-panel:hover {
+		opacity: 1;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 
 	.controls-section {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	/* Horizontal row for Markers and Legend at top */
+	.controls-row {
 		display: flex;
 		align-items: center;
-		gap: 1.5rem;
-		flex-wrap: wrap;
+		gap: 0.75rem;
+		padding-bottom: 0.75rem;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
-	.control-group {
+	/* Inline control group for horizontal layout */
+	.control-group-inline {
 		display: flex;
 		align-items: center;
+	}
+
+	/* Vertical control group for Moving Average */
+	.control-group {
+		display: flex;
+		flex-direction: column;
 		gap: 0.75rem;
 	}
 
+	.control-group > label:first-of-type {
+		font-weight: 500;
+	}
+
+	.control-label {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: #495057;
+		margin-bottom: 0.25rem;
+	}
+
 	.control-subgroup {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 2px solid #dee2e6;
+		padding-left: 0.75rem;
+		padding-top: 0.5rem;
+		border-left: 2px solid rgba(0, 0, 0, 0.08);
 	}
 
-	.global-controls :global(.btn-group-sm .btn) {
-		padding: 0.25rem 0.75rem;
-		font-size: 0.75rem;
+	/* Bootstrap button overrides for better integration */
+	.floating-controls-panel :global(.btn-sm) {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
+		border-radius: 6px;
+		transition: all 150ms ease;
+	}
+
+	.floating-controls-panel :global(.btn-outline-primary) {
+		border-color: rgba(13, 110, 253, 0.3);
+	}
+
+	.floating-controls-panel :global(.btn-outline-primary:hover) {
+		background-color: rgba(13, 110, 253, 0.1);
+		border-color: rgba(13, 110, 253, 0.5);
+	}
+
+	.floating-controls-panel :global(.btn-check:checked + .btn-outline-primary) {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+	}
+
+	.floating-controls-panel :global(.btn-group) {
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+		border-radius: 6px;
+		overflow: hidden;
+	}
+
+	.floating-controls-panel :global(.form-label) {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: #495057;
+		margin-bottom: 0.5rem;
 	}
 
 	/* Responsive adjustments */
 	@media (max-width: 768px) {
-		.controls-section {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.75rem;
+		.floating-controls-wrapper {
+			top: 0.5rem;
+			right: 0.5rem;
+		}
+
+		.floating-controls-panel {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+			padding: 0.875rem;
 		}
-		
+
+		.control-subgroup {
+			padding-left: 0.5rem;
+		}
+	}
+
+	/* Dark mode support (optional - activate if needed) */
+	@media (prefers-color-scheme: dark) {
+		.floating-toggle-btn {
+			background: rgba(33, 37, 41, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+			color: #f8f9fa;
+		}
+
+		.floating-toggle-btn:hover {
+			background: rgba(33, 37, 41, 1);
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+
+		.floating-controls-panel {
+			background: rgba(33, 37, 41, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+
 		.control-subgroup {
-			flex-wrap: wrap;
+			border-left-color: rgba(255, 255, 255, 0.1);
 		}
 	}
 </style>

package/dist/core/Charts/GlobalControls.svelte.d.ts

@@ -2,6 +2,8 @@ import type { GlobalChartControls } from './charts.model.js';
 interface Props {
     controls: GlobalChartControls;
     onUpdate: (controls: GlobalChartControls) => void;
+    isExpanded?: boolean;
+    onToggle?: () => void;
 }
 declare const GlobalControls: import("svelte").Component<Props, {}, "">;
 type GlobalControls = ReturnType<typeof GlobalControls>;

package/dist/core/Charts/charts.model.d.ts

@@ -63,6 +63,9 @@ export interface GlobalChartControls {
     legend?: {
         enabled: boolean;
     };
+    hoverMode?: {
+        mode: HoverMode;
+    };
 }
 export interface CellStylingConfig {
     bandColors: Record<string, string>;

package/package.json

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