@smartnet360/svelte-components 0.0.44 → 0.0.46

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
@@ -110,13 +133,14 @@
 
 	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
+		// Pass cellStyling - helper will decide per-section whether to use it
 		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, cellStyling);
 		log('📐 Chart Layout:', {
 			layoutName: selectedBaseLayout.layoutName,
+			layoutDefaultColors: selectedBaseLayout.useDefaultChartColors ?? false,
 			sectionsCount: expanded.sections.length,
 			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
-			firstSection: expanded.sections[0],
-			cellStylingEnabled: !!cellStyling
+			firstSection: expanded.sections[0]
 		});
 		return expanded;
 	});
@@ -191,30 +215,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 +331,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/apps/site-check/helper.js

@@ -24,14 +24,23 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig) {
         hoverMode: baseLayout.hoverMode, // Preserve hover mode from base layout
         coloredHover: baseLayout.coloredHover, // Preserve colored hover setting
         movingAverage: baseLayout.movingAverage, // Preserve moving average config
-        sections: baseLayout.sections.map((section) => ({
-            ...section,
-            charts: section.charts.map((chart) => ({
-                ...chart,
-                yLeft: expandKPIs(chart.yLeft, cells, stylingConfig),
-                yRight: expandKPIs(chart.yRight, cells, stylingConfig)
-            }))
-        }))
+        useDefaultChartColors: baseLayout.useDefaultChartColors, // Preserve layout-level default
+        sections: baseLayout.sections.map((section) => {
+            // Check per-section flag with fallback to layout-level, defaulting to false
+            const useDefaults = section.useDefaultChartColors ??
+                baseLayout.useDefaultChartColors ??
+                false;
+            // Decide styling for THIS section
+            const effectiveStyling = useDefaults ? undefined : stylingConfig;
+            return {
+                ...section,
+                charts: section.charts.map((chart) => ({
+                    ...chart,
+                    yLeft: expandKPIs(chart.yLeft, cells, effectiveStyling),
+                    yRight: expandKPIs(chart.yRight, cells, effectiveStyling)
+                }))
+            };
+        })
     };
     return expandedLayout;
 }

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>

package/dist/core/Charts/GlobalControls.svelte

@@ -1,7 +1,7 @@
 <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;
@@ -48,6 +48,16 @@
 			}
 		});
 	}
+
+	function updateHoverMode(updates: Partial<NonNullable<GlobalChartControls['hoverMode']>>) {
+		onUpdate({
+			...controls,
+			hoverMode: {
+				...controls.hoverMode!,
+				...updates
+			}
+		});
+	}
 </script>
 
 <!-- Floating Controls Container -->
@@ -92,7 +102,7 @@
 								checked={controls.markers.enabled}
 								onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
 							/>
-							<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
+							<label class="btn btn-outline-primary btn-sm" for="markersToggle">
 								Markers
 							</label>
 						</div>
@@ -108,13 +118,81 @@
 								checked={controls.legend.enabled}
 								onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
 							/>
-							<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
+							<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="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="hoverModeY">Y-Axis</label> -->
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="hoverMode"
+								id="hoverModeClosest"
+								checked={controls.hoverMode.mode === 'closest'}
+								onchange={() => updateHoverMode({ mode: 'closest' })}
+							/>
+							<label class="btn btn-outline-primary" for="hoverModeClosest">Closest</label>
+
+							<input
+								type="radio"
+								class="btn-check"
+								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="hoverModeYUnified">Y-Unified</label> -->
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="hoverMode"
+								id="hoverModeFalse"
+								checked={controls.hoverMode.mode === false}
+								onchange={() => updateHoverMode({ mode: false })}
+							/>
+							<label class="btn btn-outline-primary" for="hoverModeFalse">Off</label>
+						</div>
+					</div>
+				{/if}
+
 				<!-- Bottom: Moving Average Controls -->
 				{#if controls.movingAverage}
 					<div class="control-group">
@@ -209,8 +287,8 @@
 	/* Floating Controls Wrapper - positioned in top-right */
 	.floating-controls-wrapper {
 		position: fixed;
-		top: 0.5rem;
-		right: 0.5rem;
+		top: 0.3rem;
+		right: 0.3rem;
 		z-index: 1000;
 		display: flex;
 		flex-direction: column;
@@ -330,6 +408,13 @@
 		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;
@@ -363,26 +448,19 @@
 		border-color: #0d6efd;
 	}
 
-	.floating-controls-panel :global(.btn-outline-secondary) {
-		border-color: rgba(108, 117, 125, 0.3);
-	}
-
-	.floating-controls-panel :global(.btn-outline-secondary:hover) {
-		background-color: rgba(108, 117, 125, 0.1);
-		border-color: rgba(108, 117, 125, 0.5);
-	}
-
-	.floating-controls-panel :global(.btn-check:checked + .btn-outline-secondary) {
-		background-color: #6c757d;
-		border-color: #6c757d;
-	}
-
 	.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) {
 		.floating-controls-wrapper {

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

@@ -33,6 +33,7 @@ export interface Section {
     charts: Chart[];
     grid?: ChartGrid;
     movingAverage?: MovingAverageConfig;
+    useDefaultChartColors?: boolean;
 }
 export type Mode = "tabs" | "scrollspy";
 export type HoverMode = 'x' | 'y' | 'closest' | 'x unified' | 'y unified' | false;
@@ -42,6 +43,7 @@ export interface Layout {
     movingAverage?: MovingAverageConfig;
     hoverMode?: HoverMode;
     coloredHover?: boolean;
+    useDefaultChartColors?: boolean;
 }
 export interface ChartMarker {
     date: string | Date;
@@ -63,6 +65,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.44",
+	"version": "0.0.46",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",